Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Wordpress Layout #3

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).

image 1

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.

image 2

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

image 3

image 4

image 5

Your header/navigation should now look similar to this.

image 6

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

image 7

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.

image 8

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).

image 9

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

image 10

Now your going to need an image of some sort, I've 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".

image 11

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

image 12

image 13

image 14

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.

image 15

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.

image 16

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 Don't need the drop shadow.

image 17

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.

image 18

Add these layer styles to complete the effect.

image 19

image 20

Fill your content box with some example wordpress content.

image 21

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

image 22

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

image 23

image 24

image 25

Your end result should look something like this.

Wordpress Layout #3



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Wordpress Layout #3"

Captcha