website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Wordpress Mockup Layout
rss

Wordpress Mockup Layout

Author: Hv-Designs.co.uk More by this author


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.

Wordpress Mockup Layout image 1

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

Wordpress Mockup Layout image 2

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

Wordpress Mockup Layout 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.

Wordpress Mockup Layout image 4

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

Wordpress Mockup Layout image 5

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

Wordpress Mockup Layout image 6

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

Wordpress Mockup Layout 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.

Wordpress Mockup Layout image 8

You should end up with something like this.

Wordpress Mockup Layout 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.

Wordpress Mockup Layout image 10

Add these layer styles to each of your content boxes.

Wordpress Mockup Layout image 11

Wordpress Mockup Layout 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.

Wordpress Mockup Layout 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.

Wordpress Mockup Layout image 14

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

Wordpress Mockup Layout image 15

Add these layer styles to your box.

Wordpress Mockup Layout image 16

Wordpress Mockup Layout image 17

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

Wordpress Mockup Layout 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%.

Wordpress Mockup Layout image 19

Now continue to add your content for each box.

Wordpress Mockup Layout image 20

Wordpress Mockup Layout image 21

Wordpress Mockup Layout image 22

Wordpress Mockup Layout image 23

Your final image could look something like this.

Wordpress Mockup Layout Tutorial: Final Result



Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Read/Add comments to "Wordpress Mockup Layout"

comments  kreierul August 08, 2008 says:
Wordpress Mockup Layout
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 !