Chapter 17. Email and the Web

Printing photos is great, but it costs money, takes time, and doesn’t do much to instantly impress your faraway friends. And to many people, printing is just so 20th century. Fortunately, Elements comes packed with tools that make it easy to prep your photos for onscreen viewing and to email them in a variety of crowd-pleasing ways. (In Elements 13, emailing got a major makeover, making it easier to send photos using any email program.) This chapter explains your options.

Image Formats and the Web

Back in the Web’s early days, making graphic files small was important because most Internet connections were as slow as snails. Nowadays, file size isn’t as crucial; your main obligation when creating graphics for the Web is ensuring they’re compatible with the web browsers people use to view them. That means you’ll probably want to use either of the two most popular image formats, JPEG or GIF, though PNG is also an option:

Elements makes it a breeze to save images in any of these formats using the Save For Web dialog box, explained next.

If you plan to email your photos or put them up on a website, you’ll love the Save For Web dialog box, a terrific feature that takes any open image and saves it in a web-friendly format. It also gives you lots of options to help maintain maximum image quality while keeping file size to a minimum. Save For Web aims to create as small a file as possible without compromising the image’s onscreen quality.

Save For Web creates smaller JPEG files than you can get by using the Save As command because it strips out the image’s EXIF data, the information about your camera’s settings (see Media View). To get started with Save For Web, in the Editor, go to File→“Save for Web” or press Shift+Alt+Ctrl+S/Shift-Option-⌘-S, and the dialog box in Figure 17-1 appears.

The most important point to remember when saving images for the Web is that the resolution (measured in pixels per inch, or ppi) is completely irrelevant. You only care about the image’s pixel dimensions, such as 400 x 600. If you’re working with a photo that you’ve optimized for print, you almost certainly want to downsize it; Save For Web makes that a snap.

Elements gives you lots of useful tools in the Save For Web dialog box, like the Hand and Zoom tools for adjusting the view. But the main attractions are the before and after image previews in the main image area. On the left is your original, and to its right you see what the image will look like after you save it. The file size is listed below each image preview.

Below the left corner of the right-hand preview is an estimate of how long it will take to download the image at that size. You can adjust the download time by modifying your assumptions about your recipient’s Internet connection speed, as shown in Figure 17-2. You can also change the zoom percentage (using the Zoom menu in the dialog box’s bottom left), but you should usually stick with 100 percent because that’s the size your image will be on the Web.

The upper-right part of the dialog box has your file format and quality choices (exactly what you see there varies a bit depending on which format you’ve chosen). Below that are your options for resizing the image. If you want to create animated GIFs (those tiny moving images you see on web pages), then tweak the settings in the Animation section, which are explained on Creating Animated GIFs.

Using Save For Web

When you’re ready to use Save For Web, follow these steps:

  1. In the Editor, open the image you want to modify.

  2. Open the Save For Web dialog box.

    Go to File→“Save for Web” or press Shift+Alt+Ctrl+S/Shift-Option-⌘-S.

    If you’re working with a large file, you may see a dialog box stating, “The image exceeds the size Save for Web was designed for,” along with dire-sounding warnings about slow performance and out-of-memory errors. Just click Yes to tell Elements that you want to continue anyway. If your computer has enough horsepower to run Elements 13, it won’t choke when you use Save for Web.

  3. Choose format and quality settings for your web image.

    In the dialog box’s upper right, use the Preset drop-down menu to choose a format. Your choices are explained in the following section.

  4. If necessary, resize the image.

    To make sure that anyone can see the whole image, no matter how small her monitor, in the New Size section, enter 650 pixels or less for the longest side of the photo. (650 pixels is about the largest size that fits on small monitors without scrolling. If your friends all have big, new monitors, you can go much larger, but keep in mind that people may look at your images on smartphones or tablets.) As long as the chain icon is visible to the right of the Width and Height boxes, you don’t have to enter the dimension for the other side of the photo—Elements fills it in automatically. (The icon indicates that the two dimensions are linked—get it?) If the chain icon isn’t visible (meaning the two dimensions aren’t linked), there’s a break in the line to the right of the two boxes. To relink them, just click the break in the line.

    You can also resize the image by entering a percentage in the New Size section. For example, typing 90 in the Percent field shrinks your image to 90 percent of its original size. When you finish entering the new dimensions, press Enter/Return.

  5. Check the results.

    Look at the right-hand image’s file size again to see if the new file is small enough, and use the Hand tool in the dialog box’s left to scoot the image around in the preview area to take a close look at it. Use Elements’ file-size optimization feature (explained in Figure 17-3) if necessary. You can also preview the image in your actual web browser (see Previewing Images). There’s no Undo option in the Save For Web dialog box, but you can Alt-click/Option-click the Cancel button to change it to a Reset button.

  6. When everything looks good, click Save.

    Name the new file, and then save it wherever you like.

