PS Webpage Design tutorial IV-how to create a professional blog website layout in Photoshop

Pay tribute to the talk-mania website. A year ago, I saw many good web design tutorials on this website. A year later, I looked back to see if there were any new tutorials, And suddenly found that the website could not be opened. The website name may have been changed. Fortunately, I downloaded and saved several tutorials last year. This tutorial is one of them. We also hope to see more websites for PS Web Design Tutorials and more excellent designs.

 

Conventions:

1. The software in this article is Photoshop cs5

2. The original tutorial was in English. On the basis of the re-creation, I cut the Chinese version of the diagram again.

3. Some operations in the original text do not provide parameters. I tested some parameters repeatedly and displayed them in red. Some Incorrect parameters are displayed in red.

For example: (231,), indicating that the coordinates in the upper left corner of the rectangle are (), in width, and 77 in height.

For example: (90,22) indicates that the coordinates in the upper left corner of the rectangle are (90,22 ).

 

In this tutorial I will show you how to create a professional blog web layout in Photoshop.

In this tutorial, I will show you how to create a professional blog website layout in Photoshop.

 

We will use the 960 grid system to create the web layout. Download the archive file from the site, unzip it and open the "960_grid_12_col 2.psd" file from the" Photoshop "folder.

I will use 960 grid system to create a website layout, download this file from the site, decompress the file, and open 960_grid_12_col 2.psdfrom the Photoshop folder.

Since the talk-mania website is no longer accessible and the PSD is actually a location-assisted file, this translation will not be used.

 

Step 1
Increase the size of your document by going to image> canvas size. use the settings from the following image. then select the paint bucket tool (G) and fill the background with the color # f6f0e2.

Step 1

From the menu: Image> canvas size, increase the size of your document. Use the configuration in the figure below, select the paint bucket tool, and add the background color to the document: # f6f0e2

Because PSD is not enabled, this step is used to create a new document with the size: 1200 * 1500px. Use the paint bucket tool to add background color to the document: # f6f0e2

The result is as follows:

 

Step 2
Select the rectangle tool (U) and create a White Rectangle with the width 940px from the top of your document to the bottom. leave a distance of 30px from the bottom edge of your document. name this layer "content BG", double-click on it to open the layer style window and add a 1px stroke using the color # ded6c4.

Step 2

In your document, use the rectangle tool to create a White Rectangle (, 0,) with a width of 940px from the top to the bottom, 20px from the bottom. Name this layer as content BG. Double-click this layer to open the layer Style dialog box. Add a stroke style with a width of 1px and color: # ded6c4

 

 

Step 3-creating the header
Click on the 'create a new group' button from the bottom of the layers panel to create a new group and name it "Header ".
Select the rectangle tool (U) and create a rectangle with the height 10px at the top of your document using the color # aa915c. Name this layer "top bar ".

Step 3-create a header

Click create new group at the bottom of the layer panel to create a new group named "Header.

Create a 10 PX rectangle (,) at the top of the document using the rectangle tool. Color: # aa915c, and name it top bar.

 

Step 4
Select the line tool (u), set the weight to 1px and create a horizontal line at the bottom of the rectangle you created at the previous step using the color #968051. name this layer "1px line ".
Hit Ctrl/CMD + J to duplicate this layer. change the color of the new line to # c3a76a. then select the move tool (V) and hit the up arrow once to move this layer one pixel up.

Step 4

Use the line tool to draw a horizontal line with a width of 1 px at the bottom of the rectangle you just created. Color: #968051. Name 1px line

CTRL + J copy the layer and change the color of the new line to # c3a76a. Select the moving tool and press the up arrow key to move the line up with a pixel.

 

Step 5
Select the rectangle tool (U) and create a rectangle with the height 100px and the color # e8c271 underneath the first rectangle. Name this layer "header BG ".

Under the above rectangle, use the rectangle tool to create a rectangle with a height of PX, color: # e8c271. Name it header BG

 

