logo制作教程集合

夏雨

在学习制作之前先全面认识一下LOGO！
一、什么是LOGO
　　翻开字典，我们可以找到这样的解释：“ logo: n.标识语 ”。在电脑领域而言，LOGO是标志、徽标的意思。而本站主要所收集的LOGO，是互联网上各个网站用来与其它网站链接的图形标志。
二、LOGO的作用
　　1.LOGO是与其它网站链接以及让其它网站链接的标志和门户。
　　INTERNET之所以叫做“互联网”，在于各个网站之间可以联接。要让其他人走入你的网站，必须提供一个让其进入的门户。而LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代，这一点尤其重要。
　　2.LOGO是网站形象的重要体现。
　　试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪？就一个网站来说，LOGO即是网站的名片。而对于一个追求精美的网站，LOGO更是它的灵魂所在，即所谓的“点睛”之处。
　　3.LOGO能使受众便于选择。
　　一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种LOGO的链接页面中，这一点会突出的表现出来。想一想，你的受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要。
　　三、LOGO的国际标准规范
　　为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：
　　1.88*31 这是互联网上最普遍的LOGO规格。
　　2.120*60 这种规格用于一般大小的LOGO。
　　3.120*90 这种规格用于大型LOGO。
　　四、LOGO的制作工具和方法
　　好像目前并没有专门制作LOGO的软件，其实也并不需要这样的一种软件。我们平时所使用的图像处理软件或者还加上动画制作软件（如果你要做一个动画的LOGO的话）都可以很好地胜任这份工作，如PHOTOSHOP、FIREWORKS等。而LOGO的制作方法也和制作普通的图片及动画没什么两样，不同的只是规定了它的大小而已。
　　五、一个好的LOGO应具备的条件
　　1.符合国际标准
　　2.精美、独特
　　3.与网站的整体风格相融
　　4.能够体现网站的类型、内容和风格
________________________________________________________________________-
关于LOGO设计的文章
对网站的LOGO设计做了一些归纳，希望得到批评，发现写的太长了，又不忍心删减，就分成两部分了，第一部分是有关设计基础的。第二部分是关于网站L OGO的设计规范的，所有意见是个人的思考，并不针对任何人或网站。欢迎不同见解的探讨。LOGO的应用一直是CIS导入的基础和最直接的表现形式，其重要性是不言而喻的，网络标识的设计尤其如此。
一、标识的职能：
作为独特的传媒符号，标识（LOGO）一直成为传播特殊信息的视觉文化语言。具信，最早的符合CIS精神的标识实例，是2433年前陪葬我国楚地的曾侯乙的一只戟上的" 曾"字型图标。无论从古时繁复的欧式徽标、中式龙文，到现代洗练的抽象纹样、简单字标等都是在实现着标识被标识体的目的，即：
通过对标识的识别、区别、引发联想、增强记忆，促进被标识体与其对象的沟通与交流，从而树立并保持对被标识体的认知、认同，达到高效提高认知度、美誉度的效果。作为时代的前卫，网络LOGO的设计，更应遵循CIS的整体规律并有所突破。
二、网络LOGO设计的基本应用原理：
在网络LOGO设计中极为强调统一的原则。统一并不是反复某一种设计原理，应该是将其他的任何设计原理如：主导性、从属性、相互关系、均衡、比例、反复、反衬、律动、对称、对比、借用、调和、变异等设计人员所熟知的各种原理，正确地应用于设计的完整表现。统一也可解释为，共通以上所述各原理，而更高、更概括、更综合的原理。
构成LOGO要素的各部分，一般都具有一种共通性及差异性，这个差异性又称为独特性，或叫做变化，而统一是将多样性提炼为一个主要表现体，称为多样统一的原理。统一在各部分之中的要素中，有一个大小、材质、位置等具有支配全体的作用的要素，被称为支配。精确把握对象的多样统一并突出支配性要素，是设计网络L OGO必备技术因素。
网络LOGO所强调的辨别性及独特性，导致相关图案字体的设计也要和被标识体的性质有适当的关联，并具备类似风格的造型。
记得最近EASTECHO的网友论坛重新开张之时，就有小魔女对论坛的LOGO表示了异议，一个简单印刷字体的LOGO与浪子固有的独特风格、精益求精的品质有较大背离，并与整个网站L OGO缺乏联系，从而产生认知的歧义。不过作为充斥英文LOGO的浪子网站，做了中文LOGO尝试，算个突破吧。
网络LOGO设计更应注重是一种对事物张力的把握，在浓缩了文化、背景、对象、理念及各种设计原理的基调上，实现对象最冲动的视觉体现。也可以理解为一种最受制约的冲动，在任何方面的张力不足的情况下，精心设计的L OGO常会因为不理解、不认同、不现实、不前卫、不艺术、不朴实等相互矛盾的理由而被用户拒绝或为受众排斥、遗忘。所以恰到好处的理解用户及L OGO的应用对象，是少做无用功的不二法门。不考虑国情和用户的认识水平，对自身设计能力估计不足都是要不得的。在国内给哪个卖计算机的老板设计个$ 300万的朗讯红圈LOGO，很容易被看作是骗钱的。
三、网络LOGO的表现形式：
作为具有传媒特性的LOGO，为了在最有效的空间内实现所有的视觉识别功能，一般是通过特示图案及特示文字的组合，达到对被标识体的出示、说明、沟通、交流从而引导受众的兴趣、达到增强美誉、记忆等目的。表现形式的组合方式一般分为1、特示图案 2、特示字体 3、合成字体
1、特示图案：
属于表象符号，独特、醒目、图案本身易被区分、记忆，通过隐寓、联想、概括、抽象等绘画表现方法表现被标识体，对其理念的表达概括而形象，但与被标识体关联性不够直接，受众容易记忆图案本身，但对被标识体的关系的认知需要相对较曲折的过程，但一旦建立联系，印象较深刻，对被标识体记忆相对持久。所以对持久记忆要求高时应设计良好的特示图案形象，较好的设计如苹果公司的牙印苹果，对图案LOGO的面向推广的各种要素都把握的恰到好处，另外一些情况下，希望在较短期限内建立形象的，还应该设计相应的吉祥物，以类似苹果这样耳熟能详的概念，强化沟通和理解。在现代精神快餐的时代，朗讯的红圈也在成为时尚。不过这类设计在国内还只有设计公司的网站才能接收吧，但有线电视的一个最新的影视综艺节目的L OGO就出现了螺旋型的朗讯红圈，可叹借鉴时大胆有余，创意不足了。
2、特示文字：
属于表意符号。在沟通与传播活动中，反复使用的被标识体的名称或是其产品名，用一种文字形态加以统一。涵义明确、直接，与被标识体的联系密切，易于被理解，认知，对所表达的理念也具有说明的作用，但因为文字本身的相似性易模糊受众对标识本身的记忆，从而对被标识体的长久记忆发生弱化。所以特示文字，一般作为特示图案的补充，要求选择的字体应与整体风格一致，应尽可能做全新的区别性创作。
完整的LOGO设计，尤其是有中国特色的LOGO设计，在国际化的要求下，一般都应考虑至少有中英文双语的形式，要考虑中英文字的比例，搭配、一般要有图案中文、图案英文、图案中英文、及单独的图案、中文、英文的组合形式。有的还要考虑繁体、其他特定语言版本等。另外还要兼顾标识或文字展开后的应用是否美观，这一点对背景等的制作十分必要，有利于追求符号扩张的效果。闪客帝国及其前身的边城浪子LOGO，都有着极好的设计，但都没有考虑中文，不过浪子好象一直对汉字的表现力如极小字体的缺乏、特性字体缺少等颇不以为然，也许导致他怠于思考对中文的设计。这对面向国内网友的网站L OGO，不能不说是一种遗憾吧。
3、合成文字:
是一种表象表意的综合，指文字与图案结合的设计，兼具文字与图案的粜裕??嫉贾孪喙厥粜缘挠跋炝ο喽匀趸???瞬煌?亩韵笕∠颍?谱髌?及富蚱?淖值腖 OGO，会在表达时产生较大的差异。如只对印刷字体做简单修饰，或把文字变成一种装饰造型让大家去猜。其综合功能为：
a. 能够直接将被标识体的印象，透过文字造型让读者理解；
b. 造型后的文字，较易于使观者留下深刻印象与记忆；
看到有许多人仍然没有自己的logo.在此给大家发几个教程
所谓打字效果，就是文字在光标的带动下，富有节奏感般地挨个展现出来。这种效果在网站的LOGO制作中还不多见。因此我们今天就一起来制作这样一个动态的网站LOGO。最终的效果如图01。

