FanExtra Network

travelssitethumb200

Members Area Tutorial: Design a Sleek, Professional Travel Blog

Final Image

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

Setting Out Your Guides:

Create a document (1000X1000px).

Start by setting out your canvas guides:

Vertical Guides:

100px, 650px, 900px

Horizontal Guides:

150px, 200px, 450px, 900px.

Step 1

Create a new layer called ‘background’.

Fill your canvas with 0078a4.

Step 2

Create a new layer called ‘top highlight’.

Drag a linear gradient down from the top of your canvas, ranging from 009dd7 to transparent. This should add a subtle highlight to the top of your design.

Step 3

Now create a new layer called ‘header highlight’.

Drag out a radial gradient (white to transparent) from the top center of your canvas. Then change this layer’s blend mode to ‘overlay’ and reduce it’s opacity to 40%. You can see the effect at ‘normal’ blend mode and then ‘overlay’ blend mode below:

Step 4

Now download your maps brush set, and apply one of the brushes to the top-center of your canvas.

Then go to layer>layer mask>reveal all. Use a large, soft, black paintbrush to mask off the edges of your map image and blend it nicely into your background.

Step 5

Now repeat this technique, applying the rest of the brushes from the maps brush set, and masking off the edges so that they all blend together nicely.

Step 6

Now create a new layer called ‘background fractals’. Download the fractal brush set from the resources for this tutorial, and apply several of the fractal brushes over the header area.

Then mask off the edges of your fractal brushes, and reduce the opacity of this layer to around 30%.

Step 7

Now use your marquee selection tool and paintbucket tool and create a white rectangle in the center of your canvas. Use your canvas guides to establish where to create this area.

Call this layer ‘content area’.

Step 8

Now paste in the plane icon from the resource pack for this tutorial. Position it in the left area of your header.

Apply an outer glow blending option:

Outer Glow Blending Option Settings:

Blend Mode: Screen
Opacity: 50%
Color: ffffff
Spread: 0%
Size: 5px

Step 9

Now apply some text to the right of your logo icon.

Larger White Text Settings:

Font Face: Arial
Size: 36pt
Kerning: -50
Color: ffffff
Styling: Normal

Larger Blue Text Settings:

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

Smaller Slogan Text Settings:

Font Face: Georgia
Size: 14pt
Kerning: -50
Color: c1eef8
Styling: Italics

Then to add more emphasis to your logo text, apply a subtle drop shadow blending option:

Drop Shadow Blending Option Settings:

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

Step 10

Now use your canvas guides to create a welcome area.

Create a new layer called ‘photo area bg’.

Create a rectangular area filled with a linear gradient ranging from 1ac0e1 to 0078a4.

Step 11

Paste in the beach photo from the resource pack for this tutorial.

Then apply a layer mask and use a soft black paintbrush to mask off the edges of this area, blending it smoothly into your underlying blue area.

Step 12

The beach isn’t looking quite inviting enough, so I decide to up the saturation.

To do this in a non-destructive way, go to window>adjustment layers. Apply a hue/saturation adjustment layer, and then go to layer>apply clipping mask, so that your adjustments only effect the underlying layer (in this case, your beach photo layer).

Hue/Saturation Adjustment Layer Settings:

Hue: 0
Saturation: +40
Lightness: 0

Step 13

Now apply some text over the left part of your welcome area.

Larger Header Text Settings:

Font Face: Georgia
Size: 60pt
Kerning: -50
Color: ffffff
Styling: Normal

Smaller Text Settings:

Font Face: Georgia
Size: 24pt
Kerning: -50
Color: 93dff8
Styling: Italics

Again, I need to add a subtle drop shadow to this text in order to help it stand out against it’s background:

Drop Shadow Blending Option Settings:

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

Step 14

Create a new layer called ‘menu’. Using your canvas guides create a rectangle shape above your welcome area.

Apply a gradient overlay and drop shadow blending option:

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: 7dd8eb to c5f5ff
Angle: 90

Drop Shadow Blending Option Settings:

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

Step 15

Now apply some text over your menu.

Menu Text Settings:

Font Face: Arial
Size: 14pt
Kerning: -50
Color: 0d80ab
Styling: Bold

Then paste in a Twitter and Facebook icon from your social networking icon pack (see resources section):

Step 16

Now let’s construct a search form in the right part of your header. Start by creating a white rounded rectangle shape (10px radius). Reduce this layer’s opacity to 50% to give a semi-transparent effect:

Now create another rounded rectangle (10px radius) to the right of your first one. Apply an inner shadow and gradient overlay blending option:

Inner Shadow Blending Option Settings:

Blend Mode: Multiply
Color: 000000
Opacity: 18%
Angle: 90
Distance: 3px
Choke: 0%
SIze: 5px

Gradient Overlay Blending Option Settings:

Blend Mode: Normal
Opacity: 100%
Gradient: ranging from 005777 to 0481af
Angle: 90

Finally, apply some text to complete your form:

Search Form Text Settings:

Font Face: Arial
Size: 14pt
Kerning: -50
Color: 0a819e
Styling: Bold

Submit Button Text Settings:

Font Face: Arial
Size: 14pt
Kerning: -50
Color: a2e7f5
Styling: Bold

Step 17

Now we’re going to start work on the bottom area of our layout.

Start by applying some background details to make things more interesting. Apply your watercolor brush set (see resources section) over the left half of your white content area. Use a really light brush color (around e5e3e2) to achieve a subtle background effect.

Paste in your beach house photo, cropping it into a square.

TIP: In order to achieve a perfect square selection you can hold shift whilst dragging out your marquee tool.

Now apply some text over this area. Notice how I pay attention to subtle typographic principles. Large, darker text is used for the headline to make it stand out. Adequate kerning is used to aid legibility. The ‘read more’ links utilize an artistic font to fit with some of the grungy elements of the wider layout.

Headline Text Settings:

Font Face: Georgia
Size: 36pt
Kerning: -50
Color: 606060
Styling: Regular

Main Text Settings:

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

Read More Links Text Settings:

Font Face: Brush Script Std
Size: 24pt
Kerning: -50
Color: 978d75
Styling: Normal

Step 18

Now we want to create some sketchy arrows for our ‘read more’ links. To achieve this, use a 1px, b0a997 paintbrush and very roughly sketch our a very large arrow shape. Then simply scale down this layer to fit next to your read more links. It’s that simple, you can create a grungy effect in seconds!

Step 19

Paste in your lined paper image. Position it over the bottom right area of your main white content area. Use your marquee tool to crop it correctly so that it doesn’t overlap the edges of your white content area.

Then reduce this layer’s opacity to 50% and use a layer mask to mask off the left edge, fading it smoothly into your background.

Step 20

Cut out and paste in your ripped paper images, positioning them to act as headers in your right content area.

I cut these out from their backgrounds using the magic wand tool, as their backgrounds were pure white.

Now use your lasso tool and paintbucket tool to add a 3D effect to these ripped paper heading areas:

Finally, type out some text to act as a side menu. Also add in your briefcase and tourism icons next to this menu’s headings.

Side Menu Heading Text Settings:

Font Face: Arial
Size: 16pt
Kerning: -50
Color: 1a7b9c
Styling: Bold

Side Menu Main Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: 707070
Styling: Bold

Step 21

To finish, add some text to your footer:

Footer Menu Text Settings:

Font Face: Arial
Size: 14pt
Kerning: -50
Color: a9dcee
Styling: Bold

Footer Copyright Text Settings:

Font Face: Arial
Size: 12pt
Kerning: -50
Color: ffffff
Styling: Bold

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 view the full sized final design by clicking the image below:

VIP Download

Download the original .psd file for this tutorial here:

DOWNLOAD .PSD FILE

Leave a comment

0 Comments:

No comments have been posted yet. Be the first!

Leave a Comment:

Related Posts