174 The Principles of Beautiful Web Design for an outdoor center that rented kayaks for use on the Saluda River. In that case, I might use a technique like the one illustrated in Figure 5.19. Figure 5.19. River image cropped around a kayaking shape Here, I’ve used a vector image of a pair of kayakers as a mask around which to crop my original Saluda River picture. In image editing software, a mask is basically a window through which you can see the image. When I laid the mask of the kayakers over the image of the river, I produced the top half of Figure 5.19. By flipping the mask vertically, and applying it to a blue-tinted duplicate of the original, I was able to create the appearance of a reflection. Now that image might work for a kayak rental center website, but what if we were creating images for a website that promoted a regional visitor center? The center wouldn’t want to limit the river as only great for kayaking. It’s also a great area for swimming, hiking, and fishing. By using the text “RIVER” as a mask in Figure 5.20, I’ve made the image much more versatile, while establishing a fresh and creative look. Figure 5.20. Using text as a mask to crop the Saluda River image
Imagery 175 One final non-rectangular approach to cropping involves removing an image entirely from a scene. The part of the image that we remove is known as a knockout. A knocked-out image can be featured without a background, placed onto another image, or even duplicated and rotated several times to make a flower. Okay, so maybe the last example of using a knockout in Figure 5.21 is a bit farfetched, but you have to admit that my banana flower looks fairly darn cool. Figure 5.21. Knockout examples: bananas sans background, bananas in the sky, and a banana flower As you can see, cropping provides endless possibilities for the production of unique images and design elements. The only limiting factors are your imagination and the ability to flesh out ideas in Photoshop. Photoshop Adjustments While many software packages are available to help us edit images, Adobe Photoshop has long been my tool of choice. Despite its steep price tag and learning curve, my work flow would suffer without it. It’s the genuine Swiss Army knife of image-editing software packages, and the undisputed industry standard. Other tools may be cheaper, but they only have the blade, or the nail file, or maybe just the cheap plastic toothpick. Photoshop, on the other hand, slices, dices, and creates convincing watercolor-styled images in milliseconds. I’ll refer to Photoshop quite often in the following discussion; however, most of the topics I’m going to talk about here are basic image adjustments that come standard (in some form or another) with just about every image-editing software on offer. I guess what I’m saying is that this section is really about image adjustments, or “photo-shopping” with a lowercase “p.” When I’m taking personal pictures with my digital camera, I usually try to think a little about composition and lighting, but as I’m no real photography pro, my photos generally don’t turn out so great. Those “not so great” images often go straight to my personal photo gallery as records of places or events. If I’m taking a picture for a design project, though, these images always undergo some form of change before they’re suitable for use in client work. At a minimum, the changes I’ll make usually include cropping, and altering the brightness, contrast, and saturation of the photo. Figure 5.22 is an example of a photo straight from my digital camera. It’s a picture of the amazing stonework around the entrance to the Biltmore Estate in Asheville, North Carolina, that I took during
From responsive design to the actual content of the site itself, you need to think about which message your webpage sends to visitors. If you have been instructed to design a website for your customer, follow these points recommended by Kunsh Technologies to create a unique user experience that inspires viewers to become loyal brand advocates.