图01
　　


“智慧生活LOGO”源文件下载(50K，ZIP压缩文件)


　　启动Firework后新建一个88*31大小的画布。这种大小也正是网站LOGO最为常用的尺寸。然后点击“层”面板右上角的下拉按钮，把“单层编辑”的选勾去掉。这样就可以使鼠标指针跨图层地进行对象的选取了。如图02。

图02
　　准备工夫做好后我们就来正式绘制了。在画布上用“矩形”工具画一个88*31大小的长方形，使其覆盖整个画布。然后用“波浪”渐变进行填充，渐变色由#
009900至# 56BB12。再用35%的“烟雾效果”进行纹理填充，如图03。

图03
　　然后再为该矩形对象添加一个“内侧发光”的特效，发光色为#
FFFFFF，其它各项设置如图04。

图04
　　用“矩形”工具再画一个88*31的长方形。描边色为# 019A00，不采用任何填充。然后使其与画布进行居中对齐。如图05。

图05
　　这样，LOGO的背景也是绘制完成了。考虑到这是一个动态的LOGO，而且部分动作效果可以使用动画元件来完成。因此为了后续操作的方便，我们再次点击“层”面板右上角的下拉列表，从中选择“共享此层”。也就是把“层1”设置为共享层，以后该层内的背景对象将被其它帧共用。
　　在“层”面板中新建一个图层——“层2”。然后用“文本”工具在画布上输入相关网站或论坛的名称。在这里我输入的是“智慧生活”，字体为15号的加粗黑体，色值为#
FFFFFF，使用“匀边消除锯齿”。最后使该文本对象保持与画布垂直对齐。如图06。

