Design an impresive blog layout

Final result – Design a professional wordpress layout

Hello and welcome to our first tutorial here on Graphstock. We created this website to offer premium resources, and one of the best tutorials for Photoshop, and illustrator. Soon we will add also another categories, and we will be happy if you would like to help us to create a great community.

If you have enough talent to write a unique tutorial, please read more on this page: Write a tutorial for Graphstock and get paid. We are able to pay between 100$ and 300 $ per tutorial and we will grant you access to our fast growing collection of premium downloads.

We have a lot of surprises for you, but and don’t want to disclose them now. If you want to be the first who know about our releases, and tutorials please follow Graphstock on twitter or subscribe to our RSS feed

Today we will start to create a web layout for a wordpress blog. I will guide you step by step to create a nice looking Wordpress layout.

Step 1 – use a grid based layout for easy alignment.

For start you need to download the 960.gs grid system.

We will build our first layout based on this template. It will be very easy for you to start working on such a template, because you have already some guides in place, and alignment for this layout will be quite easy. Another important thing is the ease of transforming this PSD layout into o a css/ xhtml template or a wordpress blog.

After you download the 960 grid system, please open the 960_Grid_12_col.psd template. You will notice some red shapes already placed over this layout, and also some guides. In case you don’t have the guides enabled, please go to View > Show > Guides.

Step 2 – add colors to the background

Set the foreground color to #f3f3f3 , and with Paint bucket tool press one time on your layout. make sure you have the background layer selected.

Step 3 – create a top shape

The next step is to create a shape on top of the layout.

Here are the layer styles i have used. To access this window you need to go to Layer > Layer style > Gradient overlay

Double click on the Gradient colors, and you will have the following window:

You will find a few thousands gradients on this page. Download Photoshop gradients

The next step is to add also the smooth stroke

Step 4 – add a background image for header

With Rectangle tool you can create another shape under the first one. i will use the same color like our background, but a few steps later i will add a simple layer style.

Add layer styles for this shape

Here is my result so far

Step 5 – Create a smooth shadow for background image

I will create another white shape like in the following image. To create a white shape you need to set the foreground color to white ( #ffffff ) and then you can use the Rectangle Tool

And here is the layer style i have used for this shape.

Step 6 – leave room for a jquery slideshow

In the middle of the layout i will create a area where you can place a nice sllideshow. I will use rectangle tool to create a dark shape in the middle of the layout.

For this slideshow shape i will add some layer styles

This is my result so far

Step 7 – Add a shadow for more realistic result

With Elipse tool i will create a dark shape like in the following image.please note that this layer needs to be placed under the slideshow shape

Select the dark shape, and go to Filter > Blur Gaussian blur and use the following values.

This is my result

Step 8 – Create a call to action area

I will add a simple text logo, and after that i will create another shape under the slideshow area. As you can see i have used the same layer styles i have used for the dark shape from the top of the layout.

I will place some text over this shape, and on the right siode i will create a button with Rounded rectangle tool.

The font i have used is Myriad Pro ( included in both mac and PC as a default font )

The layer styles i have used for this button you will find in the next screen shots.

Step 9 – Add icons and text

Next step is to add text and some icons in the body of our blog layout. I will turn on the guides for a few seconds, so you can see how easy it to align the

Step 10 – ( optional ) Download our premium set of icons

You can download the icons from this link: Download 81 vector icons. if you don’t like the icons i have used you have another options:

Step 11 – Create a nice footer

On the bottom of the layout i will create three shapes.

The first and the last shape have both the same layer styles

And the shape from the middle has the following layer styles

Step 12 – Details , details, details…

Between shapes i will create some thin lines. I will use Line Tool, to create two lines

I will change the foreground color to #363636, and with rectangle tool i will create 3 shapes in the footer of the layout.

For all these shapes i will add the following layer styles

This is my result so far

Step 13 – Create a simple navigation area

On the top of the website i will create some buttons with rectangle tool

As you can see i have used one more time the blue layer styles i have used for my previous button, on for the inactive buttons i have used another layer styles.

Step 14 – Add nice looking image on your wordpress layout

My final step is to add some images over this wordpress blog

Step 15 -  ( optional ) – Register for a premium account and download this PSD Layout

Want to download this layered PSD layout ? Register for a Premium Account, and you will be able to download our entire collection of premium downloads + you will have access for one year to our next releases.

If you are a Graphstock Premium User you can download this PSD layout from here