Stylish WebStudio Web Layout


A complete tutorial on how to make a stylish webstudio web layout.

Begin by creating a new file (File>New) with 800×600 px and 72 dpi. Using the Paint Bucket Tool (G), paint it out in here showed color: # E2C89F.

Stylish WebStudio Web Layout

Next we need to take the Rectangle Tool (U) to create the layer designed for the site’s sections, which color is the same with the background’s one. The shape may be corrected with Convert Point Tool. We’ll add one more top with Add Anchor Point Tool.

Stylish WebStudio Web Layout

The layer’s parameters:
Blending Options>Drop Shadow

Stylish WebStudio Web Layout

Blending Options>Stroke

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

Create a new layer. After that we’ll represent the shadow under the sections’ layer. Using firstly the Brush Tool (B), try to make a patch of black color and then applying the Smudge Tool (R) we’ll blur out the patch from the right side to the left one. The Eraser Tool (E) will be helpful in erasing the unnecessary elements.

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout
Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

Now we’ll represent the menu’s buttons situated on the site’s header, choosing the Rectangle Tool (U). Their shape may be corrected with Convert Point Tool. The layer should be placed lower than the sections’ layer, on the layers’ palette.

Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout

Blending Options>Gradient Overlay

Stylish WebStudio Web Layout

Gradient’s parameters:

Stylish WebStudio Web Layout

Blending Options>Stroke

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

Make four copies of the new made button and select the Free Transform option to turn them over if necessary. Choosing the Convert Point Tool, it’s possible to make the corrections on the copies’ shapes too. Change the parameters for each copy’s layer. The copies must be placed, like the first button, lower than the sections’ layer, on the layers’ palette.

Stylish WebStudio Web Layout

The parameters for the first copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Stylish WebStudio Web Layout

Blending Options>Gradient Overlay

Stylish WebStudio Web Layout

Gradient’s parameters:

Stylish WebStudio Web Layout

The parameters for the second copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Stylish WebStudio Web Layout

Blending Options>Gradient Overlay

Stylish WebStudio Web Layout

Gradient’s parameters:

Stylish WebStudio Web Layout

Blending Options>Stroke

Stylish WebStudio Web Layout

The parameters for the third copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Stylish WebStudio Web Layout

Blending Options>Gradient Overlay

Stylish WebStudio Web Layout

Gradient’s parameters:

Stylish WebStudio Web Layout

Blending Options>Stroke

Stylish WebStudio Web Layout

The parameters for the fourth copy:
Fill 0% on the layers.
Blending Options>Drop Shadow

Stylish WebStudio Web Layout

Blending Options>Gradient Overlay

Stylish WebStudio Web Layout

Gradient’s parameters:

Stylish WebStudio Web Layout

Blending Options>Stroke

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

Select then the Custom Shape Tool (U) that would help us to represent several stars (the colors’ codes are indicated). We need to turn the figures over if that is necessary, choosing the Free Transform option:

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

The stars with the shadow have the layer’s parameters:

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

(the same parameters)
Blending Options>Drop Shadow

Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

We need to write now the site’s title:

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

The layer’s parameters:
Blending Options>Gradient Overlay

Stylish WebStudio Web Layout

Gradient’s parameters:

Stylish WebStudio Web Layout

Blending Options>Stroke

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

We’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.

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

The layer’s parameters:
Blending Options>Stroke

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

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:

Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout

The layer’s parameters:
Blending Options>Stroke

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

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.

Stylish WebStudio Web Layout

(home)

Stylish WebStudio Web Layout

(about us)

Stylish WebStudio Web Layout

(services)

Stylish WebStudio Web Layout

(portfolio)

Stylish WebStudio Web Layout

(contacts)

Stylish WebStudio Web Layout

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.

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout

(the bold text)

Stylish WebStudio Web Layout

(the usual text)

Stylish WebStudio Web Layout

Insert also the titles of the site’s sections:

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

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.

Stylish WebStudio Web Layout

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

Stylish WebStudio Web Layout
Stylish WebStudio Web Layout

Finished!