Post on 22-Oct-2021
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