PS Webpage Design tutorial v -- How to Create a commercial website layout in Photoshop

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.

 

Hello. Today I will create another web layout (Template) in Photoshop and this time I will try to create a business template.

Hello everyone. Today, we will publish a new PS tutorial (Template) on how to create a commercial website layout in PS.

 

Open Photoshop and create a new document (CTRL + n), as a background choose # edebe6

Open PS to create a new document (CTRL + n) (size: 1020px * 1120px), Background Color: # edebe6

 

Step 1-creating the logo and search area

First, I will select rectangle tool and I will add a black shape on the top of the document then with type tool I will add the logo (font used: tahoma ).

Step 1-create a logo and search box

First, create a black rectangle (, 12) on the top of the document using the rectangle tool, color: #403c33, and then use a text tool to add the logo (Font: tahoma ), size: 30px ).

 

O the right side of the logo I will create a search form, that's why I will select rectangle tool and I will create a shape and I will apply this layer styles, then with type tool I will write search:

Create a search form on the right of the logo, use the rectangle tool to create a rectangle (,), add the following layer style, and then use the text tool to add text search

 

Having rectangle tool selected I will create a small shape in the right side of the shape created on previous step, for this one I will apply this layer styles:

Use the rectangle tool to create a small rectangle (,) on the right of the rectangle, and add the following layer style to the rectangle:

Color gradient: # b85a36, # fa7b46

Stroke color: # fde0ce

Use the text tool to add the text go and add the following layer style

 

Step 2-creating the navigation and featured Area

First, select rectangle tool and create a green shape, as a color, I have used # aed1c4

Step 2-create a navigation bar and a Special Area

First, use the rectangle tool to create a green rectangle (0,188,102,), color: # aed1c4

 

With rectangle tool create another shape. I have used a red color for demonstration proposes. This shape has the following dimensions: 918 by 62px

Use the rectangle tool to create another rectangle (51,156). I use red for demonstration. The size of this rectangle is 918px * 62px.

 

Then apply some layer styles:

Then add the following layer style:

Color of Inner Shadow: # bac4a9

Color overlapping colors: #96c6b6

 

Next I will add the links. For each of them I have applied this layer styles:

Next, add some links. Add the following styles for each link:

 

With Pen tool (p) I will create a small triangle over the home link and I will apply this layer styles:

Use the pen tool to create a small triangle above the home link and add the following layer style:

Color of projection: #5a7169

 

Then using line tool I will create some separators between links. To create this you will need to set the weight for the line tool to 1px

Then, use the line tool to create some split lines between links. The width of the line tool is set to 1px.