图06
　　用“矩形”工具画一个16*16的正方形，对其使用无描边的“条状”渐变填充，左右两个渐变滑块均为纯白色，而不透明度则由100%至20%，如图07。

图07
　　我们通过该正方形对象的属性框中，将其宽度设置为1像素，然后通过键盘方面键的移动，使其紧靠在“智”字的左边。这样，一个光标的形状也就绘制出来了，如图08。

图08
　　在这个光标对象上点击鼠标右键，从弹出菜单中选择“转换为元件”。然后会弹出一个元件属性对话框。在名称栏中我们可形象的将其命名为“光标”，类型为“图形”。从而把这个对象转成图形元件。
　　此时启动“库”面板的话，可以看到里面就有我们刚转换完成的“光标”元件。选中它，并将其直接拖拽至画布当中。然后通过方向键的移动，把它放置在“活”字的右边并与“智”字前的光标元件进行水平对齐，如图09。

图09
　　将当前的两个光标对象同时选中，然后选择菜单栏中的“修改—元件—补间实例”项。然后在弹出的“补间实例”窗口中设置步骤数量为3，并勾选“分散到帧”选项。此时启动“帧”面板时可以看到，在两个光标之间已建立了所需的动画帧数。如图10。

图10
　　我们继续回到第一帧中进行操作。将“智慧生活”这个文本对象复制后，在其它帧中进行粘贴。而粘贴后的文本对象仍然会在画布上的原位置中，因此不必担心动画在播放过程中会出现文本偏移的情况。
　　因为文字是在动画的播放过程中逐个展现出来的，这个过程只需要4帧。所以我们把第1帧中的文本对象进行删除。而第2帧中则用“文本”工具对其文字对象进行编辑，使其只保留一个“智”字。以此推论，第3帧中则保留“智慧”两字；第4帧中则保留“智慧生”三个字，第5帧则不对文本对象进行修改。完成后LOGO的打字效果就有了一个初步的效果，我们可以点击文档窗口下方的播放按钮进行查看了，如图11。

图11
　　我们再接再厉。选中第5帧后，点击“帧”面板右上角的下拉菜单，从中选择“重制帧”项，然后在弹出来的“重制帧”设置窗口中设置数量为2，如图12。就是将第5帧进行2次的复制，而复制出来的帧也就是“帧”面板里的第6和第7帧。

图12
　　依次点击第6和第7帧，将“智慧生活”最右边的光标对象删除。然后从第7帧开始，我们就将进行LOGO网址动画的制作了。用“矩形”工具在第7帧的画布上画一个84*10的长方形，使用无描边的实心填充，填充值为#
E5F4DC。然后将其移至LOGO的下方与画布进行垂直对齐，如图13。

