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

Wordpress Mockup Layout


Create a new document 850x800, fill your background layer with the color #272727. Create a new layer, select the rectangular marquee tool and draw a thin rectangle at the top of you canvas, fill with the color #121212.

image 1

Add your wordpress title and slogan, and any additional information you want in your header.

image 2

Select the elliptical marquee tool and draw 5 white circles all on there own layer.

image 3

Go to "filter > blur > guassian blur" and blur each circle by around 3-4 pixels. Now add this outer glow to each circle.

image 4

Place the circles layers underneath your header rectangle, space them out evenly and place them slightly under your header.

image 5

Underneath your circle layers draw out 5 rectangles using the rounded rectangle tool. Fill each rectangle with the color #1a1a1a.

image 6

Now add your navigational text and some little arrows to complete the button.

image 7

Select the pen tool and two shades of gray draw two 1 pixel lines next to each other about the same height as your button. Duplicate the line and place in between your navigation buttons. Merge all your "line layers" together as one. Add a layer mask to the layer then select the gradient tool with a "reflected gradient", drag the gradient over half of the lines. Now add this layer style.

image 8

You should end up with something like this.

image 9

Select the rectangle tool and draw out 4 content boxes keep each box level and don't move them to far apart, fill them with the color #1e1e1e.

image 10

Add these layer styles to each of your content boxes.

image 11

image 12

Select the rectangle once again and create a big rectangle at the bottom of your canvas, fill with the color #121212, and add a 2pixel black stroke to it.

image 13

Add your footer content to your footer box. My footer contains the same title and slogan as in the header, I've also added some example postable data.

image 14

In your main content box add a small rounded rectangle using the rounded rectangle tool.

image 15

Add these layer styles to your box.

image 16

image 17

This is now our calendar icon and should look something like this.

image 18

Now add your day and date to the icon. Under the month bit add a white rectangle over the top then just make the selection, inverse it and hit delete. Lower the opacity to 10%.

image 19

Now continue to add your content for each box.

image 20

image 21

image 22

image 23

Your final image could look something like this.

Wordpress Mockup Layout



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

Reader's comments
comments kreierul August 08, 2008 says:
ok, after awesome design can you show how to make it a ready template
how to code it to css and the rest till will be ready ? Please you can show that .. learn us please !

Thank you !

Reply
Add comments to "Wordpress Mockup Layout"

Captcha