Step 6
CTRL/CMD-click on the vector mask of the "header BG" layer to select it. then go to layer> New fill layer> gradient. the selection that you made has now been transformed into a mask and the gradient will be visible only over the header.
Use the settings from the following image for the gradient fill layer and move the gradient in the left side of the header (to move the gradient, click on the image and drag the cursor white the gradient fill window is opened ). set the blend mode of this layer to overlay 20%.

Step 6

CTRL + Click the header BG layer to select it. Click layer> New fill layer> gradient. The selected area is converted to a mask, so that the linear gradient can only be visible in the header area.

For the gradient fill parameter, refer to the following image, and move the gradient layer to the left of the header area (when moving the gradient layer, click the layer, and pay attention to the white cursor when dragging ), set the opacity of the layer to 20%

 

Step 7
Select the line tool (U) and create two lines with the weight 1px at the bottom of the header. Use the color # f4d48f for the first line and # c6a661 for the second one.

Step 7

Use the line tool to create two horizontal lines with a width of 1 px at the bottom of the header area. Color of the first line: # f4d48f; color of the second line: # c6a661

 

Step 8
Select the type tool (T) and write the name of your web layout in the left side of the header using the color # f6eedd and the font myriad pro bold italic.
Activate the guides to help you position this text layer correctly.
Double-click on this layer to open the layer style window and use the settings from the following image. I used the color #8e7849 for drop shadow.

Step 8

On the left side of the header area of your website layout, use a text tool book to write your website name. Color: # f6eedd. Font: myriad pro, in bold italic.

Activate your guides to help you locate your text layers correctly.

Double-click your text layer, open the layer Style dialog box, and set the Projection Color to #8e7849 according to the settings parameter.

 

 

Step 9-creating the navigation bar
Create a new group and name it "navigation ". select the rounded rectangle tool (U) and create a rounded rectangle with the dimensions 550px by 50px and the color # e9d09b. name this layer "navbar" and use the move tool (v) to move it in the right side of your layout at 10px underneath the header. I used the color # cdbd9b for drop shadow.

Step 9-create a navigation bar

Create a new group named navigation. Use the rounded rectangle tool to create a rounded rectangle (, 70) with the size: 550px * 50px, color: # e9d09b, named navbar. Use the mobile tool to move it to the right of the document, the bottom edge is 10 PX below the header area. Add a style and the color of the projection: # cdbd9b

 

 

Step 10
Select the type tool (T) and write the name for your navigation menu items using the color # fffcf4. Add a shadow to your text layers using the settings from the following image.

Step 10

Use a text tool to add the menu in the navigation bar, color: # fffcf4. Add a projection to the text, as shown in:

 

Step 11-creating the featured Area
Create a new group and name it "featured ". then select the rounded rectangle tool (U) and create a rectangle with the dimensions 900px by 280px and the color # d9cdb2. name this layer "featured BG" and move it at a distance of 30px from the bottom edge of the header.

Step 11: create a special region

Create a new group and name it featured. Then, use the rounded rectangle tool to create a rounded rectangle (150,140) with the size of 900px * 280px and color: # d9cdb2. Name this layer featured BG and move it to the position 30px from the bottom side of the header area.

 

Step 12
Select the rectangle tool (U) and create a rectangle inside the big rounded rectangle with the dimensions 600px by 260px and the color # f9f5ed.
Activate the guides to help you create this shape. Then name this layer "image holder ".
Open an image in Photoshop and move it into your web layout document using the move tool (V ). name this layer "image" and put this image over the "image holder" layer. right-click on the "image" layer and select create clipping mask.

Step 12

Use the rectangle tool to create a rectangle (160,150) in the large rounded rectangle. Size: 600px * 260px, color: # f9f5ed

Activate the guides to help you create the rectangle you just created. Name this layer image holder.

Open an image in PS and use a mobile tool to move it to your webpage layout. Name this layer as image and move it to the top of the layer image holder. Right-click the image layer and choose create clipboard.

 

Step 13
Now we will create two arrows for the featured area. select the rounded rectangle tool (U) and create a small rounded rectangle with the color # d9cdb2. double-click on this layer to open the layer style window and use the settings from the following image. for the stroke I used the color # aaa18c. name this layer "rounded rectangle ".

