In this tutorial, I will show you how to create a simple and elegant layout for a blog.
Lesson resources:
- Cafe
- PT Serif Font
- Font bentham
Create a new document
Step 1
Create a new document using the settings shown below. (File – New) (File> New). You can create a document of any size. The resolution of the document is 72 pixels.
Step 2
Mark the document using the guides. Add a new guide: (View – New Guide) (View> New Guide). Usually I choose 1000 pixels and add a few guides around the edges so that a small space remains to the edges of the document. When creating this layout, I set the vertical guides: 100px, 285px, 445px, 600px, 605px, 765px, 925px and 1100px.
Note: You can use the GuideGuide plugin to make the process of adding guides faster.
Step 3
Photoshop etiquette service makes it easy to organize the design and easy to edit. Create four groups and name them Header, Content, Sharing and Footer (Layer – New – Group) (Layer > New > Group). To quickly create a group, click here on this icon:
Create an area for the site header
Site header plays a very important role in attracting users. For the layout of this blog, I will use the image of one of the cafes in London.
Step 1
First, create a background for your blog. Inside the “Header” group draw a rectangular shape of any color using the tool Rectangle (Rectangle Tool) 
(U). I drew a rectangle of 1200×600 pixels and placed it at the top of the document.
Transfer the image from the cafe to the document and place it above the layer with the rectangle. I renamed the cafe image layer to IMG. Now hold down the Alt key, click below the photo layer to create a clipping mask.
Thus, the photo will be ideally placed inside the rectangle. Adjust the size of the photo to the size of the rectangle (Ctrl + T).
Note: in order to scale the layer proportionally, hold down the Shift key.
Step 2
We need to make the blog background darker and more neutral. Blur the cafe image using the Gaussian Blur filter. (Filter – Blur – Gaussian Blur) (Filter> Blur> Gaussian Blur). Set the blur radius to 3 pixels. Using a small blur will eliminate the sharp details of the image – thanks to this, blog visitors will focus on the content of the blog.
Create a new layer. (Shift + Ctrl + N) above the photo layer and add a clipping mask to it. Fill the new layer with black and reduce its opacity to 50%. Due to this, the photo will become slightly darker.
Step 3
Now add a logo. Create a new group inside the “Header” group and name it “Logo”. For this lesson, I used a simple, typographical logo. Choose a tool Text 
(Horizontal Type Too) (T) and in a 30-pixel Bentham font, write a title for the blog. Set the spacing between the letters a little more than usual to get an elegant look. Also, write the text in capital letters., Because, they are easier to read.
Apply a layer style to a rectangle layer. Stroke (stroke).
Decrease the parameter Fill for a layer with a rectangle up to 0%. Thus, the fill of the rectangle will not be visible, but only the white stroke around the logo will be visible.
Step 4
Now we will write information about the blog. Tool Text (Horizontal Type) (T) and write in Bentham in small text. I used the Baskerville (Italic) font to write the ampersand, and below I wrote a short sentence in PT Serif (Italic) with a size of 20 pixels. Make sure the test is vertically centered on the image on the header.
Create a content area
Step 1
Let’s start creating an area for the blog text. Choose a tool Text (Horizontal Type Tool) (T) and write the text using a dark color and capital letters. Try not to use black for text, and choose a dark gray color. For this tutorial, I used dark gray (# 444444) and a Bentham font size of 42 pixels. Place this text in the center of the document.
Step 2
Reduce the font size to 14 pixels and write the blog posting date, author name, category name, tags, and other information about the publication.
Step 3
With the tool Text (Horizontal Type Tool) (T) create a text frame (hold down the left mouse button and slide from left to right to create a container for text). The text frame should be between guides 640 pixels wide. The height of this text container depends on the length of the text.
Choose a light gray background color (# 6f6f6f) and a PT Serif font size of 18 pixels, and set the line height to 34 pixels. The line height is usually around 1.5 – 1.9, depending on the font style. You can calculate the height of the line according to this formula. I use the font size of 18 pixels: 18 * 1.8 = 34.2.
Step 4
When creating layouts for a website or blog, you need to think about a dynamic design environment and include buttons for hyperlinks in the layout. Highlight one of the phrases with # e3514e.
Create buttons for social networks
Now create buttons for sharing content between blog readers.
Step 1
Create a new group for the buttons and name it “Sharing”. Tool Rectangle (Rectangle Tool) (U) draw a rectangle between the guides, in my case these are guides, which are set to be 640×54 pixels in size. Right-click on the layer and select Overlay options (Blending Options) and select layer style Stroke (Stroke).
Decrease the parameter Fill up to 0%. Due to this, the shape fill will become invisible, and only the outline will be visible.
Choose a tool Line 
(Line Tool) (U) and set the line width to 1 pixel. draw three vertical lines that will serve as a container for the buttons. Guides help you position the buttons on the layout.
Note: hold key Shift, You can draw straight vertical lines.
Step 3
Choose a tool Text (Horizontal Type Tool) (T) and write the word SHARE, after it, in the other containers write the names of social networks. Place the names of social networks in the center of the containers.
Step 4
Social buttons are drawn, now you need to create add color to one of the buttons – this color will highlight all the buttons when you hover the mouse over them. Tool Rectangle (Rectangle Tool) (U) draw a rectangular shape under the button, using the color that selected the lines with the text to create hyperlinks.
Create a footer
Create a group called “Footer” and inside it draw a rectangle at the bottom of the document. For a rectangle, use the color # 555555 and leave empty space above the figure of 110 pixels.
Step 2
Tool Text (Horizontal Type Tool) (T) write copyright. To create it, I used a PT Serif font with a size of 14 pixels and the color #FFFFFF. Place the copyright text in the center of the footer.
Final image:
