Yana: Learn How to Create an Awesome WordPress Blog News Theme

Posted in Tutorials, Web Interface • Posted on 12 Comments

Let’s say that it’s your first time creating a news blog template and you don’t have any idea what and how to do it. Well, this tutorial will help you create a WordPress blog news theme in Adobe Photoshop. The theme will include a header section, a slider that will contain featured posts, recent news, display posts by category, sidebar, and widgets. If you’re really a beginner you can read and follow the step by step instructions, but if you’re not, maybe you’ll get some ideas from this tutorial. So let’s get started.

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

Step 1: Setting up the Document

Start by creating a 1200px x 1700px document in Photoshop.

Ruler Tool is very useful for this tutorial make sure that rulers and guides is turned on.

  • Rulers: Ctrl + R
  • Guides: Ctrl + ;

Also one thing important in using Ruler Tool is the Info (Information) Panel. The use of this is when you are measuring using the ruler the information will be shown in the information panel. Make sure that this is shown in your panels at the right. If it is not shown you can access this by going to Windows – Info.

The total width of your site will be 960px. So, let’s create our 1st guide by going to View – New Guide, set the value to 120px. Repeat the step of create a guide but now change the value to 1080px, this will make a total of 960px to the center of our canvas.

Step 2: Working on Background

Start by filling the background layer with #081010. Next, we will create a grid pattern. Create a new document 20px by 20px background transparent.

Using Pencil Tool with a fill color of #ffffff create a pattern as shown in the screenshot below.

To create a pattern go to Edit – Define Pattern. Now that we have created the pattern using Paint Bucket Tool and set it to Pattern, choose the pattern we have created and fill it to the canvas. Make sure that it is in a new layer.

After filling the pattern set the layer mode to Soft Light and set the Opacity to 50%.

Step 3: Working on Header

The header section will contain a Logo, Navigation, and Search bar. To make it organize create 3 folders for us to place the layers for logo, navigation, and search bar. To start we will make a base shape to hold all the elements in our header. Using Rectangle Tool create a 960px by 50px rectangle. Any color will do because we will be applying layer styles on it.

Apply this Blending Option

  • Gradient Overlay: #353535, #505050

  • Stroke: #081010

Logo

Font I used is Helvetica Black 24pt.

Apply this Blending Option

  • Drop Shadow: #000000

  • Gradient Overlay: #92b4b5, #ffffff

Navigation

Navigation will contain links and dividers. Links will have a distance of 18px left and right from the dividers. Navigation start 208px from the logo. Measure it using Ruler Tool.

Using Rectangular Marquee Tool create a 1px selection starting from the said distance. Now, select Gradient Tool foreground to transparent, set the foreground color to #4f4f4f, and lastly start filling the selection starting from bottom to top.

Using Line Tool create another 1px line with a fill color of #081010.

As I said earlier links will be 18px distance from the dividers. For the links I used Helvetica Roman 14pt.

Notice at the screenshot above every dividers and links I distanced it 18px. Just repeat until you finish the navigation. Navigation links will contain world, business, sports, tech, web, science. When you’re done. Duplicate the Text, make the original text color #1b1b1b and move it 1px above.

The remaining space will be for our Search Bar.

Search Bar

To start select Rounded Rectangle Tool set the Radius to 20px, create a shape as shown in the screenshot below with a fill color of #363636.

Apply this Blending Option

  • Inner Shadow: #4f4f4f

  • Drop Shadow: #000000

Last step, add the Search Icon, resize it and place it as shown in the screenshot below.

Step 4: Working on Slider

The slider will cotain Image preview, thumbnails, title, content, read more button, and slider controls. First we will create our base shape to hold all the content. Using Rectangle Tool with a fill color of #e1eaea create a shape 620px by 1305px.

We will add a noise to our base layer. To do this, go to Filter – Convert to Smart Filter, go to Filter – Noise – Add Noise – 1

Grab some sample pictures the sizes will be 300px by 200px for the image preview and 60px by 60px for the thumbnails. Place it as shown in the screenshot below.

Apply this Blending Option

  • Stroke: #4e4e4e


Now that we have our image preview and thumbnails we will add title heading, content and read more button. Add heading and content first using Text Tool.

For our read more button select first the Rectangle Tool and create a 80px by 25px shape, place it as shown in the screenshot below.

Using Pencil Tool create an arrow and place it as shown in the screenshot below. Make sure that it is on a separate layer.

