There are various reasons why you may need to create a Coming Soon Page. You may want to start to have the domain indexed by the crawlers and fill in the white space with something that recalls your website launch; or start to spread the word about the service that you are going to offer, writing about that in focus forums and collecting a bunch of interested people; or perhaps you may want to create suspense about the launch. Whatever the reasons are, you should consider the relevant information that goes into a Coming Soon Page.
In this tutorial, I will walk you through how to create sleek coming soon page, keeping its content and the design in mind.
- Program: Adobe Photoshop
- Difficulty: Beginner
- Estimated Completion Time: 2 Hours
Here is a preview of the final product:
The icons used in this tutorial: 120 Free New Icons.
Part 1 – Creating the Background Pattern
As you can see from the final image I’ve shown above, our background is characterized by a distorted grid. Before we start to build up the page we need to create the pattern for our background effect.
Open a new document, 50 x 50px, fill it with white color #ffffff.
Go to View > Show > Grid, it will turn on grid view. This will help us easily draw a perfect pattern.
I need to set up my grid preferences so I go to Edit > Preferences and set a gridline every 10 pixels with a subdivision mark every five columns and rows.
This is how the grid looks now:
Now, choose the Single Column Marquee Tool and create a 1px vertical selection. Fill it with black.
Duplicate the line and align it to the grid. Do the same now for horizontal lines.
Go to Edit > Define Pattern. Name it as "grid". You have now your pattern available and ready to be used in the next and more creative part of the tutorial.
Part 2 – Creating the Coming Soon Page
The main task to perform is keeping it simple in content to make the message clear and immediate. Here are some MUST HAVE contents:
- Your logo
- A welcome message to attract and lit your readers’ interest
- A sign up form to keep them motivated and updated about the launch
- Legal notes
At the same time you want to avoid wasting your time with extra graphic work by keeping the design attractive and maintaining a high graphic profile level. The page has to be simple but appealing and has to convince the reader to leave you his contact details because he really wants to know more.
Create new 1200px × 800px document and save it as coming soon.psd.
Unlock the background layer by double clicking it and clicking OK in the dialog box. This removes the lock icon from the layer and enables you to modify it.
Double click the layer again. The effects dialog box will open. Add a gradient effect from #e9e9e9 to #ffffff as shown below.
Create a new layer above and fill it with white. Add the pattern overlay using your previously created pattern “grid”. In effects settings set Opacity to 10%, leave other values at default.
Go back to the patterned layer and decrease the Fill option to 0. In this way the white fill disappears and leaves the pattern visible on the back layer gradient.
You now need to add some guides so that we can maintain proper alignment of our design elements. To add a guide, go to View > New Guide.
We will create 4 vertical guides and 4 horizontal guides. Create vertical guides at the following positions:
Create horizontal guides at the following positions:
Place the logo using the File > Place command . This is better than just dragging and dropping the file into the canvas because with the Place command Photoshop acquires it as a smart object. This means that you can scale the object without losing definition.
Resize the logo in the middle between the first two horizontal lines.
Duplicate the logo layer. Double click the layer and, as before, the layer style option window will open. As for the background layer, apply the grid pattern to the logo. This time scale the pattern down to 25%.
This is what you get.
Load a square brush set and select a small 3 pixel brush.
Open the brush properties panel and modify some parameters as shown below. The scattering effect should start with a strong pixel concentration and rarefy by proceeding.
Create a mask on the layer and with the square brush and black selected as the foreground color, scatter some pixels on the mask. This will let the layer below partially appear by creating a dissolving effect on the gridded logo.
Set the foreground color to #ffffff, select the Rounded Rectangle Tool (U), set the radius to 5px and draw a rectangle from the 2nd horizontal guide to the 600px one.
Let’s add in some text now. As we said, we want to communicate to our readers the main topic of our future web site content, in our case a site full of resources and great tutorials for designers. We also want to include an action where we want them to leave their contact details so that we can notify them once the site is going to be launched.
Let’s start with a captivating header about the current state of the art. Create a new text layer and base it on the first horizontal grid line. Set the text as follow:
Font Face: Advent
Now apply some centered text underneath your logo area. Create another text layer. This time keep the mouse clicked and drag to draw a text box.
Fill in the text box with your message.
Set the text as follows:
Font Face: Advent
In our case I’ve clearly outlined and mentioned:
- The target - the graphics communities, so that I include web designers, print designers, packaging specialists, painters and so on.
- The content – articles and tutorials
- The action – submit your email and stay tuned
I want to add few details to the whole artwork now to make it more appealing. Let’s start with the background making it a little more interesting by adding 3D-like perspective.
First of all select the grid layer and convert it to a smart object as shown below.
Keep the grid layer selected and click the Ctrl-T key to perform a custom transformation. Once the transforming handles appear right click the object and a list of options appears as shown. Select Perspective.
Click on the top corner handle and drag and you'll see the ends of the image slide out. Drag the handle until the grid lines have a sufficient depth view.
Do the same with the bottom handles to get a proportional grid perception.
Finally enlarge the grid so that it covers the canvas completely.
This is what you get. You added a depth perception that makes the logo and the text look like they are situated at different points in the space.
The make-up phase can continue with the logo. I want it to pop up a little bit more from the background so I’ll add an outer glow effect around it.
Open the Layer Style panel and tick the Outer Glow checkbox. Select the options as follows:
Blend Mode: Screen
Size: 40 px
Continue to add details. For example you can add a subtle drop shadow blending option to your white box layer, in order to make it looks like it is floating in space.
Create a new layer. Select the elliptical selection tool and draw an ellipse. Fill in it with #e9e9e9 clear gray color.
Keep it selected but change the fill in color to black #000000 and fill it in again.
Click the Ctrl+T command to free transform the selection and squeeze it from the top handle.
Make it slim enough and press Enter.
Deselect by clicking Ctrl+D command and move your shadow level just beneath the box.
We have now to create the submission fields.Download the free to use icon set kindly provided by Pink Moustache 120 Free New Icons/. Select the edit pencil and the envelope icons and place them inside your canvas and inside your white box.
Set the foreground color to #e9e9e9, select the Rounded Rectangle Tool, set the Radius to 5px and draw a slim rectangle.
Click the right mouse button on the shape layer and select Blending Options, then apply the Stroke option size 1px, position outside, color #c4c4c4.
Duplicate the field object by selecting the Move tool and hold down Alt and drag the object. Select both rectangles and click on the Align Horizontal Center of Selection icon to be sure they are properly aligned.
We can add some text inside the field to give a tip to the readers about which information needs to be inserted. In our example we want their name and e-mail address so we fill the fields with two text boxes as follows:
Font Face: Advent
We now have to add a simple call to action button. Drag the field layer by clicking ALT key to duplicate it.
Click CTRL+T key to transform and resize it to a button size. Add the “Notify Me” text in a bright orange #fea91e to match the logo color. Center it with the other fields.
Add a footer with copyright details. Choose a small character size and remember to use the copyright symbol © (hold down Alt and type 0169 on the number pad on the right hand side of your keyboard: Alt+0169).
Change the foreground color to black and pick the Horizontal Type Tool, choose 14 pt size Advent Bold 2 font and write the copyright information.
Let's add in some more details. Add an orange background to the header for it to stand out and a subtle white drop shadow to the main text.
Set the foreground color to #fea91e, select the Rounded Rectangle Tool, set the Radius to 5px and draw a slim rectangle. Move the layer position under the header text.
Let’s add the white drop shadow line. We're going to use the exact same text to shadow itself, and to do that, we'll need to duplicate our text layer.
Duplicate the header text and change the color to white. Move the layer just behind the gray one.
In order to create our shadow effect, we need to move the original text. To move the text, select the Move Tool and press the Down arrow key only once to nudge the original text downward.
Here is the result.
For the final touch, I've decided to blend the gridded logo more with the colored one in the beneath layer. So double click the pattern style effect of the layer and change the pattern blend mode to Screen.
The Final Image
You should now have something that looks like what you see below. Congratulations! You succeeded in finishing your "Coming Soon" page design.
We covered some useful and trendy techniques like how to create a customized pattern and how to apply it to your background or to any object of the layout. We’ve created a simple and stylish text box with simple but detailed text fields.
I’d like to hear your opinion about this tutorial and the final result. Please feel free to comment!