logo制作教程

2023年4月20日发(作者：玄关设计图片大全)

在学习制作之前先全面认识一下LOGO！

一、什么是LOGO

翻开字典，我们可以找到这样的解释：“ logo: n.标识语 ”。在电脑领域而言，LOGO是标志、

徽标的意思。而本站主要所收集的LOGO，是互联网上各个网站用来与其它网站链接的图形标志。

二、LOGO的作用

是与其它网站链接以及让其它网站链接的标志和门户。

INTERNET之所以叫做“互联网”，在于各个网站之间可以联接。要让其他人走入你的网站，

必须提供一个让其进入的门户。而LOGO图形化的形式，特别是动态的LOGO，比文字形式的

链接更能吸引人的注意。在如今争夺眼球的时代，这一点尤其重要。

是网站形象的重要体现。

试问一个衣冠楚楚的人怎么能让自己的名片污渍不堪？就一个网站来说，LOGO即是网站的

名片。而对于一个追求精美的网站，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、合成文字:

是一种表象表意的综合，指文字与图案结合的设计，兼具文字与图案的属性，但都导致相关属性

的影响力相对弱化，为了不同的对象取向，制作偏图案或偏文字的L 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

用“文本”工具在这个矩形上面输入相关的网址，在本例中我输入的是“”，字体为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。