Table of Contents
| Acknowledgments | xi |
| Introduction | xii |
| Part 1 | Image Is Everything | |
| Chapter 1 | Seeing with a Designer's Eye | 5 |
| Weed Out the Clutter | 6 |
| Guide the Eye to Important Content | 9 |
| Be Smart About Ad Placement | 9 |
| Spice Up Text-Heavy Pages | 10 |
| Create Visual Rest Stops | 11 |
| Dump the Splash Screen | 12 |
| Make Text Easily Readable | 14 |
| Create Identity Through Design | 14 |
| Be Aware of Technical Traps | 16 |
| Chapter 2 | Fast and Easy Design Tools | 23 |
| Hardware: Is Your Computer Up to the Job? | 24 |
| Scanner or Digital Camera--or Both? | 26 |
| Scanner Buying Guide | 28 |
| Digital Camera Buying Guide | 29 |
| Software: Do You Have What You Need? | 33 |
| Photo Editing Software | 33 |
| Graphics Cataloging/Management Software | 37 |
| Chapter 3 | Pixels, Palettes, and Other Pesky Details | 41 |
| Think Pixels, Not Inches | 42 |
| Squaring Away Pixels | 42 |
| Comparing Screen Pixels and Image Pixels | 43 |
| Designing for the Small Screen | 49 |
| Choose "Safe" Colors | 52 |
| Making color with Light | 52 |
| Keeping Colors in Bounds | 53 |
| Preview, Adjust, and Preview Again! | 61 |
| Chapter 4 | Creating Your Design Framework | 63 |
| Developing a Design Theme | 64 |
| Using Themes to Create a Unified Look | 68 |
| Applying a FrontPage Theme | 69 |
| Adjusting Theme Colors | 71 |
| Changing Theme Graphics | 72 |
| Substituting Fonts | 74 |
| Plotting Out Your Page | 74 |
| Dealing with Layout Realities | 75 |
| Frames | 76 |
| Absolute Positioning and Other CSS-Based Formatting | 77 |
| Working with Tables | 77 |
| Ways to Create a Table | 78 |
| Table Formatting Options | 80 |
| Cell Formatting Options | 83 |
| Adjusting Table Spacing and Layout | 86 |
| Using Templates | 90 |
| Chapter 5 | Building Beautiful Backgrounds | 93 |
| Digging into Backgrounds | 94 |
| Setting FrontPage Background Defaults | 97 |
| Laying Down Background Tiles | 100 |
| Solid-Color Sidebars | 101 |
| Gradient Sidebars | 106 |
| Shadowed Sidebars | 107 |
| Ragged-Edged Sidebars | 110 |
| Horizontal Stripes | 113 |
| Textured Backgrounds | 115 |
| Repeated Background Patterns | 120 |
| Faux Backgrounds | 121 |
| Part 2 | The Fine Print | |
| Chapter 6 | Everyday Text | 129 |
| Creating Text in FrontPage | 130 |
| Typing and Editing Text | 130 |
| Bringing in Text from Another Source | 131 |
| Formatting Text | 132 |
| Formatting Text as a Link | 135 |
| Using HTML Paragraph Styles | 136 |
| Choosing Web-Friednly Fonts | 136 |
| Stick with "Safe" Fonts | 136 |
| Go Sans Serif for Better Legibility | 142 |
| Don't Anti-Alias Small Type | 143 |
| Limit Yourself to Two or Three Fonts | 144 |
| Sizing Type: It's All Relative | 145 |
| Spacing Things Out | 146 |
| Inserting Special Symbols | 148 |
| Chapter 7 | Text as Art | 151 |
| Creating Text in PhotoDraw | 152 |
| Adding or Deleting Characters | 154 |
| Changing the Font, Size, or Type Style | 154 |
| Moving and Rotating Text | 154 |
| Anti-Aliasing Text | 156 |
| Giving Text the Treatment | 156 |
| Filling (and Stroking) Text with Meaning | 157 |
| Bending Your Words | 160 |
| Using Pictures as Characters | 161 |
| Creating Stylish Bullets | 162 |
| Part 3 | Picture This | |
| Chapter 8 | Simple Drawings | 169 |
| Opening Pictures | 170 |
| Zooming In and Out | 172 |
| Changing the Canvas Color or Design | 173 |
| Sizing the Canvas | 174 |
| Creating Simple Graphics | 175 |
| Drawing Primer | 175 |
| Painting vs. Drawing | 177 |
| Basic Picture Editing | 179 |
| Shuffling the Stacking Order | 183 |
| Quick Buttons and Bars | 184 |
| Object Lessons: Forging Shapes into Pictures | 186 |
| Using Clip Art | 190 |
| Chapter 9 | Photography for the Web | 193 |
| Taking Better Web Pictures | 194 |
| Secrets for Shooting Shiny Stuff | 196 |
| Fixing Photographic Flaws | 198 |
| Selecting the Area to Edit | 198 |
| Snipping Away Part of a Photo | 206 |
| Making Areas Transparent | 208 |
| Adjusting Colors, Brightness, and Contrast | 210 |
| Sharpening Focus | 217 |
| Exploring Other Photo Editing Options | 217 |
| Resizing Pictures | 218 |
| Saving Pictures for the Web | 220 |
| Saving in the PhotoDraw Format | 220 |
| Saving GIF Images | 221 |
| Saving Photos as JPEG Images | 227 |
| Chapter 10 | Bringing HTML into the Picture | 231 |
| Preparing Your Picture | 232 |
| Importing Pictures into FrontPage | 233 |
| Deleting a Graphic from a Web Page | 236 |
| Doing Minor Alterations in FrontPage | 236 |
| Setting Size Attributes in FrontPage | 238 |
| Positioning Pictures | 240 |
| Using Graphics as Links | 242 |
| Creating a Simple Graphical Link | 242 |
| Breaking a Link | 243 |
| Creating Image Maps | 244 |
| Creating Thumbnail Links | 246 |
| Providing Alternative Text for Graphics | 249 |
| Creating Special Web Effects | 250 |
| Moving Pictures (Animated GIFs) | 251 |
| Rollover Buttons | 254 |
| Appendix | Web-Safe Colors | 261 |
| Index | 265 |
Read an Excerpt
Chapter 2: fast and easy, Design Tools
In my office, I have four computers, three printers, two digital cameras, a scanner, a CD recorder, a drawing tablet, about 30 graphics programs that I've collected over the years, and, most important, a little electric coaster that keeps my coffee warm. Truth be told, though, I could get along fine with just 25 percent of this stuff. (The coffee warmer stays.) I use the rest only for occasional special projects.
The point is, creating Web graphics requires just a few vital hardware and software components, which we'll explore in this chapter. I'll also introduce you to a few goodies that aren't absolutely necessary but will make your graphics work easier and more enjoyable.
Hardware: Is Your Computer Up to the Job?
Working with graphics puts a significant strain on a computer's resources. If your system doesn't have much muscle, your graphics software will run very slowly and may even cause the computer to freeze up on occasion. The system components that affect graphics work the most are the processor, RAM (random access memory, or simply memory), the hard drive, and the video card. Here's a look at how each of these components factors into the graphics equation and my advice on the minimum requirements for speedy, reliable performance:
- Processor It's probably no secret to you that the processor plays a big role in how quickly the system carries out your commands. The good news is that if you bought a new computer in the past two years, you've probably got the processor power you need. At a minimum, I recommend a Pentium II 233 MHz chip (or its equivalent). Most new systems go well beyond that, especially if they're designed for computer gaming.
- RAM (memory) This is the category where the average system falls short. If your computer doesn't have adequate RAM, it may not be able to perform some high-level graphics tasks or allow you to keep more than one picture open at a time.
Most new graphics programs require a minimum of 32 MB of RAM, but trust me, you won't be happy with anything less than 64 MB, especially for photo editing and creating 3D artwork. More RAM is definitely better; go for 96 MB or 128 MB if your budget allows.
- Hard drive When it comes to your system's hard drive, it's not overall size that counts but the amount of empty storage space. Your hard drive is the location where you will typically store your graphics and other personal files, but your computer frequently uses it too. When you work on your computer, data typically gets stored temporarily in RAM. If the RAM supply gets low, your computer may use your hard drive as additional storage. So you should always keep some empty space on your hard drive.
If your hard drive is really cramped and you can't offload any files to a floppy disk, CD-ROM, or some other secondary storage device, do yourself a favor and invest in a bigger hard drive or add a second drive to your system. Some programs allow you to specify a removable-media drive, such as a Zip drive or a CD-ROM drive, for your temporary storage space, but these drives typically are too slow for this purpose.
- Video card The speed at which images are displayed on your monitor is determined in part by the video card, sometimes called the graphics card or display adapter. Equally important, the video card also controls the maximum screen resolution and the number of colors your monitor can display at each of the resolution settings the card offers.
Evaluating video cards requires an advanced degree in geekology because so many designs exist. But for graphics work, one critical spec is the amount of video RAM on the card. You need a card with at least 2 MB of video RAM to display 24-bit color (about 16.7 million colors) at a screen resolution of 800 by 600 pixels and a card with 4 MB video RAM to get 24-bit color at a screen resolution of 1024 by 768 pixels. Especially for digital photography work, I think that 24-bit color-also known as true color-is a must, but everyone's not as picky as I am. (Note that the actual video RAM requirements for these examples are about 1.4 MB and 2.3 MB, respectively, but cards come in configurations of 1 MB, 2 MB, 4 MB, and up.)
Again, if you're using a relatively new computer, your system likely meets all these qualifications. If your computer isn't up to snuff and a new one isn't in the cards, you can improve performance by cleaning out your hard drive to free up more scratch disk space. Investing in additional RAM also offers a good return, although memory isn't as cheap as it used to be. As for upgrading your video card or processor, neither option is simple or inexpensive, so be sure to weigh the cost/benefit ratio of upgrading to buying a new system.
Graphics Storage: What's the Best Option?
If you work on a computer that's part of a large corporate hive, you may never have to worry about finding storage space for all your graphics files. But if you're flying solo-doing your work on a laptop, at home, or in a small office system-you'll eventually reach the point where you can't stuff one more file onto your hard drive. You can always add a second hard drive, of course, but you should also think about investing in an auxiliary device that stores files on some type of removable medium. This option not only enables you to reserve your hard drive space for files that you use regularly but also protects you from losing important files if your hard drive goes wacko.
There are many storage options, but my top pick at the moment is a CD recorder, which costs around $150 to $400, depending on the model's speed and whether you buy an internal or external unit. When CD recorders were first introduced on the consumer market, I considered them too complicated and too prone to problems to recommend to anyone but experienced computer gurus. But now they're as easy to use as a floppy drive. Using special recording software, you can simply drag and drop files to the CD drive's icon, just as you do when copying or moving files to a floppy.
For the best deal, get a CD recorder that offers both CD-R and CD-RW capabilities. (In case you're wondering, the R stands for recordable and the RW stands for rewritable.) With CD-R, you can record your files to a CD, but you can't erase any files from the CD once they're on it. CD-RW enables you to add and delete files as necessary. Some older CD drives can't read CD-RW disks, however, so you'll need to stick with CD-R for files that you need to access on those drives. Also, CD-R is best for archiving files that you want to keep for a long time; data on CD-R disks is less likely to degrade over time, and you can't accidentally overwrite an important file. Best of all, CD-R disks are cheap, cheap, cheap-about 30 cents apiece if you watch the sale ads. A CD-RW disk costs a little more-about $1.00 on sale-but of course, you can reuse a CD-RW disk over and over, whereas a CD-R disk is a one-shot deal...