PHOTOSHOP FOR THE W E B

Mikkel Aaland

O'REILLY" Cambridge • Köln • Paris • Sebastopol • Tokyo

CONTENTS

sface

MAKING PHOTOSHOP WEB-FRIENDLY

Stop wasting bytes

Other web-friendly preferences

Creating a browser-safe swatch

Using Actions for web production

Calibrating your monitor

Take the time

IMPROVING PHOTOS FOR THE W E B

Every photo requires individual attention

Removing dust and other artifacts

Sharpening a blurred photo

Getting rid of red-eye

Adjusting contrast and increasing dynamic range

Getting the color right

Resizing

Cropping your images

Getting better video grabs

Improving digital camera photos

Moving ahead

ix

1 1

5

7

8

8

11

13 16

18

20

21

21

25

27

27

28

30

33

MAKING GREAT GIFS

GIF or JPEG?

Indexing your image

Using the Adaptive palette

Using browser-safe colors

Getting better tiled backgrounds

A little more work

CREATING GIFS FROM SCRATCH

From RGB to indexed color

Controlling anti-aliasing with custom brushes

Working in Indexed Color mode

Creating an illusion of translucency

Hijacking a color palette

Creating your own browser-safe colors

On to transparency

SPECIAL EFFECTS WITH TRANSPARENT GIFS

The color method: quick and easy

Working with masks

The dreaded halo syndrome

Transparency direct from layers

A transparent look without transparent colors

Familiarity counts

JPEG: ALL THE COLOR Y O U W A N T

Compression versus quality

Saving JPEG files

Everything dithers

Optimizing for compression

Making better grayscale images

Converting GIF to JPEG

Premium JPEGs: a case study

Pushing the envelope

Contents vii

CREATING BACKGROUND TILES

Working with tiling strips

Creating patterns with square tiles

Compressing backgrounds with JPEG

Grabbing backgrounds

Remembering the balance

PHOTOSHOP W E B TYPE

Making readable type

Using layers to organize type

A simple way to make a neon effect

Pumping up your type with graphics

Graduating colors with clipped overlays

Going that extra mile

Stroking and adding texture to type

The inherent beauty of type

Making a difference

CREATING NAVIGATIONAL GRAPHICS

Creating photo bubbles

Creating beveled boxes with the Gradient tool

Painting beveled buttons

Embossing and debossing type

Bullet balls with light effects

Creating flashy round buttons

Creating navigational triangles

Using found objects

Creating an interactive navigational bar

Instructions in layers

The personal touch

IMPORTING VECTORS INTO PHOTOSHOP

Importing vector files

Avoiding color shifts

Two are better than one

97 99

105

110

113

114

115 115

117

117

119

120

123

125

128

130

131 131

134

136

137

138

139

140

141

144

146

146

147 147

154

158

VIII Contents

LAYING O U T PAGES IN PHOTOSHOP

Painting design on a web page

Redesigning with layers and grids

Animating your graphics with Actions

Using guides to design and crop

Keeping boundaries with templates

Working within the "live" area

Coding layout information in a layer

Unintended uses

THE PNG FORMAT

Creating PNG files in Photoshop 4.0

Creating PNG transparency masks

Making PNG graphics look the same on all systems

THIRD-PARTY SOFTWARE

GIF creation

JPEG plug-ins

Browser-safe color palettes

Web-friendly Actions

Kai's Power Tools

Hybrid color makers

Kodak Photo CD acquire module

Vector to bitmap

Debabelizer

Resource fork stripper

CONTRIBUTOR NOTES

159 161

164

166

168

170

171

173

174

175 175

176

177

179 179

181

181

183

183

184

185

185

186

187

189

Index 193