Final Image

The result of this tutorial is shown below:

What You Will Learn

This tutorial is very in depth, and covers the design techniques listed below:

• Learn how to use the 960 grid system to create a well structured website layout that is easier to convert to html.
• Learn how to work with patterns, textures and blending options to create a simple, yet sleek design.
• Learn how to work with a non-destructive work flow, mastering layer masks and smart objects.
• Learn principles of effective design, ranging from typography to padding.
• & Much More!

Learn how to use the 960 grid system to create a well structured website layout that is easier to convert to html.

Learn how to work with patterns, textures and blending options to create a simple, yet sleek design.

Learn how to work with a non-destructive work flow, mastering layer masks and smart objects.

Final Image

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

Step 1

Start by creating a new layout (1000X1400px).

We’re going to start by laying out canvas guides to help structure our layout.

Lay out the following guides:

Vertical Guides:

50px, 350px, 600px, 650px, 700px, 950px

Horizontal Guides:

200px, 550px, 700px, 900px, 1000px

Step 2

Create a new layer called ‘background’. Select your entire canvas and fill it with d12b5d.

Create a new layer called ‘radial gradient top’.

Drag out a white to transparent radial gradient from the very top center of your canvas.

Reduce this layer’s opacity to 20% and change it’s blend mode to ‘overlay’. This will make the light effect much more subtle, giving just a subtle highlight to your header:

Duplicate your ‘radial gradient top’ layer and move the duplicate layer down so that your duplicate highlight starts at your 550px horizontal guide line:

Step 3

We’ve going to create a simple logo for our Vlog.

Start by pasting in the camera icon from the movies icon pack in the resources section for this tutorial.

Then apply some next to the right of this:

Logo Text Settings:

Font Face: Carson
Size: 30pt
Kerning: -50
Color: ffffff (for small text) and ffd800 for the larger text.

Now apply a subtle drop shadow blending option to your text layer:

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 25%
Angle: 120
Distance: 1px
Spread: 0%
Size: 2px

Step 4

Download the ‘simple dividers’ web elements pack from FanExtra (see resources section for this tutorial). Paste in the first divider from the pack, positioning it just underneath your logo area.

Reduce it’s opacity to 60% to make it slightly more subtle:

Step 5

Now apply some text underneath your divider for menu links.

Menu Text Settings:

Font Face: Arial
Styling: Bold
Kerning: 75
Color: ffffff

Apply a subtle drop shadow to your text to help it stand out against your background more:

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 25%
Angle: 120
Distance: 1px
Spread: 0%
Size: 2px

Use your lasso tool to create a series of white ‘play’ icons next to each menu item:

Step 6

Now we want to create an active state for our menu.

Start by creating a white rounded rectangle behind your ‘home’ link (10px radius).

Now reduce the fill opacity of this layer to 8%, leaving the main layer opacity at 100%.

Apply an inner glow blending option:

Inner Glow Blending Option Settings:

Blend Mode: Screen
Opacity: 15%
Color: ffffff
Source: Edge
Choke: 0%
Size: 10px

Step 7

Download the Komodo social media icon pack from the resources section. Paste in several of the icons that are relevant to your blog, positioning them to the left of your logo.

Type out some account related links and position them to the right of your logo:

Now type out some sketchy text above your links, using the Jenna Sue font links to in the resources section for this tutorial.

Sketchy Text Settings:

Font Face: Jenna Sue
Size: 24
Kerning: 0
Color: ffffff

Also download the FanExtra Sketchy Arrows brush set found in the resources for this tutorial and create a light pink arrow pointing to your account related links:

Apply some sketchy text and a sketchy arrow to the left side of your header above your social media icons:

Step 8

Using your guides create a large black area in the center of your canvas. This will be the background for your featured video player:

Now grab a screenshot of your featured video. Later your will embed the video using code.

I used a video of me and my good friend Matt performing a cover of one of our favorite bands. If you’re interested you can check out the video here. (I’m the one on the right).

Step 9

Let’s create some browsing buttons to navigate between featured videos easily.

Create a white circle in the center of the black area to the left of your featured video:

Reduce the opacity of this circle to 16%.

Then create a new layer called ‘arrow’. Reduce this layer’s opacity to 20%. Use your lasso tool to create a white arrow within your circle:

Place the ‘circle’ and ‘arrow’ layers within a single layer group. Duplicate this group and move your duplicate arrow button to the right of your featured video area. Then with this layer group selected go to edit>transform>flip horizontal.

Step 10

Now apply a heading underneath your featured video area.

Paste in one of the icons from the FanExtra movie icon pack.

Then type out some heading text. Apply the drop shadow blending option that you used on your menu text.

Heading Text Settings:

Font Face: Carton
Size: 24pt
Kerning: -50
Color: ffffff

Step 11

Paste a series of video thumbnails underneath your ‘latest videos’ heading.

Step 12

Create a rounded rectangle shape (10px radius) underneath your video thumbnails. It can be any color, as we’re going to style it using blending options:

Now apply a gradient overlay and drop shadow blending option:

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: ranging from fe9700 to ffd100
Angle: 90

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 14%
Distance: 2px
Spread: 0%
Size: 5px

Step 13

Now apply a brown (5d321b) custom shape arrow to your button, as well as some brown Arial text saying ‘OLDER VIDEOS’. This will allow users to browse back through your vlog archives:

Step 14

Open up your simple dividers web elements kit again and copy/paste the 10th divider into your original document.

Go to edit>transform>rotate 90 CCW and use your guides to position it between your left column and the empty space in your right column.

Also reduce this dividers layer opacity to 20% to make it more subtle:

Step 15

Add some content to your right column.

This column is really just reusing layer styles and font settings from the rest of your layer, so I won’t repeat them again.

The sign up button uses the same layer styles as your ‘older videos’ button.

The heading text settings are the same as your ‘LATEST VIDEOS’ heading, and the smaller text is the same as your menu:

Step 16

To construct your site’s footer create a new layer called ‘footer’.

Select the bottom 50px of your canvas and fill it with black:

Use your lasso tool to create an upwards black arrow from the center of your black footer bar.

Then add some text to your footer:

Footer Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 9f9f9f

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.

Download Source File for this Tutorial

Final Image

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

Step 1

Start by creating a new document (1000X1600px).

To help construct our layout we’re going to need to create some guides.

Lay out the follow content guides:

Vertical Guides:

50px, 100px, 300px, 500px, 550px, 700px, 900px, 950px

Horizontal Guides:

175px, 225px, 450px, 750px, 900px, 1100px

Step 2

Create a new layer called ‘background’ and fill your canvas with 050d25.

Step 3

Let’s create a space themed background design.

Start by pasting your space texture into the top of your canvas. The colors are already pretty nice, so no adjustments are needed here.

Reduce the texture layers opacity to 70%. You also want to avoid having a harsh edge at the bottom of your texture image, so create a layer mask and mask off the bottom of your texture using a soft, black paintbrush.

Step 4

Paste in your planet image, positioning it at the very top of your canvas.

Again, the colors are quite nice in the original image, so no adjustments are needed for now.

Apply a layer mask to this layer, and use a soft, black paintbrush to mask off the edges of your planet image, blending it smoothly into your main background:

Step 5

We want to add some subtle color highlights to our background now, just to make it more visually interesting.

Create a new layer called ‘pink light’.

Grab your paintbrush tool and select a large, soft, pink (ee01f3) paintbrush. Apply several ‘light spots’ over your header area.

Reduce this layer’s opacity to 20% and change it’s blend mode to ‘overlay’. This will make the color effect very subtle, yet still visible:

Create a new layer called ‘purple light’. Apply several light spots using a 7a00f8 colored, large soft paintbrush.

This time reduce this layer’s opacity to 15%, but keep the blend mode at ‘normal’. This creates a softer type of light effect:

Step 6

We want to create a background area for our footer also.

Start by duplicating your space texture, moving the duplicate down to fill your footer area.

Again, you’ll notice a seam at the top of this texture, so simply mask off this top line using a soft, black paintbrush.

Step 7

Duplicate your planet layer too, moving the planet to sit at the bottom-center of your canvas.

I also reduced the size of the planet image, as this helps establish a visual hierarchy within the design.

Step 8

Using your canvas guides, drag out a content area using your rounded rectangle tool.

Drag out a white rounded rectangle, radius: 10px.

Step 9

Time to create a futuristic menu!

Duplicate your rounded rectangle content area layer. We’re going to use this rounded rectangle shape as the basis for our menu.

Ensure that the shape is rasterized, and then use your marquee tool to select and then delete all of the shape, EXCEPT the top 50px.

Go to blending options for this layer and apply an inner shadow and gradient overlay.

Inner Shadow Blending Option Settings:

Blend Mode: Normal
Color: ffffff
Opacity: 100%
Angle: 90
DIstance: 1px
Choke: 0%
SIze: 0px

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: c5c1ba to f4f4f4
Style: Linear
Angle: 90

Select your menu shape by option+clicking on your menu layer in your layer’s palette.

With your selection still active, create a new layer called ‘menu highlight’.

Drag out a white to transparent radial gradient from the top-center of your menu area. Because of your active selection around your menu area, your gradient won’t go outside the bounds of this selection.

Change the blend mode of your ‘menu highlight’ layer to ‘overlay’ and reduce this layer’s opacity to 30%.

Step 10

Apply some text to the center of your menu.

Menu Text Settings:

Font Face: Proxima Nova
Styling: Bold
Kerning: -50
Color: 5a5752

To make this text stand out more, and give it a subtle indented look, apply a white drop shadow blending option.

Drop Shadow Blending Option Settings:

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

Step 11

To create a simple menu active state, create a new layer called ‘menu active arrow’.

Use your lasso tool to create a small arrow pointing down from the menu, underneath your ‘home’ link. Fill this arrow with the color at the bottom of your menu gradient (cac5be).

Step 12

Create a series of dividers between your menu items. Each divider should be constructed of a 1px white line, next to a 1px black line.

Now reduce the opacity of all layers relevant to your dividers to 10%. Alternatively it’s easier to group all of your divider layers into a single layer folder, and reduce this folders opacity to 10%:

Step 13

In the top center of your white content area, apply some large logo text.

Logo Text Settings:

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

Apply a drop shadow and stroke blending option to your logo text layer:

Drop Shadow Blending Option Settings:

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

Stroke Blending Option Settings:

Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Color: ffffff

Step 14

Paste your planet image to overlap your logo text, on a layer directly above your logo text layer:

Apply a clipping mask to your planet layer, and this will cause it to become clipped to the shape of your logo text. This will give the impression of your logo text allowing your main page background to show through, in a kind of ‘window into space’ effect:

Step 15

Time to create a subtle reflective shadow effect for our logo text.

Start by duplicating your logo text. (This may cause your planet layer’s clipping mask to release, so just reapply it when necessary). Move the duplicate text beneath the original, and go to edit>transform>flip vertical. Change the text’s color to black.

Then apply a layer mask, and use your mask to fade your text into the white background.

Reduce the opacity of your drop shadow layer to 10%:

Step 16

Apply some slogan text underneath your logo. I used the wonderful free font Jenna Sue for my slogan text:

Slogan Text Settings:

Font Face: Jenna Sue
Size: 30pt
Kerning: 0
Color: 84878b

Step 17

Time to add some details to our header!

Paste in some icons from the circular social media icon set found in the resources section for this tutorial. Position them with help from your grid.

Desaturate your icons, and reduce their layer opacity to 40%.

Also download the simple dividers FanExtra pack found in the resources for this tutorial and paste in one of the dividers, positioning it underneath your logo area. This will help structure your content:

Step 18

Download the design related icons from the resources for this tutorial.

Paste them into the content area underneath your logo area, and use your canvas guides to help position them properly.

Use one of the FanExtra dividers to create a vertical, central divide between your icons:

Step 19

Apply some text beneath your icons.

Heading Text Settings:

Font Face: Proxima Nova
Styling: Bold
Kerning: -50
Color: 031634

Detail Text Settings:

Font Face: Proxima Nova
Styling: Regular
Kerning: -50
Color: 7c7c7c

Use your rounded rectangle tool (10px radius) to create a call to action button, filled with a gradient ranging from 3d4cbd to 1c2a96.

Group your text/button layers into a layer group folder, and then duplicate this folder, positioning the duplicate areas of text underneath each icon. Alter the text to relate to the icon above it:

Step 20

Paste a screengrab of one of your client’s websites into the bottom left part of your content area.

I chose to use the design from our Blogs.FanExtra FREE 7 Day Blogging Course, which many of you have already been enjoying.

Apply an outer glow and stroke blending option to your website screenshot layer.

Outer Glow Blending Option Settings:

Blend Mode: Normal
Opacity: 20%
Color: 000000
Spread: 0%
Size: 35px

Stroke Blending Option Settings:

Size: 3px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Color: ffffff

Step 21

Apply some text to the right of your website shot:

Step 22

Finally, apply some centralized text to your footer area.

Footer Text Settings:

Font Face: Proxima Nova
Size: 18pt
Kerning: -50
Color: 98a9d3

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.

Download Source File for this Tutorial

Final Image

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

Step 1

Create a new document (1000X2000px).

Start by pasting your leather texture into the top of your canvas:

Apply a color overlay blending option to your texture layer.

Color Overlay Blending Option Settings:

Blend Mode: Normal
Color: 585858
Opacity: 90%

Apply a hue/saturation adjustment layer, creating a clipping mask so that your adjustments only effect your underlying texture layer:

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: -100
Lightness: -30

Step 2

Place your texture layer and adjustment layer in a layer group and then duplicate this layer group.

Move your duplicate texture area down to fill the bottom area of your canvas.

If you notice a harsh seam between your two textures, simply mask the top off your duplicate texture off using a soft black paintbrush. This should connect them seamlessly:

Step 3

Create a new layer called ‘darker bottom’.

Select the bottom of your canvas (from 350px downwards). Fill this area with black.

Then change this layer’s opacity to 30%:

Step 4

Apply some text to the top center of your canvas. Type out a huge letter ‘f’ using the text settings below:

Text Settings:

Font Face: PT Banana Split
Font Size: 480pt
Kerning: -50
Color: 000000

Now reduce this layer’s FILL opacity (not actual opacity) to 15%.

Apply an inner shadow, to give an indented look:

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 5px
Choke: 0%
Size: 5px

Step 5

Duplicate your ‘f’ layer and move the duplicate to the bottom right of your canvas.

Step 6

Create a new layer called ‘header highlight’.

Apply a large, soft white paintbrush to the top center of your canvas.

Reduce this layer’s opacity to 40% and change it’s layer blend mode to ‘overlay’ to make the effect more subtle:

Repeat this technique, applying a second light spot over the top left of your header (where you’re going to place your logo):

Step 7

Time to apply some layer guides to help setup our layout.

Apply the following guides to your layer:

Vertical Guides:

50px, 100px, 150px, 600px, 650px, 850px, 900px, 950px

Horizontal Guides:

200px, 900px

Step 8

Using your layout guides, create a main content area using a white rounded rectangle (20px radius).

Apply an outer glow and stroke blending option. This is to give definition to your content area:

Outer Glow Blending Option Settings:

Blend Mode: Normal
Opacity: 15%
Noise: 0%
Color: 000000
Spread: 0%
Size: 13px

Stroke Blending Option Settings:

Size: 4px
Position: Inside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Color: d4d4d4

Step 9

Create a new layer, beneath your content area layer. Call this layer ‘sketchy lines’.

Use a rough Photoshop brush to brush around a subtle messy outline around your content area. Reduce this layer until the effect is suitably subtle (I used a 20% layer opacity).

Step 10

Apply some logo text to your header.

Logo Text Settings:

Font Face: Proxima Nova
Size: 48pt
Kerning: -50
Color: ffffff
Styling: Italics

Apply a subtle drop shadow blending option to your text layer.

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 50%
Angle: 90
Distance: 1px
Spread: 0%
Size: 2px

Step 11

Time to work on our logo icon!

Start by drawing out a basic icon shape. I actually used the shield default custom shape available in Photoshop. This shape can be any color you want:

Apply a drop shadow and gradient overlay blending option to this layer.

Drop Shadow Blending Option Settings:

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

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 0d77d0 to 38a3ff
Style: Linear
Angle: 90

Now option+click on your shield icon layer to select your shield shape.

With your selection in place create a new layer called ‘logo icon lighting’.

Drag out a white to transparent radial gradient from the top center of your icon. Due to your active selection this gradient shouldn’t exceed the bounds of your icon shape:

Change this lighting layer’s opacity to 50% and it’s blend mode to ‘overlay’ to make the effect more subtle:

Step 12

Type out some menu text in the top right of your canvas.

Menu Text Settings:

Font Face: Arial
Color: ffffff
Size: 18
Kerning: -50

Step 13

Create a new layer beneath your menu text layer called ‘menu hover’.

Use your pen tool to create a cool hover shape and fill this with black. Then reduce this layer’s opacity to 60%:z

Step 14

I’m going to be unconventional and jump straight down to applying our footer text. This is just so that we’ve covered every part of our layout except the content area.

Footer Text Settings:

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

Step 15

Download your Imac image and paste it into the top right of your content area:

Step 16

Type out some welcome text to the left of your Imac.

Heading Text Settings:

Font Face: Arial
Styling: Bold
Size: 48px
Kerning: -50
Color: 3a3a3a

Smaller Text Settings:

Font Face: Arial
Styling: Regular
Size: 18pt
Kerning: -50
Color: 7a7a7a

Step 17

Create a learn more button under your welcome text.

Use the same gradient overlay settings as your logo icon, but then also apply a drop shadow and inner shadow blending option.

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 4px
Choke: 0%
Size: 3px

Drop Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 10%
Angle: 90
Distance: 4px
Spread: 0%
Size: 0px

Just like with your logo icon also apply a lighting layer (using a radial gradient for subtle lighting):

Step 18

Using your paintbrush tool, brush out a faint gray divider line underneath your welcome area:

Step 19

In the center of your content area, underneath your sketchy divider, type out ‘FEATURED WORK’ as a subheading.

Sub Heading Text Settings:

Font Face: Arial
Size: 14
Kerning: +100
Color: 6e6e6e

Using your guides, paste in three thumbnails of your design work. Each thumbnail should be 200X150px.

Apply a stroke blending option to each thumbnail layer:

Stroke Blending Option Settings:

Size: 7px
Position: Outside
Blend Mode: Normal
Opacity: 5%
Fill Type: Color
Color: 000000

Step 20

Add a further area to the bottom of your content area called ‘featured clients’.

Rather than using thumbnails, paste in logos of clients you’ve worked with:

Step 21

Between your featured work and featured clients area add a light gray rectangle (color: f3f3f3).

This rectangle should jut out past the edges of your content area by about 15px either side:

Now apply a drop shadow, inner shadow and bevel/emboss blending option to this rectangle layer:

Drop Shadow Blending Option Settings:

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

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: d4d4d4
Angle: 90
Distance: 1px
Choke: 0%
Size: 0px

Bevel and Emboss Blending Option Settings:

Style: Inner Bevel
Technique: Smooth
Depth: 1000%
Direction: Up
Size: 0px

Angle: 90
Altitude: 1
Highlight Opacity: 0%
Shadow Opacity: 20%

Step 22

Create a new layer called ’3D area’. Using your lasso tool, create a little black triangle under the area of your light gray rectangle that juts out past your content area:

Step 23

Finally, to finish your layout apply a final call to action button in the center of your gray rectangle.

Simply duplicate your learn more button for this new button area:

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.

Download Source File for this Tutorial

Final Image

The result of this tutorial is shown below:

In this tutorial you will build a set of practical subpages using the original homepage template created in part 1.

You will learn an effective workflow for transforming and reusing your web templates, and will learn basic principles of effective layout and design.

Final Image

The result of this tutorial is shown below:

What You Will Learn

This tutorial is very in depth, and covers the design techniques listed below:

• Learn how to construct a complex artistic background for your website’s header.
• Utilize a range of techniques such as drawing/pen tool techniques to handle the details of your design.
• Learn about design theory as your create your design, learning how and why certain visual elements work.
• Learn how to work with website typography, and create effective call to action buttons.
• & Much More!

Learn how to construct a complex artistic background for your website’s header.

Utilize a range of techniques such as drawing/pen tool techniques to handle the details of your design.

Learn how to work with website typography, and create effective call to action buttons.

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:

Download Source File for this Tutorial

Members Only Tutorial

This tutorial is available exclusively to our FanExtra members. In order to read the tutorial and download it’s original .psd source file you must sign up as a FanExtra member.

If you sign up today you get access to hundreds of design files, including tutorial source files, members only tutorials, vectors, icon packs, texture packs and more! You can also access our huge collection of .psd website interfaces such as this one.

Members Area Tutorial: Design a Multi-Page Portfolio Website

We’ve been listening to our members and we know that many of you have been keen to see a tutorial on the workflow behind a multi-page website. Today we’re happy to bring you a tutorial demonstrating just that! Members can also download the original .psds for this design and use the design for their own projects. This is part of the new FanExtra Members Area that we launched yesterday. We’ll be giving members exact what they want as well as now providing one members-only tutorial each week (on top of the dozens of other resources added each week!).

Final Image

The result of this tutorial is shown below:

What You Will Learn

This tutorial is very in depth, and covers the design techniques listed below:

• Learn how to construct a creative, grungy website background.
• Learn how to work with multiply blending options and settings to construct a professional web layout.
• Learn to create an eye catching and effective call to action button.
• Learn the work process behind easily and quickly creating multi-page designs.
• & Much More!

Learn how to create a simple, sleek layout with effective typography and padding

Learn how to construct an eye catching and effective call to action buttons to increase your business.

Learn how to master an efficient workflow to quickly produce subpages for a web design.

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (1200X1200px).

Lay out some guides to help structure your layout:

Vertical Guides:

100px, 175px, 750px, 800px, 1100px.

Horizontal Guides:

10px, 50px, 250px, 1100px.

Step 2

Now fill your canvas with e7eff0.

Create a new layer called ‘background pattern’. Now download an attractive blue pattern, and lay it over your canvas:

Now download the watercolor brush set from the resources section for this tutorial. Apply the brushes over the edges of your canvas, using a brush at around 25% opacity:

Now create a new layer and apply even more watercolor brush marks over your canvas, building up a nice background effect:

Now create a new layer called ‘highlight’. Drag out a white to transparent radial gradient in the top center of your canvas:

Now reduce this layer’s opacity to 35% and change the layer blend mode to ‘overlay’.

Step 3

Now time to setup our menu!

Using your guides, select the top 10px of your canvas. Create a new layer called ‘top bar’ and fill this selection with 02c1e9.

Create a new layer called ‘menu’. Now select the 10-50px at the top of your canvas, and fill this area with a linear gradient ranging from 09a2c1 to 00687d.

Now apply a drop shadow and inner shadow blending option to your menu bar layer:

Drop Shadow Blending Option:

Blend Mode: Multiply
Color: 000000
Opacity: 15%
Distance: 3px
Spread: 0%
Size: 5px

Inner Shadow Blending Option:

Blend Mode: Multiply
Color: 000000
Opacity: 15%
Angle: 90
Distance: 5px
Choke: 0%
Size: 5px

You can see a close up of your menu below:

Now we want to make our menu look a little more 3D. Start by option+clicking on your menu layer in your layer’s palette. This will select your entire menu. With your selection in place create a new layer called ‘menu highlight’. Drag out a radial gradient (white to transparent) in the center of your menu. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 25%.

Now create a new layer underneath your menu layer called ‘shadow under menu’. Paint in a subtle shadow under the center of your menu, using a soft black paintbrush.

Now apply some text to the center of your menu.

Menu Font Settings:

Font Face: Dancing Script
Styling: Regular
Size: 24pt
Kerning: -50
Color: ffffff

Step 4

Create a new layer called ‘content area’. Use your guides to create a rounded rectangle (white fill, 10px radius).

Now use your pen tool to create a wavy area at the top of your content area:

Step 5

Create some logo text over the top of your content area.

Logo Font Settings:

Font Face: Dancing Script
Font Size: 200pt
Kerning: -50
Color: 000000

Now apply a drop shadow, gradient overlay, and stroke blending option to your text layer:

Drop Shadow Settings:

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

Gradient Overlay Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 021a74 to 54a3c2
Angle: 90

Stroke Settings:

Size: 3px
Position: Outside
Opacity: 100%
Color: ffffff

Step 6

Now add some text in the top left of your content area. Also apply one of the arrows from the sketchy arrow brush set in the resources section for this tutorial:

Step 7

Now apply some blog post text over your content area.

Blog Post Title Text Settings:

Font Face: Arial
Styling: Bold
Size: 36pt
Kerning: -50
Color: 173d88

Main Post Text Settings:

Font Face: Arial
Styling: Regular
Size: 14pt
Kerning: -50
Color: 7a7a7a

Now paste in a 200X200px thumbnail image next to your post text:

Finally, apply a watercolor brush mark behind your post title layer, using a low color brush:

Step 8

