Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create a Blue Blog Layout in Photoshop

Create a Blue Blog Layout in Photoshop


Step 1

Create a new document with the size 1000px by 930px and fill the background with the color #bcdbe9. Double-click on the background layer to unlock it, double-click on it again to open the Layer Style window and use the settings from the following image.

image 1

Step 2

Use the Rectangle Tool (U) to create a big white rectangle. Double-click on this layer and use the settings from the following image. Name this layer "content bg."

image 2

Step 3

Use the Rectangle Tool (U) and the color #d6dde1 to create a rectangle which will be the background for our sidebar. Name this layer "sidebar bg" and use the same layer style settings which you have used at the previous step.

image 3

Step 4

Use the Type Tool (T) and the color #58656b to write the name of your layout. Double-click on this layer and use the settings from the following image.

image 4

Step 5

Create a new group and name it "navigation." Select the Type Tool (T) and write the name for your navigation menu items. Then use the Line Tool (U) and the color #dde4e7 to create a horizontal line with the height of 1px at the bottom of your navigation.

image 5

Step 6

Download this set of icons, open the "rss", "email" and "twitter" icons in Photoshop and move them into your layout using the Move Tool (V). Group these layers and name the group "subscribe."

image 6

Step 7

Create a new group and name it "sidebar." Then select the Type Tool (T) and write the content of your sidebar. You can also use the Rectangle Tool (U) to create a search bar like I did.

image 7

Step 8

Create a new group and name it "content." Then select the Type Tool (T) and write the content of your layout.

image 8

Step 9

You can also add some images to your layout.

image 9

Step 10

Create a new group and name it "footer." Then use the Type Tool (T) to write again the name of your navigation menu items and you can also add a copyright statement.

image 10

Final Result

Create a Blue Blog Layout in Photoshop



Author's URL: amitk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Create a Blue Blog Layout in Photoshop"

Captcha