7 months ago


176 The Principles of

176 The Principles of Beautiful Web Design a visit last summer. It’s an okay photograph, but it’s definitely unfit for professional use. Even as a straight content image, it has competing focal points and feels unbalanced. Figure 5.22. Another raw photo: the entrance of the Biltmore Estate My first step is usually to crop the image to focus on the aspects I want to show. In this case, I plan to highlight the human figure to the right of the door. As a hypothetical scenario, let’s say I want to use it for the feature image in a news article about the Biltmore Estate. I like the close-up of the sculpture in Figure 5.23, but I want to find a creative way to hide the eave over its head. One way I could achieve this would be to use an image box that cuts off that part, but shows the figure popping out of the top and left-hand sides. To create this effect in Photoshop, I need two image layers: one that has the isolated stone figure, and Figure 5.23. Initial cropping of Biltmore entrance carving another that has the background. I start out by duplicating my image several times, making sure to keep one completely unedited version in case I need to go back to step one. For the top layer, I carefully knocked out the figure by zooming in and using the polygonal lasso tool to select the perimeter of the figure and cut off the excess. To create the background image, I used the rounded rectangle tool to create a mask of the area I wanted to show, then dragged the mask onto my background box layer.

Imagery 177 The resulting image in Figure 5.24 looks quite good, but it could still use some adjustments. The first issue I have is that the grimy areas on the figure’s shoulders and its shield are a bit unsightly. I’m not going to eliminate that completely, but I can take some steps to reduce the contrast in those areas. The tools for this job are the Dodge and Burn tools. The Dodge tool is a brush-like tool that actually lightens the area that you click on, while the Burn tool darkens the area. By using these tools together, I can lighten the dark areas, and darken the light areas, to give the image more consistent shading and contrast. Figure 5.24. The Biltmore image double-cropped with two layers Next, it’s time to adjust the overall brightness and contrast of the two layers. Brightness and contrast are two controls that are provided by just about every image-editing software; they can be accessed in the Photoshop menu through the Image > Adjustments > Brightness/ Contrast… menu options. The controls are shown in Figure 5.25. Figure 5.25. Photoshop’s Brightness/Contrast controls As we learned in Chapter 2, the brightness of an image actually refers to the overall amount of light or darkness in the image. The contrast of an image is the difference between the light and dark areas in the image. Kicking the brightness and contrast of the Biltmore figure up a few notches, and pushing the brightness and contrast of the background block down a bit, will help to give the composition a little more pop. After I adjust the brightness and contrast, I move on to work on the hue and saturation. The Hue and Saturation controller shown in Figure 5.26 can be accessed through the Image > Adjustments > Hue/Saturation… menu options. The Hue control affects the overall color of the image. By moving the Hue slider up and down, you can shift the colors in the image so that it appears more blue, or

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
PDF Specimen Booklet - Fontworks UK Ltd
The Complete Guide to a High Converting Website
Web Site Design & Usability Testing - HIPNet
Visual Design and Web Site Usability
Creative Services - Keiger Graphic Communications
slides - HTML5 Developer Conference