How to web 2.0 your logo

web 2.0 logo

After I had designed a vector logo for a client, I was asked to web 2.0-ify it.

This is what I did. The “Toby Beresford” and the cogs are on separate layers in Photoshop. Individually I set the Layer Styles of Gradient Overlay and Bevel and Emboss.

The Gradient Overlays are the same on both layers. I picked a light blue colour for my background colour and a dark blue colour for my foreground colour and selected them in the Gradient pull down menu in the Layer Styles pop-up box.

In the same pop-up box, but with the Bevel and Emboss style selected, I played around with Depth, Size and Soften, as well as the opacities of the highlights and shadows until I got the desired effect on both the elements of the logo.

Lastly I created a shiny table top reflection effect using the Free Transform tool.

This article was posted on Monday, January 7th, 2008 at 12:45 pm and is filed under Design, Logos, Photoshop.
You can follow any responses to this article through the RSS 2.0 feed.

Download free “How to Market Yourself Online” ebook
Discover the secrets behind building a better web presence

Everything you will need to know about self-marketing on the web, including:

Creating websites
Setting up WordPress
Writing blog posts
Getting links
Driving traffic to your site
Using social media
Offering RSS feeds and subscriptions
Getting found on Google

9 Responses to “How to web 2.0 your logo”

Web Design and Development services, on April 13th, 2009 at 1:36 pm, said:

awesome logo design i love to touch it. some of the logos i have adored and never forgot.
Rob Cubbon, on April 14th, 2009 at 10:34 am, said:

Thank you Web Design and Development services, for your kind words!
Henry Gilbert, on May 28th, 2009 at 6:28 am, said:

Hmm, I don’t know – I don’t like it.

But who am I to say that when I am so rubbish at graphic design myself?

The problem with following the trend is that – sometimes people do something because they can – instead of because it is needed.

When you create something that looks impressive at first (ie for the first 3 seconds) – novelty soon vanishes and you end up with a white elephant.

A logo should be simple. Clear. And above all scalable.

When you add reflection you add noise. But such noise can be minimised by making a rough surface reflection say.

But given that your article is about how-to-do a logo that way. Rather then what constitutes a good logo. The information is useful for those wanting to learn.
Rob Cubbon, on June 6th, 2009 at 4:39 pm, said:

You’re absolutely right Henry, logos should be simple, something you could draw with a pen in two seconds and this “web 2.0″ design treatment is something that is here today gone tomorrow. At the behest of the client, a designer sometimes has to do these things!
Henry Gilbert, on June 6th, 2009 at 6:29 pm, said:

And that is where I fail. I never listen to my clients !!

Client: Can you make our Logo reflected now?
Henry: No
Client: What? Why not?
Henry: Because I wouldn’t like to be responsible in making your website look tarty and cheap.
Client: But my wife says she likes it
Henry: OK let’s not go there …
Bill Haster, on November 15th, 2009 at 8:52 pm, said:

I agree that these web2.0 logos are not gonna stay. So back to the pencil drawing days for you logo design.
Rob Cubbon, on November 16th, 2009 at 11:55 pm, said:

Logo design still starts with a pencil drawing or the outline of a simple idea first. The web 2.0 effect can be added later and taken away for when the web 3.0 look comes in!
Kevin, on April 13th, 2010 at 1:11 pm, said:

Your logo design is very nice it, I am very impressed with your hard work
Rob Cubbon, on April 14th, 2010 at 11:14 am, said:

Thank you, Kevin

Graphic and Web Designer London UK