Categories

Partners
 
  • Photoshop Templates

  • Website Templates

  • Web Templates

  • Flash Web Sites

  • WordPress Templates

  • Free Ringtones

  • Free Stock Photos and Images

  • Photoshop

  • St. Louis LASIK | LASIK info

  • Load Cells

  • osCommerce Templates

  • Web Hosting


  • Website Templates
    Search


    Advanced Search


     »  Home  »  Adobe Photoshop  »  Web Layout  »  Creative Studio Web Page
    Creative Studio Web Page
    Published  10/28/2008 | Web Layout
       
    Creative Studio Web Page - part 2


    The layer’s parameters: Blending Options>Gradient Overlay

    Create Creative Studio Web Page in Photoshop CS3

    Gradient’s parameters:

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    Introduce the next indicated picture on the made panel, preliminary cut out according to the panel’s sizes or you can place picture above the panel layer (on the layers’ palette) then press Alt button and make a mouse click between the picture layer and the panel layer (the right corner of the picture should correspond with the beginning of the menu buttons).

    Create Creative Studio Web Page in Photoshop CS3

    The layer’s parameters: Blending Options>Inner Shadow

    Create Creative Studio Web Page in Photoshop CS3

    Blending Options>Stroke

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    Introduce now the text we need on the panel, on the picture’s right part.

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    Applying the Line Tool (U), draw a horizontal line under the text, having the color #363A3C

    Create Creative Studio Web Page in Photoshop CS3

    Under the already made line we need to apply the Rounded Rectangle Tool (U) (radius of 10px) for representing a button colored with #F79700

    Create Creative Studio Web Page in Photoshop CS3

    Write the button’s title:

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    Next we need to get the appropriate result by merging together in a group all the layers composing the panel, the picture, the button there and the text (press Ctrl button to mark out all the necessary layers and hold on the left mouse’s button to take down the marked layers on Create a new group selection). Make two copies of this new group and select Free Transform option to place the copies lower. Insert also other pictures on the panels’ copies.

    Create Creative Studio Web Page in Photoshop CS3

    Write the data on each panel:

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    Create a new layer to represent on it a pattern, like the one from below. In this case we’ll use the Pencil Tool (B), the brush of 1px and the color #363A3C

    Create Creative Studio Web Page in Photoshop CS3

    Save it: Edit>Define Pattern.
    Using the Line Tool (U) now, try to draw a dividing line between the panels:

    Create Creative Studio Web Page in Photoshop CS3

    The layer’s parameters: Fill 0%
    Blending Options>Pattern Overlay

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    The last step includes introducing the copyright in footer:

    Create Creative Studio Web Page in Photoshop CS3

    Create Creative Studio Web Page in Photoshop CS3

    The final result!

    View full size here.

    Create Creative Studio Web Page in Photoshop CS3 Creative Studio Web Page
    In this detailed tutorial we will learn how to create impressive layout for Creative Studio.


    PSDTUTS+ Photoshop Tutorials and More