What You’ll Learn in This Hour:
<objective>Attaching photos to email messages
</objective> <objective>Creating online photo galleries
</objective> <objective>Publishing a map showing where your pictures were taken
</objective> <objective>Designing type, backgrounds, and graphics for your own web pages
</objective> </feature>Odds are, if you’re reading this book, you have a computer. And if you have a computer, it’s likely that you have access to email and to the World Wide Web. In turn, that means that you have practically unlimited opportunities to set your pictures free in the world and let everyone have a look at your best work. Sharing your pictures online offers several advantages over handing around prints all the time:
Posting your photos online or emailing them is free, unless you want to pay for extra services.
Uploading photos and getting the links to the people you want to share with is so quick that someone on the other side of the world can be looking at your photos on a snazzy web gallery just a few minutes after you take them.
It doesn’t take any more time or cost any more to share with dozens or hundreds of people than it does to share with one.
You and those with whom you’re sharing still have the option of ordering prints at any time.
Your options range from the simplest (attaching a photo to a plain-text email message) to the most complex (creating an interactive web gallery with fancy graphics and click navigation tools). Photoshop Elements makes it easy to do either of these—and a whole lot of things in between.
Before we get started with web publishing, let’s take a few minutes to review some useful information about how the Web works.
As you probably remember from Hour 3, “Creating and Saving Image Files,” the file formats you use for the Web are JPEG, GIF, and PNG. Almost all the artwork you process in Photoshop Elements will be saved in JPEG format, which produces good-looking and svelte photo files, but you might choose to save a picture in GIF or PNG format under a couple circumstances:
If the picture is an illustration or logo instead of a photo, use GIF.
If you’re saving a photo that needs to have transparent areas, you must use PNG-24, even though it will result in a much larger file than with JPEG.
All these formats use image compression to make files as small as possible. The larger a file is, the longer it takes to be transferred over the Net, whether you’re talking about the Web or email. And no one enjoys sitting around waiting for files to upload or download. So image files are compressed using mathematical techniques that take advantage of repeated data patterns in an image. Exactly how this works is way, way beyond the scope of this book, but the important thing to know about compression is that there are two kinds: lossy and lossless. When you save in a format that uses lossy compression, Photoshop Elements (or whatever other program you’re using) actually changes the way the image looks to make it more compressible (see Figure 10.1). This means that image data is lost—permanently. How much image data? That depends on the quality setting you apply when saving.
Unlike JPEG files, GIF files use lossless compression, but you can reduce the number of colors in a picture’s palette when you save it in GIF format. That’s another way to make files smaller. You might recall that when you worked with the Save for Web dialog in Hour 3, you had to set the number of colors you wanted to include in a GIF image, from 0 to 256. That setting determines how many colors are retained; which ones stick around is determined by which color reduction algorithm you specify. Your choices are Perceptual, Selective, Adaptive, and Restrictive (Web); I recommend sticking with Selective unless your picture is made up of shades of just one or two colors, in which case you should use Adaptive.
So what happens to the colors that get left out? Photoshop Elements fakes them. That’s right—those colors are simulated by dithering, the arrangement of similar-colored pixels adjacent to each other to create the impression of a different color (see Figure 10.2). Generally, the illusion is pretty good, but you still want to avoid dithering with photos. That’s why GIF is mainly suitable for nonphotographic artwork.
Now that we’ve reviewed the basics about formats and compression, let’s get online and actually share some photos.
Photoshop Elements offers you several ways to get your photos online, either on the Web using your own website or a free service, or via email, in various formats. You can email plain image files as attachments, or you can send HTML-formatted email using Photoshop Elements’ stationery templates. You can even create a slideshow file, complete with audio and custom slide transitions, and email that. Keep reading to learn how to do each of these things and more.
Before you can email photos from Photoshop Elements, you need to set up your email preferences (see Figure 10.3). If you’re working in the Organizer, choose Edit, Preferences, Sharing; if you’re working in the Editor, choose Edit, Preferences, Organize & Share; then click Sharing in the list at the left side of the dialog box. First, choose your email program from the Email Client menu; if it doesn’t appear in the menu, choose Adobe Email Service to email directly from Photoshop Elements using your account with a web-based email service such as Yahoo! or GMail.
By the Way
If you use any Windows email program other than Microsoft Outlook or Outlook Express, you’ll have to go with Adobe Email Service; Photoshop Elements recognizes only those two external email clients.
Before closing the Preferences dialog, check the box marked Write Email Captions to Catalog. When you add captions to photo email, Photoshop Elements adds that information to your photo catalog so you don’t have to retype it.
Okay, we’re ready to email some photos. Let’s start with a simple email attachment—just a picture and a few words. First, in the Organizer, choose the photo you want to email. Then click the Email Attachments button on the Share tab (see Figure 10.4).
Choose a Maximum Photo Size and a Quality Level, watching the estimated file size and download time shown below the Quality Slider; then click Next. Now enter a message and choose recipients. If the people you want aren’t listed, click the Contact Book button above the Recipients field and add the missing information. When everyone is listed, click Next again. That’s it—the next thing you see is an email message, addressed and with photos attached, ready for you to click Send.
Did you Know?
If you plan to use these settings again in the future—in other words, if you often send to the same person or group of people and you want to use the same image size and quality level every time you do so—be sure to click the Yes button under the Save As Quick Share Flow? question. When you save the settings as a Quick Share Flow, the name that you choose appears in the Quick Share palette so that you can skip most of these steps the next time you want to email photos to these people.
If you want to send jazzier emails with special formatting, you can click the Share tab’s Photo Mail button instead of Email Attachments. Here, again, you can drag photos into the Items window to include them in your email; to delete a photo, click its thumbnail in the Items window and then click the red Remove button above the window. When you’ve collected the photos you want, check the Include Caption box so that Photoshop Elements will insert a caption below each picture; then click Next.
Type your message and choose your recipients, and then click Next again. That pops you into step 1 of the Stationery & Layouts Wizard, where you can choose a template from the list on the left (see Figure 10.5). You’ll find dozens of choices in nine different categories. When you’re happy with the look of your photo mail, add captions for any images that need them and then click Next Step to tweak the template settings.
In step 2 (see Figure 10.6), you get a few choices of alternative background patterns. You can also change several other settings that affect the appearance of your photo mail:
Layout—. You’ll see five preset image sizes, from rather small to quite large, and you can choose from eight different layout arrangements.
Text—. You can change the font and color of the introduction and captions in the message.
Border—. Padding refers to an inner border (white, by default); Border refers to the outer border. You can set the width and color of both of these.
When you’re done tweaking, click Next again. Photoshop Elements turns your photos and settings into an HTML-formatted email message, ready for you to click Send.
Now, about those captions. Remember when you set your sharing preferences and turned on the Write Email Captions to Catalog setting? Here’s where that comes into play. If your photos already had captions in the Properties window (choose Window, Properties to see it), Photoshop Elements inserted those in your photo mail. But if the General Properties’ Caption field is empty, the program now takes the captions you typed into the photo mail and puts them into the Captions field. Pretty neat, right?
Keeping in Touch
If you find yourself adding new contacts to Photoshop Elements’ Contact Book all the time, it’s probably worth taking a few minutes to import your regular email address book into the Contact Book. Start by choosing Edit, Contact Book in the Organizer (see Figure 10.7).
In the toolbar across the top of the Contact Book window, click Import. This opens the Choose Contact Source dialog, in which you can choose vCard Files or the address book from your Outlook or Outlook Express. Pick one of these and click OK. If you choose vCard Files, you then have to navigate to the files’ location on your hard drive; if you choose another option, Photoshop Elements locates your address book file by itself. Either way, now Photoshop Elements knows the email addresses of all your friends and family members.
A third way to email photos is to send a PDF slideshow. This is a document containing multiple photos that display in sequence with smooth transitions between them. It opens in Adobe Reader, which is a free download from www.adobe.com, so anyone can view the file on any computer. The process of putting together a slideshow will be pretty familiar to you if you’ve been reading through this hour in order. Start by choosing the photos you want to include in the show. Then, in the Organizer’s Share tab, choose PDF Slide Show from the More Options menu.
You can add or delete photos in the Items area. Then, as you did with email attachments, choose a size and a quality level for the images that will be included in the show. Give the slide show a name and then click Next. Compose a message to go in your email, choose recipients for the email, and click Next again. You end up with a bare-bones slideshow presentation (see Figure 10.8). It automatically plays in full-screen mode and has simple transitions between photos. As with email attachments and photo mail, Photoshop Elements attaches the slideshow file to an email message so that all you have to do is click Send.
If you’re looking for something really fancy to display your photos, you need online galleries. These are web pages that feature Photoshop Elements’ professionally designed templates, some of them with animation or even interactive elements. As usual, start in the Organizer by choosing the photos that you want to include in the gallery. Head back to the Share tab and click the Online Gallery button.
First, you have an opportunity to add and delete photos from the batch you’ve chosen. When you’re happy with the group of pictures you’ve got, click Next to move on. Here’s where the fun begins. In the Category pop-up menu, choose from the following options:
Interactive templates respond to the viewers’ actions. Users can click a picture to see a larger version of it and can perform other actions, such as turning pages.
The Standard templates provide a basic web page displaying image thumbnails that viewers can click to see each image full size.
Animated templates feature moving elements, but those elements don’t respond to user actions.
Journal templates offer a look that’s similar to the Standard templates, but with plenty of space to add extensive captions to your photos.
Another basic offering, Slideshow templates are similar to Standard ones, but viewers can click a Play button to see the photos displayed sequentially without having to click through them.
If you want to showcase a video clip, choose Video.
Click the template thumbnails to see how they’ll look with your pictures; when you find one you like, either double-click it or just leave it selected and click Next. At this point, Photoshop Elements combines your chosen photos with its template and presents you with the result so you can fine-tune it (see Figure 10.9). Which settings you can adjust depend on the template you choose; you might just be able to enter a gallery title and your email address, or you might end up needing to specify a background image, type colors, and even animation speed. When you’ve got the gallery settings the way you want them, click Next.
Enter a filename for the gallery and choose a location on your hard drive. When you click Next, Photoshop Elements saves the file and then asks where you want to post the gallery: on Photoshop Showcase, on your own FTP site, or saved on a CD or DVD.
If you choose Photoshop Showcase, you’ll see a window asking you to either log in or register a new account with Photoshop Showcase. Go ahead and do it—there’s no charge. Then you’ll proceed through a series of screens asking you to confirm your map gallery’s name, provide email addresses for anyone you want to notify about the gallery, and upload the gallery’s photos.
If you have your own website where you want to post your map gallery, click My FTP and enter the appropriate information in the dialog box. Photoshop Elements needs to know the address of your server and your username and password so it can move the files to your site.
If you don’t want to publish your gallery online, you can put it on a disc. Click CD/DVD, insert a blank disc, give the disc a name, and click OK.
To finish, click Done at the bottom of the Task pane.
Publishing a Photo Map
Adobe and Yahoo! have gotten together to incorporate Yahoo! maps into Photoshop Elements so that you can search for and display your photos based on where they were taken. Here’s how it works, starting with getting your photos on the map and then moving on to publishing the map:
In the Organizer, choose Display, Show Map to bring up your map. A pop-up menu below the map enables you to display a satellite view, a road map, or a hybrid view that overlays the map data on the satellite image.
To place your photos on the map, drag them onto it from the Photo Browser (see Figure 10.10). You can also drag a keyword tag onto the map, which applies that map location to any photo with that tag.
When you’ve got enough photos on your map, click the Share button below the map, and then click Share again in the Sharing Your Map and Photos dialog. Photoshop Elements takes a minute or two to create a new gallery based on the map and then displays it on your screen.
Fill in information about your mapped photo collection in the Gallery Title, Gallery Caption, About This Gallery, Your Name, and Your Email Address fields. Click Next.
Give the gallery file a name and choose a location for it on your hard drive. Click Next again; now Photoshop Elements saves the gallery file in your photo catalog.
As with regular galleries, Photoshop Elements now needs to be told where you want to post the gallery: on Photoshop Showcase, on your own site, or saved on a CD or DVD. (Skip back to the previous section, “Creating an Online Gallery,” if you want to review these options.) Click Done.
Of course, the map isn’t just for showing off. You can also use it in the Organizer to help you find specific photos. Start by displaying the map; then click Limit Search to Map Area to show only the photos whose locations appear in the visible map area (see Figure 10.11). Keep in mind, though, that this also hides all the photos that don’t have assigned locations. Maybe it’s time to invest in a new camera with built-in GPS so that each photo already has its location specified when you bring it into Photoshop Elements....
If you don’t have your own website, you might want to try out the third-party photo-sharing sites with which Photoshop Elements can connect directly: Kodak EasyShare Gallery and SmugMug Gallery. Both are free, at least at first, and they offer a really quick way to get your photos out there.
Let’s look at EasyShare first; it follows what by now should be a pretty familiar sequence of steps. In the Organizer, choose the images you want to share, and then click the Share tab and choose Kodak EasyShare Gallery from the More Options menu. You’ll need to create a new account or log in with an existing one before you can get any further.
After that, you add the email addresses of your friends, or choose from those already stored in your Photoshop Elements Contact Book, and compose an email message with an appropriate subject to notify people about your gallery. Then Photoshop Elements uploads your photos and sends the email. You see a confirmation dialog letting you know that the upload completed and giving you the link to the gallery’s page (see Figure 10.12).
There’s no charge to put your photos on Kodak EasyShare Gallery, but if you don’t order prints or another product from the site at least every 12 months, your photos can be deleted. Your account won’t be deleted, though. SmugMug Gallery is similar to Kodak’s, but it costs $40 per year after a 14-day free trial. Your basic membership enables you to apply decorative templates to your photo pages. There’s no limit to the number of photos you can upload or the amount of traffic allowed on your pages.
If you don’t find the Kodak or SmugMug galleries to your taste, you can peruse all kinds of free photo-sharing sites on the Web. Two of the big ones are Flickr (www.flickr.com) and Snapfish (www.snapfish.com); Flickr is well known for its community features (commenting and message boards), and Snapfish has excellent prices on prints and a great selection of photo gifts.
Don’t worry, I’m not going to try to cram a whole course on how to do HTML or web design into this hour. But I would like to just give you a few tips on the image aspects of web design. If you’re interested in learning more about creating websites and programming for the web, take a look at Sams Teach Yourself Web Publishing with HTML and CSS in an Hour a Day, 5th Edition (ISBN 0-7686-6635-X, available from www.samspublishing.com).
By the Way
As you know, you use the Save for Web dialog when you’re saving images to web formats. If you need to review the settings and controls in the Save for Web dialog, turn back to Hour 3, “Creating and Saving Image Files.”
I have to admit, I’m a minimalist in some ways. I still prefer black type on a plain white background for web pages; it’s just so much more legible than anything else. On the other hand, I’ve seen plenty of neat backgrounds that really do a good job of conveying a particular flavor within a web page design. So here are a few words about using backgrounds on your own pages.
You can, of course, start with a simple, subtle background color. This doesn’t add anything to file size or download time for your site. As far as legibility is concerned, as long as you remember that one word—subtle—you’ll likely be fine. Unless you’re really going for shock value, stay away from those blood-red or eye-gouging purple backgrounds.
Another option, and one that can be very effective design-wise, is to use a single ghosted image—that is, lightened so that the picture’s details don’t interfere with type laid over it. The simplest way to accomplish this, starting out in Full Edit with a photo open, is to choose Edit, Fill Layer and set the Contents to White or a very pale color, and enter an Opacity percentage of 80% to 90%. You’ll end up with a quiet, pale version of the photo that still gets the message across without preventing the rest of the page from being seen (see Figure 10.13).
If a background image is full screen, it will really slow down your page-loading times. You can get a similar effect by using a repeating pattern, either a page-wide image that repeats vertically or a tiled picture that repeats both horizontally and vertically (see Figure 10.14). In the next task, I show you a foolproof technique for creating seamless repeating tiles.
Creating a Repeating Pattern
With a tiled background, you need to hide the seams where the tiles meet so that your background looks like one large image. Here’s how to make that happen.
Starting with a photo of a texture that you like, select a smallish image area (perhaps 100 pixels square), copy it, and create a new document. Accept the dimensions that Photoshop Elements inserts in the New dialog; they’re based on the size of the area you copied from your source image. Choose Edit, Paste to insert the Clipboard contents into the new image file (see Figure 10.15).
First, clean up the image. Apply any Quick Fixes or other image adjustments to it that you want to use, and fix any blemishes that are too distracting from the rest of the image. Remember, a background pattern should be fairly uniform in color and brightness so that type laid over it remains legible.
Choose Image, Resize, Image Size to see the pixel dimensions of the image (or perhaps you remember them from the New dialog).
Switch to Full Edit mode and choose Filter, Other, Offset. First, make sure the Undefined Areas setting is set to Wrap Around.
Then divide the image’s width (which you learned in Step 3) in half and enter that amount in the Horizontal field. This will move the image so that its center is at the edges and its edges are in the center.
Do the same with the image’s height and enter the result in the Vertical field (see Figure 10.16). Click OK.
Now you can see a sharp line running down the middle of the picture and an intersecting line running across the middle. These show where the top edge of the image meets the bottom edge and where the left edge meets the right edge. They enable you to see how the picture will look as a tile.
Using whatever tools suit you (such as the Clone Stamp, the Blur tool, and the Healing Brush), eliminate those hard lines running across and down the middle of your picture (see Figure 10.17). Try to be subtle; major changes in the image will be distracting. You simply want to eliminate these seams.
When you’re done, choose Filter, Offset to repeat the Offset filter. Because that’s the last filter you applied, it remains at the top of the Filter menu, for easy access.
Using the same tools and techniques, get rid of any remaining hard-edged seams.
Now the tile is ready to be used. Using Save for Web, save it as a medium-quality JPEG file. In your web design program, specify this file as your background image and set it to tile.
If you don’t have a texture photo, you can make your own textures by creating a new blank document the size of your desired tile, filling it with a color, and then experimenting with Photoshop Elements’ filters until you get something you like. We play with filters later in the book; peek ahead to Hour 19, “Using the Improvement Filters,” or Hour 20, “Using the Artistic Filters,” if you’re looking for some inspiration right now.
As you’ve probably noticed, type on web pages tends to show up in boring fonts such as Arial and Times New Roman. That’s because web browsers have to use the fonts that all users have installed in their computers, and it’s pretty hard to predict which fonts all your viewers will have in common. Just a few likely choices emerge, hence the tendency for text to display in these few plain fonts.
When you’re designing your own web page, however, you can make use of your favorite fonts—if you make them graphics instead of regular text. This is the only way to be sure your own special font is used and to avoid having some default font substituted for it. Keep in mind, however, that image files are almost invariably larger than text files, so they take up more room on your web server and take longer to display on a viewer’s screen than plain text. Use type images for headings and buttons, not for all the type on the page.
Consider my three best tips for creating type images:
Be sure that anti-aliasing is turned on for your type; otherwise, the edges will appear jagged.
To make the file as small as possible dimensions-wise, activate the type layer and choose Layer, Simplify Layer. This turns it into image pixels. Then Ctrl+click the layer’s thumbnail in the Layers palette to select all the nontransparent areas on the layer, and choose Image, Crop. Performing these steps gets rid of any extra space around the type (see Figure 10.18).
Before saving the file in a web format (GIF or PNG), hide the Background layer so that you can see the transparent areas on the type layer. Then be sure to check Transparency in the Save for Web dialog. This enables a background color or image to show through inside and around the letters.
Consider this conundrum: Every image file is rectangular, but not every image is rectangular. So what do you do with the parts of your image file that aren’t actually your image? Answer: You make them transparent so that the background color or image behind can show through (see Figure 10.19). And with Photoshop Elements, that’s much easier than ever to do with web images.
First, you need to put the image on a transparent layer. If you’re starting with a shape or type layer, you’re already there; all you need to do is delete the Background layer. On the other hand, if you need to get rid of parts of the image to make them transparent, you’ll probably want to use one of Photoshop Elements’ special tools for doing just that.
The Background Eraser is intended specifically for deleting backgrounds around image objects. To use it, click and drag on an area of the image that you want to remove. As you drag, the eraser deletes the colors under the cursor, along with adjacent pixels of similar colors. The crosshairs at the center of the cursor determine what colors are erased, and the circle around the crosshairs determines the area that the eraser is influencing. So if any part of your foreground image touches a background area of the same color, watch out! You might want to switch to the regular Eraser tool for areas such as this. In any case, set the tool’s Tolerance to a low value (around 10%), zoom in so you can see what you’re doing, and go slowly (see Figure 10.20).
The Magic Extractor is similar, but it requires much less work on your part. To get started, choose Image, Magic Extractor, which brings up a big dialog box with its own toolbox (see Figure 10.21). The two most important tools are the Foreground Brush and the Background Brush; you use these the same way you use the Quick Selection tool. First, with the Foreground Brush, paint a few swipes across the area of the image you want to retain. Try to make sure you cut across all the different colors used in this area. Then switch to the Background Brush and do the same with the background that you want to delete. When you’re ready, click Preview to see the results.
When the picture is ready, use the Save for Web dialog to save it as a GIF or a PNG, making sure to check the Transparency box. To ensure that the edges of the object blend well with the background, you can also choose a color from the Matte menu next to the Transparency check box; you should pick a color that matches the background as closely as possible.
Truth be told, how fast your web pages load on viewers’ screens really isn’t up to you. It depends on the speed of the server where your pages are stored, the speed of a viewer’s Internet connection, and the speed of the viewer’s computer. That said, here’s what you can do to improve matters:
Make your image files as small as possible by always using Save for Web, instead of Save As, to optimize your images for the Web. Take the time to compare different combinations of settings so that you can choose the smallest file that still meets your criteria for appearance.
Choose Progressive for JPEG images and Interlaced for GIF images. This makes them appear on the user’s screen as low-res images very quickly; then the high-res image replaces the preview as soon as it has finished downloading.
Be sure to insert some HTML text, particularly at the top of the page. Text usually loads first, and very quickly, which means your viewers will have something to start reading while they wait for photos to display.
If you’re displaying physically large images—ones that take up a lot of space on the screen—consider placing thumbnail images on your main pages and making them link to the larger images. That way, users can choose to download only the images they want to see.
Use alt tags to display text labels in place of photos for users who choose to turn off images in their web browser or who can’t see the screen. Alt labels are also displayed onscreen before an image loads, so, again, that will give your viewers something to look at while they wait to see the photos.
As an added bonus, screen readers operate better the more text you use and the more alt tags you use. Plus, you can increase the size of real text, but graphics will stay the size they are. What’s more, because the total size of the files that make up your website will be smaller, your traffic will be lower, so you’re less likely to run over your limit and incur extra charges from your web hosting provider.
By the Way
What’s that, you say? Who worries about big web files these days when so many people use broadband connections? I’ll tell you who: For starters, quite a few people out there are still using dial-up connections. On top of that, more people are viewing the Web via mobile phones and similar devices, which have slower connections than computers usually do. So file size remains an important consideration, for now.
In this hour, you learned how to send photos via email, how to turn them into online galleries that anyone can view on the Web, and how to publish a map that arranges your photos by location. We reviewed some basic web concepts at the top of the hour, and we closed things out by looking at a few graphics-geek techniques you can use when designing your own websites.
We’ve gone over a lot of stuff in this hour. Here are a few quiz questions and a couple fun activities to help you review.
Email your best photo by attaching it to an email from within Photoshop Elements. You can send the picture to your best friend, your mom, or even me, if you like. My email address is [email protected].
Using the Offset technique described previously, make a pattern tile. When it’s done, if you don’t have a web page to put it on, use it as a Photoshop Elements pattern fill instead. Select the whole tile image; then choose Edit, Define Pattern from Selection. Then create a new blank file and choose Edit, Fill Layer to fill the document with the pattern. Can you find the point where the tile ends and the pattern starts over?