Design a Magazine style Wordpress layout + Offering the coded theme-MagaBlue

Today I`m offering you something special.A tutorial of a clean and modern wordpress layout + The coded theme of the layout.

In the tutorial we`re gonna create a PSD layout in Photoshop for a clean Magazine style Wordpress theme,which may fits for any type of tasks,from a webdesign blog to a portfolio one and even for a business one.

The coded Wordpress theme is compatible up to 2.8.4 wordpress version and has a modern web typeface.The theme has standard 2 columns layout and is easy to be convertible as you want,as the PSD source of is also included in the package,or just follow the tutorial.

The demo is what you see.My current theme is the same with the theme I`m offering to you.

Have a look!

The tutorial:

Step 1:Download the 960 grid system template.

First step is downloading the 960 grid system template,which is in big lines,a system which allow us to divide the layout in equal columns.I`m using it in all the layouts I create because it has the guides already drawn.You can find it on the 960.gs official website.Unpack the zip file and look for PSD templates. You will see that there are two different types of templates: one is 12_col and the other one is 16_col.We`ll use the one named 12_col because we`ll divide it in 2 parts:the content and the sidebar.The content is twice the sidebar,so we`ll have 3 parts-two for the content and one for the sidebar.

So,open the 960_grid_12_col.psd into Photoshop.

Step 2

You can see that the image has some pink vertical stripes,to evidence those 12 columns,but we want to get rid of them.For this,hide the group named 12_col_grid.

Now we are ready to move on.

Step 3:Creating the header

To create the header,select the Rectangle tool and draw a rectangle at the top of the canvas.Mine is 175px.

After,draw another rectangle of 145px high and fill it with a blue color.

Now select the rectangle tool and set it to paths.Then draw a path of 115px high but leave a top-margin of 30px above.

With the Gradient Tool(G) and a black to transparent gradient,with the opacity of 30%,draw a shadow at the top of the selection.

Now select the Line Tool and draw a 1px line with the same blue color.

Change the white color of the background with a gray one.

Step 4:Creating the top button bar

This step is creating the button bar of the header.So,draw a rectangle at the bottom of the header,over that black area,then add him a gray to white gradient.

Then add two lines:a white line above the button bar and a gray line,darker than the background,at the bottom of the button bar.

If you1re still confused,follow the images.Until now,we draw the next elements:

Until now,you should have something like this:

Step 5:Creating the search bar

Select the Rounded Rectangle Tool,set a radius of 5px and draw a rectangle in the right part of the header.Then add a gray to white gradient and a search icon.I did a search on the internet for one.You may do the same.Place it like in the image:

Step 6:Adding the buttons

With the Type Tool(T),add some text links to the top and bottom of the header.

Step 7:My logo

In this step I added my own logo,a logo created in 1 minute using some blending options.

Now the header is finished.

Step 8:Creating the post

Now I`m gonna show you the steps I took for creating the post.

Select the Rectangle Tool and create a rectangle with the width of 650px.The height may vary,in relation with the content of the post.But as an idea,it`s not bigger than 350px.Give the rectangle a gray color,#cecece.

Now duplicate this layer and give it a gray to white gradient and an inside stroke.The inside stroke is very important in creating the desired effect.You`ll see in the next image what I`m talking about.

Step 9:Adding the thumbnail

Now add a thumbnail.It doesn`t matter which dimensions are.

Then create a fancy outside stroke around the thumbnail image.You may do this by Ctrl+Clicking the thumbnail(selecting the thumbnail) and expand it with 5px (Select->Modify->Expand),then filling the selected area with white color and giving it a black stroke of 1px.

Now add some content to the post.For the small icons,you may go for a search on the internet.

Step 10:Social icons.

Download those Social Icons(link) and add them to our project.I used the 32×32px icons.

Step 11:The “Read More” button

To create a beautiful “Read more” button,select the Rounded Rectangle tool and with a radius of 7px,draw a button of 100×23px.Place it right bottom the post area.Then add the next blending options:

The button should look like this one:

Add some custom shapes,using the Custom Shape Tool,to create a “play” element.

The post area is finished.

Step 12:Sidebar advertisements

Now let`s create the sidebar.First area is the advertising area,situated at the top of the sidebar,to be more visible,obviously.

For this,repeat the step 8 and you should have something like this.

Now add some advertisements.Usually,here comes those of 125×125px.

Step 13:Duplicating content

Now,duplicate two or three times the boxes to have more posts and spaces for the sidebar.

Step 14:Adding categories.

Add some text in the first rectangle to create the Categories.

Step 14:Adding Recent articles

In the last rectangle of the sidebar,add some text to create an area of Recent Articles.For each article,add a small thumbnail with a blue 2-3px stroke.

Step 15:Creating the footer.

Now let`s creating the footer.At the bottom of the image,draw a rectangle with the height of 40px.Add a gradient overlay using a gray color at the top and a lighter gray at the bottom.Then add two more lines at the top of the footer:one dark gray and the other,white.If you didn`t understand till now,you`ll see in the picture what I was speaking about.

Now add some text on the left and right side of the footer to finish the layout.

The result

Now the image is finished.If you followed the tutorial,you should have something like the next image.Is a simple Wordpress theme layout,but it looks great coded,and soon you`ll see something like this on this website.

Click the image for a bigger preview.

I hope you enjoyed the tutorial and if you want to have the coded theme,just enter your name and email in the form below and you`ll receive it,with all the PSD files from all the tutorials created here at OurTuts.

Magablue-Our WP theme

Main features of the theme

• Modern and clean web typeface.
• Tableless design and 100% CSS-based layout.
• 2 columns of fixed width.
• Widget Ready.
• XHTML 1.0 Transitional valid.
• CSS 2.1 valid.
• Delivered with source .PSD file.
• Clean CSS and HTML code.
• Multi-browser compatibility. Tested under Firefox 3 , Safari 2 , Opera and IE7.

Agreements

• A link back must be included in the footer or simply just don’t remove the credits from footer.
• You may not claim intellectual and exclusive ownership to the theme.
• Do not provide the direct download link nor upload “OurTuts Blue Theme” onto other servers for your own share. If you want to spread the words, just link to this article.
• You may use it for your clients’ projects / websites.Unlimited number of projects.

I hope you enjoy the theme and if there are any bugs,contact me and I`ll provide you an improved version.

Enter your name and E-mail below and you`ll receive our WP theme,Magablue.

Our strict privacy policy keeps your email address 100% safe & secure.

G-Lock opt-in manager for bulk email software.