Categories

Partners
  • Website Templates

  • Design Feeds

  • Adobe Photoshop Tutorials

  • Website Templates, WordPress Themes

  • Website Templates

  • Flash Web Sites

  • Photoshop Templates

  • Photo Contests

  • Photo Tips
  • Search


    Advanced Search


    Partner Links
  • Adobe Photoshop Tutorials

  • Free Stock Photos and Images



  • Website Templates

    Design studio - web page layout
    Published  09/5/2008 | Web 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

    Create a professional design studio layout in Photoshop CS3 Design studio - web page layout
    Create a professional design studio layout with easy and detailed instructions.