spooxas.com – Photoshop Tutorials and More

Clean Wordpress Layout

Posted in Photoshop Tutorials on 08.1.09

In this tutorial you are going to learn how to create a minimalistic wordpress web layout.

Final Result

This is what we are going to create.

Step 1

Let’s start with 1024×1000 document. Select the Rectangular Marquee Tool, at the top menu select Style – “Fixed Size” and set Width – 1024px, Height – 90px. Create a new layer and call it “Header’s Background”. Make a selection at the top ,fill it with any color and press CTRL+D(to deselect). Go to Layer’s style and add these settings.

Select the Rectangular Marquee Tool again, set “Fixed Size” Width – 1024px, Height – 3px. Create a new layer above the “Header’s Background” ,call it “Line Under Header” and make a selection under the bottom of your header. Fill it with #000000 color. Your design should look similar to this one.

Step 2

Now let’s create a place where content and menu goes. Create a new layer, call it “Content Background”, put it under the “Line Under Header” layer, select Rectangular Marquee Tool and set “Fixed Size” Width – 560px, Height – 850px. Make a selection under the last layer and fill it with #eae7e7. Go to Layer’s style and add these settings.

Create a new layer, call it “Menu Background”, put it under the “Content Background” layer. Select Rectangular Marquee Tool and set “Fixed Size” Width – 260px, Height – 850px. Make a selection at the right of the “Content Background” and fill it with #d7d2d2. Go to Layer’s Style and set the same settings as for “Content Background” layer. Your design now should look like this.

Step 3

Now when we have the basic stuff, let’s start with text. Select Horizontal Type Tool and create a new layer with it above all layers. Choose your favourite font and write the name of your website. Go to Layer’s style and add these settings.

That’s how header looks like now.

Step 4

Now we will make a menu at the header. Select Rounded Rectangle Tool, set Radius to 5px and make a small rectangle on the header. Create a new layer above all layers, call it “Top Menu Button”, Press CTRL + LEFT MOUSE BUTTON on the Rectangle’s layer. Now fill the layer with any color. Go to Layer’s style and add these settings.

Duplicate “Top Menu Button” layer as many times as you need and add #000000 text on it. That’s how my menu looks like now.

Step 5

Now we are going to make a right side menu. Take a Reactangular Marquee Tool, make a selection between borders of menu, height depends on you. Create new layer, call it “Right Side Menu Header”, and fill it with # . Select pen tool, make it’s brush size 1px and at the bottom of “Right Side Menu Header” add a small #e8e4e4 color line. To end the menu Create a new layer and with a pen tool draw two small lines, one #bdbdbd and another #e8e4e4. Duplicate the menu as many times as you need.

Step 6

Let’s add some text to menu and content. For the menu text choose your favorite font and add text on the heading. On the left add some 3D icons. Inside menu make lists of post, or comments, with separators under them. Add small icons on the left of them.

Now add a heading for the blog post(bigger font size) and a text under him. Add details between them and at the left of details add small icon. After post add small 1px line to separate posts. Duplicate post as many times as you need.

Step 7

Now we only need a footer. Select from the most bottom till the bottom of menu and content border.  Create a new layer, call it “Footer Background”. Fill it with any color, go to Layer’s style and add these settings.

That’s how footer looks now.

Final Result