PS Webpage Design tutorial Xi-create a soft green and environmentally friendly webpage 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.

 

Let's start the tutorial.

Open Photoshop and create a new document (CTRL + n) and as a foreground color choose: # e6e5e5

Let's start the tutorial

Open PS new document (CTRL + n), size: 1020px * 1150px, set the background color: # e6e5e5

 

Next select rectangle tool and create a shape on the top of the document. Dimensions 1020 by 268px, color: # f7f7f7

Next, selectRectangle ToolCreate a rectangle (0, 0) at the top of the document ). Size: 1020px * 268px, color: # f7f7f7

Step 1 Creating the top area

Having rectangle tool selected, create a similar shape. color (blue) #3 fadbf, dimensions: 340 by 4px.

I will duplicate this shape 2 more times and I will move them to the right. for the second shape I have used this color (green) # a3b76b and for the third one (that pinky one) # bf7678.

On the left side, a little bit down, I will add my logo. Here you shoshould add your own logo. Here is my result:

Step 1: Create a top area

SelectRectangle Tool, Create a rectangle (blue) (0, 0), color: #3 fadbf, size: 340px * 4px

Copy the rectangle twice and move it to the right. Color of the second rectangle (green) (): # a3b76b, color of the third rectangle (powder) (, 0): # bf7678

At the bottom of the left, I want to add my logo. You can also add your own logo here. This is my result

 

Now on the right side I will create the navigation. With rectangle tool I will create this shapes and with type tool I will add the links.

For the home tab I have used this color: #3 fadbf, dimensions: 75 by 47px. No Layer Styles applied

For the rest of the tabs (about us, services, portfolio, contact) I have applied this layer styles

 

Create a navigation menu on the right. UseRectangle ToolAdd some Rectangles and use the text tool to add some links.

Home navigation item (471,43), color: #3 fadbf, size: 75px * 47px. No layer style

Other navigation items (about US (555,54, 83,36), services (648,54, 83,36), portfolio (740,54, 83,36), contact (832,54, 83,36), color: # a4a4a4, I will add the following layer style, Projection Color: # ababab

 

 

After you will apply this layer styles you shoshould have something similar with me.
Next I will create a shadow at the bottom of the navigation. To create the shadow you will need to select ellipse tool, than create a similar shape.

After you add a layer style that is close to me.

Next, add a shadow at the bottom of the navigation bar. To create a shadow, selectElliptical tool, Add a similar shape)

 

Then go to filter> blur> Gaussian blur and here choose a radius of 7px.
You shoshould have something like this now

Then, click:Filter> blur> Gaussian blur, And select the 7px radius.

 

Now select rectangle tool and create a similar shape. Color: # ebeb, dimensions: 546 by 42px. Make sure that you cover a small partition of the navigation tabs. Here is my result:

SelectRectangle ToolCreate a rectangle (rectangle, 84), color: # ebebeb, size: 546px * 42px, make sure to cover a small part of the navigation bar, this is my result

Step 2 creating featured Area

With rectangle tool I will create this shape. dimensions: 951 by 282px and I will apply this layer styles:

Step 2: create a special region

UseRectangle ToolCreate a rectangle (35,126) with a size of 951px * 282px (recommended size: 950px * 282px) and a color of white. Add the following layer style:

 

Next I will create another shape, just above the shape created on previous step. dimensions: 930 by 262px, color: # c2cda6

Next, create another rectangle (45,136), above the rectangle. Size: 930px * 262px, color: # c2cda6

 

Now from my stock images, I will add this image in Photoshop:

Add to PS from my image library now

 

As you can see the image it has a white background. in order to make it look good we will need to work a little bit on it. first I will make sure that on my layer palette, the image layer is just above our green shape. once you have the image layer above the green shape, right click on the Image Layer and choose "create clipping mask ". you shoshould have something like this now

 

As you can see, the image has a white background. We have to do some work to look better. First, make sure that on the layer panel, the image layer is above the green layer. When your image layer is above the green layer, right-click the image layer and selectCreate a clipboard mask. It looks like the following

 

as you can see the image is perfectly integrated in our green shape, but it still does not look right. the image it has a bright white at the background it does not look really nice on our green shape. that's why I will apply a layer mask. to do that, make sure that you have the image layer selected on your layer palette and then go to: layer> layer mask> hide all. the image will disappear and a layer mask will be created in our layer palette. now select gradient tool. make sure that you have the default palette selected (black and white) and with your mouse drag a similar line. from left to the right. as you can see on the right side we will need to create the same thing in order to have a nice image. to repeat the same step, don't forget to apply the layer mask. right click on that black thumbnail and choose "apply layer mask" then repeat the same step once again (but this time for the right edge of the image)

As you can see, the entire picture appears in the green rectangle, but it still does not look good enough. The image has a bright white background and looks a little dazzling in a green rectangle. Therefore, you must add a layer mask. Therefore, make sure that the image layers on the layer Panel are selected, and then click:Layer> layer mask> hide all. The image is hidden, and a layer mask appears on the layer panel. Select nowGradient tool. Make sure that you select the default gradient (black and white) and drag a line from left to right with the mouse. As you can see, do the same operation on the right side to present a perfect image. Repeat the same operation. Do not forget to add a layer mask. Right-click the black thumbnail, select "apply layer mask", and repeat the operation (but this time starts from the right side of the image)

After testing, the "apply layer mask" option is dimmed after the first mask is added for the image layer, so that the mask cannot be added. After adding a layer mask, select the Black-White-black gradient and drag the gradient.

 

Next on the right side, with type tool I will add some text

On the right side of the image, useText toolsAdd some text

Add the following layer style to the title text on the right

 

Then I will select rectangle tool and I will create this shape. I will apply this layer styles:

UseRectangle ToolCreate a rectangle (727,335,170, 25 ). Add the following layer style:

Gradient superposition: gradient color: # e2e2e2, # ffffff

 

And with type tool I will add some text.

AndText toolsAdd some text

 

Now the final step wocould be to add some buttons for the featured area.
I will select ellipse tool and I will create this shape:

Finally, add some buttons to the Special Area

UseElliptical toolCreate a circle (21,245, 35, 35 ):

 

And I will apply this layer styles:

Add the following layer style to the circle:

Gradient colors: # f0f0f0, # ffffff

 

With Pen tool I will create this triangle

When you have a triangle, right click in it (Make sure that you still have pen tool selected) and choose "make selection"

Select paint bucket tool, than on your keyboard click Ctrl + Shift + ALT + N (to create a new layer) and fill your selection with your desired color. Here is my result:

 

UsePen toolCreate triangle

After you complete the triangle, right-click it (make sure the pen tool is still selected) and select "convert to constituency"

UsePaint bucket Tool, Press Ctrl + Shift + ALT + N (New Layer) on the keyboard, and fill the selection area with eye-catching colors. This is my result

Direct usePolygon ToolSelect the polygon tool, set the number of edges to 3, and press shift to draw a triangle.

 

I will apply this layer styles:

Add the following layer style

Color overlapping color: # d3d3d3

 

I will create another button on the right side also. Here is my result for featured Area

Create another button on the right of the feature area. This is the result of my special region

 

Step 3 creating the Middle Area

Well, this area it's really easy to create. first I select rectangle tool and I will create 3 shapes. each shape has the following dimensions: 308 by 221px. colors: For the first shape (soft blue) # a1b7ba, the second one (soft green) # c1c7b0, the third one (Pinky) # c2afaf

Step 3: create a central region

Very good. This part of area is easy to create. SelectRectangle ToolCreate three rectangles. Size of each rectangle: 308px * 221px. Color: first rectangle (36,423) (soft blue) # a1b7ba, second rectangle (356,423) (soft green) # c1c7b0, third rectangle (675,423) (pink) # c2afaf

 

Now I will create another layer on my layer palette (to do so, press Ctrl + Shift + ALT + N on your keyboard), then I will select a soft brush, i'll make sure that the foreground color is set to white, I will reduce the opacity to 13% and I will increase the brush size to 200%, than I will gently push few times with the brush on each shape.
Now create a new layer on my layers panel (in this step, press Ctrl + Shift + ALT + N on the keyboard) and select a soft brush to make sure that the foreground color is white, then adjust the opacity to 13% and the image brush size to 200% (should be 200px), and then click on each rectangle several times.

 

Here is my result:

Here is my result:

 

Then I will select ellipse tool and I will create this shape (the black one, at the bottom of the rectangle)

SelectElliptical toolCreate the following ellipse (36,638,308, 8) (black, at the bottom of the rectangle)

 

And I will apply a Gaussian Blur (filter> blur> Gaussian Blur) with a radius of 7px. I will make the same thing for the next 2 shapes, and here's my result:

Add Gaussian blur to the ellipse (CLICK:Filter> blur> Gaussian blur), Radius: 7px. Perform the same steps for the two rectangles on the right. Here is my result:

 

Next I will select rectangle line tool and I will add 2 lines on each shape. this line it will serve as a separator between the content and the title. each line has this dimensions: 244 by 1px

Next, selectLinear ToolTo add two straight lines to each rectangle. This line serves as a separator between the title and content. Size of each line: 244px * 1px

And here are the colors. For the first one: first shape (the darker one): # b2bdbf the second one # d3dbdc

Set the color of the line. The first rectangle: the first line (60,466) (The Dark One): # b2bdbf (it should be #93a1a3), and the second line: # d3dbdc (it should be # c8d9db)

The second one: first shape (the darker one): # abb09f the second one # e0e5d1

The second rectangle: the first straight line (380,466) (The Dark One): # abb09f, the second straight line: # e0e5d1

 

The third one: first shape (the darker one): # b09fa0 the second one # e3d4d5

The third rectangle: the first straight line (699,466) (The Dark One): # b09fa0, the second straight line: # e3d4d5

 

Why do the colors of the two straight lines in the first rectangle need to be corrected? The reason is that the original color is not harmonious. Let's look at the two pictures below. On the left side is the corrected effect, and on the right is the original color.

Obviously, the original colors on the right are not harmonious.

How is that corrected? See the following analysis process

First, convert the color of the rectangle and two straight lines to the HSV mode.Article

The first rectangle:

Rectangle: # a1b7ba, HSV :( 187,13, 73)

Deep line: # b2bdbf, HSV :( 189,7, 75)

Shallow line: # d3dbdc, HSV :( 187,4, 86)

The second rectangle:

Rectangle: # c1c7b0, HSV :( 76,12, 78)

Deep line: # abb09f, HSV :( 78,10, 69)

Shallow: # e0e5d1, HSV :( 75,9, 90)

The third rectangle:

Rectangle: # c2afaf, HSV :( 0, 10, 76)

Deep line: # b09fa0, HSV :( 356, 10, 69)

Shallow: # e3d4d5, HSV :( 356, 7, 89)

The colors of the two rectangles are consistent, so the colors of the two rectangles are analyzed.

We can see that

The H component of the Deep line is similar to the H component of the rectangle, and the S component is similar. The V component is about 10 less.

The H component of the shallow line is similar to the H component of the rectangle. The S component is slightly less, and the V component is about 10 more.

Note: h indicates the color of the color, the color is ring, 0 is 360, so the difference between 0 and 356 is 4, that is, almost

As a result, we found that the color of the first straight line of the rectangle is inconsistent according to the above rule and adjusted according to the above rule.

The color of the Deep line is adjusted to: #93a1a3, HSV :( 189,10, 64)

The shallow line color is adjusted to: # c8d9a6, HSV :( 187,9, 83)

I have read an article about how to quickly create a similar split line.

The Deep line is based on the background color. The H and S components are not moving, and the H component is reduced by about 10%.

The light color is based on the background color. The H component does not move, and the H component increases by about 10%.

The light color is next to the dark color, and the light color is below the dark color.

 

Next with type tool I will add some text and from premium files I will use "Weather vector icons" and "vector trees icons ".
UseText toolsAdd some text. From premium files, weather vector icons and vector trees icons will be used.

 

Here's my result

This is my result

 

Step 4 creating the content area and the footer

Step 4: Create a content area and footer

 

To create the content area, select first rectangle tool and create a similar shape:

To create a content area, selectRectangle Tool, Create a rectangle (38,658,944,426), color: White:

 

As with the previous shadow addition operation, useElliptical toolCreate an ellipse (,) and click:Filter> blur> Gaussian blur, Radius: 7px

 

Having rectangle tool selected create another shape at the bottom of the previous shape. This one it will be used for footer

UseRectangle ToolCreate another rectangle (1020,112,) at the bottom of the rectangle. Color: # efefef. This rectangle is used as the footer part.

 

Add three rectangles at the bottom:

Rectangle (,), color: #3 fadbf

Rectangle (,), color: # a3b76b

Rectangle (,), color: # bf7678

 

Next I will select ellipse tool and I will create this shape

UseElliptical toolCreate the following ellipse (664,670, 12,400)

 

Then I will apply a Gaussian Blur (filter> blur> Gaussian Blur) with a radius of 50 PX. I will select rectangular marque tool and I will make this selection

Add Gaussian Blur (CLICK:Filter> blur> Gaussian blur), With a radius of 50 PX. SelectRectangle selection tool, Create the following constituency

 

I will hit delete on my keyboard than I will push Ctrl + D (to unload the selection)

Press the delete key on the disk and press Ctrl + D to cancel the selection)

Then with type tool I will add some text, I will create some buttons in the same way I have do it for the featured Area

UseText toolsAdd some text, create some buttons, and use the same method as the buttons in featured area.

 

This step is very simple, so it is more comprehensive here

UseRectangle ToolAdd rectangle (62,684,561, 41), color: # c1bbbb, and rectangle (700,684,251, 41), color: # abbec2

And add the corresponding text

 

Add an image and the following stroke layer style. Stroke color: # d4d4d4

 

Add text below the image, and add text below the rectangle on the right

 

Add three rectangles (707,876,142, 25), (707,913,142, 25), and (707,948,228, 84) under the text on the right ), copy the layer style of the triangle in featured area and add the corresponding text.

 

UseRectangle ToolAdd two rectangles (527,1042, 93,25) and (843,1042, 93,25). Copy the layer style of the button in featured area and add the corresponding text.

 

Add the copyright information in the lower left corner.

 

The final result is as follows:

 

Postscript:

This tutorial uses soft colors. In fact, the three colors are red, green, and blue. For future reference.