图13
　　用“文本”工具在这个矩形上面输入相关的网址，在本例中我输入的是“life8.net”，字体为12号的宋体，颜色为#
489801，使用“不消除锯齿”项。然后使其与下方的淡绿色矩形进行水平和垂直对齐，如图14。

图14
　　将淡绿色矩形和这一文本对象同时选中后使用“修改——组合”命令，使其成为一个组合对象。然后再次从“帧”面板的右上角下拉菜单中选择“重制帧”项。在“重制帧”设置窗口中将所要复制的帧数设置为6，其它选项不变。
　　此时在“帧”面板中将自动把复制出来的6个帧排列出来，分别是第8至第13帧，如图15。

图15
　　我们分别将第8、第10和第12帧中的网址组合对象的不透明度设置为50%，如图16。

图16
　　这样一来就可以使网址动画在显示时产生闪动的效果，如图17。

图17
　　是否觉得动画闪得太快了呢！别急，帧的延时时间我们还可以进行调整。双击第1帧右侧的延时时间数，将原来的7/100秒改成14/100秒。使该帧的停留时间增加一倍，如图18。

图0
　　用同样的设置方法对其它帧的延时时间进行设置，在本例中我将各帧的延时时间设置如下（图19）。

图19
　　可以看到，第13帧的延时时间是最长的，这样做只是使观看者能有足够的时间看清上面的网站名称和网址，这当然也是宣传的需要。
　　至此整个LOGO的制作就大功告成了。可通过菜单栏上的“文件——导出预览”项将动画导出并保存为动态的GIF图片格式。最终效果如图20。

夏雨

白光划过LOGO教程
就这个例子
第一步

第二步

第三步

第四步

夏雨

制作风景类Logo全过程

　　由于我是初学FW，有欠缺的地方，希望能指出。十分谢谢！（PS:本教程仅仅针对ilogo-snake的这个logo进行展开，并不一定具有共性或定律。教程对象：新人）
　　Best View:IE5.0+ or NetCaptor4.0+Display At:1024*768
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　【教程】：共3个部分。
　　一、准备
　　二、制作（Step1- 5。[背景Step1-3；边框Step4；动画Step5(稻田动画、文字动画、云朵动画、树叶动画)]）
　　三、修改
　　本次logo的教程样本如下：

　　本logo的源文件：

　　制作软件：Fireworks MX 2004
　　制作周期：两周左右
　　制作目的：仅希望大家能通过这个logo展开去，开拓自己的创意，而不是单纯的模仿。此logo教程仅做抛砖之用。
－－－－－－－－－－－－－－－－－－－－－－－－－－
　　下面我们开始从头做起：
　　整个制作logo的过程大致可分为3个步骤：准备，制作，修改。
　　一、准备——基本上就是构思一个logo的大致的主题，色彩，动画的轮廓，还有就是相关的素材和资料。
　　主题：清新＋收获，主要是一种秋后的田园气氛。
　　色彩：主要以比较饱和的亮色为表现力。主色调：蓝，绿，黄。以亮色和饱和色来增加清新度。
　　动画：以连贯的多个细节动画横向交错为主线，所有动画都可单独成立，并完整接合。形成无限循环不间断动画。
　　动画元素有云的变换，树叶的飘零，风吹过稻田/菊花田 的波浪，以及oneleaf字样的渐变。
　　素材：主要就是找些天空，原野，树木，稻田/菊花田 之类的照片或者图片来观察真实的效果，并可选取可用的地方。
　　图1为我用了google和yahoo的图片搜索引擎找了两天，看了上百页找到的相关图片。千万不要心急，一步一步来。
　　图1：

　　这基本上就是所有的准备工作啦，我个人在这个基础上还把每个动画拆开来单独做了一下，因为有些动画你构思的不错，但做出来就效果大减，所以创意和效果有时并不成正比。这里就略过直接进入制作了。
　　二、制作——从修改素材到绘制图像，从图像修改到动画完成。（建议拿杯咖啡在手;p）
　　通过准备工作我们大概可以定位整个logo的图像布局和动画思路了。
　　基本上是蓝天白云的背景下，丘陵前稻田旁的树叶飘零，秋风吹过，标题显现。
　　那么可以确定，我们需要的元素有：蓝天，白云，稻田，丘陵，树，树叶，树下的土地，文字，风。
　　下面就让我们开始来真的了，步骤就是从背景到前景，从静止到动画，从长动画到短动画，从快动画到慢动画。
　　1。打开Fireworks并建立画布——如图2：

