علومي
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How Web 2.0 Logos are drawn

Go down

How Web 2.0 Logos are drawn Empty How Web 2.0 Logos are drawn

Post by 3loomi Wed Dec 15, 2010 1:44 am

How Web 2.0 Logos are drawn


How Web 2.0 Logos are drawn


How Web 2.0 Logos are drawn Logo


Ever wonder how these guys draw their Web 2.0 Logos? Sometimes itsnice to learn from others, build up the basic skills and start your owncreativity from there. In this Photoshop tutorial,I’m going to reveal you some of the nice Web 2.0 logos, how you candraw their logo exactly the same (well, not really 100% though) withPhotoshop. 1. Download and Install style file

First of all, you will need to download a style I’ve created and load it into Photoshop.

  1. Download Photoshop style here. (Right-click -> Save as)
  2. For Photoshop CS2 users, put this style file into
    “C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Styles”
    Photoshop of other versions, put the file inside Presets\Styles
2. Load style

Call up your Style Dialog box in 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.
  4. Click on the arrow button again and select Large List from drop down
Your result should look something similar to the image below.


How Web 2.0 Logos are drawn Stylebox


3. The six Web 2.0 Logos



How Web 2.0 Logos are drawn Web20logo


Here’s six Web 2.0 Logo; MyBlogLog, Imified, mixd, skype, Linked In and Go2Web20. The style you’ve just installed is going to reveal how to draw them. I’ll go through “mixd” and “Go2Web20” logos, the rest is just reusing the same technique. 4. How to draw

The reason I use Style hereis because once they are saved in to a .asl file (the file youdownloaded) they are convenient to apply. Let’s go about drawing someof these logos.Drawing mixd LogoInitial observation, mixd logo consist of

  1. “mixd” text
  2. rounded rectangular
  3. small dot
  4. smaller dot
We will roughly draw them out in Photoshop, each elements in a different layer as illustrated in the image below.



How Web 2.0 Logos are drawn Mixdraw


Now here’s the the trick. Look for “mixd-label” in the Style Dialog.Drag them directly to background layer, small dot layer and smaller dotlayer respectively. If you drag them correctly you will noticed thatthe 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.


How Web 2.0 Logos are drawn Mixdraw02

Drawing Go2Web20 LogoHave 4 new layers created, each for “GO“, “2“, “WEB” and “2.0


How Web 2.0 Logos are drawn Gotoweb20

Drag “go2web20-purple” from Style Dialog into “GO” & “WEB”, drag“go2web20-green” into “2″ & “2.0″ and you will get this finaloutput.


How Web 2.0 Logos are drawn Gotoweb201

As for the rest (MyBlogLog, imified, skype and Linked In), it’s all about dragging their respective style in and match with the correct font.5. Conclusion

If you look into the Blending Options of eachstyle, you will noticed that most Web 2.0 logos are matter of playingwith gradients, strokes with the combination of the right fonts.This may not the “exact” way how these guys had done their logo, butits at least a way to achieve it. I’m not encouraging you to fake theirstyle and redraw your logo, but try understand it and hopefully you cancome out with a nice sleek Web 2.0 logo. I love putting my designs inStyle (.asl), I can reuse them whenever I want










:@: :@:
3loomi
3loomi

الجنس : Female

عدد المساهمات : 826
النقاط : 52529
التقييم : 10
تاريخ التسجيل : 2010-09-01

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum