Design a Super Sleek Sports Web Layout

Final Image

Here is a preview of the image that we are going to be creating:

Step 1

Start by creating a new document (1100X1000px).

Lay out some guides to help you set up your layout.

Vertical Layout Guides:

130px, 970px

Horizontal Layout Guides:

190px, 450px.

Step 2

Now create a new layer called 'main background'.

Select your entire canvas (option+a) and fill your canvas with any color you want (I chose white). Then go to blending options for this layer and apply a gradient overlay.

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 9ecf6b to 30b15b
Style: Reflected
Angle: 90
Scale: 100%

Step 3

Now create a new layer called 'background bottom'.

Using your layout guides select the bottom half of your layout. Fill this selection with black.

Now change this layer's blend mode to 'overlay' and reduce the FILL opacity of this layer to 27%. Very importantly it is the fill opacity which you change, not the main layer opacity.

Now apply an inner shadow blending option to your layer.

Inner Shadow Blending Option Settings:

Blend Mode: Overlay
Color: 000000
Opacity: 19%
Angle: 90
Distance: 1px
Choke: 0%
Size: 0px

As you can see below, this creates a really subtle dark dividing line between your background areas:

Step 4

Now create a new layer called 'top highlight'.

Drag down a white to transparent linear gradient from the top of your canvas:

Now change this layer's blend mode to 'overlay' and reduce it's opacity to 67%.

Step 5

Now create a new document (4px X 4px).

Try and create a pattern like the image below:

Now go to edit>define pattern. Define your pattern as 'detail'.

Step 6

Now create a new layer called 'pattern area'. Create a selection in the top section of your background, and fill it with whatever color you choose (I chose gray). Then apply a layer mask and mask off the edges of your new area, blending them smoothly into your background:

Now go to blending options for this layer and select 'pattern overlay'. Select your newly defined 'detail' pattern:

Pattern Overlay Settings:

Blend Mode: Overlay
Opacity: 100%
Pattern: Detail
Scale: 100%

Now with your 'pattern area' layer selected, reduce it's main opacity to 50%, and it's fill opacity to 0%. This will mean that only your pattern is showing up, not your gray fill.

Step 7

Now paste in your sports team photo, resizing and positioning it to fit over your patterned area. Apply a layer mask, and use a soft black paintbrush to smoothly mask off the edges of this photo to blend into your main background:

Now reduce this layer's opacity to 18%

Step 8

Now create a new layer called 'highlight'. Drag out a white to transparent radial gradient over your photo area:

Now change this layer's blend mode to 'overlay' and reduce it's opacity to 19%:

Step 9

Now download your 'football player 2? image. It's on a plain white background so is fairly easy to extract using your magic wand tool. Once extracted paste it into your original document.

Position the football player to cut off just where your background divides:

Now apply a hue/saturation adjustment layer (being sure to create a clipping mask so that it only effects your football player, not your entire canvas):

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: -100
Lightness: 0

Now change your football player layer's opacity to 20% and change it's blend mode to 'overlay':

Now repeat this technique, adding a second football player to the right area of your background:

Step 10

Now create a new layer called 'background lighting'.

Select a large, soft, low opacity black paintbrush and paint in some shadows over your layout. Then switch your brush to white and paint in some highlights:

Now reduce this layer's opacity to 63% and change it's blend mode to 'overlay':

Step 11

Now create a new layer called 'fractal lines'.

Download the blend lines brush set from the resources for this tutorial. Apply the brushes over your canvas, using a white brush:

Now change this layer's blend mode to 'overlay' and reduce it's opacity to 30%. Finally, apply a layer mask, and use a soft black paintbrush to mask off any harsh edges to the brushes:

Step 12

Now download the stadium icon in the resources for this tutorial. Paste it into the top left of your canvas:

Now apply some logo text to the right of your logo icon. Be sure to apply a very slight drop shadow to your text to make it stand out more against your background.

Main Logo Text Settings:

Font Face: Proxima Nova
Size: 36pt
Kerning: -50
Color: ffffff

Slogan Text Settings:

Font Face: Proxima Nova
Size: 18pt
Kerning: 0
Color: cbf9e4

Step 13

Now download some social media icons and paste them into the top right of your canvas:

