July 29th, 2008 in Photoshop Tutorials by Richard Carpenter
Wordpress Mockup Layout
29 Votes, Rating: 4.83
Loading ...
Create a new document 850×800, 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.
Add your wordpress title and slogan, and any additional information you want in your header.
Select the elliptical marquee tool and draw 5 white circles all on there own layer.
Goto “filter > blur > guassian blur” and blur each circle by around 3-4 pixels. Now add this outer glow to each circle.
Place the circles layers underneath your header rectangle, space them out evenly and place them slightly under your header.
Underneath your circle layers draw out 5 rectangles using the rounded rectangle tool. Fill each rectangle with the color #1a1a1a.
Now add your navigational text and some little arrows to complete the button.
Select the pen tool and two shades of grey, draw two 1 pixel lines next to each other about the same height as your button. Duplicate the line and place inbetween 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.
You should end up with something like this.
Select the rectangle tool and draw out 4 content boxes keep each box level and dont move them to far apart, fill them with the color #1e1e1e.
Add these layer styles to each of your content boxes.
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.
Add your footer content to your footer box. My footer contains the same title and slogan as in the header, ive also added some example postable data.
In your main content box add a small rounded rectangle using the rounded rectangle tool.
Add these layer styles to your box.
This is now our calender icon and should look something like this.
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%.
Now continue to add your content for each box.
Your final image could look something like this.
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
74 Responses to “Wordpress Mockup Layout”