WordPress Layout #3

Create a new document 900 x 1200 pixels, fill your background layer using the bucket tool with the color #363636. Select the rounded rectangle tool, change the radius to 15 pixels. (see image below).

Create a rectangle about 800 or so pixels wide and about 55 pixels in height, fill with the color black. This rectangle is going to be our header and navigation all rolled into one.

Once your rectangle has been created and is postioned near the top of the canvas add these layer styles.

Your header/navigation should now look similar to this.

On your header/navigation add your site title and slogan to the left, then on the right hand side add your navigation.

In between each navigation element add a divider. To do this select the rectangular marquee tool, zoom in pretty close then make a one pixel line from top to bottom, fill it with the color then do the same again with another color. Make sure you place the lines side by side.

Select the rounded rectangle tool on a new layer UNDERNEATH your header/navigation layer create a big rectangle, the top half of the rectangle where the corners are we want them to be hidden underneath our header/navigation (see image below).

Fill the rectangle with the color #d1d1d1, then add this stroke to it.

Now your going to need an image of some sort, ive chosen a wallpaper which i got from HERE. Load the selection of the rectangle by clicking the rectangle layer whilst holding down the CTRL key. Open up your wallpaper, copy it too the clipboard. Head back over to your layout then goto “edit > paste into”.

On the right side of the wallpaper image create a rectangle using the rectangular marquee tool, then add these layer styles.

Duplicate the box to times and place one above and one below. You should have a total of 3 boxes. You will need to cut some of the bottom box to its rounded, just load the selection, inverse the selection and hit delete. The top box should be safely tooked behind the header/nav.

The three boxes will be featured posts on our wordpress layout, and the big wallpaper will be the big image version of it. On the boxes we just made add some example post content.

Underneath all your featured posts elements, select the rounded rectangle tool again and create a smaller version of your header/navigation rectangle. All the layer styles are the same apart from we DONT NEED the drop shadow.

Now create another rectangle like we did in the 1st couple of steps in the tutorial, where we tooked the top corners underneath the header/nav.

Add these layer styles to complete the effect.

Fill your content box with some example wordpress content.

Use the steps provide above to create more content boxes for your layout.

Do the same for the sidebar in the space on the right.

Your end result should look something like this.

15 thoughts on “WordPress Layout #3”

  1. thank you so much i really love this so much keep sending more cos ur way really easy and i like it thanks mate i will come back again for more 🙂

  2. Pingback: psaddict.com
  3. Well, we all can make a simple theme for wordpress in photoshop. The thing is coding it..
    But hey, we are close to xmas!

  4. I have no word to describe this tut, .. this is really good .. after I tried it on my PC i created something familiar to this one and I must say that its look is really attractive . thanks for the great tut ! =D

  5. So i wonder why you write it`s a worpress theme ? can be drupal, serendipedy, joomla , anything cms bla … the coding is the magif .. the css … i hate it when searching for special keywords on google and get something that has nothing to do with it …
    btw your design is great, but it doesn`t help me in what i was searching for …

Leave a Reply

Your email address will not be published. Required fields are marked *