老外教你做Web2.0的logo

怎样用Photoshop制作Web2.0的logo

Ever wonder how these guys draw their Web 2.0 Logos?
曾经奇怪这些人是怎么设计出Web2.0的Logo?
Sometimes its nice to learn from others,
有时候从别人那学来东西是一件很高兴的事,
build up the basic skills and start your own creativity from there.
不仅能够提高基本的技能,而且还能够启发你自己的创意.
In this Photoshop tutorial,
在这次的Photoshop学习中,
I’m going to reveal you some of the nice Web 2.0 logos,
我会向你揭示一些美观的Web2.0 Logos,
how you can draw their logo exactly the same (well, not really 100% though) with Photoshop.
你怎么样才能够用Photoshop制作的和它们一样的一模一样(呵呵,尽管不是100%的一样).

1. Download and Install style file
下载并且安装这个样式文件
First of all, you will need to download a style I’ve created and load it into Photoshop.
首先,你要下载这个我已经创造好并且可以载入Photoshop的样式文件.

(1).Download Photoshop style here. (Right-click -> Save as)
在这下载Photoshop样式文件(点右键->另存为)

(2).For Photoshop CS2 users, put this style file into
“C:/Program Files/Adobe/Adobe Photoshop CS2/Presets/Styles”
对于Photoshop CS2版的用户,把这个样式放在“C:/Program Files/Adobe/Adobe Photoshop CS2/Presets/Styles”目录下.

Photoshop of other versions, put the file inside Presets/Styles
其它版本的Photoshop用户,要放在“Presets/Styles”目录下。

2. Load style
加载样式
Call up your Style Dialog box in Photoshop
在Photoshop中调出样式对敌框。

(1).Windows -> Styles
窗口->样式
(2).Notice a small arrow button on the top right corner. Click on it and select Load Styles from the drop down
注意到一个小的箭头按纽在右上角.点击它并且从下拉列表中选择加载样式.

(3)Find web20 from the list and click Load. If you don’t find web20, try close Photoshop, re-open it repeat Step 1.
从下拉列表中找到"web20"并且点击加载.如果你找到不"web20",试试重启Photoshop并重复第一步.

(4).Click on the arrow button again and select Large List from drop down
再次点击箭头并且从下拉列表中选择大的@@@

Your result should look something similar to the image on the right.
你操作的结果要几乎和右边的图片一样.

3. The six Web 2.0 Logos
6个Web 2.0 logo

Here’s six Web 2.0 Logo; MyBlogLog, Imified, mixd, skype, Linked In and Go2Web20.
这是6个Web 2.0 logo;"MyBlogLog", "Imified", "mixd", "skype", "Linked In" 各 "Go2Web20".

The style you’ve just installed is going to reveal how to draw them
你刚才安装的样式就是帮你制作这些logo

I’ll go through “mixd” and “Go2Web20” logos
我会演示做"mixd"和"Go2Web20"这两个logo

the rest is just reusing the same technique.
剩下的就是重复一样的技巧.

4. How to draw
怎么样制作

Thereason I use Style here is because once they are saved in to a .aslfile (the file you downloaded) they are convenient to apply.

我之所以在这用到样式是由于一旦它们呆存为一个以asl为后缀的文件时(你下载的那个文件),样式能够方便的调用.
Let’s go about drawing some of these logos.
我们开始制作其中的一些logo

Drawing mixd Logo
制作"mixd"这个logo

Initial observation, mixd logo consist of:
初步观察,"mixd"这个logo是由如下部分组成:

(1).“mixd” text
"mixd"这个文本
(2).rounded rectangular
圆角的矩形
(3).small dot
小逗点
(4).smaller dot
更小的点
We will roughly draw them out in Photoshop
我们将粗略的在Photoshop中绘制以上部分.
each elements in a different layer as illustrated in the image below.
如下图一样,每一个元素一个图层中.

Now here’s the the trick. Look for “mixd-label” in the Style Dialog
现在开始技巧.在样式对话框中找到"mixd-label"这个标签
Drag them directly to background layer,small dot layer and smaller dot layer respectively
分别直接在背景图层、小逗点图层、更小的逗点图层中拖动.

If you drag them correctly you will noticed that the layer will now inherits the colors
and blending of the style.
如果你正确的拖动了，你会注意到图层现在已经有了样式的形色和倒圆@@
Find “mixd-font” in Style Dialog,drag it to the text layer and your mixd logo is complete, 90% like the original I’ll say.
在样式对话框中找到"mixd-font"字体，在文本图层中拖动，你的mixd logo已经90%的和我原来说的一样。