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 tutorialSearchSocial IconsStep 1: Setting up the DocumentStart 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 + RGuides: 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! :)
Here is what we will be making, click on the image for full preview:
Resources for this tutorialSearchSocial IconsStep 1: Setting up the DocumentStart 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 + RGuides: 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! :)
No comments:
Post a Comment