Grafpedia

Hello and welcome to another tutorial on Grafpedia. In this tutorial you will learn how to create a unique Wordpress theme to showcase your portfolio. This layout can be used as well for a business website.

It will require good knowledge of CSS / PHP if you want to transform this PSD into a wordpress theme.

Preview full size layout

Create a new document, and with Paint Bucket Tool fill the background layer with #a4b9cc
With Rectangle Tool, create a simple shape with a white color.

Add the following layer styles for this shape

Duplicate this shape ( you need to select the layer with the white shape and then you need to press on CTRL+J. Select both layers inside your layer palette and then press on CTRL+E to merge both layers into a single one.  Another important aspect is you will not lose the effect from the layer styles.
Select Eraser Tool, and be sure you have a round smooth brush selected. Delete the bottom part of the shape like in the following image

On the left edge create a vertical white line. (You can create this line with Line Tool). Right click on the layer with this line and select Rasterize Layer. The same you will need to use Eraser Tool to delete the top and the bottom part of the line. Here is the result. You will also see where I placed this line. It is very important to place the vertical line near the 1 pixel line stroke.

I will choose Rounded Rectangle Tool, and I will create a white shape

For this white shape I will add the following layer styles

I will duplicate this shape three times and I will place it like in the following screen shot

Here is a real size preview

With Rounded Rectangle Tool I will create a white shape

Select Pen Tool, and while you hold down the CTRL key press with your mouse pointer two times on the edge of the shape
You will see the anchor points if you click in the right spot

Hold down the CTRL key and select the following anchor point

After you have this point selected press on the Down arrow from your keyboard. The anchor point will move to the bottom of the layout

This is my result

With Ellipse Tool create a small circle

Rasterize this small shape, and then make a selection with Rectangular Marquee Tool

Press on Delete key from your keyboard, and then press on CTRL+D to deselect. This is the real size result.

With the same method you can place on the other side of the layouts. This is the result. You will notice another shape on the right side. Please create it. In this spot you will be able to place the number of comments. This is only in case you want to use this PSD layout to create a wordpress theme

On the top of the layout I will create 4 shapes with Rounded Rectangle Tool

For all these shapes I will use the same layer styles

This is the real size result

Under these shapes I will add some lines. You know how to create these lines.

Under this line I will create another one with a darker color

On the top of the layout I will create a shape with Rectangle Tool. I will use the following color for this shape: #8ba0b5

I will select Ellipse Tool and I will create a black shape right under this one

My next step is to apply a Gaussian blur for this shape. I will go to Filter > Blur > Gaussian Blur
I will add a value of 7 or 8 pixels in the radius filed

If you want you can lower the opacity value for this layer. This is my result so far

I will add now a text logo, and the same line we have used several times in this tutorial.

I will add some images and the text

I will create another shape with Ellipse Tool

I will add the same Gaussian blur effect. This is my result

I will create a selection on top of the shape with Rectangular Marquee Tool

The next step is to delete all you see inside the selection. You can press on the Delete key from your keyboard. DO not forget to press on CTRL+D to deselect

Here you can create another 2 lines.

Place all these indents on the other side of the layout. Now I will create a navigation bar.
I will use Rounded Rectangle Tool to create a simple shape on the top right corner of your layout.

Delete the bottom part of the shape, and add one more time the small indents from the previous step. I will not show you one more time how to make it.

This is my final result. I hope you like it.

If you want to download this Layered PSD layout please register. You will be able to download all our VIP resources.