In this tutorial we’ll be learning how to make a nice, clean, eye catching web layout that anyone could make. Really, it’s quite easy, and I hope you learn new things from it. Enjoy.
Let’s create a new file (File>New) of 1200×1300px/72dpi. Select after that the Paint Bucket Tool (G) to give black color to the new background layer.
Using the Rectangular Marquee Tool (M) on a new layer, it’s possible to mark the corresponding zone for the site’s header. Using the Paint Bucket Tool (G), give it the color #2F8E8D
Next we’ll download a set of ready to use brushes for Adobe Photoshop: grunge procedural.
Make a click on the recently made layer containing the panel for the site’s header on the bottom part of the layers’ panel on Add a Mask selection and apply the brushes here, named grunge procedural. The black color should be used for cleaning out the green background.
Let’s create a new layer and apply here the brushes of the grunge procedural set. In this case we need to represent several spots.
Press Alt button while clicking between the brushes’ layers and the layer containing the panel:
Create a new layer and use here the Rectangular Marquee Tool (M) to mark out the square zone and after that choose the Paint Bucket Tool (G) to give the color #A8AFB2
Next we’ll use the same Rectangular Marquee Tool (M) to insert a thin marking stripe.
Make a right mouse’s click on it on Transform Selection and incline it a little. This stripe needs to be situated above the grey square on the left side.
Apply the made changes and press DELETE button. This way we’ll cut out several openings in the grey square.
Using the Custom Shape Tool (U), try to make two small stars of black and white colors. They should be placed on the right side of the panel containing the site’s header.
Make a copy of the layer containing the black star. Mark out its inside tops and choose Convert Point Tool (hold on the SHIFT button), press CTRL+T and then press Maintain aspect ratio to compress it uniformly. Choose this color for the copy’s layer - #3E9D49
Make a copy of the layer with the green star and apply Free Transform option to change the copy’s sizes and place the copy exactly the same way demonstrated below. Change the color of the layer with the black one.
Let’s represent after that a ring of the color #7AC255 situated on the right side of the green star. Choose in this case the Custom Shape Tool (U).
Using the Rectangle Tool (U), we’ll represent the layer reserved for the site’s body. The layer is of the white color.
Next we must combine in a group all the layers composing the top panel in the site’s header (press Ctrl button to mark out the necessary layers and then hold on the left mouse’s button to take the marked layers on Create a new group selection). Using the Free Transform option, put the group’s copy on the bottom part of the site reserved for the blog footer.
Next we need to represent a panel reserved for the menu’s buttons on the site’s header, using the Rectangle Tool (U). The color is #FBFDE8
Using the Rounded Rectangle Tool (U) (radius 15 px), try to make a panel for the logo, colored with #E10811
Set the next indicated styles by making a click on this layer on the layers’ panel: Blending Options>Inner Glow
Insert now the site’s name:
The layer’s styles: Blending Options>Drop Shadow
Insert the titles for the buttons on the menu’s panel:
Under the menu’s panel containing the buttons, we’ll insert the section “About me”:
About me
the basic section’s text
Insert a button now under the text, applying the Rectangle Tool (U) with the color #D40610
The layer’s styles: Blending Options>Drop Shadow
Blending Options>Inner Glow
Insert the title on the button:
Choose the next demonstrated styles for the layer containing the button’s title: Blending Options>Drop Shadow
Now we need to select the Line Tool (U) to insert the markings for the borders of the site’s sections. Each line should be on its layer. The color is #B4B4B4
Make a mouse click on each layer containing the lines on the bottom part of the layers’ panel on Add a Mask selection and choose the brushes out of the set grunge procedural to clean out with black color the lines of the markings (Opacity 20%).
Insert in the section its title and the appropriate text:
the section’s title
the basic section’s text
Make two copies of the layer containing the title and the text. Using the Free Transform option, place the copy’s layers the same way demonstrated below:
Under the section’s text, on its left side we’ll represent a button with the Rectangle Tool (U). The layer’s color in this case is #262626
The layer’s styles: Blending Options>Inner Glow
Make two copies of the layer containing the last made button. Choose then Free Transform option and place the copies as it is demonstrated below. One copy should be left without any changes (place it under the lowest section), but the second copy should be placed on the central part, changing its color on #D40610.
Blending Options>Inner Glow
Insert the title on the made button:
The layer’s styles: Blending Options>Drop Shadow
Make two copies of the layer containing the button’s title and apply Free Transform selection to place the copy’s layers the same way as it is on the picture:
Insert the comment you want on the button’s right side:
12 Comments
Posted by
admin
Make two copies of the layer containing the comment’s text and choose again the Free Transform option to place them the same way indicated below:
Insert one more section on the right top part of the panel containing the sections:
the title for the section:
the section’s text:
Next we have to insert the categories’ section under the recently made section:
the title for the section:
the titles for the categories:
Next we have to set the Brush Tool (B) in the menu of the Brushes tools’ panel:
Create a new layer and apply the set brush and the color #AFB57B. Apply the brush between the categories’ titles, then change the brush’s color with #E7E9D7 and paint the category’s title on the left and right sides.
Make four copies of the layer with the dividing line and choose again the Free Transform option to place the copies the same way demonstrated below:
The final result!
View full size here.
