How to draw web 2.0 Logos!

Tired of this shareware programs that want to charge you for their “Logo Creator” or “Logo Maker”,  or whatever names they have but are expensive and limited?!
We have the solution for you: in this article we transmit you the know-how of how to create top quality logo’s, that can match (or even surpass maybe ;), depending on the artist) even the brand new web 2.0 companies logos.

In this very intresting tutorial you will learn how draw your own logos with Adobe Photoshop,

We thank the guru Honkiat for providing us this lesson:

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.

  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 on the right.

3. The six Web 2.0 Logos

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 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

  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.

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 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.

Drawing Go2Web20 Logo

Have 4 new layers created, each for “GO“, “2“, “WEB” and “2.0

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

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 each style, you will noticed that most Web 2.0 logos are matter of playing with Gradiants, 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.

I hope you enjoyed the tutorial as much as I did!




8 Responses to How to draw web 2.0 Logos!

  1. […] found this great photoshop tutorial on how to create your own Web 2.0 Logos. Nifty…Together with this Ajax site, wed design has never been easier! Cheers […]

  2. Questor says:

    Hi domkop! Thanks for you comment!
    I happy that you enjoyed the tutorial! Cheers!

  3. […] edutainmentblog, this one merely called “Edutainment” has a piece on how to draw Web 2.0 logos. […]

  4. […] another weblog            How to draw web 2.0 Logos! Tired of this shareware programs that want to charge you for their “Logo Creator” or […]

  5. Thanks for this info, very good blog.

  6. Website URL says:

    I like the helpful information you provide in your articles.

    I will bookmark your blog and check again here frequently.
    I’m quite certain I will learn plenty of new stuff right here! Best of luck for the next!

  7. The more traffic a website has the more bandwidth necessary.

    The two most crucial things you need, are good customer service,
    and a guaranteed up-time of 99. In order to gain the best possible results from
    Affordable Web Hosting, there has been a need to find the most
    predominant ones with a view to be able to gain the most
    influential strategies around.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: