developer.com - Reference Click here to support our advertisers SOFTWAREFOR SALE BOOKSFOR SALE SEARCH CENTRAL JOB BANK CLASSIFIED ADS DIRECTORIES REFERENCE Online Library Reports TRAINING CENTER JOURNAL NEWS CENTRAL DOWNLOADS DISCUSSIONS CALENDAR ABOUT US Journal: Get the weekly email highlights from the most popular online Journal for developers! Current issue developer.com developerdirect.com htmlgoodies.com javagoodies.com jars.com intranetjournal.com javascripts.com All Categories : Web Graphics To access the contents, click the chapter and section titles. Laura Lemay's Web Workshop GRAPHICS & WEB PAGE DESIGN Imprint: SAMS.Net Author: Jon M. Duff and James L. Mohler Publication Date: Sep-96 ISBN: 1-57521-125-4 Introduction Chapter 1: Making Effective Browser-Independent Graphics Describing Your Design Write an Abstract First Creating an Abstract Put Yourself in the Role of a Novice User Knowing the Functions of Web Graphics Entertain Inform Communicate Persuade Design First, Stylize Later HTML as a Structural Tagging Language HTML Is Not a Page Layout Tool Setting Up a Simple HTML Document Planning an Effective Design Just Like Planning Your Vacation Planning an Initial Design Would You Leave Without a Map? Enhancing Your Design with Great Graphics Next Steps Q&A Chapter 2: Designing an Effective Web Site Put Your Hook on the Splash Page Knowing Where You Are in a Web Site Designing Consistency in Your Web Site Getting Where You Want to Go Knowing How to Leave Use a Diagramming Approach to Web Design Creating a Simple Web Site Structured Versus Unstructured Design A Web Site Is Not a Book Building a Working Shell The Elements of a Functional Shell Building a Web Site Shell Next Steps Q&A Chapter 3: Creating Cool Graphics for the Web Pushing Pixels with Raster Graphics Creating a Cool Web Page We're Not in Vector Land Anymore I Thought PostScript Was the Publishing Standard Life at 72 dpi and 256 Colors Design in Black and White (and Shades of Gray) Creating a Black-and-White Graphic Using Hexadecimal to Design in Color Determining Hexadecimal Color Understanding GIF Format Graphics Answering the JPEG Question Using Anti-Alias to Your Advantage Resizing an Anti-Aliased Figure Becoming an Artist Developing a Good Eye Reading Traditional Design Publications Make a Swipe File of Web Graphics Pizzazz at the Expense of Effectiveness Identifying Sources of Graphics for the Web Copyrights and What's Fair Use Popular Applications Filters You Can't Live Without Protecting Your Original Work Next Steps Q&A Chapter 4: Making Effective Web Graphics Graphic Tips for Nondesigners Making Graphics That Kids Will Enjoy Giving a Web Site That Corporate Look Creating a Corporate Web Page Experiencing the Avant Garde in Web Design Learning Font Secrets for Web Graphics Font Families That Set the Tone Fonts for the Screen Designing a Font-Rich Page Designing an Opening Web Splash Page No One Likes to Scroll The "Must Have" Elements Designing a Splash Page Planning for Inline Graphics Using External Graphics for Impact Creating a Colored Background Making Custom Background Patterns and Tiles Next Steps Q&A Chapter 5: Using Multimedia and Special Effects on the Web Involving the User with Multimedia Graphics Realistic Expectations on the InfoBahn Shockwave Java Audio Elements in Design Embedding Multimedia Elements Using Tables to Format Graphics Creating a Table of Graphics Gather Information with Interactive Forms Creating an Interactive Form Next Steps Q&A Chapter 6: Presenting Effective Web Graphics Chapter 7: Designing Graphical Pages Anyone Can Download Sending Graphics Over the Wire-ZZZZZZ Deciding When to Download Inline Graphics The Importance of Thumbnails Testing Your Page Feeling the Power of a Graphic Browser Seeing How Hardware Affects Web Graphics Calculating Screen Dimensions and Resolution Overcoming Cross-Platform Difficulties Tips for Windows Clients Tips for Macintosh Clients Tips for UNIX Clients Operating System Palette Differences Next Steps Q&A Chapter 8: Creating a Map of Your Web Site Planning the Home Page Creating a Home Page Plan Structuring Your Web Site Understanding the Importance of Level-One Sections Increasing the Detail on Level-Two Pages Adjusting Detail Levels Placing Your Resources on Level Three The Importance of Intrasite Internal Links Creating an Intrasite Link Providing Flexibility with Links to External URLs Next Steps Q&A Chapter 9: Providing Visual Cues to Web Navigation Through Page Design Increasing Readability Through Consistent Page Design Making Quick Work of Color Coding Color Coding a Page Help Direct Your Browsing with Icons Creating Icons Ensuring Consistent Navigation Hardware Next Steps Q&A Chapter 10: Understanding Form and Substance: The Dilemma of Web Style Developing a Genre of Web Design Surfing the Web with the First Wave Designing for the Web's Next Wave Creating a Swipe File of Web Style Next Steps Q&A Chapter 11: How to Avoid the Ten Most Common Web Mistakes Number 10. You Use a New Graphic File for Figures That Have Repeating Elements Number 9. You Assume That Everyone Has a Graphical Browser Number 8. You Always Use a Full 8-Bit, 256-Color Palette Number 7. You Design Web Pages for Your Browser and Your Plug-Ins Number 6. You Use Designs and Colors in Tiles That Make It Difficult to Read Text That Is on Top of the Background Number 5. You Make Your User Wind His Way Back to the Home Page, One Level at a Time Number 4. You Always Load Your Best Images Inline Number 3. Your Graphics Always Have Halos Around Them Number 2. All Your Graphics and Designs Look the Same Number 1. You Design Web Pages for Yourself Next Steps Chapter 12: Using Text in Design Mixing HTML Text and Your Graphics Creating a Mixed Page Designing with HTML Fonts Playing with Character Graphics Formatting Inline Graphics Coding an Inline Graphic Deciding Heading Options Avoiding the Boredom of Flat Text Making 3D Text Making Engraved Text Making Embossed Text Making Metallic Text Making Soft Rounded Text Making Projected Text Making Transparent Panel Text Making That Popular Fuzzy Drop Shadow Next Steps Q&A Chapter 13: Designing Buttons That Work Understanding Light, Shade, and Shadow Making Square Buttons Making Round Buttons Making Soft Buttons Making Button Bars Making Irregular Clickable Objects Making the Button Hot Next Steps Q&A Chapter 14: Making Image Maps and HTML Frames Deciding When You Need an Image Map Describing Areas of Your Page Writing HTML Code That Recognizes Your Map Making an Image Map Using Frames to Organize Your Page Next Steps Q&A Chapter 15: Designing Backgrounds That Make Sense Promoting the Cardinal Rule of Backgrounds Making Panels Making Rules Making Bumpy Textures Making Wood Grain Making Metal Tiling a Graphic Making a Montage Graphic Next Steps Q&A Chapter 16: Utilizing Inline Graphics to Your Advantage Planning Ahead to Fit the Page Anticipating the Need for Interlacing GIFs Making an Interlaced GIF Understanding When to Size the Graphic Resizing a Graphic Answering the Great Question of Transparency Making a Transparent GIF Progressive JPEG Files Thumbnails to External Graphics Making a Thumbnail of Your Graphic Expecting Helper Applications? Next Steps Q&A Chapter 17: A Portfolio of Graphics from the Web Backgrounds Montage Graphics Buttons Button Bars Navigation Graphics Logos and Icons Eye Catchers Rules Jump Lists Page Layouts with Text and Graphics Using Tables Chapter 18: Delivering Animations at Your Web Site Paying the High Price of Gee-Whiz Spinning Logos Animation Versus Video Understanding the Four Methods Netscape Animation-Client Pull Netscape Animation-Server Push Netscape Animation-Plug-In Streaming Helper Animation-Externally Linked Files Understanding Digital Formats Video for Windows-AVI Files Apple QuickTime-MOV Files Motion Picture Experts Group-MPEG Files Using Programs That Create Animations Using Programs That Create Digital Movies Designing a Digital Video for the Web Getting Ready for a Virtual World of Graphics-VRML Next Steps Q&A Chapter 19: Understanding Advanced Graphic File Types Linking to Better JPEG Graphics Publishing TIFF Resources for Your Clients Creating a TIFF Document Delivering Technical Artwork in EPS Format on the Web Creating an EPS Document Making Documents Portable with Adobe's PDF Creating a Portable Document Next Steps Q&A Chapter 20: Converting Graphics for Use on the Web Saving Original File Format Richness Becoming a Cross-Platform Whiz GIF Graphics Converting to GIF Format JPEG Graphics Converting to JPEG Format Vector Graphics Converting Vector Graphics Fonts Converting Fonts to Outlines Next Steps Q&A Appendix A: Directory of Grphic Resources on the Web Graphics Compression Frequently Asked Questions (FAQs) File Formats FAQ Graphics FAQ JPEG FAQ Image Conversion FAQ Technical Illustration FAQ Tips and Tricks FAQ Helper Applications Indexes HTML HTML 2.0 Specifications HTML 3.0 Specifications HTML Information Multimedia Multimedia FAQ Plug-Ins Indexes Acrobat (Amber) MIDI Motion Picture Experts Group (MPEG) QuickTime Shockwave Sound Virtual Reality Modeling Language (VRML) Video AVI MPEG QuickTime Appendix B: Textures, Backgrounds, and Buttons Textures Backgrounds Buttons Credits Copyright © 1996 by Sams.net Publishing FIRST EDITION All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photocopying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Neither is any liability assumed for damages resulting from the use of the information contained herein. For information, address Sams.net Publishing, 201 W. 103rd St., Indianapolis, IN 46290. International Standard Book Number: 1-57521-125-4 HTML conversion by :     M/s. LeafWriters (India) Pvt. Ltd.     Website : http://leaf.stpn.soft.net     e-mail : [e-mail] President, Sams Publishing: Richard K. Swadley Publishing Team Leader: Dean Miller Managing Editor: Cindy Morrow Director of Marketing: John Pierce Assistant Marketing Managers: Kristina Perry, Rachel Wolfe Acquisitions Editor Cari Skaggs Development Editor Brian-Kent Proffitt Software Development Specialist Cari Skaggs Production Editors Colleen Williams, Kitty Wilson IndexersTim Griffin, John Hulse Technical Reviewer Sue Charlesworth Editorial Coordinator Bill Whitmer Technical Edit Coordinator Lynette Quinn Editorial Assistants Carol Ackerman, Andi Richter, Rhonda Tinch-Mize Cover Designer Alyssa Yesh Book Designer Alyssa YeshCopy Writer Peter Fuller Production Team Supervisor Brad Chinn ProductionMichael Dietsch, Michael Henry, Louisa Klucznik, Paula Lowell, Ian Smith, Laura A. Smith There are many people to thank in a project this large. The editors at Sams.net-Cari Skaggs and Brian Proffitt-were super supportive of our efforts. Can't wait to work for them again! Thanks also goes to Purdue University and its School of Technology for encouraging teaching technical graphics as it's practiced this month (constant curriculum change is a necessity) in industry and for providing the resources to get the job done. Before acknowledging individual contributors, we must thank our wives and families for putting up with odd hours and frazzled nerves for the duration of this project. Special thanks go to The companies and individuals who have taken the plunge, created a Web presence, and whose examples appear in these pages. Our students who made us scratch our heads with questions we couldn't answer and who provided some of the resources on the CD-ROM. John Timble and the people at New Order Media for encouragement and examples of interactive interfaces. A.C. Capehart of Kesmai for his contributions to Chapter 11, "How to Avoid the Ten Most Common Web Mistakes." Buster Dunsmore of the Computer Science Department at Purdue University for sharing his knowledge about what makes an effective Web publication. Chuck McKenna of Precision Graphics for his critiques and insights. About the Authors Jon M. Duff Jon M. Duff is Professor of Technical Graphics at Purdue University. He is the author of over a dozen books on various graphics topics and serves as a consultant to government and industry clients such as Westinghouse and the United States Navy. He operates the WestHighland Press, where he develops a full range of traditional and electronic publications. Jon can be reached at [e-mail]. James L. Mohler James L. Mohler is Assistant Professor of Technical Graphics at Purdue University. He has produced interactive titles for national and international publishers and provides technical training and media services to industry through Sunrise Productions. James can be reached at [e-mail]. Technical Graphics at Purdue University prepares graphics professionals for electronic publication, illustration, modeling and animation, and engineering documentation specialties. You can visit the department at http://www.tech.purdue.edu/tg/main.html. Tell Us What You Think! As a reader, you are the most important critic and commentator of our books. We value your opinion and want to know what we're doing right, what we could do better, what areas you'd like to see us publish in, and any other words of wisdom you're willing to pass our way. You can help us make strong books that meet your needs and give you the computer guidance you require. Do you have access to CompuServe or the World Wide Web? Then check out our CompuServe forum by typing GO SAMS at any prompt. If you prefer the World Wide Web, check out our site at http://www.mcp.com. Note If you have a technical question about this book, call the technical support line at 800-571-5840, ext. 3668. As the team leader of the group that created this book, I welcome your comments. You can fax, e-mail, or write me directly to let me know what you did or didn't like about this book-as well as what we can do to make our books stronger. Here's the information: Fax:[phone] E-mail:[e-mail] Mail:Dean Miller Comments Department Sams Publishing 201 W, 103rd Street Indianapolis, IN46290 Introduction If you're the kind of person I think you are, you've been hanging ten toes off the edge of your Web surfboard for some time now. You've been dazzled by the diversity of information-intellectual and practical, visual and auditory, technical and entertaining-all available in this virtual information space called the World Wide Web. Or, you may be new to the Web and all its possibilities. After digging deep into funds that could have (and probably should have) been used for more mundane purposes like food, shelter, or retirement, you matched computer, software, and a service provider and now have access to the largest combination of flea market and junk mail consortium ever assembled. At some point you become a discriminating Web browser. You know what you like, and you vote with your mouse. You start bookmark files of Web site uniform resource locators (URLs) that are so interesting, so informative, and so visually stimulating that you return to them regularly. This is sort of like me rereading my favorite John D. MacDonald novel or my wife popping Pretty Woman in the VCR for the fiftieth time. But as you spend more time on the Web, you also learn what you don't like, what irritates you, and what causes you to decide in ten seconds…whoa, I'm outta here! As you consider the topics covered in this book, you may find yourself in a position where you know Hypertext Markup Language (HTML), you understand your browser, you mentally have a good picture of the World Wide Web landscape, but the graphics you see both intrigue and confuse you. If so, this book is for you. Who Should Read This Book The Web without graphics is like pretzels without salt or Madonna without controversy. It's not that you haven't been exposed to graphics over the years; it has been most intense since your telephone bill's Internet charges began to approach your mortgage payment. Unless you are a designer by training or study, you are much like a person who has been exposed to food for most of your life but still know next to nothing about food, biochemistry, or nutrition. Your idea of nutrition may be Spam on Wonderspun with Hawaiian Punch. A power lunch is a Snickers bar and a Diet Coke. Just being exposed to food doesn't give you food knowledge. Just being exposed to graphics doesn't give you graphics knowledge. This book takes your love of Spam and shows you how to fix lean, healthy, appealing graphical meals that you'll be proud to show your friends. This book is directed to Anyone who has an interest in how graphic images are used in electronic publications. Much of what is discussed in this book is applicable to multimedia, portable documents, and traditional page and publication layout and design. Casual authors of Web materials. You want to try your hand at making your own Web site because, gee, the technology is just so darned interesting. Serious Webmasters, mongers, meisters, and wireheads who know they're visually challenged, they but also realize that great graphics are an integral part of great Web pages. Managers who have to review and evaluate the effectiveness of Web graphics. Artists and designers who create resources for Web publishing. Although you probably don't need to be a Webmaster yourself, understanding the peculiarities of Web graphics will make you a more valuable member of the Web publishing team. What This Book Contains This book isn't a tutorial. Instead, it is a resource of visual examples you can use for inspiration. It's written so that you can jump into whichever topics are of immediate interest, or spend a little more time in dialogue with the authors. You'll find many of the topics presented as tasks-instructions you can follow to gain a greater understanding of the role graphics play in effective Web pages. In Part I, "Fast Track to Web Site Design," you get a quick overview of the issues that will concern you when making Web graphics. You'll learn a technique for analyzing Web function, the relationship of graphic images and HTML code, and how good design enhances communication. You'll be bombarded with examples and techniques. Finally, you'll be able to review the examples in Chapter 6, "Presenting Effective Web Graphics," and learn why they work. Part II, "Survival Skills for Web Design," presents much of the technical information found in this book. This section shows techniques for planning the structure of your Web site and shows how to enhance intrasite navigation. Survival skills are presented in Part III, "Survival Guides for Web Graphics." The chapters in this section should answer your "how did they do that?" questions. If you ever wanted to make your own graphics, this is your ticket. If you find yourself having to hire artists to work on a team, these chapters give you portfolio-evaluation ammunition. Part IV, "Additional Graphic Topics," presents the high gloss of Web graphics. You'll want animation-both 2D and 3D, movies, and high resolution images. You know virtual graphic worlds are just over the horizon. And you know that there is no way you can create all these yourself, so you need to know what resources are available. Tools to assist you in creating Web pages and graphics on the enclosed CD-ROM. These tools include software utilities that you can use right away to make your job easier. Also included are files of graphic elements that can be used directly or as examples for your own inspirations. What You Need to Make Effective Graphics Software and hardware people would like you to think that you need to constantly upgrade to the latest and greatest. Of course, their survival is based on convincing you that you can't live without upgrading to version 2.1.3 or to that extra 50MHz or 16MB. Who wants to be left behind? Here's the most important point that will be made in this book: All the really important and significant activities concerning a Web site occur off the computer. By this I mean that without the planning, analysis, and evaluation; without effective graphics and intelligent use of typography; and without pointed and cogent writing, you're simply playing around. What equipment do you need to make effective Web graphics? Not much! I guarantee that exciting, effective, award-winning Web pages can be created on a 386/25 computer with Word 3 and Photoshop 2. You can spend tens of thousands of dollars and still produce ugly pages that don't communicate well and leave your users lost in a link with no idea where they are or how they can get back. There is no substitute for talent. A candidate to become an effective Web designer will probably have most of the following traits: First, you need an interest in graphics. That isn't really hard. You drew, painted, and scribbled in kindergarten, and here you are, years later, wanting to make graphics again. You need to develop a good eye. You need to be able to recognize effective colors, good page design, appropriate fonts, and graphic elements with both impact and good communication. If you're going to be making graphics yourself, you must become adept at some raster imaging application. For me, it's Photoshop. For you, it might be Fractal Painter or any of a dozen other programs. Vector graphics will, and are, finding their way into Web sites via PICT (QuickDraw) and WMF plug-ins. Still, raster formats will continue to be the Web's mainstay because they are, for the most part, platform and operating system independent. Most of all, you need to bring flexibility and a keen interest in learning. You'll never know everything about the Web or graphics. All you can hope is to know more today than you did yesterday. The Changing Landscape of the World Wide Web As authors, we have made every attempt to provide you with the most current examples from the Web. However, the landscape of the Web changes daily and in the several months between original writing, editing, and production there have been, as you might expect, changes in sites and locations. In Chapter 17, "A Portfolio of Graphics from the Web," you'll find a discussion of the reasons why you might not be able to find a particular site that's referenced within these pages. Consider the examples we've included as a starting point for your own graphical adventures on the World Wide Web. You are about to enter an exciting and challenging field where change is an integral part of everyday life. This book should serve you well in becoming an effective Web artist and designer or as a better user and consumer of Web graphics. But more than that, its instructions, suggestions, and examples should change the very way that you look at Web publication. If we have done our job well, this book will rest, dog-eared and tattered, beside your computer and not on a book shelf. And now, sit back, relax, enjoy, and get graphical!
Use of this site is subject to certain Terms & Conditions. Copyright (c) 1996-1998 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read the Acceptable Usage Statement. Contact [e-mail] with questions or comments. Copyright 1998 Macmillan Computer Publishing. All rights reserved. ÿ