Words: Lynda Weinman Design: Uli Karp

Transcription

1 Words: Lynda Weinman Design: Uli Karp

2 Designing Web Graphics.3 Table of Contents Introduction xxiii wit Getting Started Lynda's Career Counseling 2 Training 3 Teach Yourself 4 Improve Your General Design Skills 4 What Skills Are Important! 4 Web Design Skills 4 First Career Steps 5 The Importance of a Portfolio 5 Knowing What to Charge 6 How to Find Jobs in Web Design 7 Pricing Resources 7 Use Search Engines 8 Don't Believe Everything 9 Hardware Choices 10 Which Flavor: Macintosh or Windows? 10 Macs Versus PCs 10 Some Mac Advantages I I Some PC Advantages I 1 Which Platform Is Best! I I System Requirements 12 Shop for Discounts 14 Software 14 Imaging Programs 15 16

3 Designing Web Graphics.3 2. TML Editors 17 What Is HMTL? 18 HTML in a Graphics Book? 18 Why Is HTML So Troublesome for Design? 19 Should You Learn HTML? 20 How to Learn HTML 21 Online HTML Reference 22 Important HTML Terms 22 What Does HTML Look Like? 23 HTML Editors 24 Try Before You Buy 25 HTM Editing Features 25 Browser Feature Comparison Chart St rategy 29 First Steps 30 Storyboarding 32 Case Study: From Storyboard to Production 33 Flowcharting 34 Navigation Approaches 35 More Navigation Approaches 36 Site Structure 37 Recommended Reading 38 Brainstorming List 38 Metaphors 38 Metaphors: Help or Hindrance? Uf eb Authoring Environments 41 Browser Differences 42 Resources for Tips on Browser and HTML Differences 43 Guidelines for Compatibility 44

4 Designing Web Graphics.3 The Dreaded AOL Browser 45 Cross-Platform Color Calibration Issues 46 Gamma Differences 47 Average Factory Settings 47 Understanding Value and Contrast 48 High Resolution Versus Low Resolution 49 Setting Photoshop Preferences 50 Bit Depth 51 Monitor Bit Depth 52 How to Change Your Monitor's Bit Depth 53 Type Differences 54 Monitor Size Considerations 55 WebTV 56 WebTV Supports 57 Unsupported HTML Tags 57 WebTV Design Tips 58 Comparing WebTV to the Net Web File Formats 61 Bitmap or Vector 62 Lossless or Lossy 64 GIF Pronunciation 64 GIF Compression 65 Interlaced GIFs 66 Transparent GIFs 67 Animated GIFs 68 JPEG 69 Progressive JPEGs Versus Standard JPEGs 71 PNG 72 Gamma Correction 73 Alpha Channel Transparency 73

5 Designing Web Graphics.3 PNG Resources 73 Digital Watermarks 74 MNG ow-Bandwith Graphics 77 File Size and Downloading Speed 78 There's More to Downloading Speed Than Small Images 78 What Size Your File Really Is 79 Photoshop Icons Take Space 79 File Size Reporting in ImageReady and Fireworks 80 Evaluating the Style of Your Image 81 Saving Photographs as GIFs None Dither Method 82 Saving Photographs as JPEGs 82 Saving Photographs as GIFs Dither Method 83 Saving Graphics as GIFs None Dither Method 84 Saving Graphics as JPEGs 84 Saving Graphics as GIFs Dither Method 85 Making Small JPEGs 86 Older Browser Concerns 86 JPEG Examples 87 Photoshop Plug-Ins for Making Small JPEGs 88 Don't JPEG a JPEG! 88 Making Small GIFs 89 Bit Depth Affects Size 90 Anti-Aliasing Versus Aliasing 91 Aliased Artwork 92 GIFs for Line Art-Based Imagery 93 GIF Color Palettes 93 Dithering and Banding 94 Dare to Dither 96 Four Rules of GIF Compression 97 Reducing Colors in GIF Files Using Photoshop 98

