Wordpress Mockup Layout
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.
Responses to “Wordpress Mockup Layout”
Trackbacks
- This Is Danno! » Blog Archive » Theme 3
- 15 Tutorials over het maken van je eigen website |
- 60 Photoshop Web Tasar?m Dersi | Bumena : "?nternetin Türkçe" si ,Teknoloji ve Web Dünyas?ndaki Özgün Bilgi Kayna??n?z
- 35???Photoshop????????? | ????
Leave a reply
-
Copyright
This work by Richard Carpenter is licensed under a Creative Commons Attribution-No Derivative Works 2.0 UK: England & Wales License
thanks for your tutorials!
dude that’s awesome!
You should make a tutorial on how to code it for wordpress aswell.
i did start too, but there is so much explaining to do
Awesome content, as usual…You rock, buddy
You gotta make a
video explaining step by
step because i started and got
confused
more detailed pls
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.
try sb-designs.co.uk
Great looking design. Nice tut too. Thanks.
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.
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
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.
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
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 …
Having trouble making the “white” inner glow part. Can someone provide me with the steps?
Your Designer Nice….great…design…
Ashok…
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.
Alex
Thank you for your website
I made with photoshop backgrounds for myspace or youtube and even more
my backgrounds:http://tinyurl.com/5ajonc
all the best and thank you again!
great tutorial! do you have a tutorial on how to code this into wordpress?
Nice post man i just signed up to flickr to!
Keep up the good work!