一个优秀的国外网站教程1.docx

1、一个优秀的国外网站教程1How To Create a Clean and Colorful Web Layout Photoshop TutorialIn this tutorial I am going to show you how to create a clean corporate layout in Photoshop. The original layout was created by kuntiz from ThemeForest and I want to thank him for allowing me to write this tutorial.Materials

2、 Needed: leafs pixelated blue rectangleStep 1: Create a new documentCreate a new document (Ctrl+N) in Photoshop with the size 1200px by 750px. Then select the Gradient Tool (G) and draw a gradient #792700 to #000000 from the top to the bottom of your document.Step 2: Add some colors to your backgrou

3、ndCreate a new layer, select the Brush Tool (B), select a soft brush with the diameter 300px and add some colors to your layout. I have used red, orange and blue. Name this layer color.Step 3: Add a texture to the backgroundNow we are going to create a texture for our background. Open in Photoshop t

4、he leafs image which you have downloaded at the beginning of the tutorial and move it into your document using the Move Tool (V). Right-click on this layer and select Convert to Smart Object. Then go to Filter Artistic Film Grain and use the settings from the following image. Then go to Filter Pixel

5、ate Mosaic, and again use the settings from the following image. Set the blend mode for this layer to Difference, the opacity to 30% and name it texture Step 4: Create a dark background for the contentCreate a new layer, select the Rounded Rectangle Tool (U), set the Radius to 3 pixels and create a

6、rounded black rectangle. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow. Set the opacity of this layer to 70% and name it black shape.Step 5: Use groups to organize your layersHold down the Ctrl key and select all the laye

7、rs which you have created until now and then group them (Ctrl+G). Name the group background.Step 6: Create more groupsCreate a new group (Layer New Group) and name it home. Then create another group inside the home group and name it logo.Step 7: Add a logo and a taglineCreate a new layer inside the

8、logo group. Then select the Type Tool (T) and write the name of your layout using the color #f4f4f4. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then create a new layer and write a tagline using the color #eeeeee.Step 8: Sign up and login

9、buttonsNow we are going to create two buttons in the upper right corner of our layout. Create a new group and name it Sign up | Login. Then select the Rounded Rectangle Tool (U) and create a rounded rectangle like I did. Double-click on the shapes layer to open the Layer Style window and use the set

10、tings from the following image. Set the foreground color to white and use the Type Tool (T) to write the words Sign up | Login on your button. Set the opacity of the text layer to 75%.Step 9: Create a blue line with the height of 1 pxCreate a new group and name it Navigation. Create a new layer, sel

11、ect the Single Row Marquee Tool and click once on your document to create a selection with the height of 1px. Fill that selection with the color #406f94 and delete what is outside of the black rectangle using the Rectangular Marquee Tool (M). Set the opacity of this layer to 40% and name it Line.Ste

12、p 10: Add a gradient to the navigation barCreate a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did (note: you can use some guides to help you create the selection). Then select the Gradient Tool (G) and draw a gradient #35423e to transparent from the bottom to th

13、e top of the selection. Hit Ctrl+D to deselect. Then go to Filter Noise Add Noise and use the settings from the following image. Name this layer gradient and leave a distance of 1 pixel between the line and the gradient.Step 11: Write the names of your layouts pagesSelect the Type Tool (T) and write

14、 the names of your layouts pages in the navigation bar. Then double-click on the text layer to open the Layer Style window and use the settings from the next image. The font which I have used is called Greyscale Basic.Step 12: Create a separatorNow we are going to create a separator. Create a new la

15、yer, select the Single Column Marquee Tool and click once on your layout. Then select the Rectangular Marquee Tool (M), click on the Intersect with selection button from the option bar and create a selection like the one from the next image. Fill the selection with white and hit Ctrl+D to deselect.S

16、tep 13Double-click on the layer which you have created at the previous step to open the Layer Style window and use the settings from the following image. Name this layer line 1.Step 14:Step 15: Convert the line 1 and line 2 layers into a smart objectHold down the Ctrl key and select the line 1 and l

17、ine 2 layers. Then right-click on one of them and select Convert to Smart Object. Name the smart object separator.Step 16: Create a blue highlightCreate a new layer beneath the separator layer. Select the Rectangular Marquee Tool (M), create a selection like the one from the following image and fill

18、 it with the color #35423e. Right-click on this layer and select Convert to Smart Object. Go to Filter Blur Gaussian Blur and use the settings from the next image. Then go to Filter Noise Add Noise and again use the settings from the following image. Set the opacity of this layer to 60% and name it

19、highlight.Step 17: Create a mask for the separator layerClick on the separator layer in the Layers palette to select it and then go to Layer Layer Mask Reveal All. Select the Gradient Tool (G) and draw a black to transparent gradient from the top to the middle of your separator.Step 18: Duplicate th

20、e separatorHold down the Ctrl key and click on the separator and highlight layers in the Layers palette to select them. Then select the Move Tool (V), hold down the Alt and Shift keys and then click on your document and drag the mouse. Now you have duplicated the selected layers. Use the Move Tool (

21、V) to move these new layers to the right. Repeat this step and create as many separators as you need. Step 19: Group all the separatorsSelect all the separator and highlight layers in the Layers palette and hit Ctrl+G to group them. Name the group separators.Step 20: Create a button for the active p

22、ageNow we are going to create a background for the active menu page to differentiate it from the others. Select the Rectangle Tool (U) and create a rectangle like I did. Put this layer beneath the text layer which contains all the pages names. Double-click on this layer and use the settings from the

23、 following image for Gradient Overlay. Then name it active menu and set its opacity to 50%.Step 21: Create the search barCreate a new group (Layer New Group), name it search and put it above the navigation group. Select the Rounded Rectangle Tool (U), set the Radius to 3 px and create a rounded rect

24、angle like I did using the color #104f59. Name this layer text field and set its opacity to 80%.Step 22: Create the search buttonSelect the Rectangle Tool (U) and create a rectangle like I did. Put this rectangle in the right side of the search bar. Double-click on this layer and use the settings fr

25、om the following image for Gradient Overlay. Then right-click on this layer and select Create Clipping Mask. Step 23: Write the word search on your buttonSelect the Type Tool (T) and write the word search using the white color. Set the opacity of this layer to 75%.Step 24: Create a vertical line for

26、 the search barSelect the Line Tool (U) and create a vertical line using the color #123036. Name this layer line, put it beneath the button layer and move it between the search bar and the button using the Move Tool (V). Step 25: Create a blue rectangleCreate a new group (Layer New Group) and name i

27、t Showcase. Create another group inside this one and name it background. Select the Rectangle Tool (U) and create a rectangle using the color #219aad. My rectangle is 983 px wide by 273 px height (you may want to open the Info palette - Window Info before you create the rectangle, so you can see the

28、 exact size of your rectangle). Set the opacity of this layer to 55% and name it bg4.Step 26: Add a texture to the blue rectangleOpen in Photoshop the pixelated blue rectangle image, move it into your document and put this image above your blue rectangle. Set the opacity of this layer to 55% and nam

29、e it bg3.Step 27: Add a gradient to the blue rectangleCtrl-click on the bg4 layers vector mask to select it, then create a new layer, select the Gradient Tool (G) and draw a gradient #56b8e5 to transparent from the bottom to the top of your selection. Then hit Ctrl+D to deselect.Step 28: Create a sm

30、aller blue rectangleCreate a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Select the Gradient Tool (G) and draw a gradient #0f2b42 to #2a607f from the bottom to the top of your selection. Then hit Ctrl+D to deselect. Name this layer bg1.Step 29: Sign up butto

31、nCreate a new group (Layer New Group) and name it sign up button. Select the Rounded Rectangle Tool (U), set the Radius to 2 px and create a rounded rectangle like I did. Double-click on this layer to open the Layer Style window and use the settings from the following image. Then select the Type Too

32、l (T) and write the words sign up using the white color.Step 30: Learn more buttonRepeat the previous step to create another button, but this time write the words learn more on your button. Then create a new layer, select the Custom Shape Tool (U) and create a white arrow like I did.Step 31: Create a button in the left side of the rectangleCreate a