You can reduce an image’s file size by changing its length and width, as explained in step 4 above. You can also make a file smaller by adjusting its quality settings. The quality options you see in the Save For Web dialog box vary depending on which format you choose from the unlabeled menu in the dialog box’s upper right, just below the Preset menu:

Elements gives you a few different ways to preview how an image will look in a web browser. You can start by looking at the image in any browser you have on your computer; Figure 17-5 explains how.

To add a new browser, in the Save For Web dialog box, click the button shown in Figure 17-5, and then choose Edit List. In the Browsers dialog box that appears, click the Add button and navigate to the one you want. If you want Elements to list all your browsers, click Find All. From then on, you can pick any browser in the list to make Elements launch the browser with your image in it.

With Elements, it’s easy to create animated GIFs, those little illustrations that make web pages look annoyingly jumbled or delightfully active, depending on your taste. If you’ve ever seen a strip of movie film or the cels for a cartoon, Elements creates a similar series of frames with these specialized GIFs.

Animated GIFs are made up of layers, with a separate layer for each frame. The Save For Web dialog box creates the actual animation, which you can preview in a web browser.

The best way to learn about animated GIFs is to create one. Here’s how to make twinkling stars:

  1. In the Editor, set your foreground color to some shade of yellow and the background color to black.

    See Choosing Colors if you need help setting these colors.

  2. Create a new document.

    Press Ctrl+N/⌘-N. In the New dialog box, set the size to 200 pixels x 200 pixels, choose RGB for the color mode, and then choose Background Color for the background contents. Finally, set the resolution to 72 ppi, and then click OK.

  3. Activate the Custom Shape tool (The Custom Shape Tool) and choose a star shape.

    In the Tool Options area, click the down arrow to the right of the Shape field to open the Shapes panel. Then click the drop-down menu at the top of the panel and select Nature. Double-click the Sun 2 shape, which is in the top row, second from the left.

  4. Draw some stars.

    Drag to draw one yellow star, and then, in the Tool Options area, click the “Add to shape area” button (see Figure 5-4) before drawing four or five more stars. (This puts all the stars on the same layer, which is important, since that way you won’t have a bunch of layers to merge.)

  5. Merge the star layer and the Background layer.

    Choose Layer→Merge Down. You now have one layer containing yellow stars on a black background, like the bottom layer in Figure 17-6.

  6. Duplicate the layer.

    Choose Layer→Duplicate Layer, and then click OK. You now have two identical layers.

  7. Rotate the top layer 90 degrees.

    Go to Image→Rotate→Rotate Layer 90° Left (not Image→Rotate→90° Left—that command rotates your whole image, not just the active layer). You should now have two layers with stars in different places on each one.

  8. Animate your GIF.

    Go to File→Save For Web, and on the right side of the dialog box that appears, turn on the Animate checkbox. (If you don’t see this checkbox, make sure GIF is selected in the box below the word “Preset”; if it isn’t, select it from the drop-down menu.)

    In the Animation section on the right side of the dialog box, adjust the time between frames, if you want. Leave the Looping Options field set to Forever so the animation repeats over and over (otherwise your animation plays just once and then stops).

  9. Preview the animation.

    You can use the arrows in the Animation section to step through your animation one frame at a time, but for a more realistic preview, view the image in a web browser as explained in the previous section. The stars should twinkle. (Well, OK, they flash off and on—think of twinkle lights.)

  10. Save the animation, if you like, by clicking Save in the Save For Web dialog box.

