PS web design tutorial XXIII-create a website that sells iPhone 5 Applications

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:(90,22, 231,77)The coordinates in the upper left corner of the rectangle are (231), in width, and 77 in height.

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

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

 

For start open a new document and fill the background with the following color: # 2b2b2b

First, create a document,Size: 1100px * 720pxAnd fill the background with color: # 2b2b2b

The next step is to fill the background with a pattern. You can add the patter via Layer Styles. Please note that this patter can be found in the following pack of 815 Photoshop pixel patterns

The next step is to fill the background with a pattern. You can add a pattern overlapping style. Note that this pattern can be found in Photoshop pixel patterns 815.

 

If you don't have a UDT membership you can create this pattern alone. create a new document: 2px by 2px with a transparent background. with penpencil tool add a small 1 pixel dot. then go to Edit> define pattern. choose a name and click OK. then you can use the pattern in your layer style panel.

If you do not have a UDT account, you can create this pattern by yourself. New Document: 2px * 2px with transparent background. UsePencil toolsAdd a 1px vertex. Then click:Edit> define a pattern. Give a name and click OK. Then, you can use this pattern in your layer style panel.

With rounded rectangle tool please make a shape like in the following image. Click on the following image to see better.

UseRounded rectangle ToolCreate a rounded rectangle according(80,123,940,226), color: #000000. Click to see more clearly

 

On the left side I will create another small shape with the same tool.

Use the same tool to add another small rounded rectangle to the left(32,184, 70, 81)

 

Then I will add the following layer styles.

Then follow the settings layer style

Gradient editor color: #010101, # b8b8b8, # 4c4c4c

 

With the same tool I will create a new shape, then I will use perspective tool to modify the look. You can find the perspective tool in Edit> transform> perspective.

Use the same tool to create a new rounded rectangle(91,182, 70, 85)And then use the perspective tool to modify its appearance. You can click:Edit> transform> perspectiveTo find the fluoroscopy tool.

Add a gradient superposition style to this layer

Gradient editor color: #000000, #343434

 

 

Duplicate the first shape, and please go to filter> noise. make sure you change the blending mode for this layer to overlay. (you can find the overlay blending mode on the top of your layer palette-you will probably see normal. if you use the drop down menu you can find the overlay)

Copy the rounded rectangle,Convert to Smart ObjectAnd then click:Filter> Miscellaneous. Change the blending option of the layer to overlay. (You can find the blending option at the top of your layer panel-what you usually see is normal. When you click the drop-down menu, you can see the superposition)

 

 

With line tool I will create two thin lines.

UseLinear ToolCreate two lines

 

Then I will duplicate both lines, and I will go to filter> blur> Gaussian blur. you can play around with settings until you have the same result like mine. I can give you the exact values for the blur filter, but in this way you will not learn what this tool does.

Copy these straight lines and click:Filter> blur> Gaussian blur. You can refer to the settings below until the effect is similar to mine. I will give you some suitable fuzzy filter parameters, but you do not necessarily follow this step strictly.

It took a lot of effort to do this, and I found that this effect could not be achieved only by following his steps. So I made some corrections.

Do not copy the two lines. Use the line tool and set the width to 3px. Then draw two red lines in the original line.

Merge the layers of the next two rough lines and raster them. And click:Filter> blur> Gaussian blur. Place the new layer below the original two line Layers

Combine the three layers into a group, select the group, and click:Layer> layer mask> show allTo add a layer mask. Select the gradient tool and add a gradient to the group according to the gradient settings.

 

On the left side I will create a indented button. I will use rounded rectangle tool, and then I will add some layer styles.

Create an embedded button on the left. I used the rounded rectangle button.(45,212, 22, 25),Color: # d7d7d7And add some layer styles to it.

UsePolygon ToolAdd a small triangle in the middle of the button. The color is black and the style is the same as the rounded rectangle.

 

Bellow you can see the Layer Styles. Please note that you can download here almost 18.000 photosho Layer Styles. You can find attached ded also this layer style.

After you see the layer style. Please note that you can download 18.000 photosho Layer Styles here. You can find these Layer Styles

 

Here is my result so far.

This is my result

 

With Pen tool I will create a simple white shape.

UsePen toolCreate a white shape(You can also use the rectangle tool to create a new White Rectangle and then convert it to the following shape through perspective)

 

I will use the blur filter, and then I will drag the layer under the previous ones.