　　2。让我们先从背景中的蓝天开始，画一个直角矩形，大小为88*31像素。用渐变性填充颜色，并使图像如——图3：（注意：不要把填充色拉成均匀的上下两色，那样，图像就会变的很呆板，缺少了美的张力。再有就是不提倡用深色的天空，一不符合秋天的意境，二则不能很好的突出动画效果。）

　　3。
　　(1)背景天空完成后，接下来就是地面的背景——丘陵，这里可以自己画，也可以截取相似的图像加以修改，反正是不动的，看着像就可以。如——图4：（注意：丘陵形态是一个外行稍凸的斜坡，中心的高度在整个logo的高度黄金分割线上，低处不能为0，高处不能超过logo的1/2高，因为你要在树的叶茂和丘陵之间留下一点空间。）

　　(2)对丘陵唯一的加工就是调整饱和度，如——图5：

　　以上就是整个logo的背景，你可以组合后放在单独一层。并双击层一，选择共享交叠层帧。然后单击眼睛的右边小格锁定层。因为我们不会再去动它们了。如图6：

　　4。下面我们来完成边框。
　　(1)
新建层2，在层2中画个直角矩形，大小88*31，填充色无，描边选项如图7：（注意：这里选择深灰虚线框，如果用实线框则会使logo显的比较死板、中规道矩。不适合本次logo的主题；颜色用深灰比较大气，同时可以又可以良好的烘托主题，用亮色则会喧宾夺主。）

　　然后在笔触选项中选择高级，调整间隔，如——图8：

　　间隔大小可以根据感觉自己适当调整，我用的是开：5、关：1。
　　（注意：现在我们得到了一个logo的边框，但还没有完，因为我们用的是虚线框，所以logo的图像会渗透到虚线间隔的地方，如果这个图像色差较大或者是动画，那么这将会破坏整个logo的边框和整体美。所以我们还要把边框的虚线间隔处用铅笔点实。）
　　(2)
在层2中的边框上建立新图层，选择铅笔工具，在所有的边框的虚线间隔上点实，颜色推荐仅次于银灰色。如——图9：目的是不使边框太突出，也不会与logo内的图像色不协调。白色效果感觉稍差（我的那个就是白色的，到现在还懒的改:-(）。

　　现在边框才算完全完成，组合层2的两个图。然后同样选择分享交叠层，并锁定。如图10：

　　到这里，我们就完成了整个logo的次要方面，背景和边框。
　　5。下面我们将要制作整个logo的最重要部分：4个分动画。它们分别是稻田被风过的效果、树叶的飘零、云朵的变化和标题的字形渐变。
　　（注意：由于文字的渐变最简单，所以我们把文字留到最后做；云的变化按照我的方法比较随意，所以放到倒数第二做；而风吹过稻田是一阵一阵的，也就是说是瞬间动画，在这里我们选择首先制作，当然，不同的情况还要看你自己的分析和爱好，同时也和动画的属性有关。）
　　请在层2和层1之间建立新层——层3。接下来的所有步骤都将在此层完成。
　　(1)稻田被风吹过的波浪动画。
　　[a]制作稻田。
　　先截取或用fw画一条稻田，要求是看上去像稻田（废话），也是弧线型，并增加饱和度（见图5），如图11：（注意1：请将稻田对齐整个logo的底端，而不是边框的底端，理由将在稻田的动画制作中得知；注意2：请将稻田遮掩掉丘陵的一侧，以增强整体构图的协调美，并给文字渐变留下足够的空间。再具体偶就不知道怎么解释了，学美术的应该知道吧。）

　　（注意：此时的稻田是否并不让人满意？那是因为没有质感，在这里可以解释为层次感，就是整个稻田的上部应该给人一种金灿灿的光辉。）

小溪

谢谢分享  不过现在用不到

dcx800

不错的教程啊

cshappy911

hduxhzj

顶起~~学学~~

临渊享鱼

确实是不错的教程啊

地铁号

好好学习，天天向上

dalibbs

很不错  支持
     很实用的教程