Graphics and Web Design Easy to Learn and Easy to Apply to Your Own Work
Total Page：16
File Type：pdf, Size：1020Kb
These are just some of the tasks you complete through the Graphics and Web Page Design workshop: Survival Skills Fast Track to Web Site Design for Web Graphics Setting Up a Simple HTML Document 16 Planning an Initial Design 19 Creating a Mixed Page 186 Designing Consistency in Your Web Site 28 Coding an Inline Graphic 192 Creating a Cool Web Page 45 Making 3D Text 194 Creating a Black-and-White Graphic 51 Making Engraved Text 196 Determining Hexadecimal Color 56 Making Embossed Text 197 Resizing an Anti-Aliased Figure 59 Making Metallic Text 198 Designing a Font-Rich Page 80 Making Soft Rounded Text 199 Designing a Splash Page 82 Making Projected Text 200 Creating a Colored Background 84 Making Transparent Panel Text 201 Making Custom Background Patterns Making That Popular Fuzzy Drop and Tiles 85 Shadow 202 Embedding Multimedia Elements 94 Making Square Buttons 212 Creating an Interactive Form 97 Making Round Buttons 216 Making Soft Buttons 220 Survival Skills Making Button Bars 221 for Web Design Making Irregular Clickable Objects 224 Making an Image Map 237 Calculating Screen Dimensions Making Panels 245 and Resolution 120 Making Rules 246 Providing Flexibility with Links Making Bumpy Textures 248 to External URLs 141 Making Wood Grain 250 Color Coding a Page 151 Making Metal 251 Creating Icons 152 Tiling a Graphic 251 Creating a Swipe File of Web Style 162 Making a Montage Graphic 253 Making an Interlaced GIF 260 Additional Graphic Topics Resizing a Graphic 261 Designing a Digital Video for the Web 305 Making a Transparent GIF 265 Creating a TIFF Document 314 Making a Thumbnail of Your Graphic 267 Creating an EPS Document 315 Creating a Portable Document 317 i LAURA LEMAY’S WEB WORKSHOP GRAPHICS & WEB PAGE DESIGN ii LAURA LEMAY’S WEB WORKSHOP • Graphics and Web Page Design iii LAURA LEMAY’S WEB WORKSHOP GRAPHICS & WEB PAGE DESIGN Jon M. Duff and James L. Mohler 201 West 103rd Street Indianapolis, Indiana 46290 iv LAURA LEMAY’S WEB WORKSHOP • Graphics and Web Page Design v Foreword In the early days of the World Wide Web, one of the biggest discussions that went on nearly anywhere anyone talked about the Web was the role of content versus presentation in Web page design. Content, of course, was what you were actually putting on the page, and presentation was how that page looked when it was viewed in a browser. At the time, content was by far the more important of the two, simply because of the limitations of the medium. With few HTML tags to choose from and few mechanisms for controlling any sort of page layout, Web “design” in the those days involved little more than knowing some HTML code. The Web has changed a great deal over the last few years, and while content is still crucial for any sort of Web site, presentation has come into its own as a significant part of a Web designer’s job. With the ability to have greater control over where text and images appear on the Web page has come greater challenges. It isn’t enough for a Web designer to know some HTML and to be able to throw together a page. Modern Web designers are truly designers and can use aspects of graphic design, illustration, and user interface theory to construct a Web site that is interesting to look at, fun to read, easy to browse, and that stands out from the seething masses of sites available on the Web today. This can be a scary proposition to many people working with Web sites today, particularly if all you know is HTML. But if you don’t have a degree in graphic design, typography, or computer-based art, don’t despair. Many of the fundamentals can be learned, and even a basic understanding of the issues can go a long way toward creating an interesting visual look for your own Web pages or for those you create for other people. That’s where this book comes in. This book won’t teach you about HTML; there are lots of other books that will do that. Instead, this book will teach you how to look at your pages from a visual standpoint. It will teach you the basics of graphic design and how to arrange your pages in an interesting style without the design becoming gaudy or overpowering the actual content you want your readers to see. In addition, you’ll learn all about graphics and images and using those elements to enhance the design of your pages. And, finally, because this is a Web Workshop book, like all Web Workshop books, it has tons of examples and the same conversational and humorous style that makes the fundamentals of graphics and Web design easy to learn and easy to apply to your own work. Good luck! Laura Lemay vi LAURA LEMAY’S WEB WORKSHOP • Graphics and Web Page Design Copyright © 1996 by Sams.net Publishing Acquisitions Editor Cari Skaggs FIRST EDITION Development Editor All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, Brian-Kent Proffitt or transmitted by any means, electronic, mechanical, photocopying, recording, or Software Development otherwise, without written permission from the publisher. No patent liability is assumed Specialist with respect to the use of the information contained herein. Although every precaution Cari Skaggs 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 Production Editors from the use of the information contained herein. For information, address Sams.net Colleen Williams Publishing, 201 W. 103rd St., Indianapolis, IN 46290. Kitty Wilson International Standard Book Number: 1-57521-125-4 Indexers Library of Congress Catalog Card Number: 96-68245 Tim Griffin John Hulse 99 98 97 96 4 3 2 1 Technical Reviewer Interpretation of the printing code: the rightmost double-digit number is the year of the Sue Charlesworth book’s printing; the rightmost single-digit, the number of the book’s printing. For example, a printing code of 96-1 shows that the first printing of the book occurred in Editorial Coordinator 1996. Bill Whitmer Composed in Frutiger and MCPdigital by Macmillan Computer Publishing Technical Edit Coordinator Printed in the United States of America Lynette Quinn All terms mentioned in this book that are known to be trademarks or service marks have Editorial Assistants been appropriately capitalized. Sams.net Publishing cannot attest to the accuracy of this Carol Ackerman information. Use of a term in this book should not be regarded as affecting the validity Andi Richter of any trademark or service mark. Rhonda Tinch-Mize Cover Designer Alyssa Yesh President, Sams Publishing: Richard K. Swadley Book Designer Publishing Team Leader: Dean Miller Alyssa Yesh Managing Editor: Cindy Morrow Copy Writer Director of Marketing: John Pierce Peter Fuller Assistant Marketing Managers: Kristina Perry Production Team Supervisor Rachel Wolfe Brad Chinn Production Michael Dietsch Michael Henry Louisa Klucznik Paula Lowell Ian Smith Laura A. Smith vii Overview Introduction ................................................................................................. xx Part I Fast Track to Web Site Design 1 1 Making Effective Browser-Independent Graphics........................................... 3 2 Designing an Effective Web Site .................................................................. 23 3 Creating Cool Graphics for the Web ........................................................... 43 4 Making Effective Web Graphics .................................................................. 71 5 Using Multimedia and Special Effects on the Web ....................................... 89 6 Presenting Effective Web Graphics ............................................................ 101 Part II Survival Skills for Web Design 109 7 Designing Graphical Pages Anyone Can Download ................................... 111 8 Creating a Map of Your Web Site ............................................................. 125 9 Providing Visual Cues to Web Navigation Through Page Design ................ 145 10 Understanding Form and Substance: The Dilemma of Web Style ............... 157 11 How to Avoid the Ten Most Common Web Mistakes ................................ 165 Part III Survival Skills for Web Graphics 179 12 Using Text in Design ................................................................................. 181 13 Designing Buttons That Work ................................................................... 205 14 Making Image Maps and HTML Frames .................................................... 229 15 Designing Backgrounds That Make Sense ................................................. 243 16 Utilizing Inline Graphics to Your Advantage .............................................. 257 17 A Portfolio of Graphics from the Web ....................................................... 271 Part IV Additional Graphic Topics 289 18 Delivering Animations at Your Web Site .................................................... 291 19 Understanding Advanced Graphic File Types ............................................. 311 20 Converting Graphics for Use on the Web .................................................. 319 Part V Appendixes 333 A Directory of Graphic Resources on the Web .............................................. 335 B Textures, Backgrounds, and Buttons ......................................................... 339 C What’s on the CD? ................................................................................... 341 Glossary .................................................................................................... 343 Index