Dezining the Dezinerfolio’s Logo - Web 2.0′ish
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.

(12 votes, average: 4.83 out of 5)










Ravi Said:
July 11th, 2008 at 6:20 pm
Hi,
This is really cute logo. But the tutorial is not so detailed. We are not able to follow it. It would be very helpful if you can give us detailed step-by-step tutorial with some other imaginary logo with .psd file.
oyunlar Said:
May 25th, 2008 at 8:44 pm
thanx man
prince Said:
March 22nd, 2008 at 3:23 pm
but i wants to know how make any image,text,logo etc background transparent.by this method i can set it to my site……..please tell me how you make logo,images transparent from adobe photoshop cs3 extended. tell to my mail or any where.
Kaan Said:
August 9th, 2007 at 7:45 am
hi his site is THE BEST !!! thanks you its great :em02: