Creating a Travel Blog Design Using Adobe Photoshop

Create a unique blog design for a travel website

Travel Site Tutorial:
Step 1:
Find an image of a beach or holiday setting and paste this into your new template image. Make sure to leave a gap either side of the image.

Step 2:
Duplicate your photo layer and set it to ‘overlay’. Then go to filter > brush strokes > accented edges.
Put in these settings:
Edge Width: 2
Edge Brightness: 19
Smoothness: 15.
Then merge the 2 layers.

Step 3:
Go to layers > add layer mask > reveal all. Then drag a black to transparent gradient upwards to fade the bottom of your photo out. I also want to give the background a less harsh tone, and so create a new background layer behind my photo layer and fill it with a sandy color.

Step 4:
Now duplicate your photo layer and set this layer to overlay also. Move your photo that it’s in a different position from your original (try and move it into the space either side) and keep doing this about 10 times, each time moving your duplicate layer into a new space. This should create a cool build up of photos making a messy collage.

Step 5:
Now merge all of your duplicated layers. Once all of the layers are merged change your layer properties from overlay to normal. You should get something like this:

Step 6:
Now use a grunge brush eraser to eraser the center of your second photo layer. Try to reveal the details of the original. However, don’t erase the top area as you want to keep the multi-layer effect of the mountains/sky. With the size areas use the paintbrush tool (using both normal/grunge brush sets) to make the edges somewhat seamless with the original photo. You don’t need to make things perfect, as after all you are creating an artistic looking design, but you don’t want massive irregularities to draw too much attention. I also worked with the clone brush to duplicate areas of the original photo and blend it out sideways. This step will depend heavily on your original photo, but just mess around with all of these techniques until you have something that looks good.

Step 7:
Now I want to add a simple logo to the blog. I select a bold font (future – extra bold condensed) and go to my layer blending options. To make the logo really pop I add a subtle gradient overlay (white to light blue), a 1px black stroke (outline), a bold black drop shadow (2px) and a subtle white glow around all of this.

Step 8:
Now we want to add a subtle sun-ray effect behind the logo. To do this simply use the lasso tool to draw a burst of sun-rays moving out from the center of your logo. Then fill this selection with a radial gradient going from white to transparent. Move this layer behind your logo text layer and reduce it’s opacity to around 20%.

Step 9:
Now add some text for your menu. Position this in the center of your template above you logo, and add a subtle black drop shadow (around 2px) to make it stand out nicely.

Step 10:
To give more structure to the menu we are going to add a border around it. Create a new layer underneath your menu text area. Select the rectangle marquee tool and create a selection around around your menu text. Fill this area with white and reduce your layer opacity to around 50%. Then use the marquee tool and create 1px dividers between your menu links. Finally use the magic wand to select the spaces between these borders and fill them with 50% opacity white. The result should be as shown below. I also wanted to liven up the logo by adding an icon, which I imposed the same layer blending modes upon as my logo text layer.

Step 11:
I want to add some cool details to my template before adding some content. To achieve a nice writing in the sand effect I create some text using a handwriting style font, and write over my sandy beach image.

Step 12:
To make this look more realistic I skew the text to create a more accurate perspective. I also reduce the opacity to around 35% to make it merge with the sand more. To add a subtle depth to the writing I add a black 1px inner shadow to my layer.

Step 13:
Now I want to add a beach umbrella for a splash of color. I find an appropriate photo and cut around the umbrella using the lasso tool. then I resize this image to be in proportion with my main beach image.

Step 14:
To add some realistic shadows to the umbrella and really make it fit seamlessly into the rest of the template I add a subtle 1px black drop shadow (15% opacity). To then create my main shadow I copy the image and paste it onto a new layer. I then flip the new umbrella image vertically. Finally, edit > transform > skew my image to follow the direction of the other shadows in my header, and then reduce the opacity to around 30%.

Step 15:
Now I want to create a cool bucket RSS feed icon. To do this I find a suitable photo of a bucket buried in the sand. I paste this image onto a new layer and cut around the top of the bucket using the lasso tool. I leave the bottom area of the photo in tact so that I can maintain the impression that the bucket is buried in the sand.

Step 16:
Now create a layer mask (reveal all) and drag a black to transparent gradient from the sides of your bucket image towards the center. This will allow you to blend the edges of the images with your main beach background color – making the bucket fit seamlessly with the sand.

Step 17:
Finally to add an RSS symbol to your bucket image paste in a standard RSS icon. Use the magic wand to select the white part of your RSS icon and then paste this onto a new layer. Resize and rotate it to fit with your bucket image, and reduce the opacity to around 90%. Finally add some text asking your visitors to subscribe.

Step 18:
Now we want to create a sidebar. Create a medium brown colored bar down the right side of your template. Reduce this layer’s opacity to 90% to let some of your background (i.e: the umbrella shadow) show through. Then round the corners and give the layer an inner glow (dark brown, opacity: 6%, Choke: 10, Size: 15).

Step 19:
Now I create my sidebar headings using the same font as my logo (Futura Extra Bold Condensed) and give the text a 1px drop shadow. I create a new layer behind the headings and create a dark brown backdrop, which I reduce to around 20% opacity to let some of the background still show through.

Step 20:
Now I want to create bullet points for my sidebar. I duplicate my umbrella image layer, and then resize it to be the desired size for my bullet point. I then go to layer blending options, color overlay, and overlay a medium brown color. Then I add some simple text.

Step 21:
To create a bit of added detail we’re going to create some footprints in the sand. This step’s not too tricky, but quite time consuming. So I’ll quickly run you through the steps… First create a very simple footprint shadow using the lasso tool, fill this with dark brown. Then copy and paste this shape in the pattern of footsteps around 15-20 times. Try to paste the footprints in a curved pattern. Then you want to go to edit > transform > skew and skew your footprints layer until it seems to fit the perspective of your beach image. Finally reduce the layer’s opacity to around 20%. If you want to add a little more depth you can give your layer a black inner shadow (depth 1).

Step 22:
Now create a header for your main content area. I used the same font again as my logo, with a bold dark brown color to make it stand out. To add a little depth I gave the text layer a 1px black inner shadow. To create a cool reflection effect we duplicate the original text layer and then go to edit > transform > flip vertical. Move your flipped image down to touch the bottom of your original text layer. Then add a layer mask as demonstrated before and drag your black to transparent gradient upwards to mask the bottom of your layer. Finally reduce the opacity of this new layer to around 20%.

Step 23:
To complete the layout just add some text/images. Obviously your content area can be as complex as you like, but the aim of this tutorial has simply been to show you how to create a cool template to display your content within!