We draw a template for the site of Creative Studio

In this detailed consultation, you will learn how to draw an impressive website for Creative Studio.

Start your work by creating a new file. 845 x 900 px and 72 dpi. Select after this Tool and fill the document with color #151616

Now we will try to create a lighting effect at the top of our template.
Take Tool Rectangle in shape mode .
Stretch it as shown:

Set this layer parameter Fill (Fill) on 0%

Now apply a layer style to this shape. “Gradient overlay

Gradient options:

See what happened! A soft highlight appeared on top of our document.

Select the Text tool, set the following options and write the name of your site.

For the word CREATIVE, the settings were used:

For the word STUDIO, the settings were used:

As a result:

Apply the following layer styles to the text.


Gradient overlay:

Gradient options:

Using the Tool , draw a thin horizontal line color #323537

Apply the “Shadow” layer style:

Make a copy of the layer with the line (Ctrl + J) and place it at the bottom of the document:

It’s time to create navigation buttons on the header of our template.

Choose a tool , set the corner radius to 10 px. Draw the first button, set the color for it to #3D4A4E

Duplicate the button layer twice. Place them as shown. For the center button, change the color to #1194FC

Write the names of the buttons. Here we used the following parameters:

We continue to draw a template for the site.

Go to the main part. Using tool draw a large gray rectangle, rounding 10 px

Apply the gradient overlay layer style:

Gradient options:

Place the first image on the created panel.

To do this, move the image to the document, Ctrl + click on the layer with the panel, go to the layer with the image, press Ctrl + Shift + I to invert the selection and Delete to remove the extra parts from the image.

Add Shadow:


Enter the text on the right side of the picture, in this lesson the following parameters were used:

Draw a line of color #363A3C where the text ends.

Below the line we will place another button “View”.

Again take , Colour #F79700, rounding 10 px

Parameters for button text:

Select in the palette all the layers that belong to the first panel – this is a gray rectangle, a picture, text, a line and a button. Click Ctrl + G, to merge all layers into one group.

Duplicate this group 2 times. In order not to be confused immediately by each group give your name. Arrange the new panels as shown below.

It remains for you in the last two groups to change the content – image and text.

Write a date on each panel:

And now look at your template! Stylish and creative!

Author: adobetutorialz

Like this post? Please share to your friends: