Photoshop and the Web


Chapter 6, "Using Adobe ImageReady CS2," covers web graphics extensively, but for getting graphics ready for the Web quickly, the following basic concepts 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 softwareor browsersthat people use to view the Web. A web browser, such as Microsoft Internet Explorer, Netscape Navigator, Firefox, or Apple's Safari, is a window in which you can view the content of the Web. These browsers support various image formats, mainly GIF and JPEG. Other formats are supported through the use of plug-insadd-on software that you can download (usually free)that 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. Most of today's modern browsers come installed with some of these plug-ins as well.

If you've ever surfed the Web, you know that speed is everything. Although DSL and cable modems are becoming more popular, the majority of people who connect to the Internet still use 56K dial-up connections. Many others are also using wireless devices such as PDAs and cellphones to access the Internet. That means that surfing the Web and viewing website 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 balanceyou 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 users will skip to the next site because they have 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 enables designers to make that decision easily by previewing 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 to decide how you want to save your web graphicall before you even save the file.

By the Way

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 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 launches a larger-than-life dialog box that features tools, previews, and palettes of its own (see Figure 5.82). We cover these settings in detail in the ImageReady and Illustrator chapters.

Figure 5.82. The Save for Web dialog box in Photoshop CS2.


Slicing

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

Figure 5.83. 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 cover this subject in detail in the next chapter.

By the Way

On the subject of Web design, Photoshop CS2 contains ImageReady's Animations palette for creating animated files. We cover this functionality in detail in Chapter 6.




Sams Teach Yourself Adobe Creative Suite 2 All in One
Sams Teach Yourself Creative Suite 2 All in One
ISBN: 067232752X
EAN: 2147483647
Year: 2003
Pages: 225
Authors: Mordy Golding

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net