Graphic blog, Webdesigns tip&tricks, Photoshop tutorials

Building a website requires days, sometimes months of planning, coding and retouching. But if you already bought the domain name, there`s no reason why you shouldn`t do something. In this case, a coming-soon template is a must have. For this reason, I created a tutorial which shows you how design a very nice and clean coming-soon template in Photoshop in a very few steps which fits for any needs.

What we`ll be doing today! (Click the image to see the original version):

Materials Needed:

Social Network Icon Pack

Museo Font

Let`s get started! Open Photoshop and create a new project. Set the canvas to 1300×800px because it is a template and has to follow the standard sizes of a real page layout. Make sure that “Background Contents” is set to “Transparent”.

You notice that in the Layer`s Palette(F7) there`s one layer. Grab the Paint Bucket Tool(G) and with a gray color (#EEEEEE) paint the blank canvas. Then go to Filter->Noise->Add Noise and add an uniform and monochromatic noise of 3%. This filter will create a nice paper like background.

The background will have 2 parts. A dark one situated at the top of the layer and the gray one at the bottom, both calculated following the Golden Ratio rule. What`s this Golden Ratio? Is all about proportions…2 elements in golden ratio points out a beautiful balance between them. As a tip, which I considered very valuable when I learned about it, use as much as you can this golden ratio in your designs…it will bring clarity, proportion and beauty to your projects!

Ok, grab the Rectangle Tool and draw a dark rectangle(#4d4d4e) from top to bottom, following the golden ratio. (the rectangle should be 500px high). Again, apply a noise filter to the new layer, but reduce the percentage to 2.5 .

With the same Rectangle Tool, draw again a black rectangle high of 5px just under the dark rectangle. Then go to Filter->Blur->Gaussian Blur and add a Gaussian Blur of 1.7px.

We`ve just created a very nice shadow between the 2 elements which compose the background. And with this touch, the background is done and we can proceed to the next step! You can see below how the layers are arranged in order to create the background!

Let`s build the content area. Being a coming soon template, the content area shouldn`t be too large but has to contain enough info in order to update the user with the launching date, maybe social networks and a subscribe form. Select the Rounded Rectangle Tool(U),set the Radius to 5px to create rounded corners and draw a rectangle of 720×450px. Then double-click the new layer and add to it the next layer`s styles:

I want to show you how to add a nice shadow under the content box. Select the Ellipse Tool(U) and draw an elipse like in the image. Make sure to choose black when drawing:

Now go to Filter->Blur->Gaussian Blur and blur the ellipse with an amount of 6px.

Place the layer just under the content-box layer and make sure to reduce the opacity of the ellipse to 40% because is too dark. The shadow is done and the layout is looking better and better!

For the content, download the Museo Font from the download list (you can find it at the top of the tutorial) and write something typical for any coming soon template. Then select the Line Tool(U) and draw 2 lines just under the first title. This way, you`ll create a nice letterpress effect.

Now we`re going to build the countdown which will illustrate the days, hours, minutes and seconds until the website will be live. Select the Rounded Rectangle Tool(U) and with a radius of 3px, draw a rectangle of 90×90px. The image below will tell you more:

Now apply the next layer`s styles:

Now grab the Line Tool(U) and with a weight of 1px, draw 2 horizontal lines inside the box to make a delimitation. You`ll see why later

With the Type Tool(T), add some text inside the box.

Duplicate the box 3 times and place them one after another. Make the text changes and the countdown is done! Nice, huh?

We`ll build now the “subscribe form”. Select the Rounded Rectangle Tool(U) and with a radius of 3px, draw a rectangle of 540×36px.

Apply the next layer`s styles by double-clicking on the layer:

Let`s make a small button. Select the Rounded Rectangle Tool(U) and with a radius of 3px, draw a small rectangle inside the subscribe area. Then Select the Custom Shape Tool(U) and add an arrow shape inside the rectangle. That`s it, you have a button now!

Download the social network icon pack and import into the project some of the social networks you prefer. The small icons of 16px fits better. Add some copyright text too and a logo above the box, just to customize the layout.

Believe it or not, we have just finished the coming soon template. I hope you`ve learned something today, but if you have any questions, drop us a comment into the Comments area. Any feedback is always appreciated. Now, take a look at the final image(Click it to see the larger version):

Related posts:

1. How to create a clean and design portfolio layout using Photoshop
2. How to Create a Clean Navigation Menu in Photoshop
3. How to Create a Paper Sticky Note in Photoshop
4. How to create an energy ball effect as Dragon ball Z with Photoshop
5. How to Design a Clean and Beautiful Login Form in Photoshop