Create a new document 900 x 1300 pixels fill your background later with the color #0f181f. Select the rectangular marquee tool and create a rectangle the whole width of your canvas and about 70 pixels in height. Set your foreground color to #18222e and background color to #101921. Fill your rectangle with a reflected gradient using the gradient tool. Then add the layer styles below.
You should have something like this.
At the very top of your canvas on top of your rectangle create a 1-2 pixel single line going all the way across the width of your canvas. Fill the line with the color #1d8dcf.
Add your wordpress title and slogan to the left of the rectangle.
Add these layer styles to your website title.
The word "my" (in white) uses the same layer styles, just a different gradient overlay, using a combination of white colors. Add your navigation text on top of the same rectangle, at the start and end of the navigation add two dividers. Also add a state of hover on the navigation bar, do this by using a rounded rectangle with a radius of 10px. Fill the hover with a gradient overlay.
After your last divider add an RSS icon. Your header/navigation should look like this.
Still with the rectangular marquee tool create a bigger rectangle underneath your header/navigation rectangle the height should be about 180-190 pixels. Set foreground to #0576bb and background to #3ea6e5 then drag a linear gradient over the top (make sure selection is still active). You should have something like this.
For this next part you need some "cloud brushes" I've had my cloud brushes for a long time and cant remember where i got them from, but there are loads available on the internet. Add your cloud brushes on top of your bigger rectangle, delete any excess clouds that go over it.
On top of your clouds add a quotation of some sort, or just leave it blank. The layer styles used are the same as the header title layer styles. The drop shadow has been altered a little bit so the text looks more visable.
Now for the sidebar, select the rounded rectangle tool then at the top on the toolbar change the settings to, paths, radius = 10 pixels and then add to path area (+). (OR see image below).
Draw out a small box for our search field, make sure you fill the selection with a color that matches the bottom of the big rectangle mine is #3ea6e5.
Inside the blue box add your search field and button, and maybe a magnifying glass of some sort so people can recognize it as a search box.
Now with the rounded rectangle once again change the radius to 20 pixels. Now create two small boxes either side of your search field box fill them with the same color as the background. You should have some nice rounded corners providing your layer organization skills are up to scratch.
Now the sidebar will pretty much follow the same rule through out, it goes like this, icon, sidebar section name then blue box underneath for content.
The icons used for the sidebar are from dryicons.com, they have a nice collection of icons to use, just remember the credited link. I'm not going to create a major advanced sidebar, just something nice and simple with some nice icons.
Now lets create the footer, duplicate your header/navigation rectangle. Drag it to the bottom of your canvas, press Ctrl+T then drag the bottom anchor tag down to expand it.
The same for your website title and slogan. Drag them down and place in the left corner, use the type tool and add your copyright info.
Still with the type tool mimic the widgets you'd have running in the footer, separate each part with a divider.
Now your footer is in place, lets use the rest of the space for our main wordpress posts. Using the rounded rectangle tool with a radius of 20pixels draw out a rectangle make it quite long as we will be doing some masking in a moment. Fill your rectangle with the color #0b1116 and add a 1 pixel stroke using the color #15222c. Now we need to merge the styles with the layer, create a new layer above your rectangle, HIDE ALL the layers in your layers window apart from the empty one and the rounded rectangle then goto "layer > merge visable" your empty layer an rounded rectangle layer should now be merged into a single layer with the layer styles applied. You cant edit the layer styles at this point. Now add a layer mask to your rectangle then drag a linear gradient over to the top, hopefully the bottom bit of the rounded rectangle should disappear and you should be left with something like this.
Fill your rounded rectangle with your post content.
Duplicate all elements of your post to create more posts. When you've reached your last post add a divider at the bottom with your page numbers.
That's it all done here's the finished piece. Don't forget to subscribe to our RSS/Twitter.
Reply
Reply