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!

Professional Design Studio Web Layout

Next we’ll represent the palette reserved for the navigating buttons. For the beginning we’ll take the Rounded Rectangle Tool (U) to represent one part of the palette to be and then hold on the Shift button, choosing simultaneously the Ellipse Tool (U) to finish the buttons. The color should be this one – #0E7AD9

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Inner Shadow

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CSNext step includes drawing a scrolling bar, colored in #01477B. The instrument we need to pick up for this operation is Rounded Rectangle Tool (U).

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Stroke

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Next try to represent the button inside the scrolling bar, selecting the last instrument too.

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CSThe layer’s parameters:
Blending Options>Bevel and Emboss

Create Professional Design Studio Web Layout in Photoshop CS

Blending Options>Gradient Overlay

Create Professional Design Studio Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Now we shall represent the navigating button, applying the Ellipse Tool (U).

Create Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Professional Design Studio Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Design Studio Web Layout in Photoshop CS

Blending Options>Stroke

Create Professional Design Studio Web Layout in Photoshop CSGradient’s parameters:

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Applying the last instrument, it’s possible to draw a flare on the previous button.

Create Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters:
Fill 0% on the layers.
Blending Options>Gradient Overlay

Create Professional Design Studio Web Layout in Photoshop CS

Gradient’s parameters:

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

For the convenience, we need to combine in a group all the layers composing the recently made button. Press on the Ctrl button to mark out the necessary layers and then hold on the left mouse’s button to take the layers downside on Create a new group option. Make six copies of the made group and apply the Free Transform option to make the copies smaller if necessary and place the copies exactly the way it is demonstrated below.

Create Professional Design Studio Web Layout in Photoshop CS

We need to draw a pointer of white color on our button, choosing the Custom Shape Tool (U) and turn it over with the Free Transform option.

Create Professional Design Studio Web Layout in Photoshop CSCreate Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Outer Glow

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Make six copies of the new made layer and choose again the Free Transform option to turn the copies over if that is necessary or make them smaller. Place them the same way it is shown on the picture below. We need also to move off the effect from the copies on the upper buttons.

Create Professional Design Studio Web Layout in Photoshop CS

Add by one white small stripe near the pointers on the lowest buttons, taking the Rectangle Tool (U).

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters are the same.
Blending Options>Outer Glow

Create Professional Design Studio Web Layout in Photoshop CSCreate Professional Design Studio Web Layout in Photoshop CS

Next we’ll represent the site’s logotype, choosing again the Custom Shape Tool (U) and picking up the next pattern shown with red color.

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

The layer’s parameters:
Opacity 5%

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Make a copy of the last made layer and choose the Free Transform option to place the copy like it is shown below.

Create Professional Design Studio Web Layout in Photoshop CS

Insert the section’s titles, following the demands from the table below.

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CSThe layer’s parameters:
Blending Options>Drop Shadow

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Fill the site’s section with the necessary text:

Create Professional Design Studio Web Layout in Photoshop CS

(the orange text)

Create Professional Design Studio Web Layout in Photoshop CS

(the basic section’s text).

Create Professional Design Studio Web Layout in Photoshop CS

Finally we’ll introduce the works’ screenshots, applying equal parameters for all of them.
Blending Options>Stroke

Create Professional Design Studio Web Layout in Photoshop CSCreate Professional Design Studio Web Layout in Photoshop CS

In the end we’ll introduce the site’s name, keeping the demands from below.

Create Professional Design Studio Web Layout in Photoshop CS

(design)

Create Professional Design Studio Web Layout in Photoshop CS

(studio)

Create Professional Design Studio Web Layout in Photoshop CS

(portfolio)

The site’s text inscription has the same parameters too.
Blending Options>Drop Shadow

Create Professional Design Studio Web Layout in Photoshop CS

Create Professional Design Studio Web Layout in Photoshop CS

Finished!

View full size here.

Page: 1 2

Comments