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

Wordpress Layout #3 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.

Wordpress Layout #3 image 2

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

Wordpress Layout #3 image 3

Wordpress Layout #3 image 4

Wordpress Layout #3 image 5

Your header/navigation should now look similar to this.

Wordpress Layout #3 image 6

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

Wordpress Layout #3 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.

Wordpress Layout #3 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).

Wordpress Layout #3 image 9

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

Wordpress Layout #3 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".

Wordpress Layout #3 image 11

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

Wordpress Layout #3 image 12

Wordpress Layout #3 image 13

Wordpress Layout #3 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.

Wordpress Layout #3 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.

Wordpress Layout #3 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.

Wordpress Layout #3 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.

Wordpress Layout #3 image 18

Add these layer styles to complete the effect.

Wordpress Layout #3 image 19

Wordpress Layout #3 image 20

Fill your content box with some example wordpress content.

Wordpress Layout #3 image 21

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

Wordpress Layout #3 image 22

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

Wordpress Layout #3 image 23

Wordpress Layout #3 image 24

Wordpress Layout #3 image 25

Your end result should look something like this.

Wordpress Layout #3 Tutorial: Final Result



Author's URL: Hv-Designs.co.uk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Wordpress Layout #3"

Only registered users can write comment

No comments yet...