Chapter 12. Words and Images When words and images are placed near each other in a composition, a relationship is formed between the two elements. In addition to formal properties, both words and images are loaded with meanings. Words have verbal or literal meanings while images are "read" as visual messages. Metaphor and puns can be created within the verbal/visual reading to make the relationship between words and images even more complex. In Dada and punk cultures collage images were created from words and images. Words were used as elements that added meaning to the visual collage. Hannah Höch's Cut with the Dada Kitchen Knife through the Last Weimar Beer-Belly Cultural Epoch in Germany (1919) and Jamie Reid's God Save the Queen (1977) single record cover for the band The Sex Pistols are examples of a Dada collage and a punk collage, respectively, where words and images are used to create a visual and verbal message full of chaos and anti-order, as opposed to peace and stability. Hoch's collage relied upon cuttings from newspapers and magazines to critique the contemporary culture. Reid's image was purposefully degraded or reproduced with low fidelity, a rebellious action towards the glossy look of popular albums during the same time period. Both counter-culture groups were interested in developing an aesthetic of protest. As artists at odds with their respective media, the resulting images convey tension and chaos. In contrast with low quality images due to repeated photocopying or simply a poor image quality at the input level, typography is often reproduced with smooth edges. Photoshop is commonly thought of as a bitmap application because images created and edited in Photoshop are built from grids of pixels. Each tiny pixel contains a unit of color information. While scanned or digitally photographed images are made of pixels, vector shapes can be made in Photoshop. Vector graphics are created by using mathematical algorithms: formulas that describe where points, lines, and planes exist and how these elements relate to one another. Vector graphics can be scaled up to any size and retain their smooth edges. Typography created in Photoshop is considered a vector graphic. The Layer panel contains both bitmap and vector layers, as we will see in the following exercises. Bitmap images and vector graphics (both shapes and typography) contrast one another because of their differences in texture. Even the sharpest photograph will contrast with the smooth edge of typography or a vector graphic. Photoshop is not often used to create or edit typography. Long passages of body copy should be treated in a vectorbased application such as Illustrator or InDesign; but sometimes artists use Photoshop when just a few words, a headline, or a small amount of text is used as part of the composition. Visual References Cut with the Dada Kitchen Knife through the Last Weimar Beer-Belly Cultural Epoch in Germany, Hannah Höch, 1919, paper collage.
Never Mind the Bollocks Here's the Sex Pistols, Jamie Reid, 1977 album record cover. God Save the Queen, Jamie Reid, 1977 single record cover. Exercise 1: Low resolution images Side Note: Prepare your workspace by choosing the Typography mode from the Application bar. 1. In these exercises we will be using a low resolution version of the popular "Blue Marble" photograph of Earth taken from Apollo 17. Download the image from the wiki and open it in Photoshop. The final image will be a 6 by 6 inch print, emulating a square-shaped record cover. Side Note: You can also find this image at http://en.wikipedia.org/wiki/image:the_earth_seen_from_apollo_17.jpg 2. Notice that the image has a low resolution - it's file size is small and it's pixel dimensions are just under 600 by 600 pixels. Look inside the Image Size dialog box (Image > Image Size) to see that unchecking the Resample Image button and setting the printing DPI to 300 will result in a print close to 2 by 2 inches. (Fig 12.1) Press OK or cancel to return to standard editing mode. It actually does not matter if you changed the DPI in preparation for the next steps, our main interest was understanding that this image has a low file resolution.
Fig 12.1 The Image Size dialog box with Resample Image unchecked. Notice that the pixel dimensions are not changeable. Since we are planning to use this image for a 6 by 6 inch composition space, we have come to a common digital imaging challenge: What do you do when the image you want to use is not even half of the size you need it to be in the final print? Normally, the solution to this challenge is: don't use the image. Or, use the image in a small area of the composition, but plan to use other compositional elements within the space. The number one rule is not to scale an image larger than it can be printed without pixelation. However, most rules - once they are understood and obeyed repeatedly - can be broken. In this case, we will use a filter to compensate for the fact that the image is low resolution. It is important to note that in this specific case, the image is mimicking early punk record covers and Dada collages, where the aesthetics can be described as gritty, dirty, or low-fi. The concept of the image, a print that pays homage to gritty, anti-establishment, anti-order ideologies and aesthetics is in tune with the way that the final print will look once the image is treated with a filter and new pixels are added. Exercise 2: Filters In this exercise we will change the color mode of the RGB image to grayscale, then bitmap; and then change it back to grayscale, then RGB. The process of changing the color mode of the image will enable us to add pixels in bitmap mode. After the new pixels are added, the color halftone filter will be used to create a degraded illustration of the earth. This filter implies the halftone effect that is easily visible in photographs on cheaply printed, low-fi media, such as older newspapers. In this exercise, a filter is both a conceptual and practical solution to the digital imaging challenge. Filters are not always the solution to digital imaging challenges. In fact, filters are almost usually not the solution. Having written that, here is a short list of the filters we feel are valuable: Valuable Filters (production note: please create a table) Unsharp Mask - This filter finds edges by looking for contrast and increases the contrast of those pixels, while leaving the flat areas untouched. When it is not overused, the resulting image looks sharper without introducing noise into the image. Gaussian Blur - Use this filter to apply a soft blur to the image. The image of the earth could also be scaled from 2 inches to 6 inches and the Gaussian Blur filter could be applied in order to make a print that is not pixelated. However, the image would be pushed to the background due to it's extremely soft focus. The image would also feel soft and warm, rather than chunky (an effect of the halftone screen) and digitally cold. The viewer would read the image as having a lesser hierarchical visual value than nearly anything else in the composition. Despeckle - Use this filter to contribute towards removing a moiré pattern when scanning material from
printed matter such as magazines or books. Video De-Interlace - Use this filter to remove pixelization resulting from saving individual frames from digital video files. Color Halftone - Use this filter to create the halftone effect visible when large prints are seen from a closer distance than they were intended to be viewed or in very cheaply printed media such as photographs printed in older newspapers. 1. Choose Image > Mode > Grayscale, and press the Discard button at the "Discard color information?" warning. 2. Choose Image > Mode > Bitmap, and press OK through the Flatten layers dialog box. 3. Type 300 in the Output Resolution box if it is not there already. (Fig 12.2) Press OK to exit the dialog box and your image will have a dot pattern throughout. (Fig 12.3) Fig 12.2
Fig 12.3 The result of converting an image to bitmap mode. 4. Choose Image > Mode > Grayscale and leave the default "1" in the size ratio field. 5. Choose Image > Mode > RGB to set the image back to RGB color mode. 6. Choose Image > Image Size to add pixels to the RGB image. Check the Resample Image and Constrain Proportions buttons and set the Width to 6 inches. The height should also change to 6 inches because the proportions are constrained. Notice that the raster image increases in file size (it was about 350 kilobytes and now it is about 3 megabytes) because new pixels have been added. (Fig 12.4) Press OK to exit the dialog box and you will notice that the image will increase in size on your screen. More pixels in the image translates to the file taking up more space on your monitor.
Fig 12.4 The Image Size dialog box when pixels are added. Notice the change in pixel dimensions. 7. Apply the Color Halftone filter by choosing Filter > Pixelate > Color Halftone. Here you can alter the halftone radius, which changes the size and spacing of the dots that the halftone produces. (Fig 12.5) When the dots are closer or further apart, the resulting image becomes more or less obvious due to abstraction made by the dots. You can try it with the radius set at 4 (Fig 12.6) and then at 127 (Fig 12.7), for instance, and you will see that the bigger dots result in a completely abstract dot pattern. We set the radius at 14, as the results fit our expectations for this image. Fig 12.5 Experiment with the radius settings in the Color Halftone dialog box.
Fig 12.6 The Color Halftone filter applied with a four pixel radius.
Fig 12.7 The Color Halftone filter applied with a 127 pixel radius.
Fig 12.8 The image with the Color Halftone filter applied with the radius set at 14. Exercise 3: Vector shapes 1. Make sure black is loaded in the foreground color chip by pressing the letter D on your keyboard. Create six rectangles with the Rectangle tool. (Fig 12.9) The Rectangle tool produces vector shape layers. (Fig 12.10) Vector art is defined by a formula, rather than by pixels. Since the rectangles are not comprised of pixels, they can be scaled or skewed without degradation to their image quality. This smooth, high resolution quality will add contrast to the bitmap halftone image. Each rectangle is defined by the four anchor points at the corners of the shape. These anchor points can be repositioned, and the shape will continue to be filled with the fill color, in this case, black. Notice that each time you draw a new rectangle, a new shape layer is added to your Layer panel.
Fig 12.9 New shape layers are added on top of the background layer. The background layer is a bitmap image.
Fig 12.10 The Layer panel includes a shape layer for each rectangle drawn in the document. 2. Use the Direct Selection tool to adjust the anchor points at the edges of each rectangle. (Fig 12.11) Remember that each rectangle is on its own layer (Shape 1-6). Start by adjusting the anchor points for any of the rectangles. The Direct Selection tool will select the anchor points of shape layers even if the layer was not previously active in the Layer panel. Notice that the active layer in the Layer panel corresponds to whichever shape you are modifying. By skewing the shape of the rectangle, the dark areas in the foreground of the composition become shapes that are less predictable. The overall result is a composition that feels chaotic, or the opposite of calm and stable. Adjust all of the rectangles so that none of them are predictable shapes. (Fig 12.12) Fig 12.11 A close-up view of the Direct Selection tool modifying one anchor point of the first rectangle.
Fig 12.12 All of the rectangles have been modified with the Direct Selection tool so they feel less stable and create chaos within the otherwise balanced, symmetric composition. Watch Out: While the Direct Selection tool will allow you to select any vector shape without activating it in the Layer panel first, most of the other tools will not automatically activate the corresponding Layer. You can turn on the Auto-Select feature in the Options bar for the Move tool if you want the Move tool to select layers automatically. 3. Organize the Layer panel. Shift+click the shape layers (activate Shape 1 then Shift+click on Shape 6), then use the Layer panel pull-down menu to choose "New Group from Layers". (Fig 12.13) Name the new layer group shapes.
Fig 12.13 Create a new group from selected layers to organize the shape layers. Exercise 4: Type 1. Press the letter X on the keyboard to toggle the default colors in the color chips. Now you should have black loaded into the background color chip and white in the foreground. Load the Horizontal Type tool. We will use the Horizontal Type tool to create six separate type layers (Never Mind on one layer) for each of the words, "Never Mind the profit, save the planet." Click on top of the first rectangle in the composition and type the word "Nevermind". We are imitating a punk rock cover or a Dada collage, so there are no rules about capitalization. You can set some of the letters in a different font face (for example, you could use Helvetica and Courier) or a variety of font styles (such as bold or italics). Click and drag over the type to select it and use the Font Family, Font Style, and Font Size pull-down lists from the Options bar to modify any selected type. You can also use the Character panel for these and other type-related options. When you are done working on the typographic treatment click on the Commit button in the top right area of the Options bar. (Fig 12.14)
Fig 12.14 We used the fonts Blackletter (available as a free download from Dafont.com) and Helvetica (regular, bold and oblique). Note: To install a font on a Mac, double-click the font to open it in the Mac application Font Book. Then click the Install button in the Preview window of the font inside Font Book. Key Command: Command+A will select all of the type while you are editing with the Type tool. Key Command: The Enter key will also commit changes made with both the Type tool and transformations such as Free Transform. 2. Notice that creating typography results in a new type layer. Set the opacity of the new type layer for the words "Never Mind" to 85%. (Fig 12.15)
Fig 12.15 New type layers are labelled with a T in the layer icon. The name of the layer is automatically set to the copy that is placed with the Type tool. Notice how the name of this type layer is nevermind, where the E and M are uppercase letters in the name of the layer and in the composition. 3. Instead of starting anew, drag the NevErMind type layer to the Create a New Layer icon at the bottom of the Layer panel to duplicate the layer. Then use the Move tool to place the copy on top of the next rectangle. (12.16) 12.16 Duplicate layers by dragging them on top of the Create a New Layer icon in the Layer panel. 4. In the Layer panel, double-click on the T icon on a type layer to easily select all of the type in the layer. This will make editing the type on the layer simple. You can use the left and right arrow keys to move the type cursor within the selected type. Duplicate the type layers and edit each of them until you have six type layers, one for each of these: Never Mind, the, profit, save, the, and planet. (Fig 12.17)
Fig 12.17 The final image will include individually edited type layers where two separate font faces are used with various styles in upper and lower case letters. Notice how the non-repetitive pattern of the typographic treatment creates an unstable design. Note: Use Edit > Free Transform to rotate any of the words as long as the layer is activate (revisit transformations in Chapter 4). The Enter key will commit the transformation. Note: Adjust the kerning, or the space between the letters of a word, by placing the Type tool between two letters and using Option + Right Arrow (to add space) or Option + Left Arrow (to narrow the space). We adjusted the kerning in the words "profit", "save" and "planet". 5. The Layer panel should include the background image of the earth, the group of shape layers and six individual type layers, each set at 85% opacity. (Fig 12.18) When you are finished editing the type, organize the Layer panel. Group all of the type layers into a new layer group called type, just as we did in step 3 of Exercise 3. (Fig 12.19)
Fig 12.18 The Layer panel while editing each of the individual type layers. Fig 12.19 An organized Layer panel at the end of the work session. Note: Initially we used the font Newcastle, which was available for years in the free area of Chank.com. (Fig 12.20) Chank Diesel is fontographer, responsible for display fonts you may have seen in commercial products such as Snapple and Mattel packaging. There are loads of free display fonts on his website. Newercastle is now available at a modest price with a 20% discount for students. While there are many free fonts available, a good font is often worth its price. We like the contrast in Newcastle (and Newercastle), made evident in a comparison between the roughness of the fill area of the letter as opposed to the fluidness of its curves.
Fig 12.20 The same project with minor adjustments to the text using a different blackletter font. In this image, we used the font Newcastle, available on Chank Diesel's website, Chank.com.