Illustrated designs

Design studio - web page layout

Design studio - web page layout - part 1
Download PSD source (Tutorial ID 3004)!

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

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

Create a professional design studio layout in Photoshop CS3

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).

Create a professional design studio layout in Photoshop CS3

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.

Create a professional design studio layout in Photoshop CS3

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

Create a professional design studio layout in Photoshop CS3

You must get the same thing from below:

Create a professional design studio layout in Photoshop CS3


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).

Create a professional design studio layout in Photoshop CS3

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

Create a professional design studio layout in Photoshop CS3 

Gradient Editor

Create a professional design studio layout in Photoshop CS3

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

Create a professional design studio layout in Photoshop CS3

On this stage you must get the thing from below:

Create a professional design studio layout in Photoshop CS3

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%.

Create a professional design studio layout in Photoshop CS3

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

Create a professional design studio layout in Photoshop CS3

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

Create a professional design studio layout in Photoshop CS3



Popular Tutorials

Create Photo Portfolio Web Page Layout in Photoshop CS3Create Sound System Studio Web Layout in Photoshop CS3Create Creative Studio Web Page in Photoshop CS3Create Personal Site Layout in Photoshop CSCreate Stylish web navigation template in Photoshop CS3Create Creative Arts Studio Web Site Layout in Photoshop CS3Create Professional Design Studio Web Template in Photoshop CSCreate Professional Modern Web Layout in Photoshop CSCreate Professional Design Studio Web Layout in Photoshop CSCreate Portfolio Web Layout in Photoshop CS

Latest Tutorials

Design grunge wordpress theme in Adobe Photoshop CS4Create contemporary web layout for your design studio in Adobe Photoshop CS4Create a trendy portfolio layout in Adobe Photoshop CS4Create a clean Freelancer portfolio layout in Adobe Photoshop CS3Create a nice looking photographer portfolio layout in Adobe Photoshop CS3

Subscribe via RSS



Your Favorite Articles

View All Favorites

You Recently Viewed...

No popular authors found.
No popular articles found.