Grafpedia

In this layout I will show you how create a nice typography layout.
These types of layouts will help you to effectively and accurately transmit the message. One of the most important think is the text size. I will also use a carbon fiber pattern to bring something new in this type of web layout

Preview full size layout

Apply for VIP account to download all PSD layouts for each tutorial including this tutorial. With other words you can download all premium resources from Grafpedia.

Open a new document with the following size: 960 x900 pixels, and then download the following image in your computer. Open this nice carbon pattern in Photoshop

If you don’t like this pattern you can try one of the patterns from this set:
200 Photoshop Pixel Patterns

Then go to Edit > Define pattern. Choose a name for this pattern and click OK
Select Paint Bucket Tool, and be sure you select the pattern from above

Click one time on your document.
Select Rounded Rectangle Tool, set the corner radius to 6 px and create some white shapes. Please note that I will create a red one. You can make all the shapes with white color. I have used a different one because I want to show you how I will place the shape over my layout

With The same tool I will create another red shape.

I will right click on the layer in my layer palette, then I will chose Rasterize layer, and then I will go to Select > Load selection

Now I will go to Select > Inverse. I will create a new layer on top of all layers (press CTRL+SHIFT+ALT+N), and with Brush Tool I will draw on the top right corner

I will press on CTRL+D to deselect, then I will delete the red shape.

I will select 3 layers in my layer palette

Press on CTRL+E to merge all the layers into a single one.
The next step is to add the same layer styles for all the white shapes

This is my result so far

I will create another rectangle with the following color: #575757

Now I will add the text which is the most important thing in this tutorial. Please click on the following image to see the fonts I have used

To see all the fonts I have used please apply for a VIP account and you can play alone with the settings
Now I will add a single image with one of our VIP downloads

On the top of the layout I will add 2 small icons. One with a RSS feed, and the other one with the twitter bird

I will select Rounded Rectangle Tool, and I will create a small shape like in the following image. First create the shape horizontally, and then you can press on CTRL+T to rotate it

Right click on the layer, in your layer palette, and select rasterize layer, and then with Rectangular Marquee Tool make a selection like mine

Then hit delete. The same you can make also on the other side. You can see that I have deleted the black shape a few pixels away from the white shape

I will add the following layer styles

This is my result so far

With the following color #840201, I will create 2 circles with Ellipse Tool

Then I will drag the 2 small circles right above the background layer.

One more time I will use Ellipse Tool to create a small black shape.

I will rasterize this layer, and then with Eraser Tool I will delete the middle part of the shape

Then I will lower the opacity for this shape to 20 %, and I will drag the layer under the red layer

Under  the image with our brush packages, I will create another round shapes, and in the middle I will add a plus sign

Above these small shapes, I will add a horizontal line, and some text

Between the text buttons I will add some vertical lines with Line Tool

On the middle of the layout I will create s small button. This is my final result. I hope you like it

If you want to download this layered PSD layout please apply for a VIP account , and you will be able to download this layout and also our resources and all the PSD layouts from our last tutorials