Article by Danko Gulsoy
Even if you don’t know how to code using HTML and CSS, you don’t have to be left out of the design process. By taking a few stock photos, icons, and using the tools available to you (such as Photoshop), you can come up with a design concept in a relatively short period of time. Coming soon pages can be especially tricky to come up with, which means the planning and designing stages are all the more crucial. You want to make an engaging page that gives visitors a couple of options of what to do next, and you want to give more intrigue and information than a simple, white “Under Construction” page. In this tutorial, we’re going to look at how to create a design concept for a coming soon page using Adobe Photoshop CS4.
Before we get started, here are a few basic pointers for coming soon pages that you should keep in mind:
Use a theme that has the colors of your website or is close to the subject matter of your websiteHave the site’s logo and nameUse the term “Coming Soon” somewhere on the pageHave a few lines of information about what the site is going to be aboutHave a form for signing up to be notified when the site officially launches (with text boxes for name and email address)Have links to social media (Twitter, FB, your blog, etc)Have copyright and year in the footer
You don’t have to have all of these options stuffed in your page, but at the very least, you should have the site’s logo and name, a few lines of information, and a form for your newsletter or site launch notification. Sometimes keeping it simpler is better.
To start your project, open Photoshop and create a new document by clicking File then New. You want to make your document size as close to a screen size as possible, while leaving a bit of room. In this case, I’ve made mine 1100 px by 900 px and left the background transparent.
You can fill the background layer with color, or you can create a new layer (like I did) just in case. To create a new layer, go up to the top bar of the workspace and click Layer then New then Layer. When the new layer dialogue box pops up, you can type in the name you want to give it (and I’ve named mine Site Background Color).
Now click on the color swatch on the Tools panel on the left hand side of the workspace. For this project, I’ve chosen to make my coming soon page for a fictitious campground site, so it has a ‘woodsy’ theme. To go along with my theme, I’ve chosen a forest green (hexadecimal value 355739) for the background. You can use the color picker to choose this color or any other color you want.
To fill the background, click on the paint bucket tool on the Tools panel on the left hand side of the workspace. If you don’t see it, click on the little black arrow at the corner of the gradient tool.
It looks nice, albeit flat. So I want to add some interest to it by adding a pattern overlay. To do this, navigate to the bottom of the Layers panel on the right hand side of the workspace and click on the fx. Then choose Blending Options to bring up the dialogue box.
Click on Pattern Overlay and choose Overlay from the Blend Mode drop down. This will ensure that you retain the color you’ve chosen in the previous steps. Once you’ve done that, click on the black arrow next to the pattern preview and look through the options. I’ve chosen to use the Slate pattern; you may not see any you want in the ones available, so if you want to browse more options, click on the little black arrow next to the list of patterns.
At this point, we can move on from the background to the top banner (if you want to have one; you don’t technically have to have one on a coming soon page). You can use a picture you already have or find a stock picture. I’ve chosen to use a picture I edited in another tutorial. In order to use it for the banner, I need to resize it. To do this, go to the top bar and click on Image then Image Size. Once the dialogue box pops up, make sure that the Constrain Proportions and Scale Sizes checkboxes are marked, then change the value of the width to 1100 px.
The width is the right size, but the height is too big, so we need to do some cropping. Choose the crop tool from the Tools panel and drag it around the area you want to keep. Once you’re satisfied, press Enter. You may need to do this a few times to get the size you want; just keep checking the image size by clicking on Image and then Image Size to see if you get the size you want. It’s best to have the image around 150 to 200 px high.
Once you finish cropping it, you can select the picture by pressing Ctrl + A, then copy it by pressing Ctrl + C. Switch back over to the website design tab and paste the image; a new layer will be automatically created for it. I thought the contrast between the picture and the background was a little much, so I went to find a little something to add to the banner to soften it. I opened another file I’d used in a tutorial and used the rectangular marquee tool (found in the Tools panel) to select a thin strip of the water to use in my website design. If you do something like this, make sure that you Feather your selection (by entering a value in the Feather text area near the top bar; I made mine 10 px). This gives it a nice, soft edge and a gradual fading out along the edges to help it blend in more.
You can use the Move tool on the Tools panel to drag or nudge the images and arrange them where you want them. Here’s what my design looks like so far:
Now that our banner is done, we want to start working on the content for the rest of the page. You can make your own logo, use your company’s logo, or find an icon to use as a logo on a site such as iconfinder.com. Generally speaking, the logo and the site’s name would go on the banner, but for a coming soon page, it’s put in the middle of the screen. So once you’ve found the icon you’re going to use, you can paste it and move it beneath the banner. I’ve used an icon I found on iconfinder; it’s just a little small. If you want to resize your logo, you can do so by clicking Edit then Transform then Scale.
Use the bounding box handles to change the size of the icon; be sure to hold down the Shift key while doing so to ensure that the proportions remain. When you’re finished resizing it, click the green arrow at the top of the workspace.
The icon I used was black, and it doesn’t blend in with the colors or the theme that well. My text is going to be light, so I want to make my icon match. To do this, I went down to the bottom of the Layers panel and clicked the fx, then clicked Blending Options. I chose to use a Color Overlay and click on the color swatch to change it to white.
It’s time to add some text, so click on the text tool in the Tools panel. Once you select it, you get a number of options along the top bar, including font family, font weight, font size, alignment, color, etc. I chose to use a heavy serif since the name of the site is important and I want it to draw the most attention; the font I used was Casablanca Heavy SF with a crisp anti-alias method. I also clicked on the color swatch and chose a color from the thin water banner, then moved the color picker up so it was just a slightest tint of yellow.
We need to choose the color of the text areas for our form. I want mine to blend in with the colors to give it a more sophisticated feel, so I’ve used the color picker and the eyedropper tool to select the background color. Then I dragged the color picker down so it was a darker shade of that color (I used hexadecimal 223b29).
Once you’ve done that, find the shape tool on the Tools panel and click the black arrow at the corner for more shape options. I’ve chosen to use a rounded rectangle shape.
Drag a box out as wide and high as you want it to be. Once you’ve done that, you can use the path selection tool (that looks like an arrow) from the Tools panel to select the box, then press Ctrl + C to copy it and Ctrl + V to paste it. Drag the second box out to the side. Copying the first box will ensure that both boxes are identical.
Use the move tool to move the boxes down, then select the text tool and choose a sans-serif font such as Arial for the second heading and the body text. I chose to use Arial in white. Make the second heading smaller than the logo text and the body text smaller than the second heading. Once you’ve typed ‘Coming Soon’ and a brief introduction to the site, then you can adjust the size of your form boxes to make sure they fit. You can do this by clicking on Edit then Transform then Scale.
Now we need to put some text inside the form boxes to prompt users. To do this, click on the Text tool and choose a font from the drop-down. I decided to use a serif font (going with the classic Times New Roman) and italicize it. I also changed the anti-alias type to Strong. Then, to make it blend in more with the text boxes, I went to the top of the Layers panel and clicked on the arrow next to the opacity drop down so I could turn the opacity down to 70%.
Next, we need a submit button. Generally, it’s a good idea to have the word Submit somewhere near the button. We’re running out of room, though, and users know what an arrow means, so we’re just going to create an arrow button. To do this, go back to the Tools panel and click on the shape tool and choose the rounded rectangle tool. Drag a small rounded rectangle next to the E-mail address text box. You can use the move tool to drag or nudge elements as needed to fit in the space; remember, you want your margins to look nice and you want to line your elements up as much as you can on either side.
As soon as you’ve done this, it’s time to pick an arrow shape from the shapes library. Again navigate to the shape tool and click on the little black arrow for more shape options. Choose the Custom Shape Tool and then go to the top bar. Click on the little arrow next to the shape that displays for more options; you can always click the secondary black arrow next to the list for even more options. Once you find an arrow you like, select it. I’ve chosen to use an arrow that sort of looks like a compass arrow since the site’s theme is camping.
Drag the arrow out to fit in the button. If the shape disappears, make sure your shape layer doesn’t have a color overlay over it. If it does, just drag the style down to the trash can icon at the bottom of the Layers panel.
Next, we want to create the footer. To do this, go to the shape tool and click on the rounded rectangle shape. Drag the shape tool to make a thin rectangle at the bottom of the page. Once you do that, you can navigate to the top of the Layers panel to turn the opacity down to make it blend in more with the design (in this case, I’ve turned mine down to 50%).
Use the text tool to add some small copyright text to the bottom left of your footer. You can also include icons of the social networks your company is on, such as Twitter, Facebook, and Blogger. You can use iconfinder.com to find small icons (I’ve used ones that are 32 x 32 px) and copy and paste them into your document, using the move tool to arrange them at the bottom.
And that’s about it! If you want to, you can merge some of your layers, but you want to preserve most of them so that the web designer or developer you’re working with can take the images you’ve created and use them when building the code for the website. Make sure you save the document as a PSD file to retain the layers.
About CODANK Web Design
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
For more information, visit us at www.codank.com
CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.
