ai设计网页logo教程

版权声明:本文原创造者“飞屋设计”,感动“飞屋设计”的原创体味瓜分!前言

ai设计网页logo教程

在做网页设计时,不免会遇到将logo一并设计的功夫。由于客户常常很少拿从来的印刷版的logo再加入运用了,保守的设计也不符合新的网页风格。所以,这也给ui设计师们一项新的挑拨:还好吗给网站设计新logo?

ai设计网页logo教程

这个logo设计来自于最普遍的好多正圆,因为英文字母的狡猾形状,经过少许化装,就能用圆形来创造出特出的文字标识效果。

ai设计网页logo教程

先来看看效果图:

ai设计网页logo教程

zxsjw编注:更多ai教程计划及ai大作提交请到自学设计网ai实例教程栏目:http://www.zxsjw.com/type/28-0.html

ai设计网页logo教程

一、绘制草图

ai设计网页logo教程

普遍而言,logo设计前,除了先要将其要传播出的消息领会精确外,还要在底稿纸上,重复考查百般情势。我将这个进程称之为"找发觉"。咱们没有方法捏造就能设计出最优的版本,那么前口试错的进程尤为要害。

ai设计网页logo教程

二、绘制线性图

ai设计网页logo教程

草图本来不过一个前期的观念化的进程,细节则放到本质制作进程中去展示。在此,我简略了草图绘制的进程。

ai设计网页logo教程

翻开ai软件,新建一个文书档案,800px*600px。因为是矢量图形,所以大小不妨大肆。

ai设计网页logo教程

运用椭圆工具,画出一个80px*80px的正圆。这边点选椭圆工具后,在画笔上双击两下就能弹出椭圆工具对话框,高度和宽度树立为相映的数字,点击决定即可。而后将这个圆,按住alt键,复制7份,陈设成下图的形状。

ai设计网页logo教程

应用铰剪工具,先剪掉圆的限制曲边。铰剪工具的用法格外大略,选中相映的路径,点选要剪掉的曲边限制的两头,而后再选中这个曲边,简略。

ai设计网页logo教程

运用钢笔工具,在已有的圆形路径上对个中少许限制增添少许路径,让圆形更目标于字母的形状。

ai设计网页logo教程

选中一切的路径,而后将描边夸大到20pt。

三、配色

这也是我在之前就没有进行编组的因为,所以此时我要对这个logo进行上色。很多人城市在制作前就仍旧有了配色计划。

发端上色的功夫,会将现有的曲边再分拆,这时,仍旧不妨选择铰剪工具,不过不要再简略。其余须要相映调整字母与字母的叠放程序,比拟赶快的办法是按住ctrl+[]来进行叠放。过程上色化装后的效果如下。

四、精修

大概如许的陈设显得不够更加,那么,让咱们试图将这些字母靠紧一点,让它们有种拥堵的发觉。以至有些不妨穿过对方,创造一种交叉的状况。选中相映的字母,而后用键盘的安排键就能遏制其安排移动,这个进程傍边,大概会遇到字母的限制之间的叠放程序也会纷歧致,这没有接洽。遇到叠加限制,我会用铰剪工具修剪掉过剩的限制,你也不妨参考我的做法。

当仍旧决定好位置后,咱们就选中所有图形,加入【东西>扩充】,将咱们的描边变为了弥补。

这时,我想要为上图中的两个字母(黄绿色)改为渐变填色。这时,大师会创造因为这个限制仍旧拆为很多小的限制,叠加的步骤也不尽沟通,即使直接给它们编组,叠放步骤就变得普遍,而叠放步骤的变换就会让咱们的图形爆发变换。但即使不编组,图形要增添一个渐变填色也是特出艰巨的事。

这边,我献上我的处置方法,固然,你的方法大概更精巧。我将所有图形选中后,用ctrl+shift+f9调出路径探求器,点击"分隔",也即是左下的谁人小图标。如许,我就将这个图形尔虞我诈了,在咱们要增添渐变的这个限制里,将叠放毕竟部被掩饰的限制唾弃,将看得见的限制选择之后,再编组,编组后的图形,点选路径探求器中的合并(即下排左边发端第三个小图标)。如许,增添渐变填色就不在话下了。

增添渐变填色,咱们加入到表面面板。面板中减少一个新填色,选择渐变色板。

对图形边际的缺点进行化装,咱们用直接选择工具。这时不妨运用路径探求器将所有图形修边后,再进行合并,图形的轮廓会变得光滑。

再对图形的限制做出点暗影的化装。选中须要增添暗影的限制形状,而后复制一份。加入【效果>模糊>高斯模糊】,模糊参数在此我树立的是3.5,按照图形的大小数值会有所不同。模糊后,将暗影安置于这个形状的下方。

其余一个限制我也如许做,但是因为方才我已将这个图形合并过,以是这边我不妨复制一份后,用一个矩形去裁切这个原有的形状。让它只保持住暗影的限制。暗影做好后,还不妨符合变换下透明度大概形状,稍微旋转等。

结果,效果图实行,放上其余不妨贯穿增添的元素。

跋文

尽管延长图形进行精修,矢量图的光滑的美感就能获得完备展示。这个用好多图形来聚集的图案就把它放进你的灵感库吧。

zxsjw编注:更多ai教程计划及ai大作提交请到自学设计网ai实例教程栏目:http://www.zxsjw.com/type/28-0.html