Análisis normativo aplicable al estudio 33

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 workflow would suffer without it. It’s the genuine Swiss Army knife of image editing software

packages, and is the undisputed industry standard. Other tools may be cheaper, but they only have the knife, or the nail file, or maybe just the cheap plastic toothpick. Photoshop, on the other hand, slices, dices, and creates convincing watercolor painting-styled images in milliseconds. However, even though I’ll refer to Photoshop quite often in the following discussion, 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 “photoshopping” with a lowercase “p.”

When I’m taking personal pictures with my digital camera, I usually try to think a little about each shot’s composition and lighting, but I’m not really a photography pro, so 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, there’s rarely a time when that image doesn’t undergo some major changes before it’s 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.12 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 a visit last summer. It’s an okay photograph, but it’s definitely not fit for professional use. Even as a straight content image, it has competing focal points and feels unbalanced.

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.13, but I want to find a creative way to hide the “rooftop” over its head. One way I could achieve this would be to use an image box that cuts off the rooftop element, but shows the figure popping out of the top and left-hand sides. Figure 5.14 shows how the finished effect would look.

Figure.5 .12:.Another.raw.photo—the.entrance. of.the.Biltmore.Estate

Figure.5 .13:.Initial.cropping.of.Biltmore. entrance.carving

1 The Principles of Beautiful Web Design

Imagery 1

To create this effect in Photoshop, I need two image layers: one that has the isolated stone figure, and 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.

The resulting image looks pretty good, but it could still use some adjustments. The first issue I have is that the grimy areas on the figure’s shoulders and

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. 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.15.

Figure.5 .15:.Photoshop’s.Brightness/Contrast.controls

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 of 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. You can access the Hue and Saturation controller shown in Figure 5.16 can be accessed through the Image > Adjustments > Hue/Saturation… menu options.

Figure.5 .16:.Photoshop.Hue/Saturation.controls

The Hue control affects the overall color of the image. By moving the Hue slider up and down, you can shift all the colors in the image so that it appears more blue, or red, or orange, and so on. The overall tone of this image is fine, so I don’t really want to adjust its hue too much, but it’s sometimes necessary to alter the hue if you want to change the overall color of an image. The Saturation slider affects how saturated the colors appear within the image. If you turn the saturation off, you’ll be left with a grayscale image, but if you turn it all the way up, all the colors will be brighter and more dramatic. I want to

increase the saturation in the image of the figure, and reduce the saturation of the background image. This will further extenuate the contrast, and give the image the “pop” that I was talking about before. Finally, the image is just about ready for posting! Notice how the figure in Figure 5.17 stands out from the background, and has much more even shading than it did before. These subtle details make a big difference in the overall effect of the image. To adjust a little more of that detail, I applied an outline stroke around the background block by accessing Layer >

Layer Style > Stroke… and giving the block an inside black stroke.

Besides making brightness, contrast, and saturation adjustments, another way to give an image a Photoshop facelift is through the use of filters.

1 The Principles of Beautiful Web Design

Imagery 1

In photography, a filter is a physical attachment for your camera lens that alters the way a photo looks. These filters are used to capture richer colors, compensate for bad lighting, or make an image feel warmer or cooler. Photoshop filters follow this basic idea, though they do much more than a camera lens attachment. They can be used to create artistic effects, distort images, add texture, and much more. Photoshop comes stocked with a great variety of filters as Figure 5.18 shows. Some of these can be very useful, and some … well, I don’t find them so useful, but suffice it to say that there’s something for everyone. Just to get an idea of what’s possible with filters, I opened a picture of some orchids and ran it through a few of the standard filters in Photoshop. Figure 5.19 shows the results of my experiment.

Figure.5 .19:.A.sampling.of.some.of.Photoshop’s.filters

As far as Photoshop effects go, I’ve really only shown the tip of the iceberg here. Not even the whole tip—this quick tour has been more like a chip off the tip. There is so much that you can do within Photoshop, and my best recommendation for learning it all is to tinker. Online tutorials and instructional books like SitePoint’s The Photoshop Anthology will accelerate that process, but there’s no substitute for solid experience.12 _{Open an image and just start to}

explore what each toolbar button, drop-down item, menu action, and filter can do to that image. Once you’ve messed up that image pretty well, open another one and start again.

12 http://www.sitepoint.com/books/photoshop1/