You can reopen and edit your original files in Expert mode and see all the layers they include. However, it’s a good idea to also save them as PSD files to preserve their layers, just in case. If you make any changes, be sure to use Save For Web to reanimate it.

Emailing Photos

Elements makes emailing photos you have stored in the Organizer a piece of cake. With just a few clicks, the program preps the image(s), fires up your email program, and attaches the image(s) to an outgoing message. (Of course, you can also email images without Elements’ help by using your email program, and you may prefer that method since you get more freedom to specify settings like file size.)

If you’ve used a previous version of Elements, you’ll be pleased to know that, in Elements 13, you can easily email from any email program without having to hassle around with trying to get the Adobe authentication codes that plagued earlier versions. However, if you were a fan of the Windows-only Photo Mail, that’s gone now. Your email options are now the same whether you’re using Windows or a Mac.

All emailing in Elements starts from the Organizer’s Share menu. Your main choices there are:

You need to choose the kind of email you want to send before you start. To pick, click the one you want in the Organizer’s Share menu. The basic process is pretty similar for both types and is explained in detail below.

Individual Attachments

To send photos as regular email attachments, just follow these steps:

  1. In the Organizer, before you email photos for the first time, tell Elements about your email program.

    Go to Edit→Preferences→Email/Elements Organizer→Preferences→Email. Select the email program you want to use with Elements by clicking the New button to the right of the Email Profile drop-down menu. In the New profile dialog box that opens, if you see your email program in the Service Provider menu, select it; if not, choose Other. Give the profile a name, and then click OK.

  2. Next, if Elements asks, enter your email address, name, and the password for your email account, and then click Validate.

    If you use Microsoft Outlook in Windows or OS X Mail, Outlook, or Entourage on a Mac, you don’t need to enter this information.

    If you chose Other in step 1, you may also need to provide the SMTP server information and the port to use, as well as information on the security needed. You should be able to find this information in the settings for your email program.

    When you click Validate, Elements checks with your email service provider to be sure everything is OK.

  3. In the Organizer, select some photos (this is optional), and then go to ShareEmail.

    You can select photos before you start or add or change them once the Email Attachments panel appears; Figure 17-7 explains how.

    In the Email Attachments panel, below the image thumbnails, is some info that can help you decide how many photos to send and how large to make them:

    Below these settings, at the very bottom of the panel, is Elements’ calculation of how large the attachment will be.

  4. Click Next, and then address the email and edit its subject and body text.

    In Elements 13, you have to add your recipients to the program’s Contact Book (explained in the list below) before you can send email to them, unless you’re using Microsoft Outlook in Windows or Apple’s Mail app or Outlook or Entourage on a Mac, in which case you have the following options:

    After you have the email addressed to the folks you want to share your photos with, tweak the text in the Subject and Message fields, if you like. (You’ll probably want to get rid of the Adobe advertising—just highlight it and type what you want.) If you aren’t using Outlook, Apple Mail, or Entourage for Mac, you have to select at least one recipient before you can go to the next step.

  5. To finish, click Next.

    If you are using an email program other than Outlook (Windows or Mac), Apple Mail, or Entourage, or if you’re using one of those programs but you already selected recipients, Elements sends your email. You never see the actual message, only a little window that says “Your files were shared successfully.”

    If you didn’t select any recipients, Elements launches your email program, creates a new message, and attaches the files for you. You can then add recipients and edit the email in the normal way, and then send it yourself.