How to Use Photoshop for the Web | 4 | WebReference

How to Use Photoshop for the Web | 4

How to Use Photoshop for the Web

Creating Slices

Slices are not the easiest concept to grasp, but they can save you a lot of file space, after you determine what they are about. Simply put, slices divide an image into smaller files. Each slice is an independent file, containing its own optimization settings, color palettes, URLs, rollover effects, and animation effects. Slices can give you increased image quality when you are working with documents that contain more than one kind of image, or text and images. They can make pages seem to load faster because each slice becomes visible as soon as it's loaded, giving the viewer something to look at while the rest of the image loads. Slices also let you create image maps that do useful things when you click part of an image. They can take you to new pages, show an enlarged view of the slice, or anything else you care to program them to do.

Slices are assembled in an HTML table in the document's HTML file. By default, the document starts with one slice that comprises the entire document. You can then create more slices in the document. Both Photoshop and ImageReady will automatically make additional slices to complete the full table in the HTML file. Note that this means you must choose HTML and Images when saving a sliced image, rather than Images Only, and you'll need to copy the HTML that ImageReady creates into your web page file.

Slices are created by dragging the Slice tool, which looks like a drawing of an X-Acto knife. Select it from the ImageReady toolbox, the Photoshop toolbox, or simply press the K key to activate it. Drag a selection box across the area you are slicing. If you make a slice across the middle of an image, by default, you have defined three slices: one above and one below where you have sliced. Slices that you create are called user-slices. Slices that Photoshop generates are called auto-slices. If you place a slice across the middle of a picture, Photoshop will place auto-slices above and below it. Slices can be vertical as well as horizontal. Subslices are created when you overlap two or more user-slices. Figure 24.17 shows a sliced image.

Preparing Text for the Web

HTML Web standards include a handful of type sizes and fonts, some for headings, some for text, and some for emphasis. Uh-huh. "Bo-ring," to quote the kids. However, you're not necessarily limited to what HTML has to offer. If you want an elaborate title for your page, create it in Photoshop, using filled letters, filters, drop shadows, glows, or whatever other special effects you like. Crop it tightly and save it as either a GIF or JPEG. Figure 24.18 shows a logo created for a small business web page. Compressed, the file is only 6.3KB.

You have the option of converting your file to JPEG or PNG or to GIF. One good thing about text is that it usually, but not always, is applied to a white background. If this is the case with your website, there is no need to go through the trouble of exporting a transparent GIF89a file. Just make sure that your background is white and save it as a plain GIF file.

Emailing Your Pictures

You have all these great pictures, and you want to share them, right? There are several ways to go about this. You can send them as email attachments, just like stuffing a handful of prints into a letter. You can post them on a forum, if you belong to one. You can set up your web gallery on your own website, or you can join a service such as Webshots ( that gives you online storage and lets you share your pictures with others as well as make digital prints and photo gifts.

To add a photo to an email, use the Add Attachment button or command in your regular email program and locate the picture you want to send. You can't send mail directly from Photoshop. The photo needn't be any special format, as long as you know your recipient has software that can open it. JPEG is always safe, because it will open in any web browser.

To post a picture in a forum or on a service such as Webshots, follow their instructions. In any case, make sure that the picture is a reasonable size. You wouldn't want someone to tie up your computer by sending you a huge file, so don't do it to them.

Many 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, and warn them first, in another note, that a picture is coming. Otherwise, your art might end up in a spam filter.

Making Pages Load Faster

The bottom line for making web pages load faster is—you can't. The page will load as fast as the server can send it and the recipient can receive it. Those are both factors beyond your control.

What you can do, though, is make sure that your page is arranged so that there's something to see while the graphic loads. Bring up a Welcome headline first, and then add the background. If there's a graphic that will take some time to load, bring up a block of text before the graphic appears. The load time for the picture will seem much shorter if the person waiting has something else to read or think about.

Keep your images small or put up a thumbnail and link the full-size picture to it, so visitors have the option of waiting to see the big picture. If the content of your picture is important, put a text description of it on the page, too. If you learn HTML, you can use the ALT tag to place an image description in place of the image. (This also helps make your website handicapped-accessible, which is important to do for the millions of visually impaired Web users.)


In this final hour, we looked at putting your work on the Web. We examined what file formats work in most web browsers and how you might best choose the right formats for your own work.

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 is still plenty out there to learn and with which to experiment. I've been using Photoshop ever since it first came out, and I'm still learning new tricks and techniques. You can spend years with this program and still not try everything it can do.

Above all else, have fun!



Q Can I mix the kinds of images I use on a Web page—some JPEGs, some GIFs, a PNG—or will that cause everything to crash?

A There is no reason not to mix image types. Choose the type depending on the content of the image. Realistic photos look best as JPEG or PNG files. Graphics with limited color are most efficiently stored as GIFs.

Q What's the trick for using a picture as a page background?

A Keep it small and apply the picture as a tiled background. If you keep the edges blurry, they blend smoothly, avoiding that floor tile look. Save your file as either a GIF or JPEG with the name background. Your web page creator program should be able to insert it automatically, but if not, use the HTML tag

<body background = “background.gif”> (or .jpg, if appropriate).

Another effect that uses the whole photo once is to make the image nearly transparent so that it looks really toned down. Use it as a nontiled background, or watermark.

Q If I want to put my pictures on the Web, but only for my friends to see, can I protect them?

A There are lots of ways to do this. The easiest is to put them on a hidden page. This is a second page on your site, not linked to the first. Instead it has a separate address, such as

Give your friends the direct URL to this page. No one who doesn't know it's there will be able to reach it. However, "security through obscurity" is never a recommended policy for truly sensitive information or images. If you want to be more secure, you can learn enough JavaScript to password-protect the site.

Look for Sams Teach Yourself JavaScript in 24 Hours, Third Edition. It's a good way to learn JavaScript.


1. What do I have to do to a native Photoshop format file before I can put it on the Web?

    a. Attach a copyright notice.

    b. Save it as a JPEG, GIF, or PNG file.

    c. Get a model release on any recognizable people.

2. HTML stands for

    a. Hypertext Markup Language

    b. Hand-coded Type Meta Language

    c. Has Trouble Making Lines

3. What's the most important thing to remember about Photoshop?

    a. Experiment

    b. Experiment

    c. Experiment

Quiz Answers

    1. b., but a. and c. are good ideas, too.

    2. a. It's the language that defines web pages.

    3. The most important thing is that there's no wrong answer. Keep trying new things, new combinations, and new approaches. Photoshop is a wonderful tool, but, without your creativity and imagination, it's just software.


I have no assignments for you in this chapter—it's time to go forth and create. Most of all, have fun!

Excerpted from Sams Teach Yourself Photoshop CS2 in 24 Hours by Carla Rose. ISBN 0672327554, Copyright © 2005. Used with the permission of Que & Sams Publishing.

Created: March 27, 2003
Revised: January 09, 2005