¹ÜÀíÉÌÆÌ ·¢²¼²úÆ· ·¢²¼Çó¹º Ñ°ÕÒÉÌ»ú
TOP
ÀÏÍâ½ÌÄã×öWeb2.0µÄlogo
[ ±à¼­:qiraosky | Ê±¼ä:2012-04-08 00:30:02 | ä¯ÀÀ:390´Î | À´Ô´:µÂÖݵçÄÔ·þÎñÍø | ×÷Õß:µÂÖݵçÄÔ·þÎñÍø ]

How Web 2.0 Logos are drawn (Photoshop)
ÔõÑùÓÃ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.
ÏÂÔØ²¢ÇÒ°²×°Õâ¸öÑùʽÎļþ
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 FilesAdobeAdobe Photoshop CS2PresetsStyles”
¶ÔÓÚPhotoshop CS2°æµÄÓû§,°ÑÕâ¸öÑùʽ·ÅÔÚ“C:Program FilesAdobeAdobe Photoshop CS2PresetsStyles”Ŀ¼ÏÂ.

Photoshop of other versions, put the file inside PresetsStyles
ÆäËü°æ±¾µÄPhotoshopÓû§,Òª·ÅÔÚ“PresetsStyles”Ŀ¼Ï¡£

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
ÔõôÑùÖÆ×÷

The reason I use Style here is because once they are saved in to a .asl file (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%µÄºÍÎÒÔ­À´ËµµÄÒ»Ñù¡£

Ïë˯¾õÁË..Ã÷ÌìÔÙ¸ã°É..Ô­ÎÄ:http://www.hongkiat.com/blog/revealing-methods-of-drawing-web-20-logos/

¡¾´ó ÖРС¡¿ ¡¾´òÓ¡¡¿¡¾·±Ìå¡¿ ¡¾Í¶¸å¡¿ ¡¾¹Ø±Õ¡¿¡¾ÆÀÂÛ¡¿ ¡¾·µ»Ø¶¥²¿¡¿