WordPress Mockup Layout

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.

32 thoughts on “WordPress Mockup Layout”

  1. has anyone actually managed to code this template up yet ? I don’t have the time to do it so I am willing to pay someone for the coding material if they have already done it.

  2. Content hierarchy isn’t really well defined. You could improve this a bit by working on the contrast and deploying a stricter grid. There’s not even a hard-left or hard-right alignment for the eye to comfortably follow.

    The motif is well developed but almost to an extent where it detracts from the important stuff… the content.

  3. pff.. yeah tutorial is good but you should write how to code it to work on wordpress ๐Ÿ˜‰ ok i know, you dont know how to , ok

  4. jaki, that’s hardly appropriate. There are plenty tutorials out there to show how to code a WP design if you do a google on them.

  5. c0o0o0l..
    but iv got a question..that post thing, do we have to post by going to photoshop all the time and adding text?that is after coding and installing the template
    LOL this mayb a stupid question

  6. Slick – very slick.

    And honestly, if you know a bit of WP you can easily code for it … even if you take the general hub bub from the generic Kubrick you should be able to work it out. If not … well .. read some documentation on WP.org and don’t whine about it!

    Great great job .. I got a few new ideas for my stuff here …

  7. Very nice, I always wanted to learn how to make myself WordPress theme as the way I wanted.
    How do you code for this theme? It’s more helpful if you provide that also. Thanks though. I really enjoy your tutorials.


  8. This is a great tut, but I am having some complications one part. The part that’s not working for me for some is, the line next to the buttons.

    I made the line (2) to be exact. Right next to each other.
    I added the layer mask. Have my two shades of gray.
    Click on the Gradient Tool (reflected) and I go across the lines.
    I then add the layer mask (outer Glow)

    but it comes pretty crappy on mine, nothing like it’s suppose to. I even tried this … instead of using the Gradient Tool. I tried doing a Gradient Overlay (style effect) and then added the Outer Glow after; and still nothing. Can anyone help me figure out why it’s not working for me? I would greatly appreciate the help. Thank you

  9. you make two one pixel lines each a different shade of grey. then add a layer mask. your forground color should be white and backgorund color should be black when you add your layer mask. it should automatically changed but sometimes doesnt. once you have white and black, drag your reflected gradient from the bottom half way up the line. it may take a couple of drags to get the right effect, i never get it 1st time. just remember to undo each try.

    then add your layer style. hope this helps

Leave a Reply

Your email address will not be published. Required fields are marked *