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!

Stylish WebStudio Web Layout

The small stars (the green one and the brown one) have also the equal parameters:
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Select the same Custom Shape Tool (U) to represent the stars with the openings (the layer of the lowest yellow star should be placed lower than the yellow menu’s button).

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

The layer’s parameters for the stars containing the openings are equal for all of them:
Blending Options>Drop Shadow

Create Stylish WebStudio Web Layout in Photoshop CSCreate Stylish WebStudio Web Layout in Photoshop CS

We need to write now the site’s title:

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Gradient Overlay

Create Stylish WebStudio Web Layout in Photoshop CS

Gradient’s parameters:

Create Stylish WebStudio Web Layout in Photoshop CS

Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CSWe’ll add above the ā€œiā€ letter in the Webstudio word a small star, colored in #D1C5B0, selecting for this operation the Custom Shape Tool (U). Turn the figure over with Free Transform option.

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

We’ll make a click on the right mouse’s button on the recently made star’s layer (on the layers’ palette). Choose the Create layer option and mark out the particularly separate layer. Using the Eraser Tool (E), try to delete those elements shown below:

Create Stylish WebStudio Web Layout in Photoshop CS

Make a copy of the recently made star and select the Free Transform option to make the copy smaller a little.

Create Stylish WebStudio Web Layout in Photoshop CS

The layer’s parameters:
Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CSCreate Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Write the titles for the menu’s buttons situated on the site’s header. Incline the text a little, applying the well-known option – Free Transform.

Create Stylish WebStudio Web Layout in Photoshop CS

(home)

Create Stylish WebStudio Web Layout in Photoshop CS

(about us)

Create Stylish WebStudio Web Layout in Photoshop CS

(services)

Create Stylish WebStudio Web Layout in Photoshop CS

(portfolio)

Create Stylish WebStudio Web Layout in Photoshop CS

(contacts) Create Stylish WebStudio Web Layout in Photoshop CS

Mark out each layer containing the button’s title and then make a mouse’s click on the layers’ palette on Add layer mask option. Next step includes choosing the Brush Tool (B). Apply a darker brush for the lighter inscriptions and for the darker inscriptions we’ll use a lighter brush. The Opacity should be on 90% on each layer on the layers’ palette.

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Insert the necessary text on the site’s section, keeping the demands from the next tables:

Create Stylish WebStudio Web Layout in Photoshop CS

(the bold text)

Create Stylish WebStudio Web Layout in Photoshop CS

(the usual text)

Create Stylish WebStudio Web Layout in Photoshop CS

Insert also the titles of the site’s sections:

Create Stylish WebStudio Web Layout in Photoshop CSCreate Stylish WebStudio Web Layout in Photoshop CS

Using the same operation, described earlier when creating the site’s menu, we’ll process out the sections too (applying the brush on the text). The brush is the same and the color is the same with the background’s one.

Create Stylish WebStudio Web Layout in Photoshop CS

Introduce the screenshots of the works:
The layer’s parameters:
Blending Options>Stroke

Create Stylish WebStudio Web Layout in Photoshop CS

Create Stylish WebStudio Web Layout in Photoshop CS

Finished!

View full size here.

Page: 1 2

Comments