Now merge these layers together. Then apply an outer glow blending option:

Outer Glow Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Color: ffffff
Spread: 0%
Size: 7px

Now apply a hue/saturation and then color balance adjustment layer (giving each a clipping mask):

Hue/Saturation Blending Option Settings:

Hue: 0
Saturation: -100
Lightness: 0

Color Balance Blending Option Settings:

Highlights: 0 / +30 / -10
Midtones: 0 / +100 / 0
Shadows: 0 / +40 / -10

Step 14

Now apply some text to the side of your icons.

Social Media Text:

Font Face: Proxima Nova
Size: 14pt
Kerning: 0
Color: ffffff

Step 15

Now to create your menu! Select your rounded rectangle shape tool and drag out a menu bar (10px radius). Your shape can be any color you want at this stage, for some reason I chose pink!

Now apply some blending options to this layer.

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 22%
Angle: 90
DIstnace: 5px
Spread: 0%
Size: 5px

Inner Shadow Blending Option Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 14%
Angle: 90
Distance: 3px
Choke: 0%
Size: 0px

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 3d3d3d to 656565

Step 16

Now apply some menu text. Notice how I made the active link bold, to help it stand out.

Menu Text Settings:

Font Face: Proxima Nova
Size: 14pt
Kerning: 0
Color: dddddd

Now apply a white rounded rectangle (10px radius) below your text layer. Reduce this layer's opacity to 8% to make the effect very subtle. This will work to show your menu's active state:

Step 17

Now apply some centered welcome text beneath your menu.

Welcome Text Settings:

Font Face: Proxima Nova
Size: 54pt
Kerning: 0
Color: ffffff

Now apply an outer glow to your text:

Outer Glow Blending Option Settings:

Blend Mode: Screen
Opacity: 75%
Color: ffffff
Spread: 0%
Size: 8px

Step 18

Now use your guides to create a white rounded rectangle to act as your main content area. Ensure that your rounded rectangle has a 10px radius and then apply a stroke blending option:

Stroke Blending Option Settings:

Size: 3px
Position: Outside
Blend Mode: Normal
Opacity: 9%
Fill Type: Color
Color: 000000

Step 19

Now apply some text over this content area.

Heading Text Settings:

Font Face: Proxima Nova
Size: 48pt
Kerning: -50
Color: 0d5c27

Main Text Settings:

Font Face: Proxima Nova
Size: 18pt
Kerning: 0
Color: 2b2b2b

Step 20

Now drag out a rounded rectangle (10px radius) behind your text:

Now apply a gradient overlay and stroke blending option:

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 299e43 to 79be4a
Style: Linear
Angle: 90

Stroke Blending Option Settings:

Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Color: 179135

Step 21

Now we want to add a very subtle bit of lighting to our button to make it even more engaging.

Start by option+clicking on your button layer in your layer's palette.

Then with your selection active, create a new layer. Drag out a white to transparent radial gradient from the top center of your button. Because you're doing this within an active selection it won't go outside the edges of your button shape:

Now reduce this layer's opacity to 28% and change the layer's blend mode to 'overlay':

Step 22

Now cut out and extract your final football player image. Again, he's on a plain background which makes it easy using the magic wand tool.

Paste him into the right half of your white content area:

Now apply a drop shadow blending option:

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 25%
Angle: 90
Distance: 5px
Spread: 0%
Size: 21px

Now apply a levels, hue/saturation and curves adjustment layer (being sure to give each one a clipping mask).

Levels Adjustment Layer Settings:

11 / 1.00 / 235

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: +10
Lightness: 0

Curves Adjustment Layer Settings:

(see below):

Step 23

Now select the bottom 50px of your canvas. Create a new layer called 'footer'.

Fill your selection with white. Then reduce this layer's fill opacity to 17% and change the blend mode to 'overlay'.

Now apply an inner shadow blending option just to help give definition between the footer and the main background.

Inner Shadow Blending Option Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 18%
Angle 90
Distance: 1px
Choke: 0%
Size: 0px

You can see the result of this below:

Step 24

Finally, add some text to your footer.

Footer Text Settings:

Font Face: Proxima Nova
Size: 13pt
Kerning: -50
Color: ffffff

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.

You can also view the full-sized outcome by clicking the image below: