Before launching a new site, you should place a page on it. “Coming soon” (“Coming soon”). We do not want users to be dissatisfied with glitches on the site due to redesign, for example.
Therefore, for those who are interested in how to create such a page, I made a PSD manual. Hope you are ready!
Install the downloaded fonts on your computer, and we will start. Go!
- Download the archive with materials for the lesson
- Download PSD file
Note: The source of the lesson is missing some images. In the archive you will find an alternative version of the materials for the lesson..
Open your Photoshop, and we will move to the goal.
Creating a document, install width (width) 980 pixels, and height (height) 1000 pixels.
Fill the canvas with # D9D8D6 and add Noise (Filter> Noise> Add Noise) (Filter> Noise> Add Noise) 1%.
Take the tool “Rectangular area” (Marquee Tool) (M), create a new layer (CTRL + SHIFT + N), draw a header and a footer (header and footer). Fill them with # 3E3E3E.
Go to the Layer Style by double clicking on the space near the layer thumbnail, Blending options select Shadow (Blending Options> Drop Shadow), set the color to # b1b0b0. Bias (Distance) – 3 pixels, the size (size) – 7 pixels.
Next we will create a logo. Take the tool “Rectangle with rounded edges” (Rounded Rectangle Tool) (U), set a radius of 5 pixels. Use the fill color # E34601.
In Layer Style, select Blend Options> Inner Glow (Blending Options> Inner Glow), color # fb6b2b, tightening (choke) 100%, the size (size) – 2 pixels.
Background for our logo is ready.
Select font Distant Galaxy, 43 points, color # 3e3e3e.
AT Blending options (Blending Options) for the text of the logo, set the color to # fc9856, as well as bias (Distance) and the size (size) – 1 pixel.
Ibid: Inner shadow (Inner Shadow): color # 353434 as well bias (Distance) and the size (size) – 1 pixel.
The logo is ready, now you need to add some text. I used the same font as for the logo, 88 points, color # 3e3e3e.
Take the tool “Rectangle” (Rectangle Tool) (U), draw a rectangle and fill it with white (#ffffff).
In Layer Style, add Stroke (Stroke), color #ababab, the size (size) 1 pixel.
Create a new layer (CTRL + SHIFT + N), take the tool “Oval area” (Elliptical Marquee Tool) (M), draw an elongated shape and position it as shown in the image above.
Next click Filter> Blur> Gaussian Blur (Filter> Blur> Gaussian Blur), set a radius of 9.7 pixels, Opacity (Opacity) – 50%.
After that duplicate the layer and place it on the other side.
We added text with date and time to the layer, I used League Gothic font, 88 points, color # 333333 for numbers, and Arial 12 points, # 333333 for words.
Now take the “Rising Sun” brush of white color, use it in the center of the document. At the bottom of the layer panel, click “Add layer mask” (Add layer mask), then grab the tool “Gradient” (Gradient Tool) (G). Select the direction of the arrows.
Then open the PSD file with the search line and the file with social network icons, and add them to the document.
Now the design of the “Coming soon” page is over.
If you are confused in the steps, let me know in the comments, I will help you. I hope you learned a couple of new pieces from this tutorial.