Create a Newspaper Blog Layout Tutorial Using Photoshop

In this tutorial We will show you how to design a newspaper blog layout tutorial in Adobe Photoshop. We are sharing some really useful techniques in this whole training, where you can learn how to create and which standard may we must follow for create Newspaper Blog website design, during this tutorial you will also know how to create shapes with specific sizes. we really like to share all these necessary tool tips with you and you may download free source file too of this final result and can use in your personal and commercial use.

Hope you will leave your comments on this and also can share your suggestion on it, that will be appreciated.

Step 1: New Canvas

So first we’ll start a new document, this canvas is 1200px wide x 1400px high. Next we fill the background layer with a white color – #ffffff.

Step 2: Gradient Fill

Go to Layer > New Fill Layer > Gradient and use the settings from the following image.

Step 3:Creative Content Area

Then select the Rectangle Tool (Press U) and create a rectangle with (wide 990px high 1400px). Use the color #f4f4f4 for this rectangle. Name this layer “bg”, double-click on it and use the settings from the following image. For Stroke I used the color #cdcdcd.

Step 4: Create Top Navigation Bar

Now we will create the navigation bar. Create a new group (Layer > New > Group) and name it “navigation”. Then select the Rectangle Tool (Press U) and create a rectangle with the dimensions 960px by 40px at the top of your layout using the color #0f73a0. You can use guides to help you create this shape. Name this layer “navigation”, double-click on it and use the settings from the following image. For Stroke I used the color #085b81.

Step 5: Adding Top Links

Select the Type Tool (Press T) and write the name for your navigation menu items. I used the color #ffffff and the font Myriad Pro. we also need to create an search box for new search with an Rectangle Tool (U) and create a rectangle with the dimensions 245px by 23px at the top of your layout using font color #0f73a0 and also putting one search icon.

Step 6: Company Title/Company Logo

Select the Type Tool (Press T) and write the name of your layout underneath the navigation bar. I used the font Myriad Pro and the color #2f2f2f. Activate the guides and arrange your text as you see in the following image. Then double-click on the text layer and use the settings form the image below.

Step 6-II: Top Advertisement Banner Placement

We must create an top premium place for banner advertisement, Then select the Rectangle Tool (Press U) and create a rectangle with the dimensions 468px by 60px at the top right parallel of company logo as you can see in below image:

Step 7: Create Main Categories

Create a new group (folder) with name of “Categories”. Then select the Rectangle Tool (U) and create a rectangle with the dimensions 275px by 365px and the color #bfe5f5. Name this layer “bg”, double-click on it and use the settings from the following image. For Stroke I used the color #8ccae4. Put this rectangle in the left hand side of the web layout, underneath the layout’s name.

Step 8: Add Category Links and Related Icons

Select the Type Tool (Press T) and write the name of your categories. You can also add an icon from famous resources i.e icons set in front of each category name.

Now we creating separators between Main Categories, Let Start with Line Tool (Press U), set the weight to 1px, hold down the Shift key and create a horizontal line under category names using the color #a4d6eb. Duplicate this layer (Press Ctrl + J), and use the Move Tool (Press V) to move this line between the next two category names.

Step 9: Featured News Section

Create a new group and name it “featured”. Then select the Rectangle Tool (U) and create a rectangle with the dimensions 670px by 300px next to the categories list using the color #bfe5f5, and stroke color #8ccae4, with layer name “bg”. Then copy the layer style from the “bg” layer from the “categories” group and paste it to this layer.

Step 10: Feature News Image Holder

Select the Rectangle Tool (U) and create four rectangles like you see in the following image. These represent the areas where the images will be placed. Name each of these layers “image_holder”.

Step 11: Add Facebook Widget

In this social media world we must create a placement for Facebook Widget for get more readers and visitors on our news blog, you can see sample image below:

Step 12: Content Area (News Sections)

Create a new group and name it “content column 1″. Then select the Rectangle Tool (Press U) and create a rectangle with the dimensions 310px by 425px and the color #d9d9d9, we also using same top navigation bar concept in this news section title area Name this layer “bg”, double-click on it and use the settings from the following image.

Step 13: News Section Top Title Area

Select the Rectangle Tool (Press U) and create a rectangle with the dimensions 310px by 425px at the top of the gray rectangle using the color #0f73a0. Name this layer “top bar”, double-click on it and use the settings from the image below. For Stroke I used the color #0c597c.

Step 14: News Section with Images, News Title and Description

Select the Rectangle Tool (Press U), hold down the Shift key and create a square with the dimensions 130px by 80px and add a 1px inner stroke to it using the color #8a8a8a. Select the Type Tool (Press T) and add some text next to the square using the color #000000. I used the font Arial for the News Title and same for the body text.

Step 15: Duplicate News Sections in Top Categories

Add two more content columns just like the first one. Activate the guides to help you arrange the layers.

Step 16: Footer Area

Create a new group with the name of “footer”. Select the Rectangle Tool (Press U) and create a rectangle with the dimensions 965px by 358px and the color #0f729f, and font color #ffffff.

Select the Type Tool (Press T) and add three blocks of text in the footer area using the color #ffffff.

Step 17: Footer Area with Copywriter Statement

Select the Type Tool (Press T) and add a copyright statement at the bottom of your layout using the color #0f729f and the font Arial, in second line you may write your Privacy Statement links and should present in different text color #000000, you may check below result image:

Final Result

Finally below you can see the final result of this beautiful web layout tutorial. Click on the image to see the full-size version, we also sharing our source file for our respected visitors and readers. I hope you enjoyed it and hope you will leave you comments.

This is just one element of traditional media and legibility knowledge that we can use on our blogs or website layout. Newspapers follow set rules for the formatting and layout, their stories to make them easy to read and bloggers need to follow some too. Blog writing and formatting content for the Web is more complex than writing for print because how we read on a computer screen is different to how we read in print and more challenging.

Disclaimer: We get inspiration in all of our stuff whether that will design Articles (related images) or Roundups (all designing stuff, source files, language codes etc...) and we also give the link back from where we get the images, graphics, source files and language codes (we aren’t the magicians to recognize that he’s a real owner or he grab or steal it) because we are not the owner of these content(s). If anybody would like to use any images, graphics, source files and language codes or content which we are also using, his duty is to find the real owner of that images, graphics, source files and language codes to use it according to the license (terms and conditions) of that content. If anybody have desire to modification, edition, deletion and print or any kind of use in that stuff he should find the real owner.