Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Design web templates from photo backgrounds

We explain how to replicate this fashionable style by designing a themed template for the travel trade. Anyone for some sun?

This tutorial demonstrates how to build a travel website in Photoshop and Illustrator. The main point of vacations is to have an unforgettable getaway, and the website should emphasise the sense of escape and exoticism. This can be done visually by adding elements that inspire beautiful destinations, such as palm trees, sandy textures and well-composed photos.

The last thing anyone wants to experience with their travels is digging incessantly for information on their dream spots, so the ease of navigation should feel like the prelude to a flawless vacation. This can be done with an organised sidebar, logical categorisation and a design that works throughout the entire page. The aim is to make an instant impression through stunning visuals, with a competent search design to back it up. A great travel website can vastly enhance the whole experience because, after all, the purpose of vacationing is to make wonderful and lasting memories.

(This tutorial originally appeared in Web Designer 151, by Wendy Ding)

01 The audience

step1

The first thing to establish is who the primary audience is. Are they young people wanting a fun getaway with friends? Or a couple looking for a romantic excursion? Most vacation sites cater to people of all age groups, so regardless of the primary focus, it should contain a universal design that everyone finds appealing.

02 The package

step2

What makes a great vacation? It could the destination, deals and leisure activities. Whatever it is, show it as a special feature on the homepage to attract attention. Not everything needs to be displayed upon entering the site because it is too overwhelming. Instead, highlight the hot deals to draw the user in.

03 The layout

step3

It takes a few seconds for a user to decide if they like a site or not, so the design heavily influences its effectiveness. Virtually all websites contain these sections: banner or title, body and navigation. We chose the banner and body as the main visual focus, with the navigation sidebar as a second focu

04 Guides

step4

Guides are the easiest and most efficient way to keep a design in top shape. In order to add a guide in Photoshop, bring up the Ruler with Cmd/Ctrl+R and simply drag it out. To hide again, just press Cmd/Ctrl+;. Use the guides as bounding boxes to visually aid design and alignments.

05 Organisational flow

step5

Construct a solid workflow to keep track of all the images and files. A travel website most likely has a large photo collection with multiple versions of the same or similar photos. A great way to keep things in order is to name the files accordingly. We used this system: companyname_projectname_version_date.filename.

06 Banner

step6

We chose a beach image from www.istockphoto.com for its vibrant colours. The text was created in Illustrator and pasted into Photoshop as a vector layer. We duplicated the layer, rasterised it, gave it a Gaussian Blur and placed it underneath to add a dreamier glow. The Opacity is turned down to not be too intrusive.

07 Banner

step7

The beach photo wasn’t long enough so we elongated it. We lassoed one palm tree to the right, copied and pasted a chunk of the beach and sky several times to fill the gap, then combined the pasted layers into one. Then we applied the Clone Stamp and Gaussian Blur to the surrounding area to make it seamless.

08 iStockPhoto

step8

The beach image, along with the images of Spain, Japan and Peru, are from iStockPhoto (www.istockphoto.com). If you would like to buy these images, then here are the reference numbers. For the beach, enter 5878832; for Japan, search for 62003; type 7082887 for Peru; and for Spain, enter 1979463.

09 Photographs

step9

Be choosy in searching for the best photos. We screened a dozen before deciding on these because they share the same relative size and scale, visual impact and above all, they look uniformly good as a set. This adds more punch to the overall design and provides a comfortable landing zone for the eyes.

10 Behind the scenery

step10

Bear in mind that an amazing photo isn’t necessarily the right photo. What turns it into one is the crop and composition. Cropping a photo emphasises its best assets, further adding to the wow factor. For the Featured Destination photos, we were mindful of how clearly the photos would be seen at their size.

11 White boxes

step11

A subtle bounding box holds the flow together and eases the visual shift from section to section. We used slightly transparent white rectangles to keep a soft atmosphere while nicely framing the photos and text. The Drop Shadow effect also adds a bit more depth. Otherwise, the content would be floating on the background.

12 Voice and tone

step12

When it comes to it, think of the font as the voice and tone of the website. It needs to reflect and accentuate the visual flow. Here, we chose a standard sans-serif font for the body text. For headers and features, we went with a contemporary handwritten font for to add a touch more signature and personality.

13 Fonts

step13

Try to only use two or three fonts in total. If there are more, then it would be like multiple voices fighting for your attention and the message is lost. Use a louder font for the headers, a sans-serif font for the body text and a slightly playful font for features. Colour can also be employed to add emphasis.

14 Navigation bar

step14

Regard the navigation bar as the backbone of a website. Its most important function is the ease of use and accessibility. This can be optimised through logical categorisation and hierarchy of information. The main goal is to land the user on the desired page with the least number of clicks.

15 Add sidebar content

step15

Most blogs have a sidebar that gives quick access to archives, blogrolls, etc. Add one to yours by using the dividing line sketch rotated to vertical, and use the same backgrounds for headings. Define the colour of the links and render your link text in this colour to see how the site will look.

16 Beach canvas

step16

When designing a background, always consider how it looks with the whole design. Think of it as the stage for the content to comfortably rest on. We created a sand-inspired canvas to convey the feeling of a beach vacation. Also, its subdued colours are a nice complement to the vivid colours of the banner.

17 Background

step17

To achieve the background texture, we created a gradient, overlaid a sand texture image and added a vector mask. Here, we applied a black-and-white gradient for a nice disappearing effect on the sand image. The sand texture was kept as only a portion of the background, as otherwise it would be too busy.

18 Icon illustrations

step18

Icon illustrations are effective because they are simple, recognisable and add a fun visual rhythm. It is important not to add too much detail because it will be lost when the icon size is reduced. In order to ensure readability, only use simple, clean shapes that truly represent the object. Here, less is more.

19 Icon illustrations rules

step19

Three key factors in icon illustration are form, level of detail and number of colours. In Illustrator, we used the Pen tool to draw the objects, taking into account the best angles to communicate them. Then, we added a second element to make the icons more immediately recognisable, such as a sun symbol and pen.

20 Make the icon illustrations selectable as one

step20

To make the icons selectable as one object, we converted the vectors to objects (Object>Path>Outline Stroke). Then we selected the objects we wanted as one, divided (from the Pathfinder tool), ungrouped and merged them. Now the icon is selectable as one single object with the details as knockouts.

21 Footer

step21

When the user gets to the bottom of a page, it is convenient to have a smaller version of the navigation handy instead
of scrolling all the way back to the top. The footer is basically an end note echo of the navigation bar. The same content is repeated in a straightforward manner.

22 Dividing lines

step22

Approaching the end now, we created a straight line in Illustrator and changed the stroke details to a dashed line. The reason for having dashed lines is because it is subtler than straight lines and acts as a polite gatekeeper from section to section. It also ties the design together and keeps it neat.

23 Overview

step23

Now that the web design is finished, check it for errors, functions and, of course, design. Spend a good deal of time gazing over it to determine if the quality is truly satisfying. If not, then go back and improve the areas that need more work. A true designer is never satisfied with their designs.

×