Design studio - web page layout

September 5th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout

Create a professional design studio layout with easy and detailed instructions.

For the beginning create a new file (File>New) of 850×912 px and 72 dpi. Applying the Paint Bucket Tool (G), fill the new file with some color - #191E24



Create a new layer where must use the Rectangular Marquee Tool (M) to represent several rectangle elements, colored with those codes indicated below (create for each element new layer).



Using the Eraser Tool (E), erase off 3 px out of each rectangle’s corners, as it is shown below. This way we can round up their corners.



Make a copy of the last 4 layers (Ctrl+J), put the duplicated layers in a single layer using Merge Down (Ctrl+E), move this layer under layers with rectangle elements in Layers Palette and apply the effects of the next filter’s selection: Filter>Blur>Gaussian Blur…



You must get the same thing from below:



Get back to the rectangle elements, choosing for each of them the next parameters of Blending Options>Bevel and Emboss (make a mouse click on the layer we work with on the layers’ palette).



Next you may see the gradient’s parameters, each of the elements getting its own color.
Blending Options>Gradient Overlay 

 

Gradient Editor



You may see demonstrated below the gradients for each rectangle element.



On this stage you must get the thing from below:



Now select again the Rectangular Marquee Tool (M) and represent on a new layer four other rectangles as the picture from below shows it. Fill the new elements with white color, applying the Paint Bucket Tool (G). The Opacity is of 20%.



Now it’s time to choose another instrument – the Pen Tool (P) to draw a line like below:



Next select the brush’s presets and set the parameters from below:

Post Pages: 1 2 3