Now select all of the layers that comprise your post content. Hit ‘option+g’ to group all of these layers into a layer folder. Call this layer folder ‘post 1′.

Then duplicate this post folder and move it’s contents beneath the original. Call this duplicate layer folder ‘post 2′.

Step 9

Now post your polaroid photo into the top right of your content area:

Now paste in a photo of yourself. Rotate and resize the photo to fit over your polaroid, and then crop it to fit correctly:

Step 10

Now apply some text to the right part of your content area:

Step 11

Finally, add some text to your footer.

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.

Download Source File for this Tutorial

Final Image

As always, this is the final image that we’ll be creating:

Step 1

Create a new document (1000X1000px).

Now create some guides to help lay out your design. Set out vertical guides at 50px and 950px and a horizontal guide at 500px.

Step 2

Create a new layer called ‘header’. Now select the top 500px of your design, and fill it with a linear gradient ranging from hex code ebeaeb to f5f5f5.

Now create a new layer called ‘dark footer’. Select the bottom 500px of your canvas and fill it with 1c1c1c.

Step 3

Now create a new layer called ‘clouds pixelated’.

With this layer active, option+click on your ‘header’ layer in your layers palette. This will select the header area. With your selection in place, go to filter>render>clouds (ensuring your foreground color is black, and the background is white).

Now reduce the opacity of your cloud layer to 20%.

Now go to filter>pixelate>mosaic. Now apply a cell size: 25 square. Hit ok, and you should have a nice pixelated header effect:

Step 4

Now select your lasso tool, and ensure it has a 50px feather. Then make a selection in the bottom right of your canvas.

Then apply some clouds to this area, and then repeat step 3 to create a nice pixelated footer area:

Step 5

Now download our clouds brush set (see the resources section for this tutorial).

Create a new layer called ‘clouds’. Apply the clouds using a black paintbrush over your header area.

Now reduce your cloud layer’s opacity to around 20%:

Step 6

Cut out and paste in a photo of a jumping dancer.

Now duplicate your dancer, moving the duplicate layer beneath the original.

Resize the underlying layer to make it slightly smaller than the original, and then apply a mosaic filter (15 square strength) to achieve a cool pixelated effect:

Finally, reduce this pixelated layer’s opacity to 35%. This creates a subtle backdrop effect.

Step 7

We want to make our dancer really pop, so create a layer beneath both dancer layers called ‘highlight’. Drag out a white to transparent radial gradient from the side of your dancer. This should help push the dancer forward.

Step 8

Now apply some text in the top left of your canvas, using your guides. This will act as your logo text.

Logo Font Settings:

Font Face: St Atmos Free
Size: 72pt
Color: 000000
Kerning: 0
Styling: Normal

Now apply a couple of blending options to your text to make it more interesting.

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 50%
Angle: 120
Distance: 1px
Choke: 0%
Size: 1px

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 000000 to 444444.

Step 9

Now apply some text under your logo, including menu text, header text, and welcome area text. I’ve laid out the text settings for each area below:

Menu Text Settings:

Font Face: Georgia
Size: 18pt
Kerning: 50
Color: 000000

Headline Text Settings:

Font Face: Georgia
Size: 36pt
Kerning: 50
Color: 515151

Welcome Area Text Settings:

Font Face: Georgia
Size: 18pt
Kerning: 0
Color: 505050

Step 10

Now apply a button behind your ‘want to work with me?’ text.

I chose a rounded rectangle shape (35px radius) filled with a gradient ranging from 24a9da to 00729d.

Now option+click on your button in your layer’s palette, and with your selection in place create a new layer called ‘pixels button’.

Repeat your pixelated cloud technique, first applying a cloud render, and then a mosaic effect. Finally, change this layer’s blend mode to ‘overlay’ to create a cool lighting effect for your button:

Step 11

Now create a new layer called ‘arrow’. Use your lasso tool to create a dark gray arrow coming up from the footer area:

Step 12

Now apply some watermark style text at the top of your footer.

Footer Text Settings:

Font Face: Georgia
Size: 60pt
Kerning: 50
Color: 313131

Step 13

Now use your guides to paste in some examples of your best design work:

Step 14

Finally apply some text beneath each screenshot, as well as a general copyright notice.

Also use your line tool to create a 1px line above your copyright notice.

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.

Download Source File for this Tutorial