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!

Graphic Design Studio Web Layout

Applying the Ellipse Tool (U), we’ll represent the Close button on the right top corner of the site’s section panel:

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 Shadow

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

Blending Options>Outer Glow

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

Page: 1 2

Comments