How to Design a WordPress Blog Layout

Posted by: Toan Nguyen Minh on September 2 in Photoshop

In this tutorial you will learn how to design a 3 column WordPress Blog layout with 3 widget at Footer and 2 widgets at Sidebar using Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Step 1

The first thing we need to do is create a new document with the size of 1024×1500.

Step 2

Add background with color #67727B to your theme.

Step 3

Create a new layer named Content. Pick up the Rectangular marquee tool and draw a 920px wide rectangle. Fill it with white (#FFFFFF).

Step 4

Create a new layer with name Sidebar use the Rectangular Marquee Tool. The width is 400px and background color is #EFEEE4.

Step 5

Create a new layer with name Header use the Rectangular Marquee Tool. The width is 920px, height 200px and background color is #000000.

Step 6

Create a new layer with name Footer use the Rectangular Marquee Tool. The width is 920px, height 435px and background color is #000000

Step 7

Now using your Rectangle Marquee Tool to create Footerline layer the heigh is 1px; and fill it with #56462F at Footer.

Step 8

Duplicate Footerline layer to Footerline1, Footerline2, and Headerline then use Move Tool to move them.

Step 9

Add texts, menu and banner to the Header.

Step 10

The final step for our links is to show what a link will look like when you place your mouse over it. To do so use your Rectangle Marquee Tool to make a selection similar to the following and fill it with #FFFFFF

Step 11

Create a new layer with name Sidebar1 use the Rectangular Marquee Tool. The width is 180px and background color is #efeee4. And create layer Sidebar2 like as sidebar1 but width is 220px. Then add some content with color link is #6a2552 ^_^

Step 12

Use Rectangle Tool with background color is #6a2552 and width 143px, heigh 60px then add texts to it.

Step 13

Use Rectangular Marquee Tool to add 3 widgets to Footer with width 237px, height 350px. Then add content to footer widgets.

Step 14

Our left side is where our posts will be displayed. It is pretty generic, so set it up something similar to the following for each post.

Step 15

Finish

Full Size — Download PSD File

If you want to use this PSD file for XHTML Web Template or Blog Theme, a Sponsor Slot is available with only $20 then your website will be published on this topic for lifetime. Click here to contact me for Sponsorship.