make a web 2.0 logo

using: Photoshop

I'm not sure of the accuracy of the description, but it seems that anything with a hard chine reflection these days is considered 'WEB 2.0', so who am I to buck the trend?

This is a real simple task and yet I know of many novices who actually BUY logos like this.

Without the need to take screenshots, performing the task in this tutorial takes around 3-4 minutes.

NOTE: there is a PDF download of this tutorial,with his-res images, available for members.

This is our logo text. I've chosen FRANKLIN GOTHIC because of its simplicity and clean lines. I don't believe an effect like this could work with a complicated font - but then I've been proven wrong before.

The first job is to RASTERIZE the type. (Hint: make sure of the spelling first.)

Make a selection with the ELIPTICAL MARQUEE tool, taking the top of the logo as shown. Then CUT and PASTE. Reposition the new layer back to where it was. You may need to either turn on SNAP (VIEW/SNAP) or ZOOM IN for accuracy.

It's now a matter of applying a GRADIENT to the individual layers (with the TRANSPARENCY LOCKED). Already you can see the webtwoishness of the logo. Was that hard?

Once you're happy with the colors, MERGE the two layers into one.

I've given this logo a slight STROKE of lighter orange just for effect. That's not essential, but at low web resolutions it tends to give ot a slight 3D glow.

Next, DUPLICATE the logo layer and reflect it - FREE TRANSFORM and drag the top center handle down below the baseline. Try it.

We need to do stuff to the reflection layer that won't always sit well with a LAYER STYLE, so first we'll merge the STYLE with the layer. The easiest and quickest way to do this is create a NEW LAYER either above or below the reflection layer and then MERGE them. The LAYER STYLE will no longer be editiable.

Next step: give the reflection a LAYER MASK and apply a GRADIENT starting from about three-quarters of the way down and finishing near the top of the logo text. Your result should be a faint reflection. Experiment.

As an added touch we'll put a highlight on the logo. To do this, make sure the GRADIENT tool is set on FOREGROUND TO TRANSPARENCY and then set the FOREGROUND color to WHITE. Create a GRADIENT on a new layer as shown above. Then use TRANSFORM SELECTION to reshape thelayer into more of an oval than a circle.

Change the BLENDING MODE of the white GRADIENT to OVERLAY.

And that's it! The logo is finished.

Below is a couple of alternative ideas that you can add, or you can experiment with other additions of your own.

The image used in this tutorial is available for Members to download.

If you want to be notified as soon as the Member's Site is available, subscribe to the newsletter below.