稀饭说 » 设计

从字符到LOGO[4][完结]

coolcfan — Mon, 10 Aug 2009 14:42:07 +0000

公告：

1、谢谢yibie在他的博客上推荐了这个系列的前三篇，导致我博客在他推荐的第二天出现了200+ IP的高峰（平时每天只有20IP左右）。

2、本文是这个系列的最后一篇。如果以后再写类似的系列文章，就应该是Season 2（第二季）了。

下面开始正题：

今天我仍然带来三个LOGO，它们分别是：coolcfan.org的LOGO、给Seven Vision Style做的LOGO，以及给Showfom做的LOGO。你应该已经看出来了吧～这里面有两个LOGO是给别人做的。

首先拿自己开刀：

coolcfan.org

coolcfan = cool + computer + fan
这个网名是我在上小学六年级的时候（2000年）给自己取的，是cool这个单词和《电脑爱好者》杂志的简写cfan的组合，虽然看上去很土，但是很管用（用了9年，还是很少遇到重名的）。

LOGO仍然采取“用字符组成图案”的思路，很无奈地从coolcfan中提取了两个C来构图。在这个过程中，偶然发现的字体ABC Version Two帮了我的大忙——这款字体中的字母C是一个非常规整的四分之三圆环，缺口在右下角。所以，取用两个大小不同的C，将它们同心排列，以大套小，就成了一个比较规整的CC构图。

至于细节的调整，无非就是考虑到两个C的缺口在同一处，比较单调，所以将内部的C逆时针旋转了90度，将缺口移到了右上角。另外，出于制作小尺寸版本的需要，我还用Illustrator的“偏移路径”调整了C的粗细，这在之前的日志中提到过。字母C的处理，如下图所示：

Seven Vision Style

看到高中时的同学的3D室内设计作品（作业），受到刺激，于是为她的作品集做了一个LOGO（图片暂时不可用）。

这个LOGO涉及到了数字，所以就不一定要去从首字母的缩写入手，而可以从阿拉伯数字本身入手。

由于数字7的外形相当简单，比较容易处理，所以我并没有寻找合适的字体，而是直接用Fireworks的钢笔工具画了一个7（很多优秀的英文设计字体都忽视了数字和标点，想要找到漂亮的数字7，真的比直接画还要难）。画一个7其实很简单：

不过，我不得不承认，像我这种毫无美术功底的人画出来的数字，确实不怎么样，甚至和我自己的预期还差了好远。如果把它单独作为LOGO，是很愚蠢的，我虽然美术不好，但智商至少还处于正常人的水平，肯定不能犯这种错误，所以，需要为7添加一个修饰。

这个LOGO中的修饰，来自于Vision这个词。我需要一个与视觉有关的东西，而胶卷那边缘带有小孔的特征，恰恰是与视觉有关的东西中，最容易通过图案来表现的。思路确定之后，制作就很简单了：在一个矩形的左侧打出一定数量的小孔，就可以了。

最后，将数字7分为两部分，左边的部分在矩形的右侧打孔，右边的部分则与矩形上裁掉的对应部分结合，如下图，形成最终的构图，这个LOGO也就完成了。

Seven Vision Style的LOGO通过构图，出人意料地获得了一种动感，这也正是我喜欢这个LOGO的原因。

Showfom

Showfom是造成这个系列文章出世的几个凶手之一，但是即使在写了三篇文章之后，这小子仍然要求我亲手做一个LOGO给他。为了摆脱苦海，我就简单地做了一个。

LOGO采用了Star Jedi的字母S。一看字体的名字就知道，它准和星球大战有关。实际上，这一字体正是星战电影的LOGO字体。之所以要使用Star Jedi，是因为在我印象中，只有这款字体的字母S，其上下两端是平行的，可以无限向外伸展。

接下来的工作实际上是比较简单的。用Fireworks的“部分选择工具”和Illustrator的“偏移路径”功能来调整字母S的外观，然后在背景添加一个倾斜角度与字母S相同的圆角矩形，这个LOGO就基本完成了。

个人感觉此LOGO有种似曾相识的感觉，可能是与比较普通的创意有关。其实要我说的话，Showfom你就直接拿Superman的那个S当LOGO用吧～～

后面的话

到这篇文章为止，我的原创LOGO的存货已经全都用完了，所以《从字符到LOGO》也就在这里结束了。第一次写教程，我深深地感到了我的水平的不足——很多想法不知道该如何表达，很多步骤不知道该如何说明。实际上，我只是把这些LOGO进行了一次展示，基本没有涉及到任何思路、原则方面的东西。现在写到最后一篇，我才发现，我在系列第一篇文章里的承诺，很大一部分都没有兑现，在这里，要向大家道歉了。

其实，用字符制作LOGO的教程在网上比比皆是，尤其是我在第一篇文章中提供的那两个PDF，更是不可多得的优秀作品，其中涉及的思路、原则、技巧，正是本系列缺少的东西。因此，在系列的最后，我再次建议大家读一读那两个PDF！

LOGO的制作，是我的爱好。在将来，我想我会再推出“从字符到LOGO”的Season 2；不过那时候，我想我不会再从自己的原创作品下手，而是会拿自己制作了LOGO的朋友们开刀。我的博友们，你们要小心了～～～～

永久链接：点这里打开文章页

coolcfan @ 稀饭说, 2009. | 有 16 个评论 | 添加到 del.icio.us
日志标签: LOGO, Logo of letters, 设计

相关日志

从字符到LOGO[3]

coolcfan — Sun, 28 Jun 2009 10:54:16 +0000

距离上次写LOGO教程，已经有好长一段时间了。在那段时间里，我忙于期末那五花八门形式多样的考试和大作业，难以抽身写博；即使到了我承诺的日子（6月20日），我仍然没能把这个教程的第三集写出来（其实是一点儿都没写），因为那时实在是心神不安。现在好了，东西都找回来了，图床继续使用PicasaWeb（向可能吧学习！），至于新注册的两个，用起来都比较麻烦，不过对大图支持比较好（pikeo可以直接连到全尺寸原图），以后就用来发壁纸什么的了。

好了，废话就说到这里，现在开始正题。这次的教程的主题是“ANNYWEAVER LOGO的发展史”，内容会比较多，大家要耐心哦！

ANNYWEAVER名字的由来：

这个名字是我的一个同学起的，Anny是他当时的女友，Weaver则来自于Dreamweaver，这个名字的意思就是，Anny用Dreamweaver制作的作品（其实就是帮Anny做她的期末作业来着）。后来，由于感觉很押韵，这个名字被我们一直用了下来……

本文图中标明了我使用的字体名称和原始外观，请大家自行搜索下载，不要找我索要了～

LOGO最初版：

最初版的LOGO是由ANNYWEAVER的全名组成的，没有任何缩写。制作时将文字分为两行（ANNY和WEAVER），对大写的A进行变形，将两个N接合，并将WEAVER的A和V接合。然后，对LOGO进行了一些处理，添加了类似发光的效果，并应用多种颜色，制成不同版本。

这一LOGO的缺点很明显：第一，它的配色使它只适合黑色背景，如果换成白色背景，那么所有的发光效果将没有意义；第二，它太大太长，还是纯文字的，不适合小尺寸，无法用于制作Favicon等小尺寸图标。总之，它对文字的表达过于直接，修饰也浮于表面，既不美观，也无法应对多种使用环境。

为了解决这些问题，我开始尝试将ANNYWEAVER这个词组缩写为AW，并以此为题制作新的LOGO。

LOGO第二版：

制作第二版时，我的思路就是，将AW两个字母结合起来，形成图案。思路很简单，因此制作起来也很简单，主要就是使用Fireworks的“部分选定”工具。

时间仓促，我在下图只是简单地演示了一下制作过程：1、输入字母A和W，并将其分别转换为路径；2、将字母A的一横去掉，并拉长左侧部分；3、拉长右侧部分，并调整其倾斜度使其与W对应部分平行；4、移动两个图案，将其接合到一起；5、继续调整A和W，使其完美接合。最后为了修饰，我又加了一个四分之三圆在外边（个人认为这个圆不加更好，加了总是看着像铁路的LOGO）。

这个LOGO比起上一个，最大的好处就是可以做成Favicon等小图标，因为它对ANNYWEAVER就行了缩写和一定的抽象，其实虽然来自文字，但具有一定的图案特征。缺点则是，结构复杂，特色不够鲜明。

LOGO第三版：

这是ANNYWEAVER使用时间相当长的一个LOGO了，也是我给ANNYWEAVER做的LOGO中最抽象的一个。其实它的制作方法比上一个还要简单，只需要对一个字母进行形状变换。实际上有时技术并不是问题，你需要的只是耐心。这个LOGO花掉了我两个小时的时间，但制作方法我一句话就可以概括：使用“部分选定”工具调整已转换为路径的字母W的外形，使用“矩形”工具、“椭圆”工具和“组合路径”里的命令制作缝隙和圆孔。大部分的时间，都花在了细节的调整上。

这个LOGO遇到的主要问题就是，它实在是有点儿太抽象了。图案的主体是字母W，而字母A则由W的中间部分加那个圆点来表现。令我没有想到的是，整个图案给很多人的第一印象是，这很像一架科幻片里的战机。另外，它看上去还是有那么一点复杂。我对大家的建议是，不论如何去做，如何对文字进行变形，都不要把图案搞得太复杂，那样不利于访客的记忆。

LOGO第四版：

第四版aw.classic实际上非常简朴，就是两个字母加一个圆。不要小看这种方式，它可是很流行的。简单的一两个字母，配以简单的几何图形（比如，圆形，矩形，圆角矩形等）作为背景，不需要任何技巧，唯一的要求就是，找到一个合适的字体。

图中还给出了我写这篇文章时临时做的一个版本，简单的两个字母，一个矩形背景，一点点渐变色，看上去就有那么一点儿感觉了，不是么？当然，你会觉得这个很眼熟，因为Adobe系列软件的图标都和这个差不多。但不要小看这种设计，实际上有很多成功的LOGO与它都是同类。

LOGO第五版：

第五版，也就是现在使用的。图中简单地示范了其制作过程，主要还是使用“部分选定”工具。值得注意的是，字体生成的图案较粗，所以在微调中，我使用了Illustrator这个软件来使其“变细”。值得一提的是，一开始，我是想用Fireworks直接来调整的，但是Fireworks中的路径变换功能效果非常差，所以无奈选择了Illustrator。

制作思路：当我尝试了A和W的多种组合之后，突然想要看看把A和W竖直叠放的效果，加上巧遇oktober这个字体，于是就有了这个LOGO。其中，圆点构成连接字母A和W的桥梁：将圆点与上部的四分之一圆放到一起，代表抽象字母A；将圆点与下部的半圆放到一起，就是抽象的字母W。我个人认为这样的抽象比较合理，同时图案简洁，易于上色，可以用于多种场合，是一个比较合适的LOGO。需要注意的是，在制作这一LOGO时，我并没有使用字母W，而是单纯使用了oktober字体的字母A。

总结：

使用字符设计LOGO，不代表就要放弃LOGO的图案性。所谓放弃图案性，指的是单纯地使用字符来构成LOGO，不作什么改变，就像Microsoft那样，直接把全名敲出来当作LOGO——除非你已经像MS那样牛X了，否则这种方式并不适合你。要在使用字符的同时引入“图案性”，可以尝试下面的几种思路：

将全名缩写成几个字母，使用某些字体，寻求将它们直接连接成图案的方法；
将全名缩写成几个字母，使用某些字体，寻求将它们抽象后再构成图案的方法；
将全名缩写成几个字母，并且不对字符本身进行太多修改，而是使用圆形、矩形或其它几何形状作为背景来修饰；

同时，对于前两种思路，不仅应考虑将字符横向排列的情况，还应考虑将字符纵向甚至斜向排列的情况。有时候把字符的相对位置改变一下，就可能带来新的灵感。

本次教程就到这里，谢谢大家
教程相关源文件点此打包下载

永久链接：点这里打开文章页

coolcfan @ 稀饭说, 2009. | 有 21 个评论 | 添加到 del.icio.us
日志标签: LOGO, 设计

相关日志

从字符到LOGO[2]

coolcfan — Sun, 24 May 2009 03:16:19 +0000

欢迎回来。

今天，我要带给大家的是我很久以前制作的两个LOGO。由于年代久远，讲得不会很详细，请大家多多包涵～

LOGO-1、Blue14.net的论坛（其实是两个）

Blue14是当时一个学弟自己租用空间假设架设的一个论坛（现在已经关闭），这个论坛当时没有LOGO，所以我自告奋勇，主动提出要做一个LOGO。既然是LOGO，自然不能直接打上Blue14几个字就完事，所以我就想要在上面添加一些修饰。在某天看完电视后，我制作了第一个LOGO：

好吧，你看到这个LOGO会不会很眼熟？其实我就是在电视上看到东方卫视的台标后模仿着做的。这个LOGO的制作过程相当简单：用Firework的Star工具画一个五角星，调整一下这个五角星的外观，然后用变形工具改变一下它的形状，使其看上去大致好像是贴在一个球上的。然后画一个圆，为其填充渐变色，使其看上去有一定的立体感。最后，为五角星填充白色，添加内部阴影，并且置于圆形上方合适位置，这个看上去有点儿别扭的图案就出来了。

Blue14的第一个LOGO看上去很简陋，很别扭，因此，在放到论坛上一段时间之后，我决定重新制作一个。新的LOGO外观如下：

是不是比第一个要顺眼一些呢？我先讲讲思路：首先，修饰的图案不能再Copy东方卫视的想法了；其次，要把图案和文字有机地结合。基于这两点考虑，我制作了中空的五角星图案，使用变形工具，将其尽量调整得看上去比较活泼。然后我发现，我所使用的字体Alpha Niner i中，字母U的左侧一竖与五角星的一部分比较契合，于是我将五角星的这一部分去掉，并用字母U的左侧一竖来代替，这样，图案和文字就结合到了一起。

LOGO-2、OIER.cn

话说后来那位学弟废弃了Blue14，建立了一个名为OIER.cn¹ 的论坛。我继续为其制作LOGO，如下图：

OIER.cn的LOGO应该可以算是一个比较标准的Text-Logo了，因为所有的修饰都是基于对文字的修改的。我选择了Alba字体的小写字母来制作这个LOGO，选择的依据是，我当时很喜欢这个字体。但是，Alba中小写字母i那个大大的点让我很不爽，因此我对其进行了一定的修改：删掉上面的点，然后在主干的顶端，加一个镂空的五角星（貌似我还是忘不了这个东西啊……），这样，别人看到时，仍能自然地想到这是字母i，而不是小写的L。其余的修饰就比较简单了，只是将字母e的位置下移，使得LOGO看上去比较活泼，然后添加了描边和发光效果，并且制作了一个横纹背景。

**************************我是华丽的分隔线**************************

以上便是今天的内容了。由于我比较懒，没有提供详细的制作过程，所以在下面将LOGO的Fireworks源文件附上，有兴趣的朋友可以下载，并用Fireworks打开，来查看相关的参数。

Chapter2.rar on SkyDrive

Skydrive下载不了的可以留言索取。

所谓OIER，就是参加计算机奥林匹克竞赛的人

永久链接：点这里打开文章页

