[Photoshop] Making a web 2.0 logo

[crazyleaf]

This Photoshop tutorial will explain how to make a web 2.0 glossy logo or icon if you like. I tried to keep it as simple as possible. If you have any questions post them in the comments below.

I am starting with a 400×300 px white canvas. Draw your basic shape. I have started with a custom shape from Photoshop’s presets.

Step 1

Fill the shape with a nice orange color (I am using #ff6600)



Step 2

Apply Bevel and Emboss to the layer using the following values :

Structure

* Style : Inner Bevel
* Technique : Smooth
* Depth : 100%
* Direction : Up
* Size : 200px
* Soften : 0px

Shading

* Angle : 120 (use global light checked)
* Altitude : 30
* Highlight mode : Screen, Opacity : 75%
* Shadow mode : Multiply (color : #ff0000), opacity 75%.



Step 3

Stoke the layer with an orange color 3 pixels in size (I am using the same orange as the fill : #ff6600)



Step 4

Apply an inner glow, size 40px.



Step 5

Create a new top layer and using the Elliptical Marquee Tool create an oval over the top of the original shape layer. Fill this layer with gradient from white to transparent (white at the bottom, transparent at the top). Give this layer a 50% opacity. You may rotate this layer so it will look cooler.





Step 6

Make another top layer and using the Elliptical Marquee Tool create an oval over the bottom of the original shape layer. Fill this layer with gradient from black to transparent (black at the top, transparent at the bottom). Give this layer a 80% opacity and a soft light or a hard mix blend.



Step 7

Now to create a nice mirror effect we’ll move all the layers to the top of the canvas and duplicate the original shape layer. Flip Vertical the clone of the shape layer and align it so it touches the bottom of the original shape layer.



Step 8

Add a new layer and using the Rectangular marquee tool make a selection starting at the bottom of the original shape layer like in the image below. Apply to this layer a gradient from white at the bottom to transparent at the top.





Step 9

Add some nice text using a good typeface and you’re set.



Download the PSD file

Originaly posted @ CLD Blog

[Laura Lynne]

Very Shiney

[alex_gomy]

Do most people tend to do this stuff in PS?? i find it much easier to do this in AI.

[crazyleaf]

Originally Posted by alex_gomy

Do most people tend to do this stuff in PS?? i find it much easier to do this in AI.

Some people prefer Photoshop, even if it's bitmap graphics.

[D856C]

Or you could skip AI or PS -- and eliminate the designer -- by using any one of several dozen automatic badge generator sites.

To me, the real point of lockstep, narrow Web 2.0 graphics has been to reduce graphic design to an easily automated handful of standard cliches ...then eliminate the need for designers.

You're missing the whole point with a tutorial, Web 2.0 is about eliminating thought and work and graphic design judgement. It's a brave new world of automatic stripe generators, automatic rounded corner layout generators, and so on down the line.

In fact the only -- and I mean the only thing missing is a mashup which produces automatic Web 2.0 layouts and generates them without any designer intervention whatsoever.

[crazyleaf]

I don't want to get in a debate here, but Web 2.0 at its core doesn't refer to graphics. These kind of graphics have been associated with the web's new trend and started to be called web 2.0. If it's easier for you just disconsider the "web 2.0" in the title.

Originally Posted by D856C

Or you could skip AI or PS -- and eliminate the designer -- by using any one of several dozen automatic badge generator sites.

To me, the real point of lockstep, narrow Web 2.0 graphics has been to reduce graphic design to an easily automated handful of standard cliches ...then eliminate the need for designers.

You're missing the whole point with a tutorial, Web 2.0 is about eliminating thought and work and graphic design judgement. It's a brave new world of automatic stripe generators, automatic rounded corner layout generators, and so on down the line.

In fact the only -- and I mean the only thing missing is a mashup which produces automatic Web 2.0 layouts and generates them without any designer intervention whatsoever.

[tommylogic]

Originally Posted by crazyleaf

I don't want to get in a debate here, but Web 2.0 at its core doesn't refer to graphics ...

yeah, it has nothing to do with the XML, the semantic web, how computers interpret data, collaboratively managed information architecture.. none of that. It's all shiny badges and widgets

[philjohns]

I wouldnt mind someone posting up a tut for doing this in Illy - I always use photoshop and import but would be so much better If i could work entirely in illy.

[zumojuice]

well it is effectively the same method and fairly much the same tools as well.