PS web design tutorial VIII-design unusual la s 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.

 

In this tutorial I will show you how to manipulate some simple shapes, to obtain a wonderful layout. as you have seen I am trying to create unusual layouts. I want to show you that it is possible to create also another type of layouts (not usual ones ).

In this tutorial, I will show you how to skillfully handle some simple shapes to get a wonderful layout. You have seen that I am trying to create an extraordinary layout. I want to tell you that it is possible to create another layout (not the usual layout ).

 

Start by creating a new document (CTRL + n) with the following size: 960x900 pixels, and with the background color #5c7a02.

Create a new document (CTRL + n), size: 960px * 900px, background color: #5c7a02

 

Select rounded rectangle tool, and set your corner radius to 50 pixels

Select the rounded rectangle tool and set the radius to 50px.

 

With this tool I will create a shape in the middle of my layout, then I will press on CTRL + T and while I am holding the Shift key down, I will rotate the shape. right now it doesn' t matter what color you will choose. I will use different colors for each shape I make, because I want to show you where I will place the shapes. now I will change the color for all this shapes to #3c3427. on the top of my layout I will add another shape, but this time I will use the rectangle tool. I will change the color for this shape to #3c3427, and on the bottom right of this layout I will add another shape.

Create a rounded rectangle in the middle of the page, press Ctrl + T to convert freely, and press shift to rotate the rounded rectangle. I haven't told you which color to use. I will create some rounded rectangles in different colors, as I will show you how to place these rounded rectangles. Now I want to change the color of these rectangles to #3c3427. At the top of the page, I will add a rectangle. This time, the rectangle tool is used. I still use color for this rectangle #3c3427. in the lower right corner of the layout, I will add another rounded rectangle.

 

I felt that the operations in the original tutorial were complicated, so I changed the operation steps, but the final effect was the same.

Create a rounded rectangle (480,644,), color: #3c3427

Create a rounded rectangle (485,485, 644), digress, (1.414-50*2)/485 + 50*2 ≈

Press Ctrl + T to change freely, rotate for 45 degrees, press enter to confirm to exit the change freely

Press Ctrl + T again to change freely. adjust the parameter to (153,29, 644,644) and press enter to exit the change freely.

Press Ctrl + G to merge the two rounded rectangles into a group.

Copy the group, Rotate 90 degrees clockwise, and adjust the group to the appropriate position (-190,375)

Create a rounded rectangle (457,677,450,500) in the bottom right corner of the layout. The color is still #3c3427

 

With rounded rectangle tool, I will create another 2 shapes

Be sure you have selected both layers in your layer palette, then press on CTRL + T, and with your mouse pointer rotate the shape to the left. I will place my shapes like in the following image. over this green shape I will have my text button.

Draw two rounded rectangles with rounded rectangles

Select the two layers and press Ctrl + T to rotate your rectangle with the mouse. Add some text buttons above green according to the rectangle Layout

 

Or follow your own ideas.

First, set the radius of the rounded corner rectangle to 70. Create a New rounded corner rectangle with a width of 970px, a height of 154px, and a color of # c7da8b. Press Ctrl + T, rotate-45 degrees, and press enter to confirm. Press Ctrl + T to adjust to the position of the rounded rectangle)

Copy the layer, press Ctrl + T, and adjust the size to 70%, and the position is ). Color changed to # a8ca01

 

I will create a new layer above all layers, and with my brush tool, I will add some points with a big smooth round brush.

Create a new layer on all layers, and use a paint brush tool to adjust the paint brush to a huge smooth paint brush (the color is white, the size of the paint brush is 600px, hardness: 10% ), add some vertices (three vertices) on the layer ).

 

Then I will change the blending mode for this layer to overlay

Change the blending mode of this layer to overlay

 

This is my result so far

This is my result

 

Now with horizontal type tool I will write some text. The font I will choose is Bookman old style. italic.

Now, use the horizontal text tool to add some text, and use Bookman old style. italic as the font.

The top text welcome to our web site and the bottom text services are set in the following font

 

Set the title text grafpedia in the green block on the left with the following font and add a layer style.

 

Set the menu text home, products, portfolio, and contact in the green block on the left with the following text:

 

You can set portfolio and latest news for two columns in the following text:

 

Text on the right menu bar, company, products, program, and contact us. Color: black. The text settings are as follows:

 

Set the text of a paragraph in welcome to our web site as follows:

 

For other paragraph text, the text settings are as follows:

 

The final result is as follows:

 

Now I will add some images from my last tutorials in the middle part of my layout. I will cut some round images from my previous tutorials.

I will add some pictures of previous tutorials in the middle of the page layout, and I will cut some circle pictures from the previous tutorials

 

On the top of the website I will add another rounded shape.

Add another rounded rectangle (361,142,524, 40) to the top of the website. The radius is 20px and the color is white.

 

I will select line tool, and with a thin line (1 pixel) I will create two lines between my text buttons

Select the line tool to set the width to 1 px, and create two lines (one black and one white) between the text buttons)

 

I will select both line layers in my layer palette, and then I will press on CTRL + E (to merge the layers into a single one ). I will select eraser tool, and I will use a soft mechanical brush with a size between 200 and 300 pixels. then I will delete the right part of the line.

I will select the two straight line layers, press Ctrl + E (merge layers), select the eraser tool, select a soft edge circle, the size ranges from 200 to 250 px (is recommended). I will delete the right half of the line.

 

I will delete also the left part, and I will make some duplicates after this layer. With move tool or with your arrow key I will move the duplicated layers to the bottom.

I also want to delete the left half and copy the layer. Use a mobile tool to move these layers to a proper position

 

With the same technique as above I will add some lines also on other parts of the layout. You can change the blending mode for this layer to overlay.

Add a straight line in other parts of the layout with the same technology. Change the blending mode of these line layers to overlay

 

I will create a new layer right under my round images. I will select Brush tool, and with a round soft brush, I will make a point over my layout in the following spot. please set your foreground color to black.

Create a new layer under the circle. Select the paint brush tool, select a flexible edge circle tool, and add a large dot (the radius is set to 360px, and the hardness is 20% ). Select black as the foreground color.

 

Select rectangular marquee tool, and create a selection like mine.

Select the rectangle selection tool to create the following rectangle selection box

 

Your selection shocould be right between the horizontal lines you have placed a few steps ago. now be sure you have the right layer selected (with the black brush drawing), and now press on CTRL + I, or go to image> adjustments> invert. your layout will look like this one.

Select the area between the previous two horizontal lines, select the black dot layer, press Ctrl + I, or click: Image> adjust> reverse, your Layout looks like the following:

 

Press on CTRL + d if you have the selection still active, and now change the blending mode for this layer to overlay, and you can also lower the opacity value to 40%.

Press Ctrl + D to cancel the selection. Change the blending mode of the layer to overlay and the opacity to 40%.

 

 

This is how my simple slideshow will look like

This is my picture slide bar Effect

 

Now I will add some round buttons

I will add a circle button on both sides of the left side (the button on the left side adds a layer style of inner light and stroke, and the button on the right side adds a layer style of inner light and stroke)

Stroke color: #4e4c48

 

In the middle of my layout I will add also a round shape

In the middle of the layout, add a circle (with stroke, fill color: # 5a4d3a, stroke color: # b9f308)

 

 

This is my final layout

This is my final result

 

Postscript:

This layout is indeed uncommon.

Highlights of this tutorial include:

1. Use the eraser tool to achieve gradient effect

2. Use the layer blending option to overlay the highlights.

3. The reverse effect, especially in the tutorial, is amazing.