Making a Web 2.0 sticker

Posted February 7th, 2009 in Design by admin

Step 1. At first, create a psd document. File-New. You can fill it with the gradient from #53676b to #405053 create a new layer

Making a Web 2.0 Sticker image 1

Then press U and select the ellipse tool. Hold the Shift key and draw a circle. Paths-Fill path-#cdcdcd. Delete this path.

Making a Web 2.0 Sticker image 2

Step 2. Now, let’s make this sticker more attractive.

Select the layer of the sticker. Then Layer – Layer Style – gradient overlay from #eeeeee to #cdcdcd. Scale 72% Angle -79°. Opacity 100% Style Linear. Create a new layer under the sticker, select the sticker and press Ctrl+E.

Making a Web 2.0 Sticker image 3

Step 3. With the Polygonal lasso, select a part of the layer (the part should look like a saucer) and cut it (Right click on the selection – Layer Via Cut).

Here comes the magic part of our lesson.

Select the Free Transform tool (Ctrl+T) and move this piece as as stated below. After that, move it 1 px down. Here you can play with the settings to get an accurate shadow.

Layer – Layer Style – Gradient Overlay – Fill it with this gradient from white to black. Set the opacity 66% Angle -50° scale 25%. Drop Shadow – Opacity 39%. Distance 1px Spread 0% Size 5 px. Select the layer with the sticker Layer – Layer Style – Drop Shadow. Opacity 24% Distance 6px Spread 0% Size 5px.

Making a Web 2.0 Sticker Tutorial: Final Result

Finished!

It wasn’t so hard, was it?

Download psd from [here].

Making a shiny icon

Posted February 7th, 2009 in Design by admin

Step 1. At first, open Photoshop document. Draw the shape of your icon.

Press U – Rounded rectangle tool – Unconstrained – Radius 20px.

Now create a new layer then: Paths – “Select your path” – Fill path (color doesn’t matter now).

Layer – layer style – Gradient overlay – Fill with gradient from #00cf00 to #02ba07 (Angle 90°).

Of course, you can choose other colors.

Making a Shiny Icon image 1

Step 2. Okay, now we have the workpiece of our icon.

Let’s divide it into two different layers. The first will be the glassy shine and the second will serve as the main part.

Select the Eliptical Marquee Tool (M) and select the imaginary shape of the shine.

Right click on the selection – Layer Via copy.

Layer – Layer Style – Gradient Overlay.

I filled with #08d548 to #2dd685 (angle 90°).

Making a Shiny Icon image 2

Step 3. Now we will make the icon more Web 2.0 like.

Select the layer with the main part, press M and choose the Rounded rectangle tool.

Set feather 10 px and select a small area at the bottom of our icon.

The familiar Layer Via Copy.

And the more familiar: Layers – Layer Style – Color overlay (Only!) – #14ee01.

You can also add a shadow.

Making a Shiny Icon Tutorial: Final Result

Enjoy!

Download psd from [here].