Grafpedia

In this tutorial I will show you how to create an amazing layout using a simple texture, and some layer styles.  The gradients and layer styles I have used are available for VIP members. This layout was done in less than one hour, because I have all the tools loaded in Photoshop.

Preview full size layout

Apply for a VIP account to download this layered PSD file

Almost each day I receive questions on how much time do I need to create a tutorial. This layout was done in one hour, and the tutorial was written in almost 2 hours. I create layouts with ease because I have great sets of gradients, layer styles loaded in Photoshop. All these sets are available for VIP members. I am not using other resources because I do not have time to search them over the internet.

You can apply for a VIP account and for a small fee you will have these resources too and I am sure you will find them very useful.

I will start this layout by opening a new document with the following size: 960 x 900 pixels, and with a white background.
Download the following seamless texture (right click on it and choose Save image as)

Open this image in Photoshop, then go to Edit > Define Pattern. Choose a name for this pattern and click OK. Select Paint Bucket Tool, and on the top of your screen select this pattern.

You can use one of the following 200 pixel patterns if you don’t like this one.
200 Pixel Patterns

Your canvas will look like this image

I will select Rectangle Tool, and I will make some shapes like in the following image. The colors doesn’t matter right now.

For the top layer add the following layer styles.

This is my result.

For the second layer I will add the following layer style.

This is my result so far.

Over this grey shape I will add an orange one.

For this orange shape I will add the following layer styles.

This is my result.

I will select the background layer (with the pattern), and I will go to Filter > Render > Lightning effects.

I will use the following settings.

This is my result. Please click on the image to see better the layout.

Select Rounded Rectangle Tool, and create 3 shapes like in the following image

For the black shape add the following layer styles

For the other 2 shapes use the following color: #cbc5b5
This is my result. Click on the image to see better what I am doing.

One more time I will use Rounded Rectangle Tool, to add some shapes.

On the black shape I will add our logo, but before I will place there a logo I will add a layer styles.

This is my result.

On the header of my layout I will place some text buttons, and my simple logo.

The fonts I have used:
For menu: Dilenia UPC, Bold, 24 pixels, Crisp
For logo:  Dilenia UPC, Bold Italic, 52 pixels, Crisp

On the right side, I will create other shapes with Rounded Rectangle Tool.

You can see a border around all shapes. You can add it with a simple stroke. To access the stroke settings go to Layer > Layer Style > Stroke, and use the following settings:

Over these shapes you can add some images. I will place some 3d Software boxes from our blog. You can see them live if you browse the VIP download area.

On the left side I will add a image.

Now I will write some text with Horizontal Type Tool.

On the right side of the layout, I will add another shape with Rounded Rectangle Tool

Under this shape I will create a similar shape but with a black color. Then I will go to Edit > Transform > Perspective, and with Mouse tool I will modify the top part of the shape by dragging the corners to the left and right.

Then I will go to Filter > Blur > Gaussian blur, and I will use the following settings:

With Move Tool nudge the layer a few pixels to the top. This is my result so far.

This is a nice method to add another shadow, to an object. You can use also drop shadow, but the result will be not the same.
Over this shape I will add some icons. You can download this great set of icons from this link: Website and internet icons

I will open these vector icons in Photoshop, and with Move Tool I will drag the layer over my document.

I will select Line Tool, and I will make three lines. Please note that these lines should be very thin (1 pixel) It is very important to make the lines with the right colors. The lines from the middle should be black, and the other ones should be white. I will zoom my document to see better, what I am doing.

Select all the three lines layers in your layer palette, and click on CTRL+E. This shortcut will merge all the layers into a single one. The next step is to select Eraser Tool, and be sure you have a soft round brush selected.

Erase the left part and the right part of the lines. This is my final result, and it looks like a nice indent.

With the same technique I will create some lines between my text menus on the header of this layout.

This is my final result.

If you want to play with this layered PSD file please apply for a VIP account, and for a small fee you can download all our PSD layouts from all our tutorials, and you can also download our entire premium Resources.