6 Designing Web Graphics.3 Reducing Colors in ImageReady 99 Auto Setting in ImageReady 99 Reducing Colors in Fireworks 100 Reducing Colors in Paint Shop Pro 101 The Windows 16 Palette 101 Hybrid Images 102 Photoshop Plug-Ins for GIF Optimization 103 Reducing File Size Online: GIFWizard 104 Animated GIF Issues 105 Making Small PNG Files 106 Batch Processing 107 Photoshop Actions 107 Photoshop and ImageReady's Batch Processing 108 ImageReady's Droplets 109 Firework's Batch Processing I 10 DeBabelizer's Batch Processing Image Optimization Resources I I I I I I I 12 7 Color Cal ibration Issues 113 RGB Versus CMYK 114 RGB and ICC Profiles 115 What Is srgb? 115 What Is an ICC Color Profile? I 17 My Thoughts About ICC and srgb 118 Helpful URLs 118 More Gamma Issues I 19 srgb in Photoshop How to Turn Off srgb in Web Sites That Need Accurate Color B rowser-safe Color 123 What Is the Browser-Safe Palette? I 24 Browser-Safe Color Charts Organized by Value 126

7 De Browser-Safe Color Charts Organized by Hue Why Does the Browser-Safe Palette Exist? Do Browser-Safe Colors Really Matter? When to Use the Browser-Safe Color Palette Hexadecimal-Based Colors Non-Safe Colors Shift! Illustration-Based Artwork Photograph-Based Artwork How to Use Browser-Safe Colors Browser-Safe Hex Color Picking Other Conversion Methods Hex Color Aides Pantone's Browser-Safe Solution CMYK Is Not Browser Safe Browser-Safe Color Picking What Is a CLUT and What Do You Do with One? How to Load a Browser-Safe Swatch Palette into Photoshop How to Load a Browser-Safe Palette into ImageReady How to Load a Browser-Safe Palette into Fireworks How to Ensure That Your GIF Artwork Stays Browser Safe Safe GIF Files in Photoshop Safe GIF Files in ImageReady Safe GIF Files in Fireworks Vector-Based Software: Illustrator and FreeHand Browser-Safe Colors in Illustrator 8.0 How to Work with Illustrator 8.0 Swatches Illustrator 7.0 and 8.0 CMYK Problem Working with FreeHand 8.0 JPEG Artwork Cannot Retain Browser-Safe Colors Hybrid Image Challenges Hybrid Image as GIF in Photoshop Hybrid Image as GIF in Fireworks Hybrid Image as GIF in ImageReady Non-Safe Images with Solid Colors

8 Col or Aesthetics Color Vocabulary Terms Choosing Color Themes Color Relationship Terms Applying Color Relationships to Web Design Color Relationship Tools Coloring Web Graphics.2 Color Harmony Photoshop Plug-In Readability Color Gallery IlCol or Default Colors Color Attributes HTML Tags I The BODY Tag Link Colors Using Color Names Instead of Hex Color Names Are Rarely Browser Safe Color Attribute in Netscape The FONT Tag The TABLE Tag I Linking Basics Identifying Links Linked Images Turning Off Image Borders Importance ofwidth and Height Shrinking and Enlarging Bitmaps Visual Effects with WIDTH and HEIGHT Importance of ALT American Disabilities Act Thumbnails and Large Image ing web graphics

9 Designing Web Graphics.J Linking to Other Media 190 Sound and Movie File Embedding 190 File Types and HTML 190 Aesthetic Cues for Linked Graphic Background Tiles 193 Tiling Backgrounds 194 Determining Tiled Pattern Sizes 195 Full-Screen Body Backgrounds 196 File Formats for Patterned Tiles 198 Seams or No Seams,That Is the Question 199 Seams 199 No Seams, the Photoshop/ImageReady Way 200 Seamless Tiles in ImageReady 200 Seamless Tiles in Photoshop 201 Directional Tiles 202 Aesthetics of Backgrounds JLwTra nsparent Artwork 205 What Is Transparency? 206 Faking Transparency 207 Masking 207 Trickery 207 Browser Preferences 208 There's No Faking Patterned Tiles 208 GIF Transparency 209 Pro and Anti-Aliasing 210 Glows, Soft Edges, and Drop Shadows with GIF Transparency 21 I Tools and Techniques for GIF Transparency 212 GIF Transparency in ImageReady 212 GIF Transparency in Fireworks 214 GIF Transparency in Photoshop What Is GIF89a? 215

10 PNG Transparency X Rules, Buttons, 8 Bullets Horizontal Rules Horizontal Rules, the HTML Way Fancier Horizontal Rule Tags Horizontal Rules and Background Tiles Horizontal Rules the Do-It-Yourself Way Using Photoshop 5.0 to Create Custom Rule Art Vertical Rules Clip Art Rules,Too Bullets HTML Bulleted Lists Creating Ordered and Definition Lists Organized Lists Creating Custom-Made Bullets Creating Custom Bullet Art Buttons Using Photoshop's Layer Effect Settings Button ClipArt JL mogemops Client-Side and Server-Side Imagemaps Client-Side Imagemap Server-Side Imagemap Combining Server- and Client-Side Imagemaps Importance of the ALT Tag Importance of Width and Height Attributes Do You Really Need an Imagemap? What's a Comment? Creating an Imagemap with Fireworks Creating an Imagemap with ImageReady Other Imagemap Resources

11 Designing Web Graphics.3 1X, Jm%Jn eb Typography 249 Glossary of Key Typographic Terms 250 Glossary of Elements Not Possible with HTML 25 I Type I0I 252 Microsoft Typography 252 Aesthetic Considerations 253 Printing Web Pages 253 HTML-Based Typography 254 HTML Font Choices 255 FONT FACE Tag 256 Basic Fonts?!?? Verdana and Georgia 256 Font Size Differences Between Macs and PCs 257 Graphics-Based Typography 258 Aliasing or Anti-Aliasing 258 Using Fireworks for Type Design 25? Great Resources for Online Fonts 260 Writing HTML to Place Text Graphics 261 What About Font Embedding? 262 TrueDoc 262 TrueType Embedding and OpenType 263 Security Measures 264 Type Designers Against Embedding 265 What About PDF? 266 What About Flash? Alignment 6 Tables 269 How Big Is a Web Page? 270 Using HTML for Alignment 271 Text Alignment Tags and Attributes 272 Leading with HTML 273 Image Alignment Tags 274 Horizontal and Vertical Space Tags 276 Width and Height Attributes 276 Alternatives to HTML Using Artwork 277

12 uesiiyiiiity new uruumvs, J WIDTH and HEIGHT Attributes for Spacers 277 Tables for Alignment 278 Data Tables 278 HTML Table Tags 279 Graphic Tables for Page Layout 282 Percentages Versus Pixels 282 Percentage-Based Tables 282 Pixel-Based Tables 283 Terminate Your Tables! 284 Indents Using Tables 285 WYSIWYG Tables 286 Imaging Software Tables rames 289 What Are Frames? 290 Frames Pros and Cons 291 Frames Basics 292 Learning Frames 293 Code for a Frameset 293 Code for Increasing Border Size 293 Code for Zero Border 294 Code for Clipping the Content 294 Code for Relative Positioning 294 Code for Nested Frames 295 Target Practice 296 Code Inside the Container HTML 296 Code for Using Your Frame as a Target 297 Code for Replacing the Frameset 297 Target Tags for Frames 297 Fun with Frames 298 Bleeding Borders Simplified 302 Code for a Frameset Using Solid Background Colors 302 No Frames!

