In this tutorial, we’ll be continuing this series on creating an iPhone app promotional site by taking our previous Fireworks constructed wireframe and adding color, texture, images, and effects to polish off this design in Photoshop. We’ll use some interesting elements, like iPhone imagery and a stylish aurora vector background illustration. We’ll finish up with a professional site design ready to get coded! Let’s get to it!

Final Image Preview

Take a look at the website design we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/month. You can view the final image preview below or the full-size image here.

Step 1 – Document Setup

Grab the “wireframe_final.psd” we exported in our last tutorial in this series (Build a Promotional iPhone App Website Wireframe in Fireworks). Rename this file to “final.psd,” or your preferred name.

Notice below how the imported file opens fairly well in Photoshop. There is an issue with the text boxes being longer than the document though (second image below, notice how the box is long and continues past the bottom of the document). I don’t know a quick way to fix this. It’s a peculiarity I mentioned in the last tutorial. If anyone knows a good fix, definitely let me know. So, go through and copy the text of each element, then recreate a new text box and paste the text back in place, or just leave it as is.

Also, go ahead and delete the “Notes” folder as well, as we don’t need the notes here.

Step 2 – First Dominant Visual Element

I often like to work on the dominant (and more important) visual elements of the design first, and then build from there. So, let’s get started with the “promotion” area.

We’re going to add an aurora illustration to the background here. Ian Yates wrote an awesome Illustrator tutorial on Making an Aurora Borealis Vector Sky in Illustrator. There are a few benefits to using a vector graphic here. One is that it stylistically stands out with a unique look. Also, we can use it for other sized branding areas as well.

After completing the aurora borealis vector tutorial go ahead and import your unique result into Photoshop. You can see that the only change I made was flipping the design. You should of course create your own for your work. I pasted the illustration in as Pixels because I don’t need to make any changes to the vector source file after bringing it in, so no need to use a Smart Object.

Now drag the vector mask from our promotional background shape onto our aurora borealis design.

This will apply the vector mask as shown below, just make sure it lines up as you want it.

Step 3 – Adding an iPhone Image

There is spectacular freebie of an iPhone image with lots of iPhone GUI graphics. Go ahead and download the iPhone GUI PSD 3.0. Open the file and drag the iPhone image into your working document. Then scale it and line it up with the guides as shown in the second image below. Be sure to grab the image as shown. The only screen component grabbed other than the phone is a transparent angled screen glare.

Now we’ll add the aurora borealis illustration to the iPhone. This just makes the design look a little more interesting. In the final website a video file would look good here, which shows the app in action though. Bring in another copy of the aurora borealis illustration. You can bring in a smaller version of it this time, as we’re filling a smaller space. Paste it in as Pixels again.

Now with the illustration placed over the iPhone in the position you want it in, and the illustration selected, go to Layer > Vector Mask > Reveal All. Then grab the Rectangle Tool (U), make sure it’s set to Paths in the top-left corner, and draw your screen. If you don’t get it the exact size you need the first time, then hit Command + T and resize the rectangle vector mask as needed.

Be sure to keep your layers organized as we continue to build this design.

Step 4 – Working on Our Color Scheme

We just added two dominant elements on the page. Also, the aurora illustration we added is a great source to grab some color from to make this page’s color scheme. Go ahead and double-click on the default “Background” layer to unlock it, name it “background,” and place it in a new “background” folder.

