December 18th, 2008 in Photoshop Tutorials by Richard Carpenter
Wordpress Layout #3
13 Votes, Rating: 3.92
Loading ...
Good evening, in this tutorial il show you how to create a simple mockup version of a wordpress template.
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.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
35 Responses to “Wordpress Layout #3”