13 Designing Web Graphics.J Cascading Style Sheets 305 What Is a Style Sheet! 306 Anatomy of a Style Sheet 307 Cascading Defined 307 Hiding Styles from Older Browsers 308 External, Internal, and Inline 309 Type and Measurements 310 Working with Typography 3 I I Selectors 312 ID Versus CLASS 312 Absolute Positioning 313 DIV and Absolute Positioning 3 14 Layering Text and Images 315 Code for Layering Text and Image 3 16 Code Deconstruction 318 WYSIWYG Editors Scanning for the Web 321 What Resolution! 322 Dictionary of Scanning Terms 323 Scanning Equipment 323 Digital Cameras and DV 324 Photo CDs Instead of Scans 325 Resizing Images in Photoshop Do Not Resize in Indexed Color 327 Dot Screen Patterns and Moires 328 Image Processing Techniques 330 Levels 330 Hue/Saturation/Brightness IF Animation 333 The Aesthetics of Animation 334 Animated GIF Format 335

14 Designing Web Graphics.3 Animated GIF Tech Notes 335 Animated GIF Resources 335 Glossary of GIF Animation Terms 336 How to Create Animation Content 338 Common Animation Terminology 339 Tools and Techniques for Frame-by-Frame Animation 340 Frame Animation in ImageReady 340 Frame Animation in Fireworks 341 Motion Graphics in ImageReady 342 Using Instances andtweening for Animation in Fireworks 343 Other GIF Animation Tools of Note j jg{ avascript: Rollovers 8 More 347 The Short History of JavaScript 348 Learning JavaScript 349 Rollovers 350 Creating Rollover Artwork 350 Replacement Example 351 Highlight Example 351 Multiple Example 351 Photoshop Layers for Rollovers 352 Cutting the Rollovers Apart 352 ImageReady for Slicing and Optimization 353 Simple Rollover in Fireworks 354 Fireworks Rollover Code 355 Rollovers in Fireworks 356 Rollover in Tables Using Fireworks 357 Rollovers in Dreamweaver Dreamweaver's Replacement Rollovers 358 Dreamweaver's Rollover Code 359 Dreamweaver's Pointing Rollover 360 Dreamweaver's Pointing Rollover Code 361 Dreamweaver's Multiple Rollover 362 Dreamweaver's Multiple Rollover Code 364

15 Designing Web Graphics.! Backwards Compatibility Browser Detection Browser Detection Code Launching Another Window Code to Launch Another Window Dynamic DHTML Overview HTML Cascading Style Sheets JavaScript Plug-Ins DOM Cool Things with DHTML Appropriate Uses of DHTML Layers Animation Drag and Drop DHTMLzone 2^ cktime 3.0 QuickTime Basics Web Advancements QuickTime 3.0 Web Features "Poster" Movies HREF, Sprite, and Text Tracks Multiple Data Rate Samples Streaming (Sort Of) Image Format Support DV Camcorder Support QTVR Support Common QuickTime Commands Cons of QuickTime Digital Video Terms Glossary

16 R U B ^ ^ ^» Designing Web Graphics.3 ZilasK 8 Shockwave 395 Plug-In Reliance 396 Sending Visitors to Plug-In Pages 396 Flash File Format 397 Learning Flash 398 Flash Resources 398 Drawing in Flash 398 Scenes and Symbols 399 Making Symbols 399 Managing Symbols and Scenes 399 Timeline and Keyframes 400 Rollover Buttons 400 Add a Sound to the Button 401 Interactivity in Flash 402 Flash Web Integration 403 HTML Frames with SWF 404 Shockwave Content 405 Saving Shockwave Files 405 Intro to Director Director Interface 406 New Web Features 408 Aftershock for Director and Flash / HTML for Visual Designers 411 HTML Naming Protocols 412 Common File Names 412 File Extensions 412 Relative Versus Absolute Path Names 413 Troubleshooting 414 Checking Your Pages 414 Uploading Your Pages 415 Common HTML Tags 416 Head Tags 416

17 three Designing Web GrapKics.5 Body Tags Alignment Tags and Attributes for Text Text Tags Horizontal Rule Tags Linking Tags and Attributes Alignment Tags and Attributes for Images Image Tags List Tags and Attributes Comments Tag Table Tags Table Tags and Attributes Frames Tags and Attributes JL Mi eb Graphics Design Conferences Digital Art Programs Helpful URLs Web Site Design Galleries Magazines Resources *i ossär/ 425 /»nde: 431