Creating Awesome Web Graphics Using Simple Ideas In Photoshop

Posted: 16 Apr 2010 05:44 AM PDT

In this tutorial, I am going to teach you how to create new web 2.0 style graphics for your website or any design.

The following image shows our final result:

To get the result like above follow this detailed step by step tutorial.

Create new Photoshop document with default size, resolution and white background.

Choose Custom Shape tool from the tool bar.

In this tutorial we’ll be using arrows. From the tools settings bar (below menu bar) choose the arrow from Shape box.

After choosing the arrow shape, choose to draw path only by toggling the path button (as shown in the image below)

Before drawing create a new layer over the Background Layer (CTRL+ SHIFT+ N)

Now finally draw a proper arrow shape. After drawing Press CTRL+ENTER key to highlight the shape you created and fill green color to it.

Press CTRL+T to show up free transform tool and right click and choose Perspective and Skew.

Apply transformation by dragging the corner vertices and finally get the result similar to the image below.

After you are satisfied with the shape of arrow, duplicate the current layer using shortcut CTRL + J

Highlight the original layer (in our case it’s Layer 1) and apply the marquee selection tool by holding CTRL and clicking on Layer 1. Then fill it with black color.(Don’t get surprised if you don’t see black color in the arrow). However make sure that the arrow is filled black in Layer 1 in Layer Panel.

Again hold down CTRL and click in Layer 1 to highlight the black arrow. Then hold down ALT and press down arrow for about 15 times to make a 3D shape of it.

Now your 3D arrow is ready.

Let’s apply some glossy effect to make it livelier.

Select the Layer 1 Copy layer (which is green colored) and apply blend to it by clicking on the add layer style button as shown in the figure. Or simply go to Layer>Layer style>Blending options.

Check on Inner shadow and apply the settings as shown in the figure:

Also check in Drop Shadow and apply the settings as shown in the figure:

Finally apply Bevel and Emboss and apply the settings as shown in the figure:

If you went right up to the above path you’ll get the result similar to the image below:

Now create a text using text tool(I named it GO!).

Rasterize the text layer by right clicking and choosing Rasterize Type.

Again follow the steps you applied for the arrow by transforming and tweaking it and adding Blending options layer styles. (You can follow the tutorial for arrow and apply it to the text). Finally you’ll get the following result.

Hope you like this tutorial.