One of our reader here put up a question on How we had designed our logo. Instead of explaining how we created our logo, we put up a full tutorial on Creating Web 2.0 Style Logos ( taking our logo as an example ).

• Branding

This could be the first process of any logo creation. We choose to have something about nature with rich colors and came up with the concept of a Butterfly. Then came the color selection… we already had these colors in mind ( Blue - Green ) so directly implemented them.

• Illustration

Yes… Photoshop is any designers choice. Just using the pen tool and sketched out what was on out mind, applied the above gradients the the shapes with an inner glow of the same color ( darker tone ). You can get some amazing Web 2.0 Gradients of ours from here

• 3D-Fying

This technique is always preferred while converting a flat shape to 3d looking one. Make selection of the existing base shape, reduce size by around 5px ( depends on size of your logo ) to get a small version of your logo. Now cut out the upper half of the selection and apply the brighter color of your base shape. Then apply a good Gaussian Blur to it.

• Gloss

I love Gloss, so we never wanted to implement anything else except for this concept. Simple… Make selection of the shapes, reduce size by 2 pixels, cut out bottom half and apply transparent white gradient to it in a new Layer.

• Adding Detail

To get to our Target ( a butterfly ) we had to make some small detailing like the image below.

• Shadows

Below the base shapes in a new layer create a thin oval shape and apply a faint color of the base shape to it. Add Gaussian Blur to it… Should look like something below.

• Reflection

These are all small detail to get to a final 3d looking logo. Just make a copy of your whole logo, flip it vertically down, make selection of the bottom most ( upper half of logo ) feather the selection and delete it. Give opacity of around 30 to the Layer.

I usually do this by putting the actual logo into a group, duplicating the group, rasterizing the duplicated group and following the above step.

• Text

Now its time to add the actual text of your Brand. No sure what Font we used. Apply the same concepts of the logo to the text too ( reflection and gradient )…… and the logo is READY

• Final Composition

Below is a crop of our Web 2.0 style Wallpaper. Wanna know how to get this done too… ? Check out our tutorial on “Creating Web 2.0 Wallpapers for your Logo”

If this was some other logo I was sure to have given the PSD ( source ) file for download. Anyways… Hope this level of detail tutorial was useful.