Before launching a new site, you need to put a coming soon page on your website. We don’t want them to see our buggy site because of the new re-design, that will give them bad experience.
So if you’re wondering how to create one for your website, I created a .psd guide for you. Hope you’re ready!
You can download the PSD at the bottom of this tutorial!
Before we begin, there are things that we need to download
- Distant Galaxy from Fontsquirrel
- League Gothic from Fontsquirrel
- Search Bar from my previous tutorial
- Social Media Buttons from 365psd.com
- Raising Sun Brush from OneDigitalLife
Install those fonts in your computer, below is what we are creating. Let’s get started!
Open your Photoshop and let’s get going.
Open your canvas and set it up, 980ox for width and 1000px for height.
Fill your canvas with #D9D8D6 and add noise, go to Filter > Noise > Add Noise and put 1%.
Grab your Marquee Tool (M), create a new layer (CTRL + SHIFT + N) and draw the header and footer, fill it with #3E3E3E.
In the header layer, select Blending Options > Drop Shadow and set the foreground color to #b1b0b0. Distance 3px, size is 7px.
Next is we will create our logo, grab your Rounded Rectangle Tool (U) set the radius to 5px. Fill it with #E34601.
In Blending Options > Inner Glow, foreground is #fb6b2b and choke on 100% size 2px.
Here’s our completed logo body.
Use the Distant Galaxy font, 43pt #3e3e3e.
In Blending Options for the logo text, set the foreground to #fc9856 and distance, size to 1px.
Inner Shadow foreground #353434, distance and size 1px.
Logo is complete, now add some text. I use the same font from the logo, 88pt #3e3e3e.
Grab your Rectangle Tool (U) and create a rectangle, fill it with #fff.
Add a Stroke and use the foreground color #ababab, size 1px.
Create a new layer (CTRL + SHIFT + N) and select Elliptical Marquee Tool (M), draw a elongated shape and position it like the image above.
Next is Filter > Blur > Gaussian Blur and set to 9.7, Opacity 50%.
After that, duplicate the layer (CTRL + J) and position the other end.
We added the text time inside the body layer, I use League Gothic 88pt #333 for the numbers and Arial 12pt #333 for the words.
Now select your Raising Sun Brush and the foreground color is #fff, set it at the center. At the bottom of your layer palette, click the Add layer Mask and Gradient Tool (G). Select to where the arrows are pointing.
Next is open the search bar tutorial .psd and social media buttons from 365psd.com, and add them on our canvas.
And we are done with the coming soon page design 🙂
If you’re confused with the steps, give me a shout out in the comments and I’ll help you out. Hope you learned a thing or two about this tutorial 🙂