Step 13

Now we need to create two arrows in the feature area. Select the rounded rectangle tool to create a small rounded rectangle Tool(710,260, 60, 40), Color: # d9cdb2. Double-click this layer to open the layer style window. Set the stroke color as follows: # aaa18c. Name this layer rounded rectangle

 

Step 14
Select the custom shape tool (U) and create an arrow shape inside the rounded rectangle using the color # e8e0c8. Duplicate this arrow and move the new one to the left.
Select the "rounded rectangle" layer and the two arrow layers and hit Ctrl/CMD + G to put them inside a group. Name the group "right arrow ".

Step 14

Select the custom shape tool to create an arrow shape in the rounded rectangle, color: # e8e0c8. Copy the arrow and move it to the left

Select the rounded rectangle layer and the two arrow layers. CTRL + G combines them into a group. Name this group as right arrow.

 

Step 15
Use the rectangular marquee tool (m) to select the right side of the small rounded rectangle. make sure that the "right arrow" group is selected, then go to layer> layer mask> hide selection.

Step 15

Use the rectangle selection tool to select the right side of the small rounded rectangle. Make sure the right arrow group is selected, and click layer> layer mask> hide selection.

 

Step 16
Right-click on the "right arrow" layer and select convert to smart object. duplicate this layer (CTRL/CMD + J ). then go to Edit> transform> flip horizontal. name the new layer "left arrow" and move it in the left side of the featured area.

Step 16

Right-click the arrow layer and choose convert to smart object. Copy this layer (CTRL + J ). Click the menu: Edit> change> horizontal flip. Name the new layer left arrow and move it to the left of the feature area.

 

Step 17
Select the rectangle tool (U) and create a rectangle with the size 280px by 260px and the color # f4ecd8. put the rectangle next to the featured image and name this layer "text BG ". double-click on this layer to open the layer style and add a 1px stroke using the color # f8f4ea.

Step 17

Create a rectangle (760,150) with a rectangle size of 280px * 260px and color: # f4ecd8. The rectangle is placed on the right of the image in the special area and named as text BG. Double-click the layer to open the layer style and add a 1 px stroke. Stroke color: # f8f4ea

 

Step 18
CTRL/CMD-click on the vector mask of the "text BG" layer to select the rectangle. then go to layer> New fill layer> gradient and use the settings from the following image. I used a # 362d1a-to-transparent gradient. while the gradient fill window is opened, click on the image and move the gradient in the left side of the rectangle. then set the opacity of this layer to 10%.

Step 18

CTRL + Click the text BG layer to select a rectangle. Click the menu: layer> New fill layer> gradient, and then follow the settings parameters. In the linear gradient, set the color to # 362d1a to transparent. When the gradient fill window is opened, click the gradient to move to the left of the rectangle. Set the opacity to 10%.

 

Step 19
Create two vertical lines in the left side of the rectangle. Use the color # c7bca0 for the first line and # fffdf7 for the second one.

Step 19

Create two vertical lines on the left of the rectangle, the color of the first line: # c7bca0, the color of the second line: # fffdf7

 

Step 20
Select the type tool (T) and add some text for the featured area using the color #6e6758 and the font Helvetica.

Step 20

Add some text in the special area with the text tool, color: #6e6758, Font: Helvetica (this translation is replaced by verdana font)

 

Step 21
Select the line tool (U) and create a horizontal line underneath the featured area using the color # e7e1d5.

Step 21

Use the line tool to create a horizontal line (150,445,900, 1) below the special area, color: # e7e1d5

 

Step 22-creating the content area
Create a new group and name it "content ". then select the rectangle tool (u), hold down the Shift key and create a square with the size 200px by 200px and the color # d9cdb2. name this layer "image holder", double-click on it and use the settings from the following image to create a double stroke effect. I used the color # f4ecd8 for inner glow and # ada48f for stroke.
Select the type tool (T) and add some text next to the square.

Step 22-create a content area

