Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Creative Studio Web Page

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.

Page: 1 2

Comments