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