Getting to know Photoshop Elements
Cropping images
Resizing images
Optimizing photos as JPEGs
Optimizing graphics in GIF format
Combining photos and text in a new image
Editing images with multiple layers
In this chapter, you discover some of the extraordinary things you can do with a program like Photoshop Elements. You find out how to create images (like banners and buttons) for Web pages and then resize, crop, and edit those images.
Perhaps most important in this book about creating Web sites, you find step-by-step instructions for creating and optimizing graphics that download quickly over the Web.
You can use a number of competing image-editing programs to complete the tasks in this book. I recommend Adobe Photoshop Elements because it's based on the industry standard in image editing, Adobe Photoshop, but is a lot easier to use and a lot less expensive. In this book, I use Elements 8, but if you use any of the last few versions of Photoshop or Photoshop Elements, you should have no trouble following along with the features covered in the step-by-step tasks.
Although Photoshop Elements is a stripped-down version of its big-sister program, Adobe Photoshop, it's still a powerful tool. The workspace, shown in Figure 5.1, is clean and simple yet features many tools and panels — and it has loads of options for editing images and saving them for the Web. Adobe designed the interface of this program to keep the tools around the edge of the screen and to give you the largest possible workspace in the middle, although you can open and close panels and move them around the screen to suit your preferences.
When you first launch Photoshop Elements, you're greeted by a Welcome screen featuring six choices. To access the program's main editing features, which are covered in the following sections, choose Edit and Enhance Photos.
Figure 5.1. Photoshop Elements displays a wide range of tools and panels around theperimeter of the main workspace, where you can create and edit images.
To help you become familiar with the program before you start on the tasks, the following sections introduce you to the way the workspace in Elements is organized and its main features: the Toolbox, Options bar, menu, and panels.
One of the first things you have to get used to when you use graphics programs like Photoshop Elements is that before you can do anything, like crop an image, you have to select the correct tool from the Toolbox. This feature works much like the toolbox you may have in your garage: You choose a hammer when you want to pound a nail, or a screwdriver when you want to turn a screw.
Selecting a tool from the Toolbox is easy: Just click the icon that represents the tool you want, such as the T icon (for adding text to an image). The tricky part is knowing which tool to use for the job (which is similar to understanding the difference between flat-head and Phillips-head screwdrivers). Some tools are easy to identify: The Brush tool is for painting, for example. Other tools, such as the Clone Stamp tool, may seem confusing at first.
The list of tools shown in Figure 5.2 is designed to help you appreciate all your options in the Toolbox.
Tip
The Toolbox can appear in one long list down the side of the Workspace (refer to Figure 5.1), or you can drag it anywhere on the screen and adjust it to appear in two columns (see Figure 5.2).
Here's a hint: Some tools are hidden underneath other tools. If a Toolbox button has a small triangle in its lower-right corner, it means that multiple tools are accessible from the same button. To view these alternative tools, simply click and hold the visible tool until a small fly-out menu appears, as shown in Figure 5.3.
Although you use many of these tools in the step-by-step tasks in this book to create and edit images for the Web, I can't possibly cover all the ways you can use these great features in this introduction to Web graphics. In this book, I focus on the tools and features that are most important in Web design. If you want to find out more about creating and editing images, check out Photoshop Elements 8 For Dummies, by Barbara Obermeier and Ted Padova, or (for more advanced techniques) Photoshop Bible, by Laurie Ulrich Fuller and Robert C. Fuller (both from Wiley Publishing).
Running across the top of the Elements workspace is the Options bar, shown in Figure 5.4. The Options bar includes drop-down lists, check boxes, and radio buttons that you can use to adjust the settings for any selected tool. For example, when you select the Brush tool, options are available for changing the size and shape of the stroke that you make when you click and drag the Brush tool over an image. If you switch to the Text tool, the Options bar changes to feature font and size options.
The art of Undo and Redo
With all the features, filters, and editing options in Photoshop Elements, trial and error is often your best strategy — and it's easy when you can use Undo, Redo, and even Revert to restore any image to its last-saved version.
If you make a change to an image and then change your mind, just choose Edit
If you're a keyboard shortcut fan, press Ctrl+Z to use Undo in Windows (or
No program is complete without a menu bar at the top of the workspace (shown in Figure 5.5). When you click the menu names, you can choose from a list of commands and editing options. If an ellipsis (...) follows the command name, the option launches a dialog box where you can apply a variety of features. Otherwise, the command kicks in automatically as soon as it's selected.
As in every Adobe application, the Elements workspace is filled with panels, which are small windows that hold formatting options and other settings. The various panels provide tools to help you edit and examine images. To open a panel, choose it from the Window menu. For example, choosing Window
A panel can remain in its column on the right side of the workspace, or you can drag panels anywhere on the screen, which is a handy way to get them closer to where you're working. To move a panel, click it and then drag it by its tab, and then release it where you like. After you detach a panel from the main application window, it gains its own title bar, which allows for easier moving and identification.
In Figure 5.6, I'm using the Layer Styles in the Special Effects panel to add a drop shadow to my text, a common way to add depth and make text appear to float on a page.
Tip
If you ever want to get back to the original workspace layout in Photoshop Elements, just choose Window
Creating and opening images in Elements
You can open existing images in Photoshop Elements or create completely new images, and you can have multiple images open at a time, which makes it easier to combine images and create complex designs. When you create a new image, you can specify many settings, including size, resolution, and color.
To create a new document, choose File
To open an existing image, choose File
If you try to open an image and don't see it in a folder on your hard drive when you know that it should be there, change the Files of Type field (at the bottom of the Open dialog box) to All Formats. Every image in the folder should now appear in the file list.
Stuff You Need to Know
Adobe Photoshop Elements (or a similar program)
A digital image
Time needed:
Less than half an hour
Because photos on the Web are generally small, one way to ensure that important features are visible is to crop out any material that's not essential. The best strategy when cropping an image for the Web is to focus on the key elements in the image. You can cut off the top, bottom, or sides, as much or as little as you like, with the adjustable edges of the Crop tool.
In this step-by-step task, you see how using the Crop tool to remove the background helps focus attention on the subject.
Whenever you crop, edit, or resize an image, it's good practice to first save a copy of the image to edit. That way you can always go back to the original image if you're not happy with the results of your edits.
With an image open in Elements, select the Crop tool from the Tools panel. Because you can't retrieve cropped parts of an image after you save and close the image file, you likely want to work with a copy of your original image.
Click and drag within the image to define the area you want to crop. As you drag, a crop box appears. Everything outside the crop box is removed when you complete the crop. To increase or decrease the size of the crop box, drag the handles at the corners or edges of the box.
To complete the crop, double-click in the middle of the selected area or click the Commit icon (the green check mark) in the lower-right corner of the crop box. To cancel the Crop tool without cropping the image, click the Cancel button (the red circle with a line through it).
When you complete the crop, the areas of the image outside the crop box are removed, and the overall size of the image is reduced proportionately. The Crop tool remains active until you select a different tool from the Toolbox.
Tip
Repeat Steps 2 through 4 to make an additional crop. Choose Edit
Stuff You Need to Know
Adobe Photoshop Elements (or a similar program)
A digital image
Time needed:
Less than half an hour
Resizing is important for two reasons: The images must be small enough to display well on a computer monitor, and you want them to download quickly to a user's computer. The smaller the image is, the faster it will download. There are two steps to reducing the size of an image you want to use on the Web.
The first step is to reduce the physical size of an image by reducing its dimensions. You want to size your images to fit well in a browser window and to work within the design of your site. And remember, the smaller you make the image, the faster it downloads to a user's computer.
The second step is a bit more complex to understand at first. It has to do with reducing the resolution of an image, which changes the number of pixels in the image, but won't alter the size the image appears on a computer screen. When you're working with images for the Web, you want to reduce the resolution to 72 pixels per inch (or ppi). (If you're wondering why 72, see the sidebar that's appropriately named "Why only 72 ppi?")
Follow these steps to reduce the size of an image and lower the resolution:
With an image open in Elements, choose Image
Before you change the resolution of an image, make sure to deselect the Resample Image check box at the bottom of the Image Size dialog box (you should always make sure the resample check box is deselected when you change resolution). Then highlight the number in the Resolution field and replace it by typing in the number 72. (Note that with the Resample Image check box deselected, you can't change the Pixel dimensions.)
Before you change the dimensions of an image, make sure to select the Resample Image check box (you always want the Resample box selected when you resize), and also select the Scale Styles and Constrain Proportions check boxes to maintain the height and width ratio in the image. In this example, I am changing the width of this image to 500 pixels, and the height automatically adjusts to 269 pixels to maintain the proportions. When you're resizing an image for the Web, it's best to use the fields in the Pixel Dimensions area, at the top of the dialog box. Using these options, you can alter the height and width of an image to a specified size in pixels or enlarge or reduce the image by any percentage.
Click OK to resize the image. If you want to return the image to its previous size, choose Edit
The JPEG format is the best choice for images with many colors, such as photographs or images that include shading or gradients. You can save any image in GIF, PNG, or JPEG format by using the Save for Web dialog box, but you produce the best results if you choose the best format for each image. That's because the best way to optimize images (make them download faster over the Web) depends on how many colors appear in the image.
It's always best to edit an image in the highest resolution possible and then resize the image and reduce the resolution (as you do in the previous task) just before optimizing it for the Web.
Also note that even if a photograph is already in the JPEG format, you can almost always reduce its file size (and increase its download speed) by using the Save for Web dialog box to optimize the image, as you see in the following steps:
Create a new image or open an existing image in any format in Photoshop Elements. Because you create a copy of the image when you use the Save for Web dialog box, you don't need to worry about altering your original image.
Tip
When you're optimizing an image for the Web, it always comes down to balancing quality with file size. You want your images to download fast, but not if that means they don't look good when they arrive.
Choose File
If the image, like the one shown in this example, is larger than the preview area in the Save for Web dialog box, choose the Hand tool from the upper-left corner of the dialog box. Then click the image and drag to position the most important elements in the image where you can see a better preview. You can also change the image's display by right-clicking directly over the preview image and choosing Fit on Screen or any of the magnification settings.
To reduce the size of a JPEG image, use the slider to alter the Quality setting or enter a number, up to 100. Compression is measured as a percentage: The lower the number, the higher the compression and the smaller the file size.
Notice in the bottom of the Save for Web dialog box that the original file size appears under the preview of the image on the left, and the optimized file size appears under the preview on the right. In this example, you can see that when the Quality field is set to 80, the image is reduced from 612K to 34.74K.
Alter the Quality setting until the image uses the greatest amount of compression (the greater the compression, the lower the number in the Quality field), without degrading the appearance of the image too much. In this example, I reduced the Quality setting to 60, creating a file size of 28.28K.
Keep a close eye on the preview screen as you adjust the Quality option. If you reduce the quality too far, you degrade the image's appearance noticeably.
In this example, I decided I wanted to preserve as much quality as possible (reducing it to 60 made it look a little pixilated), so I've changed it to 80. After all the image settings are the way you want them, click OK, and in the Save dialog box, give the image a new name and specify where you want to save it on your hard drive. Then click Save to save a new version of the JPEG with the specified settings and preserve the original unchanged.
Stuff You Need to Know
Adobe Photoshop Elements (or a similar program)
A digital image with limited colors
Time needed:
Less than half an hour
The GIF format has long been considered best for drawings, cartoons, and other images that have only a few bands of solid color, although many Web designers now prefer the PNG format. (As described in the previous section, the JPEG format is ideal for photographs and other images with millions of colors.) GIFs and PNGs are also the best format to use when you want to create images that use a transparent background, a trick that makes images appear to float on a Web page. As the Web has matured, the PNG format has gained popularity. PNGs are superior to GIFs in all ways except one: GIFs are better supported by Web browsers older than Internet Explorer 6.0, especially in the area of transparency.
If your goal is to ensure that your pages display well to anyone who may ever visit your site, GIF is the safer option. If you want your images to look their best with the smallest file sizes, you produce better results with the PNG format. Also, you can rest assured that very few people are still using browsers so old that they don't support PNG. In the step-by-step exercise that follows, I chose the PNG format, but the process is the same for both options. This task shows you the best way to reduce the number of colors in any image when you save it in either the PNG or GIF format using Photoshop Elements.
Create a new image or open an existing image in any format in Photoshop Elements. Because you save a copy of an image when you use the Save for Web option, you don't have to worry about altering your original image (just don't save over the original).
Tip
When you use the PNG or GIF formats, you can reduce download time by decreasing the total number of colors used in the image, which makes it ideal for graphics that need only a few colors in order to display well, such as cartoons or simple logo designs. When you reduce the number of colors in a PNG or GIF image, you're essentially removing colors you don't need. If you take away too many colors, however, the change can be drastic (and look terrible); but if you limit the image to only the number of colors that are necessary, you might not even notice the difference, and the image will download much faster.
Choose File
If you're creating an image with a transparent background, select the Transparency check box and then specify a matte color. The matte color should match the background color of the Web page where the image will be displayed. Using a matching matte color helps prevent "jaggies" from appearing around the edges of the image. To change this color, first select the eyedropper from the upper-left corner of the dialog box. Then click in the Matte field to open the color panel where you can select the Eyedropper Color option to apply the color you just sampled with the Eyedropper tool. You can also select any of the other color options in the drop-down list.
To reduce the size of the image, lower the number of colors by entering a number less than 256 in the Colors field or by selecting a preset number from the Colors drop-down list. In this example, the image is reduced from 256 (the maximum number of colors a GIF can have) to 32. You can change the numbers to see the results in the preview and then change them again if you're not happy with the results, as I do in the next step).
Notice at the bottom of the Save for Web dialog box that the original file size appears under the preview of the image on the top and the optimized file size appears under the preview on the bottom. Compare these numbers to see how much smaller the image is with the number of colors reduced from 256 to 64. In this example, you can see that by reducing the number of colors, the image has been reduced from 183K to 4.452K.
Reduce the number of colors further to make the file size even smaller — but don't go too far. In this example, you can see that when the image is reduced to only two colors, the text gets jagged and the detail is lost in the image of the eye. That's because even though the image appears to use only a few colors, along the edge of the letters, many variations of the main colors are used to create a clean line between the text and the background. With only two colors in the image, those color variations are lost and the smooth edge becomes jagged.
Adjust the number of colors and other settings until the image uses the smallest number of colors (and therefore has the smallest file size) without degrading the appearance of the image. In this example, I was able to reduce the image to 64 colors without a noticeable loss of quality.
After all the image settings are the way you want them, click OK. In the Save dialog box, name the image, and specify where you want to save it on your hard drive. Then click Save.
Tip
When you use the Save for Web dialog box, Elements automatically saves a copy of the image in the new format and leaves the original image unchanged.
Stuff You Need to Know
Adobe Photoshop Elements (or a similar program that supports layers)
Digital images
Time needed:
About half an hour (unless you get carried away)
Creating a new image with photos and text is almost as easy as editing an existing image, such as the banners and buttons included in the templates in this book.
In general, I find that the best method is to create a new image in Photoshop Elements and then copy any photos or other graphics into the new image file. After the images are in place, you can easily add text to pull it all together. Just follow these steps to create your own banners and buttons:
In Photoshop Elements, choose File
If the Layers panel isn't already open on the side of the workspace, choose Window
Open any image or images that you want to add to the new file by choosing File
When you're working with multiple images in Photoshop Elements, you may want to open the Project Bin, at the bottom of the workspace: If it isn't already open, choose Window
To copy an open image into the new file, first click to select the Move tool from the upper-left corner of the Toolbox. Then click anywhere on an open image to make it active and choose Select
With the image selected, choose File
Here's the tricky part: You need to select the file where you want to add the image before you paste it. If the Project Bin is open at the bottom of the workspace, you can select the destination image there. You can also select any image that's visible in the workspace by clicking it. In both Photoshop and Photoshop Elements, you can also select any open image by choosing the name of the file from the bottom of the Window menu.
If any of the open images are in your way, you can minimize them, keeping them open and available in the Project Bin, but out of the workspace.
With your new, blank image active in the workspace, choose File
To position the pasted image, click to select it and then drag it to the place where you want it to appear in the new image. For more precise images, use the arrow keys — you can adjust a selected layer pixel-by-pixel in any direction. You can resize an image with the Move tool by clicking and dragging any corner to adjust the height and width.
To add and position additional images, repeat Steps 6 through 10. Notice in this example that the Layers palette displays three layers — the white background layer and a separate layer for each photo pasted into the image. As I added those images, Photoshop Elements added the layers automatically.
To add text to an image (whether or not it already has multiple layers, like this one does), you must first select the Text tool from the Toolbox.
When you select the Text tool, a new collection of options appears at the top of the workspace. On the Options bar, you can change such text options as the color (shown in this figure), by clicking the color well to open the color selection palette and then clicking any color in the palette. Use the scroll bar, to the right of the palette window, to display more colors.
With the Text tool selected, you can also use the Text tool options at the top of the workspace to change the font size, face, and alignment.
To add text to the image, click to place your cursor where you want it and then type. You can add as much text as you want to an image and press the Enter (or Return) key to add line breaks.
You can also use the text options at the top of the workspace to edit the text after you type it. To do so, simply select the text you want to change, and then choose any of the formatting options to alter the color, font, size, or other settings. To edit the words, click to select the text and then delete or type to replace it.
When you add text, Photoshop automatically places it on a new layer, which appears in the Layers palette. To move or edit a layer, you must first select the Move tool from the Toolbox. Photoshop Elements automatically selects a layer when you click it, and then you can click and drag to position it on the page. To move a layer so that it appears in front of another layer, click and drag it above the other layer in the Layers palette.
You can continue to add text layers and images, and edit and adjust them, forever by repeating this set of steps. One of the best ways to become comfortable with using Photoshop Elements is to take time to experiment with combining and rearranging text and images in multiple layers.
Tip
As you create more and more layers in an image, it's good practice to give your layers names as you create them so that you can better identify a layer when you want to edit it later.
Stuff You Need to Know
Adobe Photoshop Elements (or a similar program that supports layers)
A digital image with multiple layers
Time needed:
Less than half an hour
One of the most confusing features in a program like Photoshop Elements is the way it divides different parts of an image into layers. In the previous task, Photoshop automatically created a new layer each time you added a new image or text to the file. Keeping each element of an image on a separate layer is a bit like keeping a bunch of sticky notes on your desk. If each photo or piece of text is on a separate layer, you can move them around independently, much like you might rearrange your priorities by changing the order of the sticky notes.
Using Layers to separate one image into multiple sections makes it possible for you to do things like edit text without changing the photo underneath it or move separate images around a photo montage until you get them just the way you want them.
Without layers, text would become stuck on a photo in a banner, like the one shown in this task, and you couldn't edit the text again after you added it to the image. The layers feature is especially useful for customizing the banners and other graphic elements included in the templates used in this book.
When you open an image that has many layers, such as the image templates included with this book, it's a good idea to open up the Layers panel by choosing Window
Before you can edit any text or image contained in a layer, you have to first select the appropriate tool from the Toolbox and then select the corresponding layer. That's where the Layers panel comes in, as you see in this task.
Open an existing image in Photoshop Elements that includes multiple layers, such as the banner shown in this task.
Choose Window
In the Toolbox, select the tool that you need in order to edit the contents of the layer. In this example, I selected the Text tool so that I can edit the words.
Use the selected tool to alter the selected image. In this example, I double-clicked the name Hollywood to select it and then typed the name Los Angeles in its place.
To edit text in another layer, you must again select the corresponding layer in the Layers panel. In this example, I selected the layer that contains the text in the second line of the banner image. Because I had already selected the Text tool, after the layer was selected, I simply selected the text I wanted to edit and replaced it by typing new text.
After you make changes to the text, choose File
