logo教程

本文由枫叶上的音标贡献
wps文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。
在学习制作之前先全面认识一下 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、合成文字: 是一种表象表意的综合，指文字与图案结合的设计，兼具文字与图案的属性，但都导致相关属 性的影响力相对弱化，为了不同的对象取向，制作偏图案或偏文字的 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 用“文本”工具在这个矩形上面输入相关的网址，在本例中我输入的是“https://www.360docs.net/doc/90651696.html,”，字体 为 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 全过程
由于我是初学 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：请将稻田遮掩掉丘陵的一侧，以增强整体构图的协调 美，并给文字渐变留下足够的空间。再具体偶就不知道怎么解释了，学美术的应该知道吧。 ）
（注意： 此时的稻田是否并不让人满意？那是因为没有质感， 在这里可以解释为层次感， 就是整个稻田的上部应该给人一种金灿灿的光辉。

dv.gd/7642