Using Adobe Photoshop CS, Part 1

We will cover Web graphics extensively in Chapter 6, "Using Adobe ImageReady CS," but for getting graphics ready for the Web quickly, the following basic concepts will serve as an introduction to the world of Web graphics.

Save for Web

The World Wide Web, as we know it today, supports several image formats. Actually, it isn't the Web itself, but the software-or browsers-that people use to view the Web. A Web browser, such as Microsoft Internet Explorer, Netscape Navigator, or Apple's Safari, is a window in which we can view the content of the Web. These browsers support various image formats, mainly GIF and JPEG. There are other formats that are supported through the use of plug-ins-add-on software that you can download (usually free)-which add functionality to your browsers. Formats that are supported by plug-ins are PNG, SWF, and SVG-although the latter two are vector-based formats and don't apply to Photoshop.

If you've ever surfed the Web, you know that speed is everything. Although DSL and cable modems are becoming more and more popular, the majority of people who connect to the Internet still use 56K dial-up connections. That means surfing the Web and viewing Web site pages filled with graphics and images could take a long time. A designer's challenge is to design Web graphics that are small in file size, which would allow their pages to load faster. It's always a balance-you don't want a page that's filled only with text, yet you also don't want a page that contains so many images that a user will skip to the next site because he has to wait too long for your page to load.

The image file formats that are supported in Web browsers have many settings for such things as colors and compression, giving designers some degree of control over the final file size of each graphic. There is a direct correlation between the visual quality of a graphic and its file size. You can choose to make a file size smaller at the expense of how good the image looks. Likewise, a better-looking image will result in a larger file size.

Photoshop's Save for Web feature allows designers to make that decision easily by allowing you to preview an image in any of the supported Web formats, along with all the color and compression settings. The Save for Web feature also lets you know what your final file size will be, giving you all the information you need in order to decide how you want to save your Web graphic-all before you even save the file.

---

Note -The Save for Web feature is such an integral feature for Web designers that Adobe has included the entire Save for Web feature inside Illustrator and GoLive as well. We'll cover that specifically when we get to those chapters.

---

When you're ready to save your image for the Web, you choose File, Save for Web, which will launch a larger-than-life dialog box that features tools, previews, and palettes of its own (see Figure 5.85). We'll cover these settings in detail in the ImageReady and Illustrator chapters.

Figure 5.85 The Save for Web dialog in Photoshop CS.

Slicing

In an effort to gain even more control over how images are displayed on the Web, a method calledslicingwas born. By taking a large single image and chopping it up into smaller pieces (called slices), designers found that they could optimize their graphics better (see Figure 5.86).

Figure 5.86 An image with Web slices indicated.

Photoshop has a Slice tool that lets you indicate how to chop up the image, and you can use Save for Web to optimize each slice individually. There are other benefits to slicing images as well, such as indicating rollovers and animation. We'll cover this subject in detail in the next chapter.

Setting Type

Although you might not need text features to color correct your digital photos, you will most likely need them for doing any kind of Web design. In fact, you never really know when you might need a little bit of text. Although you're better off using Illustrator or InDesign for most text needs, there will be plenty of times when it will make sense to add text in Photoshop.

To add text to your image, choose the Type tool and click in your document. You'll get a blinking insertion mark and you can begin typing. Notice that Photoshop automatically creates a new kind of layer for you-a type layer (see Figure 5.87).

---

Tip -You can double-click on the thumbnail of a type layer to select the text quickly and easily.

---

Use the Move tool to position the type layer in your document. You can also double-click the layer in the Layers palette to apply a layer style, just as you can with any normal layer (remember to click anywhere in the layer except on the name of the layer itself).

Figure 5.87 A type layer in the Layers palette.

Styling Text

With the Type tool selected, you'll notice that the Tool Options bar will update to offer text-specific settings such as font, size, justification (left, centered, right), and color. You can also choose from several antialiasing options (see Figure 5.88).

Figure 5.88
Choosing an antialiasing method from the Tool Options bar.

---

Tip -Antialiasing is a method used to make graphics appear smoother onscreen. With small text especially, antialiasing can make some words blurry or unreadable. Various algorithms are available for antialiasing and Photoshop lets you choose from among them to get the best result. As you change algorithms, you'll see a live preview of your text.

---

Choose Window, Character and Window, Paragraph to access even more text controls (see Figure 5.89). The Character palette lets you specify kerning and tracking values (the spaces between letters), as well as leading (pronounced "ledding"), which is the amount of space between each line of text in a paragraph.

Figure 5.89 The Character and Paragraph palettes.

Warping Text

To add cool effects, you can apply warps to text (see Figure 5.90). To do so, select some text and click on the Create Warped Text button in the Tool Options bar (see Figure 5.91) to get the Warp Text dialog. Here you can choose from 15 warp effects, as well as tweak the individual settings of each type of warp (see Figure 5.92).

Figure 5.90
Text with a warp effect applied to it.

Figure 5.91 The Create Warped Text icon in the Tool Options bar.

Figure 5.92 Applying a warp from the Warp Text dialog.

---

Note -Illustrator has identical warp effects but can apply the effects to any kind of art, as opposed to Photoshop, which is limited to warping only text objects.

---