Create a Professional App Store Web Layout

Step 1

Create a new document (1000X1080px).

Now create vertical guides at 50px, 100px, 300px, 500px, 700px, 900px and 950px.

Then create horizontal guides at 90px, 135px, 400px and 1020px.

These guides will be the basis for our layout.

Step 2

Using your guides, create a blue bar to act as your header.

Fill this bar with a linear gradient ranging from 9fdbea to 76cbe0.

Step 3

Now create a custom brush. First select a white brush, with 100% hardness, 90px size.

Then go to your brush options window and apply the following settings:

Brush Tip Shape:

Size: 90px
Hardness: 100%
Spacing: 200%

Shape Dynamics:

Size Jitter: 100%
Minimum Diameter: 10%

Scattering:

Scatter: 250%
Count: 1

Paste across your blue header area. Then reduce this layer's opacity to around 20% and change it's blend mode to 'overlay'.

Step 4

Now add a logo icon (the Exchange Arrows icon from your resources area).

Then apply some logo text, as well as login text.

Logo Text Settings:

• Font Face: Mido
• Size: 36pt
• Kerning: -50
• Color: 3a4f55

Logged In Text Settings:

• Font Face: Arial
• Size: 14pt
• Kerning: -50
• Color: 457c8e

Step 5

Use your guides/marquee selection tool to create a menu area beneath your header.

Fill this area with a linear gradient ranging from f9f9ef to f5f2ec.

Then apply a drop shadow effect, and inner shadow effect.

Drop Shadow Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Spread: 0%
Size: 0px

Inner Shadow Settings:

Blend Mode: Multiply
Color: 2f9dbe
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0px

Step 6

Now type out some menu text.

Menu Text Settings:

Font Face: Mido
Size: 14pt
Kerning: -50
Color: 828282

Step 7

Now create thin dividers between each menu item.

To do this, use your marquee tool and linear gradient tool. Start by creating a 1px wide area ranging from ccc8c0 to transparent. Then next to this line, create one ranging from white to transparent.

You can see a close up of this 3d effect created below:

Step 8

Now create a form/button for your search area in the right half of your menu.

Use your rounded rectangle shape tool (10px radius).

For the form aspect of your search area, create a white rounded rectangle, and then apply a stroke blending option:

Stroke Settings:

Size: 1px
Color: dfdfcb

Now create another rounded rectangle for your search submit button. Apply a gradient overlay effect and stroke blending option:

Gradient Overlay Settings:

Gradient Ranging from: e1dece to faf8ec
Angle: 90 degrees
Blend Mode: Normal

Stroke Settings:

Size: 1px
Color: c6c6ae

Step 9

Create a new layers folder BENEATH your header one. Call this folder 'mid area'.

Create a colored area ranging from 135px to 400px (using your horizontal guides).

Fill this area with 4e666e.

Step 10

Now apply a pattern overlay to this colored area.

I used an old SquidFingers pattern I had lying around on my computer, but use anything you think will work.

Pattern Overlay Settings:

Blend Mode: Multiply
Opacity: 40%
Scale: 100%

Step 11

Now create a new layer called 'highlight'. Create a lighting highlight in the right area of your patterned space.

Drag out a white to transparent radial gradient, and then change this layer's blend mode to 'overlay' and reduce it's opacity to 35%.

Step 12

Now cut out and paste in your image of businessmen. Use whatever extraction you think is the most appropriate, but I used the trusty pen tool:

Step 13

Now apply a hue/saturation, levels and curves adjustment layer just above your businessmen photo. For each adjustment layer apply a clipping mask (layer - apply clipping mask) so that they only effect your photo, rather than the entire canvas.

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: -85
Lightness: 0

Levels Adjustment Layer Settings:

12 / 1.00 / 221

Step 14

Now apply some text over the left part of this 'mid area'.

Header Text Settings:

Font Face: Mido
Size: 36pt
Kerning: -50
Color: ffffff

Welcome Paragraph Text Settings:

Font Face: Arial
Size: 14pt
Kerning: -50
Color: b8deed

Step 15

Now using your path tool, create a curved tab area in the bottom right of your 'mid area'.

Fill this area with a linear gradient ranging from e3e3d8 to f7f7ee.

Then apply an inner shadow blending optoin.

Inner Shadow Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 75%
Angle: 90 degree
Distance: 1px
Choke: 0%
SIze: 0px

Step 16

Now create a series of circles over this tab area to help control the slideshow:

Step 17

Now select the bottom part of your canvas. Fill this entire area with (f8f8ef).

Step 18

Now using your initial canvas guides and the icons from your resources folder, construct an area showcasing your applications.

I've laid out the various text settings below:

Heading Text Settings:

Font Face: Mido
Size: 18pt
Kerning: -50
Color: 686868

Info Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 686868

Learn More Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 3d728d

Also apply a 1px line to act as a divider beneath this area.

Step 19

Now apply some 'featured product' content beneath your applications text.

I used a 200X200px thumbnail image as my featured image. Text settings below:

Heading Text Settings:

Font Face: Mido
Size: 36pt
Kerning: -50
Color: 505050

Smaller Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 686868

Step 20

Now to the right of your featured product area create a testimonials area.

Use your canvas guides to position this content, and use your 'man' icons as image placeholders.

Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 7b7971

Step 21

Now using your canvas guides create a footer area for your design.

The diagram below shows the colors used to construct this area, as well as a nice divider effect at the top of your footer area:

Step 22

Now apply some footer text:

Footer Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 7b7971

Step 23

Now paste in three of your security icons (see resources section for these) into the bottom right of your footer. Merge these 3 icon layers into a single layer.

Then go to image - adjustments - hue/saturation. Reduce the saturation of your icons layer to -90.

And We're Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome.