Create a fresh and colorful web page layout in photoshop-PS tutorial

This tutorial will show you how to use photoshop to create a fresh and colorful web page layout. I am also very grateful to Kuntiz, the original layout designer of ThemeForest, for his permission to complete this tutorial. The following are the images required during the creation process:
Green leaves


Pixel-based blue rectangle

Step 1: Create a gradient PX * 750px document, select the gradient tool (G), and create a gradient from top (#792700) to bottom (#000000) on the background layer, as shown in:

Step 2: Add a new color layer, select the brush tool (B), and select a soft brush with a diameter of PX, respectively Red (# be4816), yellow (# c0952c) and Blue (#33afc6) colors are painted on the upper half of the background layer, and the layer is named "color ". As shown in:

Step 3: Add a texture to open the "green leaf" image saved at the beginning, use the mobile tool (V), move it to the current document, right-click the new layer, and select "convert to smart object ", go to the menu: filter> Art> film granules, filter> pixel> mosaic. refer to the settings and set the "mixed mode" of the layer to "difference value ", the transparency is 30%, and the layer is named "texture ". As shown in:


Step 4: Add a new black background layer to the content, select the rounded rectangle tool (U), set the 3px radius, create a black rounded rectangle, double-click the layer, and the "layer style" dialog box is displayed, set "shadow", set the transparency of the layer to 70%, and name the layer "black form", as shown in:

Step 5: Add a group management layer Press ctrl, select all the layers created so far, and group the layers (ctrl + g). The group name is: background, as shown in.

Step 6: Create more groups (layer> New> layer Group), name the group as home page, add another group in "Home Page", and name the group "logo ",:

Step 7: create a logo and website subtitle in the "logo" group to create a new layer, select the font tool (T), and write your website name in the color of # f4f4f4. Double-click the layer, follow the settings of the layer style, "slope and relief", "Shine", "gradient superposition ". Create a new layer and edit the website subtitle. the color is # eeeeee.


Step 8: create the "register" and "log on" button. now, two buttons are created in the upper right corner of the layout.
Create a new group and name it "register | log on". select the rounded rectangle tool (U) to create a rounded rectangle like me. double-click the shape layer to bring up the layer style dialog box, as shown in settings.
Set the foreground color to white. use the font tool to write "register | log on" on the button and set the transparency of the font layer to 75%.


Step 9: create a new blue horizontal line group with a height of 1 px, name it "navigation", create a layer, select the single-line box selection tool, and create a selection area with a height of 1 px in the document, fill it with color #406f94, use the rectangular box selection tool (M) to delete the selection area that exceeds the black rectangle, set the transparency to 40%, and name the layer "horizontal line ".

Step 10: add a gradient to the navigation bar select the rectangular box selection tool (M) to create a selection (tip: you can use the ruler), and then use the gradient tool (G) draw a gradient from the bottom to the header from # 35423e to transparent. Press Ctrl + D to undo the selection, right-click the layer, convert it to "smart object", and then go to menu filter> Miscellaneous> add and set accordingly. Name this layer "gradient" and set a 1px distance between the gradient and the horizontal line.