Design a Textured "Coming Soon" Web Page in Photoshop

Preview

Click on the image below to see the work in full scale.

Preview

Tutorial Resources

Step 1: Create a New Photoshop Document

Start by creating a new document in Photoshop (Ctrl/Cmd + N). The canvas size should be 1200px by 1000px and it should have a white background.

Create a New Photoshop Document

Step 2: Create Photoshop Guides

Now add Photoshop guides so that we can maintain proper alignment of our design elements. To add a guide, go to View > New Guide.

Create Photoshop Guides

We will create 2 vertical guides and 5 horizontal guides.

Create vertical guides at the following positions:

  • 250px
  • 950px

Create horizontal guides at the following positions:

  • 100px
  • 210px
  • 500px
  • 730px
  • 850px

Step 3: Creating the Textured Background

Double-click on the locked Background layer and rename it to "White". This process unlocks the Background layer so that we can modify it.

Create a new layer group (Layer > New > Group) called "Background" and move the "White" layer into the group. All of the layers associated with the design’s background will go in this layer group.

Next, create a new layer (Layer > New > Layer or press Shift + Ctrl/Cmd + N) named "Gradient".

Set your Foreground Color to blue (#005C9D) and your Background Color to brighter blue (#40A5DB), then choose the Gradient Tool (G). Fill the "Gradient" layer using the Gradient Tool by dragging from the bottom to the top of the canvas; hold down Shift while dragging to make a perfectly vertical color gradient. Afterwards, reduce the "Gradient" layer’s Opacity to 70%.

Creating the Textured Background

Set your Foreground Color to white (#FFFFFF) and Background Color to black (#000000). Create a new layer named "Stripes", then use the Clouds filter (Filter > Render > Clouds) on this new layer.

Creating the Textured Background

After that, go to Filter > Blur > Motion Blur and set the Angle to 45o and Distance to 450px.

Creating the Textured Background

Set the Blend Mode of the "Stripes" layer to Overlay and reduce the Opacity to 50%. As you can see below, this results in a sort of striped, light ray effect.

Creating the Textured Background

We’re going to create clouds on top of the web layout. Create a new layer group called "Clouds" and move it inside the "Background" layer group; place it above other layers inside this group.

Set the Foreground Color to white (#FFFFFF) and, using the Ellipse Tool (U), draw several ellipses to make an illustrative, cartoon-like cloud as shown below.

Creating the Textured Background

After that, right-click on the "Clouds" layer group and, in the contextual menu that appears, choose Merge Group (Ctrl/Cmd + E). This will merge the layer group into one layer.

With the "Clouds" layer being the active layer in the Layers Panel, go to Layer > Layer Style > Blending Options to access the Layer Style dialog window and then give the layer a Drop Shadow.

Creating the Textured Background

Set the "Clouds" layer’s Blend Mode to Soft Light and reduce its Opacity to 30%.

Creating the Textured Background

Create a new layer (Shift + Ctrl/Cmd + N) called "Light" and place it above all the other layers. Choose the Brush Tool (B) and use the Options Bar to load the Basic Brushes library that comes with Photoshop. Set your Foreground Color to white (#FFFFFF), choose the Soft, Mechanical brush tip, and set 700px as the Master Diameter of the brush. Click once at the top-center of the canvas to apply the brush stroke.

Creating the Textured Background

Reduce the "Light" layer’s Opacity to 65%.

Creating the Textured Background

We are now going to add a texture to our background. I’ve used the Grunge Grab Bag: Texture Pack from the Design Instruct freebies section. Specifically, I used Grunge Grab Bag Texture 02. Download and open this texture in Photoshop. Place it in our document, and then rename its layer to "Texture". Press Ctrl/Cmd + T to activate Free Transform and then resize your texture to fit inside the canvas.

Go to Image > Adjustments > Black & White to convert the texture to grayscale.

Let us blur the texture layer a little bit. Go to Filter > Sharpen > Unsharp Mask and use the following settings:

  • Amount: 35%
  • Radius: 2px
  • Threshold: 0 levels

Creating the Textured Background

Now set the texture layer’s Blend Mode to Soft Light and reduce its Opacity to 40%.

We are done with the background.

Step 4: Creating the Header

In the Layers Panel, you may now collapse the "Background" layer group by clicking on the small gray triangle next to the group’s name; this will allow us to focus on another part of our work, as well as make our Layers Panel easier to navigate.

Create a new layer group called "Header" (it should be on top of the "Background" layer group).

Choose the Horizontal Type Tool (T) and, in the Options Bar, set up the tool so that you’re using the font: Georgia, Italic, 62px font size. Write your website’s name (in this tutorial, I wrote "Design Instruct Premium"). Use the Photoshop guides we created earlier to align the text.

Double-click on the text layer to access the Layer Style window, then give it a Drop Shadow and Gradient Overlay.

Drop Shadow

Drop Shadow

Gradient Overlay

Gradient Overlay

This is the result of our layer style (which could be recreated in HTML by using CSS3’s text-shadow property and gradient() value).

Step 5: Create the Body Container

Create a new layer group called "Body" and move it below the "Header" group. Set the Foreground Color to white (#FFFFFF) and then use the Rectangle Tool (U) to draw a rectangle between the Photoshop guides we created, as shown below.

Create the Body Container

Now switch to the Custom Shape Tool (U). Make sure that you have the Arrows shape library loaded (it come with Photoshop by default). Locate the shape named Arrow 12 and draw an arrow (shown below).

Create the Body Container

Use Edit > Free Transform > 90o CCW to rotate the arrow so that it points up. Use the Move Tool (V) to position the arrow as shown below.

Create the Body Container

Select the rectangle layer and the arrow layer in the Layers Panel, and then go to Layer > Merge Layers (Ctrl/Cmd + E) to combine them. This results in making the body container look sort of like a speech bubble. Rename the merged layer to something intuitive, such as "Box". With the "Box" layer the active layer, go to Layer > Layer Style > Blending Options to access the Layer Style window so that you can give the layer a Stroke.

Create the Body Container

Go to Filter > Noise > Add Noise and use the following settings:

  • Amount: 1%
  • Distribution: Uniform
  • Monochromatic: checked

Create the Body Container

Download this stripes pattern pattern and open it in Photoshop. Go to Edit > Define Pattern to save the image as a Photoshop pattern (learn more about this topic by reading the Photoshop patterns guide).

Create a new layer (Shift + Ctrl/Cmd + N) called "Stripes". Choose the Paint Bucket Tool (G) and set it to the Pattern option in the Options Bar, then use the Pattern picker (also located in the Options Bar) to locate and choose the stripes pattern you installed.

Load a selection around the box by Ctrl/Cmd + clicking on the "Box" layer’s thumbnail. Use the Paint Bucket Tool to fill the selected area with the stripes pattern.

Create the Body Container

Reduce the "Stripes" layer’s Opacity to 1%.

Create the Body Container

Step 6: Creating Web Form Input Fields

Create a new layer (Shift + Ctrl/Cmd + N) named "Input". Set the Foreground Color to gray (#F4F4F4), then, using Rectangle Tool (U), draw a rectangle as shown below.

Creating Web Form Input Fields

Next, give the "Input" layer an Inner Shadow and Stroke layer style.

Inner Shadow

Creating Web Form Input Fields

Stroke

Creating Web Form Input Fields

Creating Web Form Input Fields

Make sure that the "Input" layer is still the active layer, then click Ctrl/Cmd + J to duplicate the layer. Use the Move Tool (V) to move the duplicate under the first one. Then create a third rectangle using the same process.

Creating Web Form Input Fields

Download the Function Icon Set, unpack the ZIP archive, then locate and open up these icons:

  1. mail_reply_48.png
  2. twitter_boxed_48.png
  3. user_48.png

Place the icons in our document as shown below:

Set the Foreground Color to gray (#BABABA), switch to the Horizontal Type Tool (T), set up the tool so that it uses Georgia, Italic, 28px font size, and then write "Your Name:" (or something similar). This text is the label of our input field.

Creating Web Form Input Fields

Give the text layer a Drop Shadow layer style.

Creating Web Form Input Fields

Creating Web Form Input Fields

Write more labels on the input fields using the same process as above.

Creating Web Form Input Fields

Step 7: Adding an Introductory Paragraph

Set the Foreground Color to a bright blue (#F7FBFE) and write an introductory paragraph underneath the body using Arial, Regular, 18px font size using the Horizontal Type Tool (T).

Adding an Introductory Paragraph

Give the Introductory paragraph a Drop Shadow layer style.

Adding an Introductory Paragraph

Step 8: Creating a Large UI Button

Create a new layer (Shift + Ctrl/Cmd + N) called "Button". Switch to the Rounded Rectangle Tool (U), set the Radius to 10px, and then draw a large button between the Photoshop guides as shown below.

Adding an Introductory Paragraph

Give the "Button" layer a Gradient Overlay and Stroke.

Gradient Overlay

Adding an Introductory Paragraph

Stroke

Adding an Introductory Paragraph

Load a selection around the button by Ctrl/Cmd + clicking on the "Button" layer’s thumbnail preview in the Layers Panel. After that, create a new layer (Shift + Ctrl/Cmd + N) called "Button stripes". Fill the selection with the stripes pattern that we have used before on the new layer, then lower the layer’s Opacity to 3%.

Adding an Introductory Paragraph

Switch to the Horizontal Type Tool (T) and choose Georgia, Italic, 48px font size to write the text for the button (write the text, "Subscribe Now" or something similar). Right-click on the "Header" text layer (the layer that says "Design Instruct Premium"), then choose Copy Layer Style from the contextual menu that appears. Next, right-click on the "Subscribe Now" text layer, and then choose Paste Layer Style from the menu that appears. This should copy the Gradient Overlay/Drop Shadow layer style that we applied to the "Design Instruct Premium" layer.

Adding an Introductory Paragraph

Create a new layer (Shift + Ctrl/Cmd + N) called "Shadow". Set the Foreground Color to black (#000000), then use the Ellipse Tool (U) to draw a very short and wide ellipse right below the button.

Adding an Introductory Paragraph

Soften up the ellipse by going to Filter > Blur > Gaussian Blur — use a Radius of 3px. Lower the Opacity of the "Shadow" layer down to 20%.

Adding an Introductory Paragraph

Step 9: Create the Footer

Create a new layer group named "Footer". Set the Foreground Color to a very dark gray (#202020) and then use the Horizontal Type Tool (T) set at Arial, Regular, 14px font size to write your copyright information. Give this text layer a Drop Shadow.

Create the Footer

Create the Footer

Tutorial Summary

Congratulations! We’ve finished our "coming soon" web page design. We covered some useful and trendy techniques like how to create a detailed and textured background, how to create a simple and stylish box, how to make a big UI button, how to use patterns, and how to stylize text.

I’d like to hear your opinion about this tutorial and the final result. Share your own results with us by linking to it in the comments and posting it up on the Design Instruct community Flickr group pool.

Download Source Files

Tags: free pr, online pr, online press releases, pr

  • Amazing. How can I put this in blogger (blogspot.com)???

  • vik

    Awesome stuff you made here, but if your working for real customers and want to achieve conversion, you have to crunch the elements into 600 px height. People don’t scroll! So for example the headline, lead and description about the content must be on the place where it can be read instantly. If you need to be higher, you have to lead the people with elements/hierarchy. Usability is one important factor!

  • The idea that people don’t scroll is a common fallacy. Clients may still believe it, but a little education can help show them otherwise.

    I do agree, however, that the main call to action (Subscribe Now button) should be above the imaginary fold, so that the action is clearly apparent as soon as the page loads.

  • I think you need to have your own domain / site and have this page uploaded in your file manager!

    Great tut!

  • vik

    The problem is, that people decide weather the scroll or don’t by looking at the top part. If its not interesting or they dont get the message which we tell them in the lower part here or not at all, they simply wont.

  • Thank you for your opinions guys I appreciate it.
    I think the most important point of this tutorial is to show some useful design techniques in Adobe Photoshop.

  • Mark

    CXPartners did a fold study. 6 years, 800 tests, and only 3 times did the fold come into play. You should read the article on their study.

  • I’m on Step 5 of this tutorial (which I’m finding very useful, thanks for putting it together).

    It says, “Download this stripes pattern and open it in Photoshop. Go to Edit > Define Pattern to save the image as a Photoshop pattern (learn more about this topic by reading the Photoshop patterns guide).”

    Where is ‘this’ stripes pattern? Is that sentence missing a link?

  • Peter, yes, that was an error; it was supposed to be linked. However, the stripes pattern was also listed in the Tutorial Resources section.

  • This is great, so glossy and clean, I love it 🙂

  • Pushpinder Bagga

    when will the html tut for this come?

  • Hello Tomas

    This tutorial is absolutely awesome. Love the in-depth detailing of your design. Some may think using different textures on one design may make it look over crowded, yet you’ve done the complete opposite. Simple and effective.

    Great work. Thanks for sharing.

  • Brent Davis

    Tomas

    I’d also love to see the HTML & CSS for this. For alot of us who are learning (the kinds who enjoy these tutorials alot of the time), getting the design done is only half of the job. And since the HTML & CSS are relatively simple (for those who know how to do it), then it should be a snap to add it to the tutorial.

    Hope you add it real soon!

    Thanks!

  • Very nice Tut. I learned a lot from it..

  • Very nice – I especially like how you made the ‘Subscribe Now!’ button. I’ve seen buttons with stripes in a lot of places before, and I’ve always wondered how they’ve been made (I’m a bit of a Photoshop novice).

  • Step 1: NEVER DESIGN A COMING SOON PAGE. It defies all logic of why you want to build a website. Great Photoshop how-to but not a good idea.

  • first i would love to say, love the tut, thank you.

    Mr Dossett could you please explain why you shoud never design a coming soon page?

    thank you in advance.

  • ???

    ??????????????????????????????good

  • ???

    ??????????????????????????????good

  • chinthaka

    THAT’S GREAT !!!
    THANK YOU VERY MUCH !!!

  • Nice tutorial. Learnt a few cool tricks, it was also very easy to follow. Thanks.

  • izzy

    This is a wonderful tut and am very new to Photoshop so I appreciate the step by step format. At this point I am finding it difficult to follow directions to draw an arrow. I’ve found the default location, found arrow #12, but I am lost at this point on how to draw. Are there additonal directions to support drawing arrows? -Thanks.

  • JC Parmley

    @Izzy, to draw an arrow you can do it by loading the arrow to your Tools Preset and select the arrow from that window. Or, you can select the arrow from Shape drop down menu. To draw the arrow, make sure you are using Custom Shape Tool, shown here:

    http://i.imgur.com/3fTne.jpg

    You should be able to draw freely on the canvas by left-clicking and drag horizontally for your arrow length and vertically for height.

  • izzy

    AWESOME…it worked!!! Thanks so much, JC.

  • hiep tran

    it is great, thanks you

  • Eric SCHOUKROUN

    Thank you, this tutorial is very easy to follow and i have learned a lot. And the final result is very nice, thank you very much.

  • Rodger

    I’m green as they come, one question. The “subscribe” call to action. How is this wired so that the details are pushed to the email captured? Any other options.

  • Thank you for the tut. Amazing Work.