PS Web Design Tutorial V – How to Create a Business Website Layout in Photoshop

As a coder, my art foundation is weak. We can refer to some mature web PS tutorials to improve our design capabilities. To paraphrase a sentence, "If you are familiar with three hundred Tang poems, you can recite them even if you don't know how to compose them."

The tutorials in this series come from online PS tutorials, all from abroad, and all in English. I try to translate these excellent tutorials. Due to limited translation capabilities, the details of the translation still need to be worked out. I hope that netizens will give you some advice.

Convention:

1. The software used in this article is Photoshop CS5 version

2. The screenshots of the original tutorial are in English. I took them again based on the re-production. Chinese version of Figure

3. Some operations in the original text do not give parameters. I measured some parameters through repeated testing, which are shown in red text. For some wrong parameters, the correct parameters are displayed directly in red text

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

For example: (90,22), indicating that the coordinates of the upper left corner of the rectangle are (90,22), the other two parameters of the rectangle have been specified in the tutorial

4. My own experience will be attached at the end of the tutorial. Some are optimizations of some steps in the tutorial, etc.

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 I am releasing a new PS tutorial (template), 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 and 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 Logo and Search Box

First, use the Rectangle Tool to create a black rectangle at the top of the document (0, 0, 1020, 12), color: #403c33, and then use the text tool to add the Logo (font: Tahoma, (74, 62), 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 to the right of the Logo and use the Rectangle Tool to create a rectangle(755, 70, 160, 25) , add the following layer style, and then use the text tool to add the 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:

Continue to use the rectangle tool to create a small rectangle on the right side of the rectangle

(915, 70, 32, 25) , and add the following layer style to this rectangle:

The color of the color gradient is: #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 the Navigation Bar and Featured Area

First, use the Rectangle Tool to create a green rectangle(0,188,1020,60), color: #aed1c4

With Rectangle Tool create another shape. I have used a red color for demonstration proposals. This shape has the following dimensions: 918 by 62px

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

Then apply some layer styles:

Then add the following layer styles:

Color of inner shadow: #bac4a9

Color of color overlay: #96c6b6

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

Next I will add some links. Add the following styles to 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 drop shadow: #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 dividing lines between the links. Set the Line Tool's Weight to 1px

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

I first add a dark line (color: #8fafa4), 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 layers of the two straight lines in the layer panel, Ctrl + E (merge layers), copy the merged layers several times (there is one between each two links 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 Gray shape:

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

Add a beautiful 3D effect to the navigation bar, use the pen tool to create a gray

(color: #eaebe3) triangle.

Similarly create another triangle on the right. This is my personal suggestion for making the rendering

. If you are not proficient in using the pen tool, you can copy the rectangle and adjust the size. , rotate the angle, and adjust the layer order to achieve the same effect.

With Type Tool(T) I will add some text

Add some text with the text tool

Big 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 business-related picture from my collection of pictures. Be aware that when you add an image in PS, often the resolution is very high and all you have to do is resize it and activate the Free Transform tool with Ctrl+T on your keyboard.

If you open the image by placing it in PS CS5, for subsequent operations, you must right-click on the layer and select "Rasterize Layer"

Here is my image

This is the picture I added

Now I will select Rectangular Marque Tool (M) and I will make this selection over my picture:

Use the Rectangular Selection Tool to set a rectangular selection above the picture

I will right click on my picture (having Rectangular Marquee Tool selected) and I will choose Feather

Right click on my picture (having Rectangular Marquee Tool selected) and select "Feather"

and I will use 50px for Feather Radius.

Feather radius 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 selecting "Select Inverse"

Press the delete key several times , delete the area at the edge of the picture to achieve a feathering effect. The number of different pictures is not fixed. The pictures in this article are 4 times.

I will set Blending Mode to Luminosity and I will lower the Opacity to 60%

Layer’s blending mode selection "Brightness", set the opacity to no more than 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 I will add a button in the featured area (at the bottom of the text). Use the Rectangle Tool to create a rectangle

(392, 425, 92, 28)

and add the following styles:

# #Gradient overlay color: #ba5c38, #f97c44

Stroke color: #ffe0ce

Add text to the button Click here. And copy the layer style of the GO text in the previous search bar

My output

My sample

Now I would 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 I want to add some changes to the featured area. Select the main rectangle of the featured area in the Layers panel, then Free Transform (Ctrl + T), then click the “Switch between Free Transform and Warp Mode” 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 the 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 use your mouse to gently drag it a little bit down (DRAG DOWN 14px )

I will do the same for the right side

Select the control point in the lower right corner and do the same steps

Once you have finished press ENTER

When you have finished press ENTER to confirm

My result

My result

The final step for Featured Area will be to create some shadows. For That I select Ellipse Tool and I will create this shape

Finally, the final step for Featured Area will be to create some shadows. Add some shadow to the area and add an ellipse using the Ellipse Tool , then I will select Rectangular Marque Tool and I will make this selection

Next click: Filter>Blur>Gaussian Blur, set the radius to 10px, and then use the Rectangular Selection Tool to select the following rectangle

Hit DELETE Button on your keyboard then press Ctrl + D to unload the selection

Press the DELETE button on your keyboard to delete the contents of the selection , then Ctrl+D to cancel the selection

Here's my result:

This is my result:

Next I would 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 to the bottom of the curved shape. Unfortunately I'm not very good at using the "standard method" - the Ellipse Tool - to create a nice looking shadow. So I'm going to use the brush tool to paint the shadows.

Create a new layer in your Layers Panel (Ctrl + Alt + Shift + N), select the Rounded Brush, Black, and draw a black line along the edge of the curved shape.

##Now apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 12px

My result – a nice and soft shadow.

Now add a Gaussian Blur (Filter > Blur > Gaussian Blur) with the Radius set to 12px

My result - a nice 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 the Content Area

This part is very easy. First use the rectangle tool to create a rectangle

(47, 416, 926, 464), color: #d6e1c7

# #Next, use the rectangle tool to create a new gray rectangle (47, 416, 25, 70) on the left, 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 and make it a shadow triangle

##Same as the same Method: Create a new rectangle on the right side (948, 416, 25, 70), delete the lower right corner control point, and become a shadow triangle on the other side

##Then with type tool I will add some text

Then with type tool I will add some text

The color of the title text: #4a5340

Between the title and the content, use the straight line tool to add a white horizontal dividing line, and set the opacity to 50%

Add a shadow separator between the two columns, similar to the separator between the text and image in the featured area

Content area is finished now.

The content area is finished

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 very easy to create because is a replica of the Featured Area. Exactly the same. I want to use the same technique as the featured area to make it

Because it is similar, I just copy the relevant layer of the featured area, move it to the appropriate position, click: Edit>Transform>Vertical Flip and make appropriate fine 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.

Add some text with the type tool and the rectangle tool Some Newsletter text boxes and orange buttons use the same layer style as the buttons in the featured area. If you have been following me to complete the featured area, then you will definitely be able to complete the footer area

Footer area:

Title text: Color: #98a289

Text box: Use the rectangle tool to draw a rectangle, and the layer style directly copies the layer style of the text box in the head area

Text box text: Directly copy the text box text in the header area. After modifying the text, move it to the appropriate position

Button: Use the rectangle tool to draw a rectangle, layer style Directly copy the layer style of the header area button

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

Shadow separator: Directly copy the shadow separator of the content area and move it to the appropriate position

The following is my final result:

Experience:

The feature of this tutorial is to use the deformation mode to complete the origami special effect

For more PS web design tutorial V - How to create a commercial website layout in Photoshop For related articles, please pay attention to the PHP Chinese website!