We will mask the arrow that we have created to the Rectangle shape that we made. Make a selection to the arrow layer, while it is selected Inverse the selection Ctrl + Shift + I and select the Rectangle layer and click the Mask Icon beside the FX Icon. When you’re done hide the arrow layer or delete it.

Change the rectangle color to #fea702

Apply this Blending Option

  • Drop Shadow: #000000

  • Inner Shadow: #ffffff

Using Text Tool with a size of 12pt Helvetica Roman #ffffff add a read more text and place it on the center. When you’re done duplicate the shape and move 1px to the top, change the color to #cb8500.

Last thing we need to do is add a divider. Just simply use Text Tool and press the key beside 0. Make the fill color #4e4e4e, duplicate the text layer and make the original layer to #ffffff.

Step 5: Working on Latest News

Latest news section will contain a featured image, a categories, ribbon, post title, content, and read more button. To start using Text Tool add a Latest News text 40px below the divider. Text format will be Helvetica Roman 18pt #141e1e. Next, grab a sample image 275px by 120px. Place it as shown in the screenshot below.

Using Rectangle Tool create a 100px by 15px #fea702. Next, using Text Tool font Helvetica Roman 8pt #ffffff place the text in the center of the shape.

Apply this Blending Option

  • Inner Shadow: #ffffff

Duplicate the text layer and make the original layer color #c88300 then, move the text 1px upward. Select all the layers that we have just made and press Ctrl + T to transform, transform it 45 deg and place it as shown in the screenshot below.

Make a selection of the preview image, select the rectangle shape layer and press the mask icon. You will have something that looks like in the screenshot below.

Using Text Tool add post title, content, and post categories.

Make a duplicate of read more button and place it 15px below the content.

Group all the layers we have made, name it post. Duplicate a copy of it and move it to the right with a distance of 30px. I change the color ribbon to #8170e8 and change the text label.

Step 6: Working on Categories Posts

In here text is the same as we did in recent news. Grab a 60px by 60px shape for our image preview and place it as shown in the screenshot below. Also using Text Tool add a text for category name.

Using Text Tool add the post tile, posted by, and number of comments. Color and font used is the same as we did in latest news.

Group all the layers we have created and duplicate a copy of it and place it as shown in the screenshot below.

Group all including the category title. Duplicate it 3 times place it as shown in the screenshot below.

Step 7: Working on Sidebar


Sidebar will contain social links, about widget, tabs, and advertisement. Let’s work first in our base layer, select Rectangle Tool and create a shape with a fill color of #353535. Repeat the step on how we did our base layer in content area using smart filter and noise.

Social Links

Using Rectangle Tool with a fill color of #4e4e4e, create a shape 340px by 50px.

Using Line Tool create a 1px line as shown in the screenshot below.

Using Text Tool add a Follow us on text. Font used Helvetica Roman 18pt #ffffff.

Open up the social icons you have downloaded and place it accordingly as shown in the screenshot below. Just resize it using Transform Ctrl + T, I also added a 1px drop shadow.

About Us Widget

About widget will contain a thumbnail picture, header, content, and read more button. First you will need to create the base layer with the same fill color on social icons base, the size will be 340px by 210px. When you’re done place the header text with the same text format.

Using Rectangle Tool with a fill color of #121b1b create a 90px by 90px shape. Place it as shown in the screenshot below.

Using Text Tool add a dummy text with a fill color of #cccccc. Text should have 1px drop shadow the same on our header. Also, grab a copy of read more button. Change the fill color to #616161 and place it as shown in the screenshot below.

Tabs

Our tabs will contain Most Recent posts and Most Popular. To start using Rectangle Tool create a 125px by 50px shape. Label it with text Most Recent using Text Tool font will be Helvetica Roman 14pt #ffffff also, apply a 1px drop shadow. Duplicate the two layers and change the text label to Most Popular.

For the Most Recent base shape apply this blending option.

  • Gradient Overlay: #4f4f4f, #141e1e

For the Most Popular base shape apply this blending option.

  • Gradient Overlay: #353535, #505050


We will create a base layer to hold all the posts for our most recent tab. Using Rectangle Tool with a fill color of #4f4f4f create 302px by 435px shape.

Grab a copy of the posts we did in categories area. Place it as shown in the screenshot below.

Using Line Tool add 1px line as shown in the screenshot below.

Advertisement

Just grab a sample 125px by 125px advertisement and palce it as shown in the screenshot below.

Step 8: Working on Footer


Footer will contain twitter feed, about widget, flickr widget, and top comments. To start we will create the base layer to hold all the elements that will put in our footer area. Footer base layer is the same with sidebar base layer. Just repeat the step, the size will be 960px by 345px.

Twitter Feed


Using Rectangle Tool create a box.

Apply this Blending Option

  • Gradient Overlay: #353535, #505050

Select Text Tool set the font to Arial Regular – Italic 12pt #c7c7c7. Also, apply a 1px dropshadow.

Grab some Twitter follow icon place it as shown in the screenshot below. Also, using Text Tool add a Twitter profile url and total number of followers.

Last step will be adding 1px lines using Line Tool. Line color will be the same in our sidebar.

About Widget

Just grab a copy of about widget we did on the sidebar area and place it as shown in the screenshot.

Flickr Widget

Just grab a sample picture size 40px by 40px and place it as shown in the screenshot below.

Top Comments

Just grab a 2 copy of post and a divider we did in our tab most popular. Place it as shown in the screenshot.

Duplicate twice the divider and place it as shown in the screenshot below.

Lastly let’s add our copyright text.

Finally we have finished our WordPress news blog template. I hope you find this tutorial helpful. If you have questions and suggestions just drop it below. Please share, tweet and subscirbe. Cheers all! :)

37 Written ArticlesWebsiteGoogle+

Michael is a Web & Graphic designer based in Philippines. He started designing during his teenage years and most of his skills and knowledge are self taught. He's dating with Photoshop for about 4 years now and been flirting with HTML & CSS from 2011 to present. See his works at burnstudio. Other than that he loves Coffee and his Girl.