coolcfan @ 稀饭说, 2009. | 有 16 个评论 | 添加到 del.icio.us
日志标签: LOGO, 设计

相关日志

从字符到LOGO[1]

coolcfan — Sat, 16 May 2009 07:31:30 +0000

也许是因为我的LOGO看上去有点儿大品牌的感觉，前些日子好些朋友要我给他们也做些LOGO（包括爱月、Showfom，以前yibie也要过）。然而，稀饭不是万能地——本人只会用字符拼凑LOGO，有些人的博客名或网址实在很难用来拼凑，所以我只好先拖着，等待灵感爆发的时刻。但从现在看，我离灵感爆发实在是相当遥远，所以感觉有点对不住我答应过给做LOGO的朋友们。

俗话说应当授人以渔，既然灵感爆发遥遥无期，倒不如把我对字符型LOGO的制作思路总结一下，写成一些文章，与大家分享。所以，就有了这个系列专题（这也是我第一次决定一定要坚持写完的专题）。

在这个系列的文章里，我会按照时间顺序，列出我所做过的所有LOGO，并以它们为例，来总结我在制作字符型LOGO时所使用过的方法。另外，这篇文章末尾会附带两个链接，可以下载到两篇来自BAMagazine的教程，一篇系统地介绍了用字母制作LOGO的常用手段，另一篇则是介绍用一段文字制作LOGO的技巧。这两篇教程可以作为一个很好的参考，也是对本文的一个补充。
P.S. 本来想要翻译字母的那篇，无奈教程的作者不同意，于是只得给出其官方原版的下载了。

废话说到这，下面开始正题～～～由于是第一篇，所以讲讲概论，不会很长。

所谓的字符型LOGO，就是在现成的字符的基础上，通过综合使用添加修饰、寻找并利用字符间的联系、对字符的形状进行抽象等方式，制作出来的LOGO。

其实，这样的LOGO在我们身边随处可见，因为很多品牌的商标设计都可以归为字符型的LOGO。

一些足够牛X的品牌通常会直接把全名作为LOGO，比如谷歌（Google）、微软（Microsoft）、联想（Lenovo）、索尼（SONY），都是这方面的代表。通常情况下，在这些LOGO中，对字符的修改都比较轻微，一般来说，就只是来个斜体（Lenovo），或者填个颜色（Google），或者在某个字母上动点而手脚（Microsoft的第一个o），再或者干脆就是直接写下来（SONY）。

还有些品牌由于种种原因使用了全名的缩写作为LOGO，这里面也不乏牛X的品牌，而且似乎更常见。惠普（HP）、肯德基（KFC）的全名太长，所以通常以缩写的LOGO示人；麦当劳（M）、卡巴斯基（K）这样的则干脆用一个字母来作为LOGO。而且，用的字符数量越少，对字符的修改往往越大：KFC几乎是直接写下来的，而卡巴斯基的K却是用两个字符拼起来的。

字符型LOGO最大的好处就是设计简单，容易记忆。试想，如果麦当劳的LOGO不是一个M而是一个汉堡包，那么很容易就会与别的品牌混淆。而且，制作一个汉堡包形状的模具，和制作一个字母M形状的模具，显然后者更简单、成本更低。这一点同样可以给个人博客带来好处：不需要多少美术功底，不需要多复杂的软件操作，只要利用各种字体和字符，就有可能做出具有专业气质的LOGO来。

好了，今天就先到这里。下一期开始，我会开始实例讲解。每期都会介绍两个实例，直到把我的“存货”都介绍完为止。同时，希望大家多多反馈～～

附件：BAMagazine的两篇教程，PDF格式官方原版，SkyDrive下载

用字母制作LOGO

制作纯文字LOGO

【未完待续】

永久链接：点这里打开文章页

coolcfan @ 稀饭说, 2009. | 有 9 个评论 | 添加到 del.icio.us
日志标签: Design, LOGO, Logo of letters, Text-only Logos, 字符, 设计

相关日志