Create a Newspaper Blog Layout Tutorial Using Photoshop

Anupama Rao Posted on 27. Sep, 2010 | Comment in!

• Tweet

• Tweet

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.

• Tweet

• Tweet

Resources Used

Search Icon
http://www.iconfinder.com/icondetails/36563/128/find_green_search_zoom_icon

News Icon
http://www.iconfinder.com/icondetails/50897/128/location_news_icon

Culture News Icon
http://www.istockphoto.com/file_thumbview_approve/10549151/2/istockphoto_10549151-wheat-icon-set.jpg

Business and Finance
http://www.iconfinder.com/icondetails/17220/128/business_coins_money_payment_icon

Sports Icons
http://www.iconfinder.com/icondetails/22984/128/ball_football_soccer_sports_icon

Fashion
http://www.styleally.info/images/Latest%20fashion%20news%20trends.png

Science
http://www.iconfinder.com/icondetails/55540/64/64_applications_gnome_science_icon

Technology
http://www.iconfinder.com/icondetails/45376/128/dog_robot_technology_icon

Gadgets & Mobile Phones
http://www.iconfinder.com/icondetails/35444/128/apple_iphone_icon

Blog
http://www.iconfinder.com/icondetails/37108/128/blog_icon

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.

Resources

News Icon: http://www.iconfinder.com/icondetails/50897/128/location_news_icon
Culture News Icon: http://www.istockphoto.com/file_thumbview_approve/10549151/2/istockphoto_10549151-wheat-icon-set.jpg
Business and Finance: http://www.iconfinder.com/icondetails/17220/128/business_coins_money_payment_icon
Sports Icons: http://www.iconfinder.com/icondetails/22984/128/ball_football_soccer_sports_icon
Fashion: http://www.styleally.info/images/Latest%20fashion%20news%20trends.png
Science: http://www.iconfinder.com/icondetails/55540/64/64_applications_gnome_science_icon
Technology: http://www.iconfinder.com/icondetails/45376/128/dog_robot_technology_icon
Gadgets & Mobile Phones: http://www.iconfinder.com/icondetails/35444/128/apple_iphone_icon
Blog: http://www.iconfinder.com/icondetails/37108/128/blog_icon

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.

Author: Anupama Rao

64 Arcticles posted by Anupama Rao