Create a design for a blog in Photoshop

Final result:

Lesson resources:

Social Icons

Navigation Icons

Step 1 – Creating a Document
Create a new document with the size of 1200×1850 pixels.

You should see the rulers (Ctrl + R). It is also better to fix them (Ctrl + Alt +;). Go to menu Preview – New Guide (View – New Guide) and create two vertical guides at 120 and 1080 pixels.

Step 2 – Working with the Background
Make a copy of the background layer and fill it with the color # f8f8f8. Next you need to create a pattern. Create a new document with the size of 15×15 pixels, zoom in on the image and create a new layer. Tool Pencil (Pencil Tool) (B) and draw a point on the upper left side of the canvas.

Go to menu Editing – Define a pattern (Edit – Define Pattern), save the pattern as “dotted”. Return to the main document. Create a new layer above the background and select the tool. Fill (Paint Bucket Tool) (G). On the tool settings panel, change the Primary color to Pattern and select the saved “dotted” pattern. Fill the canvas on the new layer and set it to Opacity – 15%. Merge all the layers that we created into the group (select them and press Ctrl + G), name it “Background”.

Tool Rectangle (Rectangle Tool) (U) create a shape 10 pixels high for the entire width of the canvas above. The color of the figure is # 363636.

Step 3 – Logo
We will create such a logo:

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) (U) and create a 38×38 pixel shape with the color # f7941d. Choose a tool Horizontal text (Horizontal Type Tool) (T), font – “Myriad Pro Bold”, size – 36pt., Write the letter “M” and position it as shown below.

Apply to the rectangle layer mask, by clicking on the icon shown below.

Make a selection of the text layer (hold down Ctrl, left-click on the layer thumbnail), then click on the mask of the shape layer and fill the selection with black color.

Choose a text tool, font – “Myriad Pro”. Write two lines:

“Myrad Pro”: Font size – 24pt, Color – # 363636
“Best Choice of font”: Font size – 12pt, Color – # 959595.

Step 4 – Social Icons
Open social icons in Photoshop. Go to the Image Size menu (Ctrl + Alt + I) and enter 19×19 pixels. Drag the icons into our document and drop them into the new Social Icons group. Arrange the icons as shown below.

Step 5 – Navigation
You need to create a small menu:

Create a new group “Navigation”. We need to create rectangles with a stroke. Tool Rectangle (Rectangle Tool) (U) create a shape with a height of 90 pixels. Go to the Layer Styles menu (Layer – Layer Styles) (Layer – Layer Styles) and apply the following styles:

Gradient overlay: # f8f8f8, #fcfcfc.

Stroke: # c2c2c2.

Open the navigation icons and resize them to 22×22 pixels. Create a new group “Icons” inside the group “Navigation”. Insert the modified icons into this group. Arrange the icons and sign them as shown below.

Merge all layers with lines (delimiters) into one (select them and press Ctrl + E). Make a copy of the layer with the lines and move it to the right by 1 pixel.

Step 6 – Search Area
Create a new “Search” group above the “Navigation” group. Tool Rectangle (Rectangle Tool) (U) create a white shape as shown below:

Apply style Stroke: # c2c2c2.

Now create a search button. Tool Rectangular area (Rectangular Marquee Tool) (M) create a selection of 40×35 pixels. Fill it with any color.

Apply the following styles:

Gradient overlay: # f8f8f8, #fcfcfc.

Stroke: #ffffff.

Create a line with color # c2c2c2 and add a 19×19 pixel icon.

Type text “SEARCH HERE” in the search area.

Step 7 – Slider

Choose a tool Rectangle (Rectangle Tool) (U) and create a white shape with a size of 630×340 pixels. Apply the Stroke style: # c2c2c2.

Make a selection with this white rectangle and go to the Selection menu – Modification – Compression (Select – Modify – Contract), enter a value of 10 pixels.

Fill the selection with any color and insert any image of the same size.

Under the white rectangle layer, create a new “Shadow” layer. Tool Pen (Pen Tool) (P) Draw a black shape as shown below.

Go to menu Filter – Blur – Blur Gaussian (Filter – Blur – Gaussian Blur), enter a radius value of 2 pixels. Set the layer Opacity to 40%.

Tool Ellipse (Ellipse Tool) (U) Create 4 circles as shown below. They should be located in the center.

Apply the following styles to circles:

Color overlay: # c2c2c2.

Inner shadow: Mode – Multiplication, Color – # 000000.

Change the color of the active icon to # f7941d.

Step 8 – News
So one news will look like:

Create a new group “Posts”. Tool Rectangle (Rectangle Tool) create a white shape with a size of 630×300 pixels. Apply the Stroke style: # c2c2c2.

Create a 200×200 pixel square using the tool Rectangle (Rectangle Tool) (U). Padding from the edges of the outer rectangle – 20 pixels.

Select a square and apply Compression with a value of 10 pixels.

Fill the selection with any color and place the picture there. With a text tool write the title of the news headline, the author, the date, the text of the news. Font settings are shown below.

Now create the “Read More” button. Create a new “more” group inside the “Posts” group. Tool Rectangle (Rectangle Tool) (U) create a shape of 88×30 pixels. Apply the following layer styles:

External glow: #ffffff.

Gradient overlay: # f1f1f1, # fbf9f9.

Stroke: # c2c2c2

Add “Read more”:

Insert the icons Digg, Facebook and Twitter.

Make a copy of the “Posts” group and drop it 35 pixels down.

Step 9 – Pages
Need to create a navigation through the pages:

Create a new group “Pages”. Tool Rectangle (Rectangle Tool) (U) create a square measuring 26×26 pixels. For inactive pages, apply the Stroke style: # c2c2c2. Apply the same styles to the active page as the “Read more” button (you can just copy them).

Step 10 – Ad Area

Create a new group “Sidebar”. Create an “Advertisement” group inside it. Tool Rectangle (Rectangle Tool) (U) Create a 145×145 pixel square with the color #ebebeb. Set the layer Opacity to 50%.

Select this square and apply Compression with a value of 10 pixels. Fill the selection with white and apply the Stroke style: size – 1 pixel, color – # c2c2c2.

Make three copies of this square and place it as shown below. The distance between them is 10 pixels.

Step 11 – Tabs

Create a new “Tabs” group inside the “Sidebar” group. Tool Rectangle (Rectangle Tool) (U) create a shape with the color #ebebeb 300×500 pixels. Position it 35 pixels below the previous ad area. Install Opacity (Opacity) layer – 50%.

As in step 10, create an inner area of ​​white.

Tools Line (Line Tool) (U) and Horizontal Type Tool (T) create tabs:

Create a new layer below the tabbed layers. Tool Rectangle(Rectangle Tool) (U) Create a shape as shown below.

Apply the Gradient Overlay style to it: # f1f1f1, fbf9f9.

Add news. First insert a picture of 60×60 pixels. Then on the left write the name and everything else.

Merge all news layers into a group (Ctrl + G) and copy it several times. Arrange copies at a distance of 20 pixels from each other.

You can also insert a banner ad 300×300 pixels.

Step 12 – Footer

Create a new group “Footer”. Create a rectangle of 1200×485 pixels in color # 363636.

Now create a new pattern. Create a new 6×6 pixel document. Create a new layer and tool Pencil (Pencil Tool) (B) Draw the pattern shown below with the color # 363636. Save it as we did before.

Return to our document. Tool Rectangular area (Rectangular Marquee Tool) (M) create a selection 3 pixels high for the entire width of the canvas and fill it with the saved pattern.

Create another pattern. Create a new document sized 12×12 pixels. Draw the pattern shown below with the color # 303030. Save it.

In the main document, create a new layer and fill the entire footer with the latest pattern.

In the area of ​​the footer you need to add the latest and most popular news and information about the site. For each area, create a separate group. Write with the text tool first:

Make a copy of the group and change the text and insert pictures:

In the third area there will be some text. You can use “Lorem Ipsum”. I combined all the layers of the logo and applied style to it Color overlay: # 6d6e71.

Tool Rectangle (Rectangle Tool) (U) create a shape 40 pixels high with color # 252525. Then write the text about rights with a text tool in color # 616264.

Final result:

The image in the original size can be viewed here.

Like this post? Please share to your friends: