PS Webpage Design tutorial X-design a modern blog layout in PS

As the coders, the basis of the artist is weak. We can refer to some mature web page PS tutorials to improve our design capabilities. To apply a sentence, "Three Hundred Tang poems are carefully read, and no poems are written ".

This series of tutorials come from the PS tutorials on the Internet, both of which are foreign and all in English. I try to translate these excellent tutorials. Due to the limited translation capabilities, the translation details are still to be elaborated.

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 ).

4. At the end of the tutorial, I will attach my own experiences. Some are Optimization of some steps in the tutorial.

 

Step 1

After you open the "960_grid_24_col.psd" file in Photoshop, go to image> canvas size and use the settings from the following image to increase the dimensions of our document.

Step 1

Open 960_grid_24_col.psd in PS, click: Image> canvas size, and adjust the document size.

Because 960_grid_24_col.psd is not downloaded, this step is changed to a new document with a size of 1200*1400.

 

Click on the "Create New fill or adjustment layer" button from the bottom of the layers Panel (the half-white-half-black circle ), select solid color and use the color # d2e9f2.

Click the "Create fill or adjust layer" button at the bottom of the layout Panel (half black and half a hundred circles), select solid color, color: # d2e9f2.

 

Step 2

Create a new group (layer> New> group) and name it "top bar ". then select the rectangle tool (U) and create a rectangle at the top of your layout with the height 10px and the color #829ea8. name this layer "top bar ".

Select the line tool (u), set the weight to 1px and create a horizontal line at the bottom of the rectangle which you created earlier using the color # 6b838c. name this layer "1px line ". hit Ctrl/CMD + J to duplicate this layer. change the color of the new line to # a2c2cd, select the move tool (V) and hit the up arrow once to move this layer one pixel up.

Step 2

Create a new group (layer> New> group) named top bar. Then, use the rectangle tool to create a rectangle at the top of the layout, with a height of 10px and color: #829ea8. Name this layer as the top bar.

Use the line tool to set the width to 1 px. Create a horizontal line at the bottom of the rectangle. The color is # 6b838c. Name it 1px line. Click CTRL/CMD + J to copy the layer. Change the new line color to: # a2c2cd, select the move tool and press the up arrow once, move up the layer one pixel

 

Step 3

Use the rectangular marquee tool (m) to create a selection underneath the top rectangle. then create a new layer underneath the "top bar" group, select the gradient tool (G) and drag a black-to-transparent gradient from the top of the selection to the bottom. hit Ctrl/CMD + D to deselect. name this layer "Gradient" and set its blend mode to overlay 50%.

Step 3

Use the rectangle selection tool to create a rectangle selection area (1200,200,) in the lower part of the rectangle (after creating a selection area, click: Select> change selection area, and manually adjust the selection area ). Create a new layer in the lower part of the top bar group, select the gradient tool, and create a black-transparent gradient from the top of the selection area. Press ctrl/CMD + D to cancel the selection. Name this layer gradient, set the blending option to overlay, and opacity to 50%.

 

Step 4

Create a new group underneath the "top bar" group and name it "logo ". select the type tool (T) and write the name of your layout using a bold font (such as "myriad pro black semiextended italic") and the color # c1de5d. double-click on this text layer to open the layer style window and use the settings from the following image.

Activate the guides and put your text layer as you see in the image below.

Step 4

Create a logo group under the top bar group. Use the text tool book to write the name of your layout, use a bold font (like myriad pro black semiextended italic), color: # c1de5d. Double-click this layer to open the layer style window and follow the set Style

Activate the reference line and arrange your text layers. (This step is ignored because there is no reference line)

Text font settings include:

The text layer style is as follows:

 

 

Step 5

Download the lams vector pack and open. AI file in Adobe Illustrator. then use the selection tool (v) to select the green lamp. hit Ctrl/CMD + C to copy it, go back to Photoshop and hit Ctrl/CMD + V to paste it as a smart object. name this layer "lamp" and use free Transform (CTRL/CMD + T) to change its size and move it above the logo. hit Ctrl/CMD + G to put this layer inside a group and name it "lamp ".

Step 5

Download the lams vector pack and open the. aifile in Adobe Illustrator. Select the green light, press Ctrl/CMD + C to copy it, and press Ctrl/CMD + V in PS to paste it as a smart object. Name the layer lamp. use ctrl/+ T to change its size and move it to the top of the logo. Press ctrl/CMD + G to add the layer to the new group and name the new group lamp.

 

Step 6

Select the pen tool (P) and make sure that the "shape layers" button from the option bar above the image is active. set the color to a bright yellow (# fbfcb6) and create a shape like the one you see in the image below. name this layer "light ".

Step 6

Select the pen tool and make sure that the "shape layer" button on the option bar is activated. Set the color to bright yellow (# fbfcb6) to create a shape like the same. Name this layer light.

If you are not used to using the pen tool, follow these steps:

Create a new rectangle (176,110,). Color: # fbfcb6. Name the layer light

Press ctrl/CMD + T to change freely, right-click to select perspective, and drag the control point in the upper left corner to 62px to the right.

 

Right-click on this layer and select convert to smart object. Then go to filter> blur> Gaussian blur and set the radius to 4px.

Right-click the layer and choose convert to smart object. Click filter> blur> Gaussian blur and set the radius to 4px.

 

Add a mask to this layer by clicking on the "add layer mask" button from the bottom of the layers panel. then select the gradient tool (G) and drag a black-to-transparent gradient from the bottom area of the light to the middle area. set the blend mode of this layer to overlay 50%.

Click "add layer mask" at the bottom of the layer panel to add a mask to the layer. Select the gradient tool and drag a black-transparent gradient from the bottom to the center of the light. Sets the blending option to overlay, And the opacity to 50%.

 

Step 7

Create a new group and name it "navigation bar ". then select the rounded rectangle tool (u), set the radius to 4px and create a rounded rectangle with the dimensions between PX by 46px and the color # adcf4f. name this layer "navbar" and put it in the right side of your layout.

Double-click on this layer to open the layer style window and use the settings from the image below.

Step 7

Create a new group navigation bar. Select the rounded rectangle tool and set the radius to 4px. Create a rounded rectangle (755,144) with the size: pixel PX * 46px and color: # adcf4f. Name this layer navbar and move it to the right of the layout.

Double-click the layer to open the layer style window and follow the settings style.

Color of projection: # 95b93b

 

 

Step 8

Hit Ctrl/CMD + J to duplicate the "navbar" group. then go to Edit> free Transform (CTRL/CMD + T), click on the top edge of the Transformation Box and drag it to the middle of the navigation bar. right-click on this layer and select clear layer style. then name this layer "Shine", set its fill to 0%, double-click on it and use the settings from the following image for gradient overlay.

Step 8

Press ctrl/CMD + J to copy the navbar group (it should be a layer ). Click Edit> free Transform (CTRL/CMD + T). Click the top side of the deformation block and drag it to the center of the navgation bar. Right-click the layer and choose clear layer style. Name this layer shine and set Fill to 0%. Double-click the layer to follow the layer style that is set to gradient.

 

 

Step 9

Create a new group and name it "menu items ". select the type tool (T) and write the name for your navigation menu items using the color # f1f5e1. then add a shadow to these text layers using the settings from the following image.

Step 9

Create a new menu items group. Use the text tool to add the text in the navigation menu, color: # f1f5e1. Add a layer style for these text Layers

 

 

Step 10

Download these social media icons. then open some of these icons in Photoshop and move them into your document using the move tool (V ). change the size of these layers if necessary and put them above the navigation bar. group these layers together (CTRL/CMD + G) and name the group "Social Icons ".

Step 10

Download social media icons. Open some icons in PS and use the mobile tool to move to your document. Change these icons to the appropriate size and move them to the top of the navigation bar. Group these groups into one group (CTRL/CMD + G) and name them social icons.

 

 

Step 11

Now we will create the background for the content. create a new group and name it "content BG ". then select the rectangle tool (U) and create a White Rectangle with the dimensions 970px by 1080px. name this layer "content BG" as well.

Select the line tool (U) and create a 1px vertical line over the left edge of the White Rectangle using the color # becdd2. name this layer "1px line ", duplicate it (CTRL/CMD + J) and move the new layer in the right side of the white rectangle.

Add another horizontal line at the top of the White Rectangle using the color # d5ae33.

Step 11

The background of the content block to be created. Create a new group content BG. Select the rectangle tool to create a White Rectangle (115,250) with the size of 970px * 1080px. Name this layer as content BG.

Select the line tool and draw a vertical line (115,250,) of 1px on the left side of the White Rectangle. Color: # becdd2. Name this layer 1px line. Copy this layer (CTRL/CMD + J) and move the new layer to the right of the White Rectangle (1084,250 ).

Add a horizontal line (115,250,970, 1) to the top of the White Rectangle. Color: # d5ae33

 

Step 12

Create a new group underneath the "content BG" layer and name it "categories ". then select the rounded rectangle tool (U) and create a rounded rectangle as you see in the image below using the color # fecf2e. the bottom area of this rounded rectangle shoshould go underneath the big white rectangle. name this layer "BAR ".

Step 12

Create a new group categories under the content BG layer. Then select the rounded rectangle tool, such as creating a rounded rectangle (115,210,970, 46) and setting the style, color: # fecf2e. The bottom of the rounded rectangle is connected to the White Rectangle. Name: This layer is bar

 

 

 

Step 13

Create a new group and name it "category items". Then select the type tool (T) and write the name of some blog categories using the color #735f16.

Step 13

Create a new group category items. Use a text tool to add some blog type text, color: #735f16

 

Step 14

Create a new group and name it "search bar ". select the rectangle tool (U) and create a rectangle in the right hand side of the yellow bar using the color # f4f0e2. name this layer "search bar", double-click on it and add a 1px stroke using the color # c6ba92.

Select the type tool (T) and write the words "type and hit enter to search" inside the rectangle you created using the color # 95916e.

Step 14

Create a search bar group. Select the rectangle tool to create a rectangle (840,218,224, 25) on the right hand side of the yellow rectangle. Color: # f4f0e2. Name this layer as search bar. Double-click this layer to add a 1 px stroke. Color: # c6ba92.

Use the text tool to add the text type and hit enter to search inside the rectangle. Color: # 95916e

 

 

Step 15

Create a new group above the "content BG" group and name it "image slider ". activate the guides, select the rectangle tool (U) and create a rectangle with the dimensions 710 x 300px using any color you want. name this layer "image holder ".

Open an image that you like in Photoshop and move it into your first document using the move tool (V ). make sure that the layer of the image is above the "image holder" layer, right-click on it and select create clipping mask. now your image layer is visible only inside the rectangle you created. name this layer "image ". you can use free Transform (CTRL/CMD + T) to change the size of this layer or rotate it.

Step 15

Create a new image slider group at the top of the content BG Group. Activate reference line, select the rectangle tool to create a rectangle (125,260), size: 710px * 300px, color at will. Name this layer as image holder

Open an image in PS and use a mobile tool to move it to a proper position. Make sure that the image layer is above the image holder layer, right-click the layer and choose create clipping mask. Now, your image layers can only be displayed inside the rectangle. Name this layer as image. You can use ctrl/CMD + T to change the size or rotation.

Note: You can change the background color of the rectangle to # d2e9f2. In this way, the background color will be displayed even if the remaining part of the image is empty.

 

Step 16

Select the rectangle tool (U) and create a rectangle with the dimensions 230px by 300px and the color # dae7ec. name this layer "text BG", double-click on it and use the settings from the following image.

Step 16

Create a rectangle (605,260) with a rectangle size of 230px * 300px and a color of # dae7ec. Name this layer as text BG. Double-click the layer and follow the set Style

 

 

Step 17

Use the line tool (u) to create three lines over the top, right and left edges of your "text BG" rectangle using the color # a1b3bb. then add another vertical line next to the left edge using the color # d7e6ed.

Step 17

Use a straight line tool to draw three straight lines on the top side (605,260,230, 1), left (605,260, 1,300), and right (834,260, 1,300) of the text BG rectangle. Color: # a1b3bb. Add another vertical line to the right of the left line (606,260, 1,300). Color: # d7e6ed

 

Step 18

Select the type tool (T) and add some text inside the blue rectangle using the color #484f52.

Step 18

Add some text in the rectangle with the text tool. Color: #484f52

 

Step 19

Select the rounded rectangle tool (U) and create a rounded rectangle underneath the "image holder" layer using the color # abcdda. name this layer "Bottom Bar", double-click on it and use the settings from the following image. for the drop shadow I used the color #819aa4.

Step 19

Use the rounded rectangle tool to create a rounded rectangle (125,554,710, 46) under the image holder layer. Color: # abcdda. Name this layer as a bottom bar and double-click the layer to set the layer style. Color of projection: #819aa4

 

 

Step 20

Create a new group and name it "bullet points ". then select the ellipse tool (U) and create some circles using the color #7d98a2 and the dimensions 10 x 10px. put these circles in the left hand area of the bottom rounded rectangle. then create another circle inside the first one using the color # d6e8ef.

Step 20

Create a new group bullet points. Select the elliptical tool to create some circles, color: #7d98a2, size: 10px * 10px. Place these circles on the left side of the rounded rectangle. Create a small circle (6px * 6px) in the first circle. Color: # d6e8ef

 

Step 21

Create a new group and name it navigation. Then use the line tool (u) to create some separators as you see in the image below. I used the colors # a1b3bb and # d7e6ed.

Select the type tool (T) and create an arrow symbol (») using the color # e9f2f6. add a shadow to this layer using the settings from the image below. duplicate this arrow (CTRL/CMD + J), go to Edit> transform> flip horizontal and move it to the left.

Select the type tool (T) and write the words "Read More" between the two arrows. Use the same color and shadow proprieties that you used for the First arrow.

Step 21

Create a group named naigation. Use the line tool to add some delimiters. Color: # a1b3bb and # d7e6ed

The two straight lines of the first delimiter are

(605,560,), color: # d7e6ed

(606,560,), color: # a1b3bb

Merge the two straight lines to the separator Group

Copy the separator group twice, respectively, to (635,560), (805,560)

Use a text tool to create an arrow symbol (»). Color: # e9f2f6. Add a layer style to this layer. Copy the arrow (CTRL/CMD + J), click Edit> change> horizontal flip, and move it to the appropriate position on the left.

Use a text tool to write the text read more between two arrows. Add the same color and projection as the Arrow.

 

 

Step 22

Select the line tool (U) and create two horizontal lines at the top of the blue bar using the colors # b8d9e5 and # a1b3bb. put these layers above all the other layers from the "image slider" group.

Step 22

Use the line tool to create two horizontal lines above the blue rectangle, with the colors # b8d9e5 and # a1b3bb respectively. Move the two layers to the top of the other layers in the image slider group.

The two straight lines are

(125,559,710, 1), color: # a1b3bb

(125,560,710, 1), color: # b8d9e5

 

Step 23

Now we will create some blog posts. Create a new group and name it "blog". Activate the guides to help you arrange the layers better.

Then add an image with the dimensions 200x200px. double-click on this layer to open the layer style window and use the settings from the following image. I used the color # e6f0f4 for inner glow and # b6c1c6 for stroke.

Now select the type tool (T) and add a text next to the image using the color #484f52.

Step 23

Add a list of blogs. Create a new blog group. Activate reference lines to help you align these layers

Then add an image (125,612) with the size: 200px * 200px. Double-click the layer to open the layer style window and follow the settings style. Color of inner light: # e6f0f4, stroke color: # b6c1c6

Add some text to the right of the image using the text tool. Color: #484f52

 

Step 24

Create a new group and name it "button ". then select the rounded rectangle tool (U) and create a small rectangle using the color # add2e0. double-click on this layer and use the settings from the following image. for the stroke I used the color # 97b3bd. select the type tool (T) and write the words "continue reading»" inside the blue button using the color # 68858f.

Select the layers that are inside the "blog" group and hit Ctrl/CMD + G to put them inside another group. Name the new group "Post 1 ″.

Step 24

Create a new group button. Use the rounded rectangle tool to create a small rounded rectangle (340,744,139, 25). Color: # add2e0. Double-click the layer and follow the set style. The stroke color is # 97b3bd. Use a text tool to write continue reading in the middle of the blue button», color: # 68858f

Select all layers in the blog group and press Ctrl/CMD + G to group them. The group name is post 1.

 

 

Step 25

Duplicate the "Post 1" group two times and arrange your blog posts using the move tool (V). Take a look at the image below for reference.

Step 25

Copy the post group twice and use a mobile tool to align your blog list. As shown in

The following two locations are respectively (125,842) and)

 

Step 26

Create a new group and name it "sidebar ". select the rectangle tool (U) and create a rectangle like the one you see in the image below using the color # ebf4f7. name this layer "sidebar BG", double-click on it and use the settings from the following image for gradient overlay.

Step 26

Create a new sidebar group. Use the rectangle tool to create a rectangle (845,251,240,107 9), color: # ebf4f7. Name it sidebar BG, and double-click the layer to set the gradient superposition.

 

 

Step 27

Create a new group and name it "banners ". then select the rectangle tool (U) and create a rectangle with the dimensions 210 x 100px and the color # e9eeef. double-click on this layer and use the settings from the following image. for inner glow I used the color # fdfdfd and for the stroke I used # d2d2d2. select the type tool (T) and write the words "ad space" in the middle of your rectangle. you can create as your banners like this one as you want.

Step 27

Create a new banners group. Create a rectangle (860,260) with a rectangle size of 210px * 100px and color: # e9eeef. Double-click the layer to follow the set layer style. Color of inner light: # fdfdfd, stroke color: # d2d2d2. Use the text tool to add the text ad space in the middle of the rectangle. You can set banners as per your needs

The position of the other rectangle is (860,370)

 

Step 28

Select the type tool (T) and add some content inside your sidebar using the color #626c70.

Step 28

Use the text tool to add some text in the sidebar. Color: #626c70

 

Step 29

I also created an area for Flickr images. to create the squares I used the rectangle tool (u) And I added a double-stroke effect like I did with the banners (with the size of the inner glow set to 5px ).

Step 29

I also want to create a flick image area. Use a rectangle tool to create a square, and then add the double stroke effect, just like the previous advertisement (the inner glow size is 5 px)

The first rectangle (860,890,), color: # e4ecee. Copy the layer style in Step 27 and change the inner light size to 5px.

Copy these rectangles eight times and arrange them in sequence. The intervals between rectangles are 10 PX.

 

Step 30

Select the line tool (U) and create two vertical lines over the left edge of the sidebar. Use the color # becdd2 for the first line and # f0f6f8 for the second one.

Step 30

Use the line tool to create two vertical lines on the left of the sidebar. First straight line (845,251, 846,251) color: # becdd2, second straight line (,) color: # f0f6f8

 

Step 31

Create a new group, name it "footer" and put it underneath the "content BG" group. then select the rounded rectangle tool (U) and create a rounded rectangle at the bottom of your layout with the height 50px and the color # c0dde6. 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 # aec7ce. name this layer "footer ".

Step 31

Create a new group footer under the content BG Group. Use the rounded rectangle tool to create a rounded rectangle (115,1224, 970,56) at the bottom of the layout. The height is 50px and the color is # c0dde6. Double-click to open the layer style window and follow the settings layer style. The stroke color is # aec7ce. Name this layer footer

 

 

Step 32

Select the type tool (T) and add a copyright statement in your footer using the color #8fa1a6.

Step 32

Use a text tool to add copyright information to the footer. Color: #8fa1a6

 

The final result is as follows:

 

Postscript:

This tutorial and "PS web design tutorial IV-how to create a professional blog website layout in Photoshop" and "PS web design tutorial vi-create a food blog layout in Photoshop "the tutorial style is consistent, it seems to be the work of the same person. After careful observation, we can find that some sentences are identical in the tutorial. However, in terms of details, These tutorials have their own merits and some adjustments have been made. This also confirms that the same results can be achieved in different ways.