12 Comments Best Comments First
  • Lorelle

    Saturday, October 8th, 2011 20:04

    9

    Interesting step by step use of PHOTOSHOP not WordPress. While it does focus on how to style WordPress elements in Photoshop, it doesn’t take the next most important step: taking the reader from Photoshop to WordPress.

    Could you please include links and references for the next step as that is the part that stymies so many. It will seriously enhance the quality of the tutorials if they help people follow through. Thanks!

    +1
  • Stanley

    Wednesday, October 5th, 2011 12:40

    2

    Very detail tutorial. The theme is also looking very cool. Thanks

    0
  • carrie

    Wednesday, October 5th, 2011 15:50

    5

    Excellent, never a tutorial so detailed to create a web layout, especially for wordpress theme. Bookmarked for future reference

    0
  • Ryan

    Wednesday, October 5th, 2011 15:23

    1

    This tutorial was terrific! Honestly, I thought that creating a news blog would be a lot more complicated and difficult. This is a great way to constantly be up to date and increase your crawl rate on a site. Thanks for everything, you made this an easy process.

    0
  • Pablo

    Wednesday, October 5th, 2011 20:45

    4

    Wow an amazing post! Very complete

    0
  • Kathlend

    Wednesday, October 5th, 2011 14:36

    3

    Very inspiring, but to say it takes a lot of work to achieve something like that

    0
  • Simon W. Jackson

    Wednesday, October 5th, 2011 16:27

    6

    Is it just me, or does this tutorial seems a bit unpolished

    0
  • Trent

    Wednesday, October 5th, 2011 21:29

    7

    Hi Dainis
    I need your help about “all in one seo pack” :
    Post Title Format: ?
    Page Title Format: ?
    Category Title Format: ?
    Archive Title Format: ?
    Tag Title Format: ?
    Search Title Format: ?
    Description Format: ?
    404 Title Format: ?
    Paged Format: ?
    SEO for Custom Post Types: yes or no? if yes page or post ?
    Use Categories for META keywords: yes or no?
    Use Tags for META keywords: yes or no?
    Dynamically Generate Keywords for Posts Page: yes or no?
    Use noindex for Categories: yes or no?
    Use noindex for Archives: yes or no?
    Use noindex for Tag Archives: yes or no?
    Autogenerate Descriptions: yes or no?
    Capitalize Category Titles: yes or no?
    Exclude Pages: ?
    Additional Post Headers: ?
    Additional Page Headers: ?
    Additional Home Headers: ?
    please help me.
    Thanks

    0
    • Rean John Uehara

      Thursday, October 6th, 2011 05:32

      8

      I believe you are talking to the wrong person. :D

      0
  • Captain Aslam

    Friday, May 11th, 2012 16:47

    12

    Woh! Great… I`m Try To Create A WordPress Theme. If Possible, Please Give Me A Photoshop Project File To Help Me For Create A Theme.

    0
  • Jitendra Kumar

    Friday, December 30th, 2011 18:57

    11

    Hi there,

    Enjoyed the article. you have explained the entire thing so well that it becomes so easy to create a WP theme. I am just curious to know why you chose the document size 1200px x 1700px. Is it to suit 1280 X 800 resolution. Can you suggest the possible document sizes for different resolution and the guidelines behind choosing such dimensions?

    Thanks a ton,
    Jitendra

    0
  • Mustafaid

    Thursday, December 29th, 2011 16:11

    10

    Great Tutorial , Now i can create WP Themes .. Thanks a lot..

    0
  • Captain Aslam

    Friday, May 11th, 2012 16:47

    12

    Woh! Great… I`m Try To Create A WordPress Theme. If Possible, Please Give Me A Photoshop Project File To Help Me For Create A Theme.

    0
  • Jitendra Kumar

    Friday, December 30th, 2011 18:57

    11

    Hi there,

    Enjoyed the article. you have explained the entire thing so well that it becomes so easy to create a WP theme. I am just curious to know why you chose the document size 1200px x 1700px. Is it to suit 1280 X 800 resolution. Can you suggest the possible document sizes for different resolution and the guidelines behind choosing such dimensions?

    Thanks a ton,
    Jitendra

    0
  • Mustafaid

    Thursday, December 29th, 2011 16:11

    10

    Great Tutorial , Now i can create WP Themes .. Thanks a lot..

    0
  • Lorelle

    Saturday, October 8th, 2011 20:04

    9

    Interesting step by step use of PHOTOSHOP not WordPress. While it does focus on how to style WordPress elements in Photoshop, it doesn’t take the next most important step: taking the reader from Photoshop to WordPress.

    Could you please include links and references for the next step as that is the part that stymies so many. It will seriously enhance the quality of the tutorials if they help people follow through. Thanks!

    +1
  • Trent

    Wednesday, October 5th, 2011 21:29

    7

    Hi Dainis
    I need your help about “all in one seo pack” :
    Post Title Format: ?
    Page Title Format: ?
    Category Title Format: ?
    Archive Title Format: ?
    Tag Title Format: ?
    Search Title Format: ?
    Description Format: ?
    404 Title Format: ?
    Paged Format: ?
    SEO for Custom Post Types: yes or no? if yes page or post ?
    Use Categories for META keywords: yes or no?
    Use Tags for META keywords: yes or no?
    Dynamically Generate Keywords for Posts Page: yes or no?
    Use noindex for Categories: yes or no?
    Use noindex for Archives: yes or no?
    Use noindex for Tag Archives: yes or no?
    Autogenerate Descriptions: yes or no?
    Capitalize Category Titles: yes or no?
    Exclude Pages: ?
    Additional Post Headers: ?
    Additional Page Headers: ?
    Additional Home Headers: ?
    please help me.
    Thanks

    0
    • Rean John Uehara

      Thursday, October 6th, 2011 05:32

      8

      I believe you are talking to the wrong person. :D

      0
  • Simon W. Jackson

    Wednesday, October 5th, 2011 16:27

    6

    Is it just me, or does this tutorial seems a bit unpolished

    0
  • carrie

    Wednesday, October 5th, 2011 15:50

    5

    Excellent, never a tutorial so detailed to create a web layout, especially for wordpress theme. Bookmarked for future reference

    0
  • Pablo

    Wednesday, October 5th, 2011 20:45

    4

    Wow an amazing post! Very complete

    0
  • Kathlend

    Wednesday, October 5th, 2011 14:36

    3

    Very inspiring, but to say it takes a lot of work to achieve something like that

    0
  • Stanley

    Wednesday, October 5th, 2011 12:40

    2

    Very detail tutorial. The theme is also looking very cool. Thanks

    0
  • Ryan

    Wednesday, October 5th, 2011 15:23

    1

    This tutorial was terrific! Honestly, I thought that creating a news blog would be a lot more complicated and difficult. This is a great way to constantly be up to date and increase your crawl rate on a site. Thanks for everything, you made this an easy process.

    0

Comments are closed.

54.161.247.22 - unknown - unknown - US