Grab the Paint Bucket Tool (G), then change the Foreground Color to a dark bluish-gray (#536475), which I selected from the illustration. Now change the primary navigation background located in the “header” folder a dark blue (#212b3f), which was also sampled from the illustration. Give the “bottom” area background the same dark blue color for the background.

We’ll also change the color of some of our navigation buttons at this point as well. The image below shows where we’re at so far in this design. Change the primary navigation button background colors to a slightly lighter grayish-blue (#5e7285) than the page background, except for the current page button. We want to give the current page button the impression of being pressed in. So, make it the same color as the page (#536475). We’ll enhance this greatly a little later in the tutorial when we add styling.

In the “secondary_nav” area select the larger background behind the Aurora icon and change it’s color to a grayish-blue (#475665) that is slightly darker than the page background. Again, we’re going to make this look indented. Also, go ahead and use the same lighter grayish-blue (#5e7285) as the primary navigation buttons on the footer buttons.

Step 5 – Changing Our Text Color and Basic Styles

You can see how going dark with our page design makes it painfully obvious that it’s time to work on the text colors. We designed the text mostly with dark on light for the wireframe, but now we need to go to light on dark. Change most of your text to white. I’ll point out the few exceptions below. Also, clean up any text, reposition elements, and experiment with font weight as you go through this.

I’m setting some of the text in Myriad Pro, though in areas that will be coded and not images I often used Helvetica for this design, which is ubiquitous on computer systems. I also used Helvetica for some areas that I wanted to have a slightly different look than the Myriad Pro being used. I set the Aurora name in Futura Condensed Extra Bold where it was to be used for branding.

You can see the text in most of the “header,” “secondary_nav,” “promotion,” and “body” is white. A few exceptions are the logo area (which will is just a placeholder for now), the “Aurora App” text that is dark blue (#131828) to help it stand out, and the headings for the body that are the same dark blue.

We also need to work on the “bottom” section text as well. I set all the headings in Myriad Pro Bold at 20pt. The color is a bright baby blue (#85a1bc). I used that same blue for the text links. I set the rest of the text in white using a smaller Helvetica Bold.

The “footer” has just a couple color changes. The links were changed to an even brighter baby blue (#97b8d8), except for the active link which is white and underlined. The copyright text is 12pt Helvetica and darkish blue (#212b3f).

Step 6 – Bringing in the Logo Design

First, take a screenshot of our PSD file of the area we’ll be placing the logo into (with the logo placeholder text turned off). Fire up Illustrator. Place the screenshot on it’s own layer and lock it. I also turned off the artboard visibility (Shift + Command + H). Now create a layer for your logo and insert the text “iLoveMyApps,” which is serving as the company’s name for this tutorial. Set the text in Cooper Std Black Italic at 30pt, and give it a white fill, as shown below. Now with the text selected, go to Text > Create Outlines, then ungroup the text (Shift + Command + G). Also, delete the “o,” as we’ll be replacing that with a heart.

Now let’s work on the heart shape. First, turn on the grid (Command + “) and turn on Snap to Grid (Shift + Command + “), which will allow you to draw the shape easily. Go ahead and create a half heart shape with the Pen Tool. Now go to Object > Transform > Reflect and apply a Copy with the settings shown below. Now line up the inner edge of both half heart shapes, then in the Pathfinder palette click on Merge, which gives us a final heart shape.

Now scale the heart shape down and place it as shown. Also, work on spacing out each letter of the text until it looks right to you. I wanted the entire text to appear as one, but I spaced each word out just a bit to increase legibility. It still reads as one word though. Now copy and paste the final logo as a Smart Object into Photoshop.

Step 7 – Starting to Add Style To Our Design

We’ll continue to work our way down from top to bottom, but keep in mind that as you’re designing you may bounce around more to various areas of the design, and experiment with different looks and styles, which is great and feel free to do that.

Within the “header” section, select the background, then apply the layer styles shown below. This gives the top of the body area a small highlight and a subtle shadow is cast on the header area, which pushes it back a bit.

Now apply the styles shown below to our logo. For the gradient overlay the gradient goes from gray (#c0c4c9) to light gray (#e3e5e7).

Step 8 – Adding Style to Our Primary Navigation

First we’ll work on the non-active primary link background styles, which means all except for the “Apps” link. Apply the styles shown below and use colors that look right to you. Note: I got lot’s of inspiration from the Meta Lab site for this part of the design. I love the work done by this company, check out their folio while you’re there.

It’s always important to imagine where the light source is in your design. We’re applying some subtle lighting effects, which will give this design a modern feel, though we still need to keep the light source in mind.

Imagine that there is a light source coming from the top of the page shooting straight down, which is giving us the light direction for many of the styles we’ll be adding. Of course you can imagine more than one light source, and you can deviate from this somewhat, but keeping the light primary light source in mind will help to make the styles you apply make sense and work together visually.

Now apply the styles shown below to the “Apps” link background, which is our active link and will make it look like it is pressed down.

Now apply the following Bevel and Emboss style to the text within the primary navigation to make it stand out a bit. The effect on the text is subtle, but noticeable.

Step 9 – Applying Style to Our Secondary Navigation

First of all let’s add our iPhone app icons. For the main Aurora icon, use the same aurora illustration as used in the promotional area. Drag the vector mask that is applied as a gray square currently, onto a scaled down version of the aurora illustration, refer to Step 2 on how to do that. Now let’s add some style here. Add the following layer styles to the icon.

Apply the same styles to the outer icon background as we did to the “Apps” background button in Step 7. Control-click on the layer thumbnail of the “Apps” button background and select Copy Layer Styles. Then select the outer background, Control-click its layer thumbnail and choose Paste Layer Style, as shown below.

Step 10 – Applying Style to Our Secondary Navigation Continued

Now we’re going to add some style to our other application icons. These are just place holders to show the client where other icons would go. So I want to give them a similar look as the Aurora icon, but not make them stand out much. So, let’s start by filling them with a pattern. First we’ll make the pattern.

Open a 4px by 4px new document set up for the web. Grab the Pencil Tool, set the brush size to 1px and paint four rectangles as shown below. The darkest rectangle is #05020a and the lightest is #251440 this color. Hit Command + A to select All, then go to Edit > Define Pattern and name it “Purple Rain.” Yes I did where a shirt with this pattern on it in the eighties back in grade school.

Select the first placeholder icon. Notice how it is a shape layer currently. We need to rasterize that. So go to Layer > Rasterize > Fill Content, which keeps our vector mask in place, but rasterizes the fill. Notice the result is a rasterized layer with a vector mask applied to it – quick and simple. Go through and do this for each placeholder icon.

Grab the Paint Bucket Tool (G), and in the top-left corner choose Pattern from the drop down, make sure our “Purple Rain” pattern is selected, then click once on each placeholder icon to apply the pattern. Now Control-click on the Aurora icon thumbnail and copy the layer style, then paste it onto each placeholder application icon. Also, adjust the spacing of the application names to make room for the styles.

Let’s also adjust our default app store placeholder button over on the right of this section. A simple way to make this button blend in better to our design is to change the background color. Go to Image > Adjustments > Hue/Saturation and apply the settings shown below, or those of your choice.

Step 11 – Applying Style to Our Promotional Area

Let’s start with the background and buttons. First we’ll apply style to our large background area. Select the aurora illustration and apply the following layer styles. This gives us a highlight at the top and a stroke around the area.

Now apply the same styles to the top-right price area background, but also add the styles shown below. The colors used for the purple gradient overlay are sampled from the aurora graphic. The colors of the gradient go from purple (#68448f) to darker purple (#320580) and then back to a mid purple hue (#65428c).

Apply the same layer styles to our main “Light Up Your iPhone” heading, as we did in Step 7. You can copy and paste the layer style from there. Apply the same Bevel and Emboss style to the price text and the sub heading, as we applied to the primary navigation text in Step 7. You may want to change the Opacity of the Highlight Mode or Shadow Mode for the shading though, experiment with what looks best to you. Also, select the horizontal rule, which is a 1px high shape, and change it’s color to black. Also, apply the settings shown below to it.

Step 12 – Applying Style to Our Main Call to Action Button

Now apply the following layer styles to our main call to action button. We’ve placed a drop shadow on this so that it stands out from the background more. It has a bright color, which will attract attention. It’s placement also attracts attention. The gradient overlay has similar colors to the one used for the price background, but it only has two colors applied instead, which go from purple (#68448f) to dark purple (#320580). We’ll add an arrow in just a moment to make it stand out more as well.

Now grab the Ellipse Tool (U), and use it to create a shape layer as shown below. The color doesn’t matter because the styles will overlay it anyway. Rearrange the button text to look balanced with the added element. We’ll be using this circle to place a download arrow inside shortly. Apply the following layer styles to the button (the colors in the gradient overlay go from #9cc67e to #3a4f66).

Now we’ll create our arrow, place it into Photoshop, and style it.

Open Illustrator and create a web document. Turn on View > Show Grid and View > Snap to Grid. Use the Pen Tool to draw an arrow utilizing the grid. The size doesn’t matter. Now resize it to a shape that is about the size of the larger arrow shown below. Now go to Effect > Style > Round Corners and apply with a Radius of 0.139 in. Now copy the arrow and paste as a Vector Smart Object in Photoshop. Note: I’m using black below for demonstration purposes, but the arrow should be white.

Now apply the same styles to the arrow as we did our logo in Step 7 and scale to fit the space. The result is shown in the second image below.

Here’s what we have so far. The top section is looking good. Now let’s move onto the body next. We’ve got the bulk of the site styled now. It will be smooth sailing from here.

Step 13 – Applying Styles to Our Body Area

There aren’t too many styles that need to be applied here – just a few. Let’s start with the titles. We want to make them look indented by highlighting the inner bottom character edges, which is a style often used in Apple sites. Apply the style shown below to the “Aurora” title text. Also, apply the same style to the “Screenshots” and “Features” titles. With these later two titles, change the Opacity to 40% though (everything else in this Drop Shadow Layer Style is the same).

Apply the same layer style to the bullet points under the “Feature” column, as applied to it’s title. The results so far are shown below.

Now copy the horizontal rule from the “promotion” section, change the color to dark blue (#131828) and scale it to fit the area above the “Screenshots” title. Notice how the style is retained.

Now copy this same horizontal rule and use multiple copies of it in the last column of this section, as shown below. Be sure to delete the existing unstyled horizontal rules.

Now follow the same steps for these placeholder images here as you did in Step 10. Apply the same layer styles and “Purple Rain” background pattern fill. This is just a quick way to make this area look good for client review before you get ahold of the actual photos that will go there later. The final “body” section is shown below.

Step 14 – Apply Style to the Bottom Section

First, let’s apply the same Bevel and Emboss layer style to our titles here as we did to the text in our primary navigation in Step 8. Now drag four copies of our stylized horizontal rule down and resize as necessary, or apply the same styles and coloring to the existing horizontal lines as we did to them in the “body” section.

Replace the remaining horizontal rules of this section with dashes. You can use the Type Tool and the Dash Key for this. I used Myriad Pro at 14pt for this. This is something that will be coded in CSS, but we want to make sure we’re communicating this effectively in the design.

Apply the same layer styles to our buttons as we did in our primary navigation. Just copy those layer styles down. Be sure to stylize the text of the buttons as well. Now replace our twitter bird with a full-color version, which you can download free in the Practika Icon pack from Smashing Magazine.

Apply the following layer styles to the background of the “bottom” section and we’re done!

Conclusion

There are lots of creative website solutions you can create using just a handful of chosen elements, an interesting color scheme, utilization of appropriate styles, and attention to subtle light effects. The final image is below. You can view a larger version here.

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.