Here we are at the end of the book; you’ve been working with Photoshop for 23 hours now, and we spend this final hour looking at ways to get your images online so you can build a website and share photos with family and friends via email and even your cellphone. First we talk about preparing your images for online use, and then we check out some different ways to get your images out there, both on the Web and on other parts of the Internet.
The first thing you need to learn about preparing web graphics is which file format to use for which kind of image. The two standard choices, GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group), are accompanied by a third format known as PNG (Portable Network Graphics). Though it’s still less common than JPEG and GIF, PNG has been out for several years now and is supported by all the major web browsers. Use it if you like it, but be aware that a few folks out there might have older browsers that can’t display PNG files.
All web file formats have built-in compression because the Web has limited bandwidth. This means that you have to consider the download speeds to which your site’s viewers likely have access. If you want the site to be usable for people who are still using old-style phone modems, you’ll want to keep your web page images less than 30KB apiece—a size that a 56K modem can download in a comfortable 6 seconds. This is an area where the preview images in the Save for Web & Devices dialog can be a big help. They let you decide how small you can make a file without sacrificing quality.
That said, most U.S. Internet users do have broadband (high-speed) connections both at home and at work these days. In summer 2007, broadband penetration was up to 83.43% of active Internet users in the United States, according to Nielsen//NetRatings. People who use phone modems and connect to the Internet at 56Kbps or less made up just 16.57% of active Internet users at that time. So file size is much less of a concern than it was in the early days of the World Wide Web, back in the 1990s. It’s still true, however, that smaller is faster, and faster is better as far as Internet users are concerned.
Note: I Read It on the Interwebs
Most of the images we see on the Internet are displayed on websites—but not all. It might seem like a picky distinction, but the Internet and the Web are not the same thing. Email, online messaging, FTP, Voice over IP—all these are Internet services that have nothing to do with the Web. So you’ll want to keep in mind that when I say “the Web,” I mean what you see in your Web browser window, and when I’m talking about the whole Internet, the Web, and all that other stuff, too, I’ll say so.
Most of the time, when you see photos on the Web, they’re saved in JPEG format. It’s the most common format for photos these days, and for good reason. JPEG accommodates 16 million colors, and you can choose precisely how much compression you want to apply to each file. That’s especially good because JPEG compression is lossy, which means that reducing file size also reduces image quality.
When you’re working in Photoshop, choose File, Save for Web & Devices to open the dialog shown in Figure 24.1. I chose JPEG Low from the Preset pop-up menu; I could have chosen GIF or PNG instead. After a short calculation, and because I clicked the 4-Up tab at the top of the dialog, I can see my original image, plus the same image with three different JPEG settings. Photoshop displays the file size and download time for each version of the image.
The original Photoshop file for this image was 1.43MB. As a low-quality JPEG, it’s 54.14KB and will take about 2 seconds to download on a 768K DSL connection, which is a pretty common speed in my neighborhood. At high quality, the file size increases to 194.3KB and the download time increases to 3 seconds. Saved in PNG-24 format, PNG’s photo-quality flavor with lossless compression, it’s a 1.282MB file and loads in about 18 seconds. Is the quality difference worth the download time? The answer to that, in my book, would be a big, fat “No!” My compromise for this image would probably be to use the JPEG Medium preset, which produces an 87.02KB file that still loads in about 2 seconds.
Caution: Once Is Good, Twice Is Not
Each time you resave a file in JPEG format, you lose more data to compression. This creates artifacts—blocky areas or color bands in your picture. For that reason, you should never save a file as a JPEG more than once. If you convert an image to JPEG and then decide to make changes, go back to the original Photoshop file to make your modifications. Don’t make changes to the previously saved JPEG and then resave it. And if your digital camera produces JPEG files, be sure to resave them in Photoshop format before you make any changes to them.
On the other hand, even if I use the high-quality image, I’ve reduced the file’s size from its original 2.25MB to 171KB. That’s a tremendous difference with a relatively small loss of quality.
To save your file, click the version you want to save, then click OK. The Save As dialog box opens, enabling you to name your document and save it where you want it.
If you’re saving a JPEG file with the File, Save As command, the first thing to remember is this: Don’t. Save for Web & Devices gives you much more control over the size and quality of the resulting image. However, if you’re in a hurry and are determined to just save and go, choosing JPEG from the Format pop-up menu in the Save As dialog and then clicking Save produces a second dialog, shown in Figure 24.2.
This dialog prompts you for format options:
Baseline (Standard)—. This is the default option, if you leave the others unchecked. It’s a legacy format that was in widespread use only with the earliest web browsers, which couldn’t read the Optimized flavor of JPEG.
Baseline (Optimized)—. This option creates a smaller file by using slightly more efficient compression. Choosing Optimized doesn’t reduce the quality of the image, so these days there’s no reason not to use it.
Progressive—. Except for very small JPEGs, this format option is almost a must for web work. Progressive means that web browsers display your file displayed immediately as a low-res preview and then refine the display with subsequent passes, or scans, as more file information is downloaded. You can choose the number of scans—three, four, or five—from a pop-up menu. If you choose the Progressive JPEG option, the file automatically is optimized.
If you stop and think for a minute, you’ll realize that not all web images are photos. Some are clip art, icons, logos, info-graphics (charts and graphs), and the like. For these pictures, GIF is the best format option. Because GIF files are limited to a maximum of 256 colors, they’re not as good as JPEG for continuous-tone art (such as photographs), but they’re great for line art, logos, and any kind of art with a limited number of colors. Unlike JPEG, GIF also lets you save files with transparent backgrounds, which you’ll find quite useful when you’re creating buttons and other nonsquare graphics. Furthermore, you can animate a GIF, and that’s always fun!
Tip: See What’s Happening
Always keep your web browser open when you’re creating web graphics so that you can take a look at them in context. But don’t be fooled by how quickly your files open in your own browser. These files are on your hard drive—they’re local. When a viewer’s browser has to go out on the Web to retrieve the code and images needed to display your pages, the process slows down quite a bit.
In Figure 24.3, I’ve created a simple button that I want to save as a GIF file. Notice how much the file shrinks (from 190KB to 1.78KB) when I limit the colors in the GIF. Feel free to try different numbers of colors, dropping lower until you see a difference in the image. The fewer colors the image contains, the smaller its file will be.
Tip: It’s Okay to Peek
A good way to choose the file format that’s right for an image is to visit websites that have graphics similar to what you want to publish. To find out what file format an image uses, Ctrl-click the image (Mac), or right-click (Windows) the image until a pop-up menu containing a Save command appears. In the Save dialog box, note the image’s file extension—.jpg for JPEG, .png for PNG, or .gif for GIF. Click Save to save the file, or click Cancel if you’re just looking.
PNG comes in two flavors: 8-bit and 24-bit, which correspond fairly closely to GIF and JPEG. The PNG-8 format uses 8-bit color, which means that each image can contain only 256 colors. Like the GIF format, PNG-8 compresses solid areas of color very well, maintaining sharp detail such as that in line art, logos, or illustrations with type. PNG-8 uses a lossless compression method, which means that no data gets thrown out. However, because PNG-8 files are 8-bit color, using this format for an original 24-bit image—which can contain millions of colors—as a PNG-8 will degrade image quality by reducing the number of colors the picture contains. PNG-8 files use more advanced compression schemes than GIF, so they can be 10% to 30% smaller than GIF files of the same image, depending on the color patterns contained in the image.
As you might guess, PNG-24 file format uses 24-bit color and is suitable for continuous-tone images. Its lossless compression scheme means that you never lose image data when you save in this format. However, as a result, PNG-24 files can be much larger than JPEG files of the same image. So when would you use PNG-24 format? Pretty much, it comes into play only when you’re working with a photographic image that has variable transparency, meaning that some pixels are partially transparent. This is the kind of transparency you have in an antialiased image on a transparent layer. JPEG can’t do multilevel transparency.
Bottom line: If you would consider GIF for an image, consider PNG-8 as well. It might give you a smaller file, and it can do the job just as well. If you’d normally use JPEG, consider PNG-24 if your picture has multilevel transparency. If it’s a regular image with no transparency, on the other hand, JPEG will give you a smaller, more efficient file.
Want to have some fun? Let’s look at a few things you can do to your images beyond just sticking them up on a web page. You can use them as page backgrounds, for one thing, or animate them. You can even slice them up into pieces so that they’ll load faster and so that each part of the image can function as links to a different destination.
Background patterns and images on web pages can really add personality to a website, but they also can make reading the text of the site difficult. To quote legendary web designer David Siegel, “Gift wrap makes poor stationery.” That said, however, if you use backgrounds with discretion, they can add considerably to a site’s presence. Because HTML includes the capability to tile any image as a background, repeating it as many times as necessary to fill the browser window, your background file can be quite small. You just have to make sure that it doesn’t have obvious, abrupt edges (unless that’s the look you’re going for). In Figure 24.4, I’ve used Photoshop to create a tile for a web page background, and I’m saving the image as a GIF file using the Save For Web & Devices dialog.
Converting the single tile into a background is easy. You just open a page in your favorite web design program and import the image. Depending on the program, you have to click a check box in the Import dialog box to specify that this image should be used as a background. Some other web design programs have a specific dialog for placing backgrounds. Figure 24.5 shows how to insert a background image tile using PageSpinner’s HTML Assistant dialog.
Now all you have to do is be sure that when you upload your page to the Web, the background image is where you said it would be. Figure 24.6 shows the tiled background with some type placed over it.
Here’s a trick for adding a stripe down the side of your web page. Make a single tile that’s wider than the width of most computer screens (mine is 3,000 pixels wide, just to be on the safe side) by as few pixels high as needed (mine is 20 pixels deep). Place your color and/or texture at the left side of the image, and then save it as a GIF or JPEG and insert it into your page code as a background image. The file will look something like Figure 24.7.
When you place this file as a background, it tiles vertically but not horizontally: It’s already wider than the screen, so there’s no room to display another copy to the right of the first one. You’ll end up with a nice stripe, as wide as you care to make it, in the color and texture of your choice. It makes a good accent for a plain page.
GIF animations are common on web pages, and they also frequently show up as chat icons. You can use Photoshop to create your own image and then make it move. Just don’t overdo your use of animated GIFs on your website; they can get old really fast.
Start by creating a background for your animation. I used the Shape tools to draw a simple landscape (see Figure 24.8). Any part of the image that isn’t going to move or change in another way can go on the background. Next, create the object that you want to move or reshape. (Let’s stick with one animated object for this example.) Again, I pulled out my old standby, the Shape tools, and dropped a flashy red car into my landscape, driving up the hill (see Figure 24.9).
At this point, I needed to begin working with the Animation panel (choose Window, Animation). Photoshop has already created one frame for me, which reflects the current state of the image. Clicking the New Frame button (which looks just like the New Layer button, the New Channel button, and so on) gives me another frame, and then I can configure my image for that frame. How I set up the image for the second frame depends on what I want my animated object to do. I can move it on its layer, alter layer visibility and opacity, change layer blending modes, and add layer styles, all without having to create a new layer. If I want to resize, rotate, repaint, or otherwise modify the animated object, on the other hand, I need to create a copy of it on another layer and modify the copy. That applies in this case because the car needs to rotate slightly to stay parallel with the ground as it moves up and down the hill. So I duplicate the car layer, move the car to the right, and rotate it; that takes care of the second frame (see Figure 24.10).
When you’ve created a frame for every position of your object—my car animation has five frames (see Figure 24.11)—you can go back and assign each frame a frame delay time using the pop-up menu below its thumbnail in the Animation panel. For a very speedy animation, use 0; for my car example, I used a frame delay of .2 seconds. To add “tweened” frames, which contain content from the frames on either side of them at reduced opacity to serve as a transition, Shift-click to select both frames and click the Tween button at the bottom of the Animation panel.
Click the Play button at the bottom of the Animation panel to preview your animation. Then, if you’re pleased with it, choose File, Save for Web & Devices, and save it as a GIF file. After you’ve chosen a GIF preset, or created your own combination of settings (number of colors and dithering), the only thing left to do is pick a Looping Option in the Animation area of the dialog at the lower right. Choose Forever if you want the animation to go continuously, or choose Once to make the animation run through its steps once and stop. If you choose Other, you can specify a number of repeats. I don’t need very many colors for this particular example, so I can make it a 16-color GIF with no noticeable change from the original.
The file opens in any web browser and plays just as it did in Photoshop.
Photoshop’s Slice feature enables you to divide a large graphic into as many smaller images as you like. The whole thing still displays on your web page as a single image, but each slice can have its own color palette, and you can assign a different link destination to each slice to form what’s called an image map. Meanwhile, the image appears to load faster because each slice is displayed as soon as it’s downloaded, so the viewer starts seeing parts of the image almost immediately. The total size of the slices can be smaller than the original image file because you can use different color settings for different parts of the image. For example, an ornate logo on a web banner might need to be saved with 128 colors, while the rest of the image might contain only 2 colors and can be saved with a much smaller palette as a result.
Slices are put back together like puzzle pieces in an HTML table that’s part of the document’s HTML file. By default, any Photoshop image starts with one slice that comprises the entire picture. You can then create more slices in the image. Photoshop automatically makes additional slices to complete the full HTML table; in other words, you can outline a few puzzle pieces, and Photoshop will create all the other pieces you need to complete the puzzle. Note that you must use Save for Web & Devices and choose HTML and Images when saving a sliced image instead of using Images Only, and you’ll need to copy the HTML that Photoshop creates into your web page file.
You create slices by dragging the Slice tool, which looks like a drawing of an X-Acto knife. Choose it from the Photoshop toolbox (it’s behind the Crop tool) or press the C key to activate the Crop tool and then press Shift+C to switch to the Slice tool. Drag with the Slice tool to create a selection box across the area you want to slice. If you make a slice across the entire middle of an image, by default, you have defined three slices, including one above and one below where you have sliced. Slices that you create are called user-slices, and slices that Photoshop generates are called auto-slices. Subslices are created when you overlap two or more user slices. To modify the shape of a slice, switch to the Slice Select tool and drag the corners of its box. Figure 24.12 shows a sliced image in the Save for Web & Devices dialog, where you can assign different settings to each slice.
There’s no point in taking photos and creating cool images if you don’t show them to people, right? And what better way to share photos than the Internet? The Web and all the other components of that vast network we call the Internet provide a fast and easy way to reach millions of people all over the world—or just a few people right in your own neighborhood.
Want to put your best Photoshop work up on a web page? Sure. But if you just stick all those big images on a single page, it’s going to take forever to load, and your viewers might just lose interest and wander off before they’ve seen everything. There’s a better way, and Photoshop’s Bridge is your ticket to get there.
Web photo galleries include thumbnail images of each picture you include; then interested viewers can click those thumbnails to see the large versions. Bridge can do all the work of creating these complex structures for you, using a variety of templates and all kinds of customizable settings. Layouts range from a simple page of thumbnails, each of which you can click to open a new window with a full-size view; to table format, again with thumbnails; to scrolling frames; to variations with patterned and colored backgrounds, including the familiar Microsoft navy and gray. You can also choose your own colors for background and type, as well as for links. Last, there is a slide show format that changes images every 10 seconds. Figure 24.13 shows the Web Photo Gallery settings in the Bridge window.
Make a Gallery Page
Let’s create a gallery page from your images. Follow these steps:
Before you begin, make sure that all the images you want to include are in one folder. Then choose File, Browse in Bridge.
Locate your folder of images in Bridge, using the Folders tab at the left side of the Bridge window, and select all the images.
Click the Output workspace button at the top of the Bridge window, and then click the Web Gallery button at the top of the Output tab on the right side of the window.
Starting at the top of the Output tab, choose a category from the Template pop-up menu and then a particular look from the Style pop-up menu (see Figure 24.14). Then fill out the information in each of these sections:
Site Info: Here’s where you give the site a title and a subtitle, insert your own name and contact info, and add a copyright notice if you like.
Color Palette: If you don’t like any of the colors associated with your chosen template, you can change them here.
Appearance: These settings affect the gallery’s layout. You can have thumbnails in a row at the bottom of the window, in a column on the left, or in a grid on the left, or you can skip the thumbnails altogether and opt for a slideshow presentation in which viewers must proceed through the images in order. Of course, you can also choose the sizes of the thumbnails and of the larger images.
Create Gallery: When you’re completely happy with the gallery’s settings, this is where you go to save it to your hard drive or upload it to your website. You enter all the relevant settings in this pane and then click Save or Upload to create the files that make up the gallery.
To preview the gallery as you change settings, click the Output Preview tab at the top of the window (see Figure 24.15); you might need to drag the divider between this tab and the Content tab, where your pictures are shown, to be able to see the preview. If you change any settings, you can see an up-to-date preview by clicking Refresh Preview at the top of the Output tab. If you’re still not quite certain about your settings and you want to see what the gallery looks like in a web browser, click Preview in Browser in the Output tab to open the gallery in your default browser.
When you’re done changing settings, return to the Create Gallery section of the Output tab and click either Save to Disk or Upload, depending on which you want to do. Photoshop creates the files needed for the gallery, puts them where you’ve specified, and opens the gallery in your web browser.
Sometimes the simplest way to send someone a photo is just to email it, the online equivalent of stuffing a print in an envelope and dropping it in the mail. To add a photo to an email message, use the Add Attachment button or command in your email program and locate the file you want to send. You can’t send mail directly from Photoshop. You don’t need to save photos for email in any special format, as long as you know that your recipient has software that can open the files you’re sending. JPEG is always safe because it will open in any web browser. In any case, make sure that the picture is a reasonable size. You wouldn’t want someone to tie up your Internet connection by sending you a huge file, so don’t do it to someone else.
One of the most common forms of “malware” today is the Trojan horse. These are files that pretend to be one thing—such as a photo emailed from a friend—and are actually something else, such as a program that will damage files on your computer. Therefore, more computer users are rightfully suspicious of unsolicited downloads. If you want your pictures to be seen and enjoyed, send them only to people you know from email accounts that you’re sure are in your recipients’ address books, and explain in the body of the message what the image contains. Otherwise, your art might end up in a spam filter.
The Web isn’t just for computers anymore. That’s right—in case you haven’t noticed, people now use all kinds of devices to get online, including their PDAs and cellphones. That’s why Photoshop’s Save for Web command morphed into Save for Web & Devices back in Photoshop CS3, and it’s why Photoshop now includes a special feature called Device Central.
If you’re creating artwork to be viewed on a phone or other mobile device, most of your workflow will be the same as ever. Here are the two places where it will change:
Creating a new document—. In the New dialog box (choose File, New), you’ll find a new category of image size presets: Mobile & Devices. These presets include common sizes for mobile devices. And if the size you need isn’t included, or if you’re not sure what size to choose, you can click the Device Central button to look up the right size for the device you’re targeting.
Saving the document—. You’ll also find a Device Central button in the Save for Web & Devices dialog; here you’ll use it to preview your image on a variety of simulated cellphones, complete with a choice of lighting conditions (see Figure 24.16).
Device Central includes a list of available devices in the left column. Double-click the one you want to use to see its specs. If you got here from the New dialog, you’ll see a Create button that you can use to create an empty document to the right size. On the other hand, if you started in the Save for Web & Devices dialog, you’ll see an Emulator tab that shows your image on the screen of the selected device. You have to admit, this is very cool.
In this final hour, we looked at putting your work on the Web. We examined what file formats work in today’s web browsers and how you can choose the right formats for your own work. You also learned a few tricks that web designers employ to get the most from their images, such as animation, tiling, and slicing.
So what comes next? You’ve finished your 24th hour, and you know a lot more about Photoshop than you did when you began. That doesn’t mean you know it all, but you now have the tools—your imagination, creativity, and a basic understanding of Photoshop. There’s still plenty out there to learn; I’ve been using Photoshop ever since it first came out, and I’m still learning new tricks and techniques all the time. You can spend years with this program and still not try everything it can do. Just don’t forget to have fun!