Ever wonder how these guys draw their Web 2.0 Logos? Sometimes its nice to learn from others, build up the basic skills and start your own creativity from there. In this Photoshop tutorial, I’m going to reveal you some of the nice Web 2.0 logos, how you can draw their logo exactly the same (well, not really 100% though) with Photoshop.
1. Download and Install style file
First of all, you will need to download a style I’ve created and load it into Photoshop.
- Download Photoshop style here. (Right-click -> Save as)
- 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
Your result should look something similar to the image on the right.
3. The six Web 2.0 Logos
Here’s six Web 2.0 Logos – 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” logo, the rest are 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. Let’s go about drawing some of these logos.
Drawing mixd Logo
Initial observation, mixd logo consist of
- “mixd” text
- rounded rectangular
- small dot
- smaller dot
We will roughly draw them out in Photoshop, each elements in a different layer as illustrated in the image below.
If you look into the Blending Options of each style, you will noticed that most Web 2.0 logos are matter of playing with gradients, strokes with the combination of the right fonts. This may not the “exact” way how these guys had done their logo, but its at least a way to achieve it. I’m not encouraging you to fake their style and redraw your logo, but try understand it and hopefully you can come out with a nice sleek Web 2.0 logo. I love putting my designs in Style (.asl), I can reuse them whenever I want.