Design web templates from photo backgrounds
06 Banner
06 Banner
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
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
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
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
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
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
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.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
