Grafpedia

Another day means another tutorial or resource released on Grafpedia. In this tutorial you will see how Pen Tool can help you to create nice looking shapes for your web layouts.

Using strange shapes and buttons can change the overall look of you layout. This layout can be used also for a wordpress theme if you know how to code it.
If you want to download this PSD layout you need to register for an account. You will be able to download our huge collection of premium downloads for only 9.95 $

Register for a VIP account
As usual we will need to create a new document. To create a new document you need to press on CTRL+N and then you can set the size for this document. I will use as always the
same size 960 x900 pixels.
With Rectangle Tool I will create a big shape on top of the layout. Here I will place the navigation bar and the logo. The color used to create this shape is: #716f1a

I will make a selection around this shape, and then I will create a new layer (press on CTRL+SHIFT+ALT+N). On this layer I will draw a white point with Brush too, and a big smooth round brush.

I will change the blending mode for this layer to overlay, and in the same time I will change the opacity value to 50 %. If you want to get rid of the selection press on CTRL+D

In the next step I will use Pen Tool to create a nice shape where I will place some unusual buttons. Before I will use Pen Tool it is recommended to make the grid visible.

With Pen Tool you can create a shape similar with mine

For this shape I will use the following layer styles

This is my result so far.

With Pen Tool create another shape and place it like this. Do not forget to enable the grid. It will help you to create a perfect button.

I will add a simple black gradient for this button. This gradient is from our biggest pack with Gradients. 27.000 Photoshop gradients. In the same time I will add also some text.

Right under this black button you can create another button (a little bigger) the easy way is to duplicate the black button, and then you can change the size. To change the size of the shape press on CTRL+T and then with mouse pointer drag from a control point while you hold down the ALT key. I will change the color for this shape to white and I will reduce the opacity until I like the result.

At the bottom of the green shape I will add another orange shape

I will add the following layer styles

This is my result

I will select Rounded Rectangle Tool, and I will create a big shape with the following color: #d4d4d4

I will add the following layer style. Please save this layer style, because we will use it later.

This is how my shape will look like

With the same tool: Rounded Rectangle Tool I will create another shape. I will use the following color: #eae7e5

Over this shape I will create another one with a white color. I will add the layer style I have used for the big shape

With Pen Tool I will create a shape like our button. Turn on the grid (CTRL+H) if you want a perfect shape.

On top I will create another one (a smaller shape)

With the same technique I will create another one like in the following image

On the other side of the shape I will create a similar shape

With Rounded Rectangle Tool I will create three shapes

I will select all three shapes and I will drag to the “Create a new layer “button from the bottom of your layer palette. This action will duplicate the shapes, and in the same time Photoshop will merge all three shapes into a single one. You will notice also a new layer. Be sure you select this layer, and delete the bottom part of the shape until you have a similar result with mine.

Here is the layer style I have used for these content boxes.

One of my final steps is to add some text with Horizontal Type Tool. I will use the following font: Myriad Pro. In the same way I will add also some images and some icons. Here you can download the Icons

If you want to download this layout you need to register for a VIP account. You will be able to download ALL psd layouts for each tutorial + our huge collection of Vectors, stock photos, Photoshop gradients, layer styles, vector files, icons, etc.  The price is 9.95 $ and it will allow you to download all our VIP resources plus the next one we will release during your subscription. If you want to apply for one year you will be able to download our current resources + the future ones we will release in the upcoming year.
The price for one year is 69.95 $ (less than 6 $ per month)

Join now