Graphic Design Studio Web Layout

June 17th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout

insert the Close indicator:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Make a copy of the last made layer and choose Free Transform option to place the copy the same way as below:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The styles for the copy’s layer: Blending Options>Inner Shadow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Now we’ll represent the button of the menu on the site’s header, above the sections’ panel. In this case we’ll apply the Rounded Rectangle Tool (U) (radius of 20 px)

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The layer’s styles: Blending Options>Gradient Overlay

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Gradient’s parameters:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Make three copies of the last made layer containing the button and select again Free Transform option to place the copies as it is shown below:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Next we need to add the titles for the menu’s buttons situated on the site’s header:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Select the same styles for the layers containing the buttons’ titles: Blending Options>Drop Shadow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The last step includes inserting the site’s name (used font):

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The layer’s styles: Blending Options>Drop Shadow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Blending Options>Inner Glow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Blending Options>Gradient Overlay

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Gradient’s parameters:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Finished!

View full size here.

Post Pages: 1 2 3

  • rahul kmar tailor

    06.17.09

    good tutorial

  • clippingimages

    06.17.09

    WoW :) Awesome tutorials. Thanks for sharing this nice post.