I will add first a darker line (#8fa4), then a whiter one (# aad4c6 ).

First I add a dark line (color: #8fa4), and then add a light line (color: # aad4c6)

 

Then I'll make sure that both of the lines are selected on my layer palette and I will click Ctrl + E (to merge them ). I will duplicate this layer several times (TO HAVE A separator for each link)

Then select the two straight line layers on the layer panel, CTRL + E (merge layer), and copy the merged layers several times (each two links has a separator)

 

Next using rectangle tool I will create another shape. As a color I have used # d6e1c7 and I have applied this layer styles:

Next, use the rectangle tool to create another rectangle (72,218,876,254), color: # d6e1c7. Add the following layer style to it:

Stroke color: # e4f1d3

 

To create a nice 3D effect for navigation, using pen tool (p) I will create this grey shape:

I will create another one on the right side, and here is my outcome:

Add beautiful 3D effects to the navigation bar and use the pen tool to create a gray (color: # eaebe3) triangle.

Create another triangle on the right.

My personal suggestion: if you are not proficient in using the pen tool, you can copy the rectangle, adjust the size, rotation angle, and adjust the order of the layers to achieve the same effect.

 

With type tool (t) I will add some text

Use a text tool to add some text

Large title text, Font: tahoma, size: 30px, add the following layer style

Color of paragraph text: # 7f7f7f

 

Then from my stock images I will search for a business image. please note that when you add an image in Photoshop, usually the resolution is pretty high. all you have to do is to resize it, using free transform which can be activated by pressing CTRL + T from your keyboard.

Search for a commercial image from my favorite images. Note that when you add an image to PS, the resolution is usually very high. You have to re-resize the image, use Ctrl + T on the keyboard to activate the free deformation tool.

In PS cs5, if you open an image by placing it, you must right-click the layer and select "raster layer" for subsequent operations"

 

Here is my image

This is the image I added.

 

Now I will select rectangular marque tool (M) and I will make this selection over my picture:

Use the rectangle selection tool to set a rectangle selection area above the image

 

I will right click on my picture (having rectangular marquee tool selected) And I will choose feather

Right-click on the top of the image (within the range selected by the rectangle selection tool) and select "Feather"

And I will use 50px for feather radius.

The radius of the feathers is set to 50px.

 

Next right click again over the selection but this time I will choose select Inverse

Next, right-click the selected area again. This time, select "select reverse"

Press the delete key several times to delete the area at the edge of the image to achieve the effect of appearance. The number of different images is not fixed. The number of images in this article is four.

I will set blending mode to luminosity and I will lower the opacity to 60%

Select "brightness" for the blending mode of the layer, and set the opacity to not exceed 60%

The result is as follows:

 

Next I will add a button on featured area (at the bottom of the text). To do that I will select rectangle tool and I will create a shape then I will add this layer styles:

Next, add a button (at the bottom of the text) in the special area ). Use the rectangle tool to create a rectangle (392,425, 28) and add the following style:

Color of gradient superposition: # ba5c38, # f97c44

Stroke color: # ffe0ce

 

Click here to add text to the button. Copy the layer style of the Go text in the search bar.

 

My output

My example

 

Now I wowould like to make this featured area more visible. to do that I will select in my layer pallete the main shape used to create featured area, and I will apply a free Transform (CTRL + T ), then I will push this button to go in "Wrap mode"

Now we need to add some changes to the special regions. On the layer panel, select the main rectangle of the feature area and perform the free conversion (CTRL + T). Then, click the "switch in the free conversion and deformation Modes" button.

When you will be in "Wrap mode" a grid will show up.

This will enter the custom deformation mode and display a grid that controls deformation.

 

Here select this corner, and with your mouse gently drag it a little bit down

Select the control point in the lower left corner, and then drag a little bit down with the mouse (drag 14px down)

I will do the same for the right side

Select the control point in the lower-right corner.

Once you have finished press ENTER

Press enter to confirm

My result

My results

 

The final step for featured area will be to create some shadows. For that I select ellipse tool and I will create this shape

Add some shadows to the special area, and use the elliptic tool to add an elliptic

 

Next I will go to filter> blur> Gaussian blur and I will choose for radius 10px, then I will select rectangular marque tool and I will make this selection

Click filter> blur> Gaussian blur, set the radius to 10px, and select the following rectangle using the rectangle selection tool.

 

Hit delete button on your keyboard then press Ctrl + D to unload the selection

Press the delete key on the disk to delete the content of the selected area. Then press Ctrl + D to cancel the selected area.

Here's my result:

Here is my result:

 

Next I wowould like to add a shadow at the bottom of the curved shape. unfortunately I can't create a nice shadow using the "Standard Way"-ellipse tool, that's why I will use the brush tool.

All you have to do is to create a new layer on your layer palette (CTRL + ALT + Shift + n) chose a rounded brush, a black color and follow the edge of your shape.

Next, I want to add a shadow at the bottom of the curved shape. Unfortunately, I don't quite use the standard method-elliptical tool to create a nice shadow. Therefore, I will use the paint brush tool to draw shadows.

Create a new layer on your layer Panel (CTRL + ALT + Shift + n), select the rounded brush, black, and draw a black line along the curved edge.

 

Now apply a Gaussian Blur (filter> blur> Gaussian Blur) with a radius of 12px

My result-a nice and soft shadow.

Add Gaussian Blur (filter> blur> Gaussian Blur) and set the radius to 12px.

My results-a pretty soft shadow

 

Step 3-creating the content area

This one is really easy to create. First with rectangle tool I will create this shape:

Step 3-create a content area

This part is very easy. First, create a rectangle (47,416,926,464) with the rectangle tool. Color: # d6e1c7

 

Next, use the rectangle tool to create a gray rectangle (47,416,) on the left side. Color: # acb69e

Use the Direct selection tool to select the lower left corner of the rectangle and press the delete key to delete the control point in the lower left corner to make it a shadow triangle.

In the same way, create a rectangle (948,416,) On the right side, delete the control point in the lower right corner, and create a shadow triangle on the other side.

 

Then with type tool I will add some text

Then, use the text tool to add some text. The title text color: #4a5340

 

Use a straight line tool to add a White horizontal split line between the title and content, and set the opacity to 50%

Add a shadow separator between the two columns, which is similar to the delimiter between the text and the image in the special area.

 

Content area is finished now.

The content area is complete.

 

Step 4-The footer

This one, again is quite easy to create because is a replica of the featured area. I have used the same techniques used to create featured area.

Step 4-footer

This part is easy to create because it is exactly the same as the characteristic area. I want to use the same technology as the feature area to create it.

Because it is similar, copy the relevant layers of the feature area directly, move to the appropriate location, click: Edit> transform> vertical flip, and then make appropriate adjustments.

 

With type tool I will add some text and with rectangle tool I will create some forms for "newsletter ". the orange buttons are using the same layer styles like the button from featured area. if you have followed me when I have created featured area you will be able to create the footer also.

Use the text tool to add some text, and use the rectangular tool to add some newsletter text boxes. The Orange button is the same layer style as the button in the special area. If you are always following me to finish the special area, you will certainly be able to complete the footer area

 

Footer area:

Title text: Color: #98a289

Text Box: Use a rectangle tool to draw a rectangle. The layer style of the text box in the header area is copied directly.

Text Box text: directly copy the text box in the header area, modify the text, and move it to the appropriate location

Button: Use a rectangle tool to draw a rectangle. The layer style of the button in the header area is copied directly.

Button text: directly copy the button text in the header area, modify the text, and move it to the appropriate position

Shadow delimiter: directly copies the shadow Separator in the content area and moves it to the appropriate position.

 

 

The following is my final result:

 

TIPS:

This tutorial uses deformation mode to complete special origami effects.