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/