Face it, there is an App for just about everything. With new apps comes innovation in the way we can present our mobile products to potential customers. Apple has blessed us with a beautifully glossy & sleek brand that basically builds great web sites for us. This tutorial will take that a step further, incorporating an illustrative style beneath the Apple gloss, to bring together a one-of-a-kind landing page.
Face it, there is an App for just about everything. With new apps comes innovation in the way we can present our mobile products to potential customers. Apple has blessed us with a beautifully glossy & sleek brand that basically builds great web sites for us. This tutorial will take that a step further, incorporating an illustrative style beneath the Apple gloss, to bring together a one-of-a-kind landing page.
Step 1 - Set up the Document
Maybe I'm old school, but I still love site that are fixed at 960px. It's such a nice round number, divisible by 1, 2, 3, 4, 5, 6, 8, 10 it makes working with a pseudo-grid that much easier. This tutorial is no different; so I've created a new document that is 1000px by 1200px with guidelines carving out the center for a 960px by 1200px design.
Next we're going to set up the columns we'll be using for the remainder of the design. I chose 3 columns, with 40px of padding between them. The columns from left to right are 240px, 390px, 240px.
Step 2 - Create an Ornate Wallpaper Background
Since we want our design to look like it's sitting on a bookshelf, we need some type of wallpaper to sit right behind it.
Create a New Layer, and fill the entire layer with white (Shift+F5). Next, go to your layer properties and overlay your ornate pattern (I'm skipping the creation of the pattern, as I'm assuming everyone already knows how to do this).
After applying the layer style, our document should look something like this:
Step 3 - Add the Shelf
We'll create a new layer spanning the entire document and roughly 140px tall. We'll use the same technique as Step 2, although we'll be apply a wood texture instead of the ornate texture. Once again, there are hundreds of sites giving away royalty free wood textures: Google Search for Royalty Free Wood Textures
The result should be something like this:
Rename this layer 'shelf'.
The shelf is looking a little flat, so we need to add some depth using gradients, shadows and highlights. Add new layer styles for: Stroke, Drop Shadow & Gradient Overlay as follows:
You may be telling yourself that the drop shadow looks pretty ugly right now. Agreed; but it won't look as harsh once we get the books in front of it. This is what your document should look like now:
Next, we'll create the front edge of the shelf. Duplicate (Command+J) the 'shelf' layer and rename it 'front of shelf'. Move the 'front of shelf' layer down so that the bottom of the 'shelf' layer aligns with the top of the 'top of shelf' layer. Crop off 20px from the bottom of the 'top of shelf' layer so the heights are varying. We want to give the illusion that the shelf is deeper than the front of the shelf is tall.
Next, we need to change some of the layer styles for the 'top of shelf' layer. First, we need to move the 'front of shelf' layer below the 'shelf' layer in your Layers palette. Then we'll reverse the gradient (and lower it's opacity) since we want the shadow to be on the bottom instead of the top. By doing this, we'll create a light source that is at the front top corner of the shelf — right where we'll be showing off our books and our iPhone screenshot.
After applying all of the layer styles, your image should look like this:
Now we could stop here, but I think that there is just a little more detail that is missing on the shelf. The corners still seem a little flat, and we want it to have a ton of depth, so we'll add some simple 1px tall highlight lines to give it that extra added boost of depth.
Create the line just below the 2px stroke border of the 'shelf' layer. Then, you can either choose a color to fill (Shift+F5) that is lighter than all of the wood grain of the shelf, or simply fill with white and adjust the opacity. The result, will give you that extra bit of depth:
Step 4 - Create the Back of the Bookshelf
We'll reuse our wood pattern from creating the shelf above to create a type of "back" to our bookshelf. The idea here is to make it look as if we have set the iPhone and books on the top of the bookshelf, and have our supplemental information inside. We'll create this layer beneath the shelf layers in the stack.
Create a selection, a fill with your wood pattern (Shift+F5). Rename this layer 'back of shelf'.
Since our light source is directed at the top front corner of the shelf, we need to make the back just a little darker to make it look more like a book shelf with depth, and less like wood floors. It's easy to do this with Layer Styles; Add a "Color Overlay" layer style to your 'back of shelf' layer and set the color to Black. Adjust the opacity to 50%, and you should now see the darker wood for the back of the bookshelf.
After a slight adjust with the opacity of my ornate background, your image should look something like this:
Step 5 - Create the Logo
Now that we have our entire document set up, as well as all background layers created for the theme, we'll go ahead and create all of the elements that will sit above the background (technically, on the background).
For the logo, I chose the font Rockwell (it's my obsession as of late) at 60px. Create a new text layer with text: "Read it". To get that bubble feeling, we need to add some layer styles for stroke, gradient overlay, inner shadow, outer glow (just about every layer style you can possibly add). Here are the settings:
Once you've applied the layer styles, align your logo to the right-most guide. It should look something like this:
Now we need the bookmark ribbon for the "i". We'll start by creating a new shape (which I created from scratch with the Polygonal Lasso tool). Fill your selection with any color. It should be along these lines:
Since a solid black bookmark is extremely ugly, we need to add some shine to it. All we need here is a Drop Shadow, Stroke & Gradient Overlay to make the ribbon stand out:
Your bookmark ribbon should now like this:
All that's left is to add the "i", which we'll use the same font (Rockwell) with white text. Add a slight inner shadow (70% Opacity; 90 degrees; Distance: 1; Choke: 0; Size: 1) and you should be all set. I've added a pattern to my bookmark as well, but here is basically what you should be seeing:
Step 6 - Adding the Books
Don't worry; you don't need to create all of these from scratch. The beauty of the web now is that there are thousands of options for stock illustrations — which will save you time in the end. I found the books at iStockphoto here. These exact books aren't entirely critical for this tutorial so if you prefer, you could always move on to the next section.
If you chose to buy the books, then place them on your image midway up the top of your shelf:
The books are way too flat by themselves, so we'll add a few more perspective shadows (as we did with the shelf corners) to make them look like they are sitting on the shelf. First things first, rename the new layer with the books to 'books'.
Add a Drop Shadow to the 'books' layer with the following settings: Opacity: 19%; Angle: -90; Distance: 10; Spread: 10; Size: 15. For the color, choose a brown from the 'back of shelf' layer. We use brown here because the black just seems like too much and doesn't match.
To create the shadow beneath the books, we'll create a new Black ellipse spanning the entire width of the books that are standing vertically. We'll deal with the leaning book afterward.
Rasterize the black ellipse, and go to Filter > Blur > Gaussion Blur. Use a radius of 4.7 to get the desired spread. Set the opacity of the black ellipse layer to 70% to soften it up a bit. The outcome should look like this:
Repeat the same technique for the leaning book, but with a much smaller ellipse. It should look something like this:
Step 7 - Add the iPhone & Price Sticker
No iPhone landing page is complete without a big, glossy iPhone — and this tutorial is no exception. I've used the iPhone template from the great folks at teehan+lax to emulate to device. Remove whatever layers you don't want included on your iPhone, and drag it to your document. Place it slightly lower on the top shelf to give the illusion that the iPhone is closer to you than the books are. We want that pretty iPhone front & center.
Obviously this is where your hero screenshot would go of your app. I'm not going to add anything to mine, but you are surely welcome to as you follow through the tutorial. Also, we'll use the same technique from Step 6 to add a shadow to the bottom of the iPhone. Your output, should resemble:
Just one last item (one of the most important) is the price sticker. Start by creating a circle at the top right corner of the iPhone. Rename this circle to 'price sticker':
Next, apply the following layer styles for Drop Shadow, Bevel & Emboss, Gradient Overlay, and Stroke. This will be an important layer style, as we'll be using it multiple times throughout the remainder of the site for buttons, etc.
This creates something completely buttery:
Add some text for the price with a 1px dropshadow to the top and our sticker is done:
So far, this is what we've created (looking pretty good, and best of all: very unique):
Step 8 - Purchase Text & AppStore Button
We're still missing our "Call to Action" button to get people to the AppStore to purchase our app. We're going to create that text as if it were "chiseled" in to the front of the shelf (with a perfect font).
So here goes: create some new text; I used: "Your book collection will love you for it.” I used Gotham at 36px to get the desired look. On that text, we need to apply two layer styles to give it that chiseled look:
- Inner Shadow: Blend Mode: Multiply, Color: black, Opacity: 75%, Angle: 90, Distance: 1, Choke: 0, Size: 2
- Color Overlay: Color: black, Opacity: 47%
Your desired outcome, depending on the font, should be something like this:
Now we need to add the AppStore button. I used an iPhone icon from IconFinder.net to recreate the "Available in the AppStore" button.
To create the button, create a new rounded rectangle with border radius of 10px. I created my rectangle 240px wide by 74px tall.
Since we already created our nice little Layer Style for buttons when we created the price sticker in Step 7, we can simply copy the layer style from that sticker and paste the layer style on to our new button layer. To do this, right click the layer you would like to copy the Layer Style from and elect "Copy Layer Style" from the popup menu. Select the layer you'd like to apply this layer style to and right click, and select "Paste Layer Style”. It's that easy.
Place the iPhone icon you downloaded from IconFinder on top of the button, giving it layer styles of:
- Inner Shadow: Blend Mode: Multiple, Color: Black, Opacity: 57%, Angle 90, Distance: 1, Choke: 0, Size: 1 (this will give us a nice inner shadow
to make the icon look like it's set in the button) - Color Overlay: #edfed4 (or a similarly light color, depending on the colors you chose for your sticker)
Add the AppStore text, and reuse the Layer Style you created for the iPhone icon on the text. Your result should resemble:
Step 9 - Feature List
This is probably the least interesting part of the design, but most interesting for anyone looking to buy your app. Create a new heading, size 30px text (I used Rockwell again) and enter the text "Features". Remember those guides we created way back at the beginning of this tutorial? We'll be using them now for our 3 columns; so align the Features text to the right-most guide.
Apply some layer styles to this text:
- Gradient Overlay: #bcab8e to #ebdbbe or similar colors to make it show up nicely on the dark wood (this could just be plain text as well)
- Drop Shadow: Multiple, Color: Black, Opacity: 75%, Angle: -90, Distance: 1, Choke: 0, Size: 1 (because we want to create that chiseled effect)
Next, create some italic text below, and add some bullets. Easy enough right?
Step 10 - Add Some Screenshots
We need to show off our app. Not only will our iPhone screenshot have images of our app, but we should also show enlarged images of our app so people know exactly what they can expect.
First, we'll duplicate (Command+J) our "Features" text layer from Step 9. Change the text to read "Screenshots" and move it so that it is placed in the center column.
Next we'll create the screenshots. We'll start by creating the outer inset layer. Start by creating a new rounded rectangle shape, 180px by 180px with a radius of 10px. Copy the Layer Style from the chiseled text in Step 8 and paste it on to your rounded rectangle shape. Duplicate the layer (Command+J) and space them out evenly within the 390px wide column:
Now we'll create a placeholder for the images (you would obviously replace these with your app's screenshots later). Create another rounded rectangle, but this time with settings:
- Width: 160px
- Height: 160px
- Radius: 5px (the inner rounded area of a rectangle shoul always be half the border radius of the outer rounded rectangle)
Duplicate the layer, and move the duplicated layer above the other screenshot inset.
Add a Color Overlay to both of these layers (with color #f6f3eb) for the placeholder.
Lastly we need to add the Zoom icon. Start by drawing a circle in the top right corner (like you did for the price sticker). Mine is about 30px in diameter.
Paste the same Layer Style from the price sticker on to the new circle. I've adjusted the Gradient colors and Stroke color to achieve a slightly different look than the green.
Lastly, we need to add the "Zoom" icon. I'm using the zoom icon from the amazing Glyphish icon set. To
complete the zoom icon, we just need to add a slight inner shadow (1px or so) to give it some depth.
Duplicate the zoom icon group you created, and move it to the other thumbnail. As you went to implement this, it would definitely be cool to do some
cool zooming on these screenshots as you clicked them. Maybe for my first Nettuts :).
Step 11 - Testimonials
Last but not least for the main section is the testimonials. I've created the speech bubbles from a rounded rectangle and a custom shape.
We'll start with the rounded rectangle. Create a new rounded rectangle with settings:
- Radius: 40px, Width: 240px (width of the right column) and Height: 80px
Now choose the Custom Shape Tool, and locate the speech bubble to create the tail:
Create a speech bubble above the rounded rectangle layer, so that just the tail is not overlapping.
Select both layers and merge them together (Command+E). The result should be one shape that we can then apply some styling to.
Once again, let's copy our Layer Style from the price sticker and paste the layer style on to our testimonial bubble (we'll make it wood texture in a second). We do this because we want most of the styles from the sticker, like the Beveling, Drop Shadow and Stroke styles — We're merely going to play with the texture and colors a bit to give it the right look. By reusing layer styles like this, you can keep your designs consistent as well as save yourself a ton of time by not having to recreate the same effects over and over again.
First we'll change the Gradient Overlay. We need it to be from a color to transparent (since we'll want the wood grain to show up from behind it). I chose to have the gradient fade to a very dark brown: #292115.
Lastly, we'll do a Pattern Overlay of the wood texture to make it blend in more with the background.
Adjust the stroke color to be a darker brown (not green), and you're all set!
All you need to do now is add your raving customer reviews, and you have a one of a kind testimonial bubble. Duplicate the testimonial group
and move it right below the other, and that's it!
Step 12 - Mailing List
We'll start by creating the surrounding container that the text and form will sit within. I created a rounded rectangle, with a radius of 40px and width of 960px (our page width). I pasted the Layer Style from the text in Step 8 to give it that inset feel. As I mentioned before, I always tend to reuse my layer styles as much as possible as it ensures consistency.
I once again headed out to IconFinder to find the mail icon — luckily for us
the 64px by 64px icon was exactly what we needed. Place that icon in the left hand corner of our inset bar — it will be the anchor
for the newsletter and help balance out the Submit button.
Next, add the "Want the latest news? Join the mailing list." text. I used the Gotham again, but with a slightly smaller size at 24px. Make
the text color #161008 (as we don't want it to stand out too much) and add a light brown 1px drop shadow below (once again we're creating that depth).
Wow! We're so close. All we need to do is add the e-mail form and button and we'll be done. Create another rounded rectangle, with a 20px radius
(half of what the outer rounded rectangle is), and height of 40px (so that we don't have any straight edges on the two sides).
One thing to note is how consistent the spacing is around the right hand side. By halving the inner radius, we keep a consistent padding between the outer container and inner container.
Using the same presets for the rounded rectangle (20px radius, 40px height), create a new rounded rectangle button. Copy the Layer Style from our Zoom Icons from Step 10 (the redish orange color). Paste that Layer Style onto your new button. You should have something like this:
All you need to do now is add the "Submit" text and you're done!
Conclusion
That's it. We've created a unique iPhone landing page; merge a new illustrative style with the glossy iPhone feel. This tutorial isn't only for a book application — you could switch out the books on the shelf for just about anything (i.e. convert it to a table for drinks). Hope you enjoyed it!
