WordPress Layout #4 Tutorial

Layout inspired by soh tanaka

Hello welcome to another tutorial by hv-designs, in this tutorial il show you how to create an efficient wordpress mockup layout in photoshop. Please note: The layout is inspired by soh tanaka, the layout must not be replicated in any way shape or form. This tutorial is purly for learning purposes only. Ok lets get started, 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 forground 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 forground 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” ive 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 reconise 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 organisation 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 😉 Im 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, seperate 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 disapear 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.

Thats it all done heres the finished peice. Dont forget to subscribe to our RSS/Twitter.

Layout inspired by soh tanaka

20 thoughts on “WordPress Layout #4 Tutorial”

  1. Pingback: psaddict.com
  2. I love these tutorials.

    I’m finishing up a degree in Networking, but over the last 2 months, I’ve shifted towards more web based work. I enjoy that I can, not only design something and work at it as a piece of art, but I also get to build it afterward. It’s probably cheesy, but it reminds me of helping my dad when he was in construction, conceive an idea and then put it to work.

    Keep up the good work.

  3. Unfortunately the only thing this tutorial has to do with wordpress is the word “wordpress” in it. How can someone use this as backend in real life for daily updates ? Well the idea of the look is absolutely great, but it`s NOT wordpress. No it`s NOT

  4. Are you serious? You took someone’s design and you replicate it, tutorialize it, and try to sell it? What does that say about the credibility of this site?

  5. Administration, now I see you have learned of the regular CSS nimble, could not you have an example of this lesson show how to create the theme of the layout, directly to WordPress. I would be very happy and grateful to you, in advance thank you very much, I will wait for the lesson!

Leave a Reply

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