Learn how to create an effective and contemporary web layout for your design studio.
Start working by creating a new file (File>New) of 1000×8000px/72 dpi. Using the Paint Bucket Tool (G), now give black color to the new background layer. 
Using a standard brush with the Opacity of 20% on a new layer (Create new layer), it’s possible to represent a spot of red color and then minimize the brush’s size to add some green color by the vertical line. 
Create a new file (File>New) of 3×3px/72dpi where we’ll represent the next pattern. In this case we’ll apply the Pencil Tool (B) (brush 1 px) and black color. The file’s background needs to be removed. 
Edit>Define Pattern
Create a new layer and apply here Edit>Fill, choosing the earlier saved pattern. 
Select now the Rounded Rectangle Tool (U) (radius 10 px) to represent a panel reserved for the portfolio and the text on the site. 
Set the next demonstrated styles by making a mouse click on this layer on the layers’ panel: Blending Options>Outer Glow 
Blending Options>Inner Glow 
Blending Options>Gradient Overlay 
Gradient’s parameters: 
Make a copy of the last made layer and select the Convert Point Tool and Direct Selection Tool (A) to change the placement of the right top corner and the left lowest corner on the picture: 
The layer’s styles: Blending Options>Gradient Overlay 
Gradient’s parameters: 
Insert the section’s name, keeping the next shown demands in the table: 
Insert the text we need under the section’s name, keeping also the demands from the table: 
Now we’ll place the pictures on the right side of the site’s name: 
Select the same styles for the pictures’ layers: Blending Options>Stroke 
Now we’ll represent the scrolling button on the right side of the pictures, applying the Custom Shape Tool (U). The button needs to be turned over with the Free Transform option. 
The layer’s styles: Blending Options>Gradient Overlay 
Gradient’s parameters: 
Make a copy of the layer containing the button with the pointer. Using Free Transform option, try turning around the copy, situating it the same way as it is demonstrated below: 
Next we’ll draw the indicator cursor under the scrolling top pointer, using the Rounded Rectangle Tool (U) (radius of 10 px). 
The layer’s styles: Blending Options>Inner Shadow 
Blending Options>Gradient Overlay 
Gradient’s parameters: 
Applying the Ellipse Tool (U), we’ll represent the Close button on the right top corner of the site’s section panel: 
The layer’s styles: Blending Options>Drop Shadow 
Blending Options>Inner Shadow 
Blending Options>Outer Glow 
Blending Options>Inner Glow 
Blending Options>Gradient Overlay 
Gradient’s parameters: 
insert the Close indicator: 
Make a copy of the last made layer and choose Free Transform option to place the copy the same way as below: 
The styles for the copy’s layer: Blending Options>Inner Shadow 
Now we’ll represent the button of the menu on the site’s header, above the sections’ panel. In this case we’ll apply the Rounded Rectangle Tool (U) (radius of 20 px) 
The layer’s styles: Blending Options>Gradient Overlay 
Gradient’s parameters: 
Make three copies of the last made layer containing the button and select again Free Transform option to place the copies as it is shown below: 
Next we need to add the titles for the menu’s buttons situated on the site’s header: 
Select the same styles for the layers containing the buttons’ titles: Blending Options>Drop Shadow 
The last step includes inserting the site’s name (used font): 
The layer’s styles: Blending Options>Drop Shadow 
Blending Options>Inner Glow 
Blending Options>Gradient Overlay 
Gradient’s parameters: 
Finished!
View full size here.
discuss this topic to forum