Create a new group named content. With the rectangle tool, press shift to create a square (150,470) with the size: 200px * 200px, color: # d9cdb2. Name this layer as image holder. Double-click this layer to create a two-color Stroke Effect Based on settings. The color of inner light: # f4ecd8; the color of stroke: # ada48f.

Use a text tool to add some text to the right of a square

 

Step 23
Duplicate the layers that you created at the previous step a couple of times. Use the move tool (v) to move the new layers underneath the original ones.

Step 23

Copy the layer of the previous steps several times, and use a mobile tool to move the new layer to the bottom of the source layer.

 

Step 24-creating the sidebar
Create a new group and name it "sidebar". Select the line tool (U) and create a vertical line next to the blog posts using the color # e7e1d5.

Select the rectangle tool (U) and create a rectangle with the dimensions 270px by 30px and the color # fcf9f4. add a 1px stroke to this rectangle layer using the color # e0dace. name this layer "search bar ". then select the type tool (T) and add the content for your sidebar.

Step 24-create a sidebar

Create a new group named sidebar. Use the line tool to create a vertical line (760,470, 1,675) on the right of the area, color: # e7e1d5.

Create a rectangle (780,500) with the rectangle tool. The size is 270px * 30px and the color is # fcf9f4. Add a stroke of 1px, color: # e0dace. Name this layer as the search bar. Then, use the text tool to add text content in the sidebar.

Step 25-creating the footer area
Create a new group and name it "footer ". then select the rectangle tool (U) and create a rectangle with the height 40px and the color # b3a078 at the bottom of your layout. name this layer "Bottom Bar ". then select the line tool (U) and create a horizontal line at the top of this rectangle using the color #918161.

Step 25-create the bottom area

Create a new group named footer. Then select the rectangle tool to create a rectangle (130,1430, 940,40) with a height of 40 PX at the bottom of the document. Color: # b3a078. Name it Bottom Bar. Create a horizontal line at the top of the rectangle with the straight line tool. Color: #918161

Step 26
Create another rectangle with the height 250px and the color # d8c293. Put this rectangle at the top of the previous one. Name this layer "footer BG ".
Select the line tool (U) and create two lines at the top of this rectangle. Use the color # ece4d1 for the first line and # ada28b for the second one.

Step 26

Create another rectangle (940,250,) with a height of PX. Color: # d8c293. Move the rectangle above the rectangle and name it footer BG.

Use a line tool to create two lines on the top of the rectangle, the first line color: # ece4d1; the second line color: # ada28b

 

Step 27
Use the line tool (u) to create two separators, each containing two lines-one with the color # ece4d1 and the other one with the color # ada28b. put these layers inside a group and name the group "separators ".

Step 27

Use the line tool to create two split lines. Each split line consists of two straight lines. The color of one line is # ece4d1, and the color of the other line is # ada28b. Merge these layers into a group named separators.

The four straight lines from left to right are

(Random, 1200, 1,210), # ece4d1

(441,1200, 1,210), # ada28b

(1,210,), # ece4d1

(1,210,), # ada28b

Step 28
Add a mask to the "separators" group by going to layer> layer mask> reveal all. then select the gradient tool (G) and drag two black to transparent gradients-one at the top of the separators and one at the bottom.

Step 28

Add a mask to the separators group. Click layer> layer mask> show all. Select the gradient tool and drag two black-to-transparent gradient. One is at the top of the split line and the other is at the bottom of the split line.

You don't need to drag the gradient tool twice. You can directly set the gradient tool once, as shown in, and then drag it once.

Step 29
Select the type tool (T) and add some content in the footer of your web layout.

Step 29

Use a text tool to add content in the bottom area.

 

Step 30
Select the type tool (T) and add a copyright statement at the bottom of your layout using the color #867859.

Step 30

Use a text tool to add copyright information at the bottom of your layout. Color: #867859

 

The final product is as follows:

 

TIPS:

This tutorial has two features: one is that the mask is used more often, and the other is the double Stroke Effect (use the inner glow and stroke to simulate the double stroke effect)

I would like to pay tribute to talk-mania and hope to see a website with similar high-quality PS tutorials.