Apply a blur filter to him and drag the layer to the bottom of the previous one,And adjusted to the appropriate size

 

I will duplicate all the layer for the slideshow navigator, And I will place them n the right side.

I want to copy these images and move them to the right (Combine these layers into a group, convert them to smart objects, copy the layers, flip them horizontally, and move them to the appropriate position on the right.)

 

In the middle I will crate a simple shape. Click on the image to see the image full size.

In the middle, I want to create a basic shape (Rectangle)(142,165,816,136), color: # 2a2a2a. Click an image to view the full size

 

With Pen tool I will create a shape like this.

UsePen toolCreate the following shape

If you are not good at using the pen tool, you can use the following method:

UseRectangle ToolCreate a new rectangle (142,135,816, 30)

Press Ctrl + T to change freely, right-click to select perspective, and drag the point in the upper left corner to 40px to the left (you can open the information panel at the same time to ensure that you drag 40px)

 

For this layer I will add the following layer styles.

Add the following layer style to this layer

Gradient editor color: #707070 and #262626

 

 

With rounded rectangle tool I will create a shape like the following one.

UseRounded rectangle ToolCreate the following rounded rectangle(896,126, 707070), the radius is set to 10px, color: #

 

Right click on the layer inside your layer palette, and choose rasterize shape, and then delete the bottom part of the shape.

Right-click the layer in your layers panel, select the raster layer, and delete the bottom part of the shape.(You can use the Rectangular Box selection tool to select a rectangular selection area, change the selection area, and adjust the value of Y to 135)

 

Duplicate this shape and go to filter> noise> Add noise. In this window ad as much noise you want, but make sure it is not to much.

Copy this layer and click:Filters> colors> add colors. Set the parameters you want to set in the window, but do not set too many parameters.

 

With line tool you can add a simple 1 pixel horizontal line. I will use the following color: # 8d8d8d

You can use the linear tool to add a horizontal line of 1px.(102,134,896, 1), I used the color: # 8d8d8d

 

On the bottom of this slide show I will add another shape. It was made with pen tool.

Add another shape at the bottom of the image slide bar. I usedPen tool

Directly copy the inverted trapezoid above, flip vertically, move it to the appropriate position, and reverse hook the reverse in the gradient superposition

 

 

Then I will create a new shape. This last one was created with rectangle tool.

Then I want to useRectangle ToolCreate a new rectangle(102,331,896, 6), color: #707070.Use the line tool to add a horizontal line (102,331,896, 1) Again, color: # 8d8d8d

 

On the top I will add a simple text logo.

Create a simple text logo on the top,I did not introduce any font in the original text, so I found a similar font. Color: #383838

To make the text look embedded, add two layers to it.

 

 

On the right side of the header I will add a simple menu.

Add a normal menu to the right of the header area,The font is as follows. The style is the same as the logo above.

 

Under each text menu I will add some simple lines.

Add someVerticalStraight line,The color of the straight line is: #383838

 

Then with ellipse tool I will create a small circle on top of each line.

Then useElliptical toolAdd a circle to the top of each straight line,Color: #383838. The layer style is consistent with the menu text.

 

Also under the logo I will add a nice round shape. This was made with rounded rectangle tool, and I have used the Indented layer style which I have used several times on this iPhone related layout.

And add a beautiful rounded rectangle under the logo.Rounded rectangle ToolAnd I use an embedded layer style, which is the one I used many times on this iPhone sales website.And add a vertical line

 

With a few lines I will try to combine all vertical lines.

Using some straight lines, I will try to link all vertical lines.

This step is extremely simple, so it is complete here

Open the information panel (Press F8 to bring up the information panel) and useLinear ToolDraw a skewed line, color: #383838, straight line delta x = 24, Delta y = 18, and move the line to the appropriate position. Add a layer style with the same menu text to the straight line

Copy the skewed line and flip it horizontally. Copy them multiple times and move them to the straight line below each menu text

UseLinear ToolDraw a horizontal line, connect these lines, color: #383838, and add the same layer style as the skewed line

 

Now I will add some iPhone icons made by jackietran

Now I want to add some jackietran iPhone icons

 

Under each icon I have placed a simple shadow. To create the shadow is very simple. Select rounded rectangle tool and create a dark shape, and then add a blur filter.

Add some simple shadows under each icon. Creating these shadows is very simple. SelectRounded rectangle ToolCreate a dark shape and then add a blur filter.

 

Note: After this step, we found that the buttons left and right were too abrupt. Then, change the opacity of the red line to 45%, and reduce the white halo, as shown below:

The benefits of smart objects are realized here. Modify on the left and change on the right

 

 

I will use one more time rounded rectangle tool to create a simple dark shape.

I useRounded rectangle ToolCreate a dark rounded rectangle again(80,358,940, 30), with a radius of 6 PX, color: #010101

 

I will use pen tool to create a shape with a nice perspective look.

UsePen toolCreate a beautiful inverted Trapezoid

If you are not good at using the pen tool, follow these steps:

Use the rectangle tool to create a rectangle (142,363,816, 15)

Press Ctrl + T to change freely, right-click the perspective, and drag the lower left corner to change the width to 896

 

Bellow you can find the Layer Styles I have used.

Color changed to: #555555. Next, add some used layer styles.

Gradient editor color: # 8b8b8b, #262626

 

 

I will create another shape like in the following image. Click on the image to see the result better.

Create another rounded rectangle according(91,383,918,290). Click the image to make it clearer.

 

Here is the layer style I have used for the last shape.

Here is how I added a layer style to the shape just now.

Gradient editor color: #242424, # b8b8b8, # 4c4c4c

 

 

I will duplicate this layer and I will add one more time some noise

I want to copy this layer,Convert to Smart ObjectAnd add some colors.

 

Then I with pen tool I will create the following shape. Please use the same layer style as above.

Then I will use the pen tool to create the following shape. The same layer style as above

If you are not good at using the pen tool, follow these steps:

Use the rounded rectangle tool to create a rounded rectangle with the radius set to 12px

Right-click the layer and select the raster layer. Use the Rectangular Box selection tool to select the lower half of the rounded rectangle, press delete to delete the rectangle, and then press Ctrl + D to cancel the selection.

Add a layer style that is the same as the last rounded rectangle, reverse the gradient style, and modify the color on the right of the gradient editor to: #828282

 

Duplicate this shape, and select both layers in your layer palette. once you have both layer selected press on CTRL + e to merge the layer into a single one. with eraser tool Delete the bottom part of the shape. make sure you have a smooth round brush selected.

Copy the shape and select the layers in the layers panel. After you select these layers, press Ctrl + e to merge them into one layer. Use an eraser tool to erase the bottom of a shape. Make sure you have selected a smooth circle brush

This step can be skipped after the previous step is used.

 

With rounded rectangle tool I will create a new shape. I will use the same indented Layer Styles

UseRounded rectangle ToolI want to create a new rounded rectangle(108,405,884,250). I want to use the same embedded layer style

 

Here you have the Layer Styles one more time.

Set filling to 0%, Add the following layers

Color overlapping colors: # 3e3c3d

 

I will create a simple shadow. to create this shadow I recommend you to create a new layer, place it under the big shape, and then with brush tool start drawing very smoothly until you are happy with the result.

I want to create a simple shadow. To create a shadow, you can create a new layer, place it under a large shape, and draw a smooth shadow with a paint brush tool until you are satisfied.

 

I will add some dark shape, and some text.

I want to add some dark shapes and some text

The color of the rounded rectangle in the first line: #191919, the color of the text in the first line: # b0b0b0

The color of the rounded rectangle in the second line: #222222, the color of the text in the second line: # b7b7b7

The color of the rounded rectangle in the third line: #292929, the color of the text in the third line: # bcbcbc

Each rectangle is added with the same layer style as the menu text.

 

Then I will add some icons.

Then add some icons,Add # b0b0b0 color overlay to the icon in the first row, add # b7b7b7 color overlay to the icon in the second row, and add # bcbcbc color overlay to the icon in the third row

 

Bellow you can see the icons placed on the right side, and in the same time you can see some lines between each category.

You can see that the icon is placed in the correct place, and you can see a straight line between each category.

 

Bellow you can see the final result. I hope you like this layout.

The following are the final results you have seen. I hope you will like this layout

 

Postscript:

The designer gave a special speech and cleverly applied colors to achieve 3D effects. The designer uses the color and PS skills as he wishes to do whatever he wants. If there is no source file, he has to repeat some steps. Fortunately, he has some experience in the previous translation tutorials, some steps can still be restored, or implemented in a similar way.