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.

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

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.

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

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.

the 175px image Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

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

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

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.

the rectangle tool section Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

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.

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

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

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

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

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

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.

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

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:

what we have now Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

Until now,you should have something like this:

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

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:

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

Step 6:Adding the buttons

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

home about contact Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

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

tutorials freebies inspiration subscribe Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

Step 7:My logo

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

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

Now the header is finished.

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

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.

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

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.

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

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.

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

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

adding text to the post Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

Step 10:Social icons.

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

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

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 100x23px.Place it right bottom the post area.Then add the next blending options:

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

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

drop shadow for the button Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

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

The button should look like this one:

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

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

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

The post area is finished.

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

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.

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

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

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

Step 13:Duplicating content

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

preview befor the finish Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

Step 14:Adding categories.

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

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

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.

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

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.

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

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

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

footer text 2 Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

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.

final image preview Design a Magazine style Wordpress layout + Offering the coded theme MagaBlue

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

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

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.

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • Philippine Weddings Forum

    hello nice tutorial hehe can i have the psd and the coded files

  • renae wood

    Great theme! May I please get the PSD files to be able to have a coded theme? Thank you :)

  • Mahmoud

    Hey i don’t want the Theme .. but i want another tutorial designing and coding … Thanks Though Good One !

  • http://www.mybbplus.pro mybb

    thanks for content.

  • med kh

    please , can you send me this theme !

  • Ricardo

    The fiel do input my email address is not visible, i can download de megablue on other location?

  • yudi

    nice tutorial…
    can i get the theme? and also i want to know how to make dotted line in the sidebar (categori)?

  • Alex

    Hi, I would like to have the theme, would you send it to me?
    Thank you for the awesome tut Madalin!

  • http://triontechnologies.org Aman Arora

    The theme is really awesome and clean, I liked it very much and would like to use it on my new blog. Would be great if you can mail me the theme.

  • http://www.jintech.in/ Jyotirmay Intellisen

    yes this is rally great theme, and you did a hard work to create theme and tutorial.

    thanks.

  • Ravi Srinivas R

    Would love to have your theme!

  • EGA

    Great article, hope I’ll get the source code soon.

    Regards EGA

  • Ron Gillen

    Hello, could you please e-mail me the theme, the tutorial was great!

  • http://na Ron Gillen

    Hi please e-mail me the template. Great tutorial!

  • http://nowebsite.yet mnowluck

    Can you please email me the psd and the coded template. Nice work.. TIA

  • http://www.dtilc.com/newsproducts.asp Elwanda Tuma

    Useful to me. njvgojkgf