How to create a basic structure of a blog layout in Photoshop

In this tutorial we will show you an overview and give a general idea as to how to design and set up a blog layout for the web. For your convenience, we have divided this tutorial into three parts covering, the basic structure, inserting text and images and adding effects. This first part will give an idea to design menu, choose their place, and insert buttons and option panels in a blog.
Follow this step by step guide to learn how to create a basic structure of a blog layout in Photoshop.


Step # 1 – Fill up the Background

First of all, launch Adobe Photoshop and open up a blank document of “1200×1400” pixels in size. Now click on the “Foreground” color, set it to “d2e9f2” and press the “Alt+Backspace” key on the keyboard to fill the page.

Change the background color

Step # 2 – Create a Main Menu

Once done, select the “Rounded Rectangular” tool from the menu and set its “Radius” to “10 px”. Now choose its “Color” as “adcf4f” and draw a rectangular shape on the top right corner of the page. Rename this layer as “Menu 1”and create a duplicate layer. Select the “Show Transform Controls” option and reduce its height to half of the original. Now combine these layers into a group and rename it to “Menu Green”.

Draw a main menu

Step # 3 – Create a Sub Menu

Once done, select the same “Rounded Rectangular” tool with the “Radius” of “10 px”, choose its “Color” as “fecf2e” and draw a rectangular shape below the previous one.

Draw a sub menu

Step # 4 – Create a Search Box

Now select the “Rectangular” tool, choose its color as “ececec” and draw a small rectangular shape over the right corner of the yellow shape. Rename the “Shape 1” layer as “Main menu”, “Shape 2” as “Search box”, combine them into a group and rename it to “Menu Yellow”.

Draw a search box

Step # 5 – Create a Main Background

Select the “Rectangular” tool, choose its color as “ffffff”, draw a main body of the blog and change the layer name to “Background”.

Draw a main background

Step # 6 – Create a Main Image Holder

Now draw another small rectangular shape by choosing its color as “ececec” at the top left corner of the main page and change the layer name to “Main img”.

Draw a main image holder

Step # 7 – Create an Image Detail Pane

In this step, draw a small rectangular shape by choosing its color as “dae7ec” at the right side of the “Main img” and change the layer name to “Right column”. Draw one more rectangular shape by choosing its color as “abcdda” below previous shapes and change the layer name to “Bottom part”. Now move this layer below other layers and adjust their size accordingly. Once done, combine these layers into a group and rename it to “Main img”.

Draw an image detail pane

Step # 8 – Create Featured Image Holders

Now once again select the “Rectangular” tool, choose its color as “ececec”, draw a square shape and change the layer name to “Img1”. Once drawn, copy this layer and paste it twice below the original one.

Draw featured image holders

Step # 9 – Create Buttons

Once completed, select the “Rounded Rectangular” tool, choose its color as “abcdda” and draw a shape of a button. Change its layer name to “Button 1” and copy it the same way like we did in the previous step. Insert these buttons, once done combine these layers into a group and rename it to “Main blog”.

Draw buttons

Step # 10 – Create a Side Pane

Now select the “Rectangular” tool from the menu and choose its color as “ebf4f7”. After selecting the color, draw a rectangular shape panel at the right corner of the page.

Draw a side pane

Step # 11 – Create Add Spaces

In this step, select the “Rectangular” tool again and change its color to “ececec”. Once done, draw two small rectangular shapes at the top of the side panel. These boxes work as Add Spaces on the web page.

Draw add spaces

Step # 12 – Create Thumbnail Holders

Now draw a small square shape by using the same color at the bottom of the panel, create eight more duplicate layers and arrange them accordingly. Combine these layers into a group, rename it to “Side bar” and your blog consisting of the design menu is complete.

Draw thumbnail holders