When we view exceptional graphics created by someone else, all we usually see is the final image. We're impressed by the flow, colors, content, and mood conveyed by the image, but do we really see everything that was required to generate the image? Rarely. We don't see the hours of experimentation it took to generate the acceptable ends. We don't see the primeval iterations of the image; ones that the creator would be embarrassed to display. When you look at Monet's Haystacks, don't think for a moment that there weren't several iterations before the completed piece, the means to the final graphical end.
As graphics creators, we are experimenters, trying different effects and techniques to generate a pleasing image. I'm surprised to find that many people, on the verge of creating a masterpiece give up easily in the development process. They are afraid to apply that final filter or brush stroke.
As we're writing this book, we are striving to write clearly and concisely. These are the same characteristics we want our graphics to embody. So how do we write? We begin by developing an outline. We then develop paragraphs. Finally, we read and re-read our paragraphs, honing, refining, and clarifying. The same is true of graphics. We generate an idea of what we want to create. We then develop the beginnings of the image. Finally we hone, refine, and clarify the image. Graphic development, just like writing, is a fluid process to reach a finished product.
Surfing the Web is a good way to start learning how to develop Web graphics. Since medieval times, disciplines have flourished through the master and apprentice relationship. It is vitally important to study the work of individuals established in a field to try to capture, learn, and mimic success and style in the discipline. The first step is to know what is possible.
This chapter discusses some key points to help those who consider themselves graphically challenged. It might not make you a Picasso, but it will help you equip your graphic toolbag with some vital information that you can apply to your designs. Then the chapter takes a look at various themes of Web sites and why a site might be best suited for children, business professionals, or the avant garde. The chapter concludes with some specific information that can be used in your Web pages.
Have you ever seen a graphic image that just gives you that special feeling? What is it about the image that attracts your attention? realism? style? colors? fonts? Undoubtedly, they all contribute to your attraction to the image.
Your attraction to a site, page, or graphic is further based on your vantage point-your background, skills, and perspective. Are you looking for a site for kids? Are you a business professional looking for information for your company? You, as the audience, have certain parameters that you're looking for. This is your paradigm of vantage.
Remember when you were a kid? Coloring books, brightly and brilliantly colored books, and Saturday morning cartoons probably interested you at some point. Sites for kids incorporate many of the same characteristics as the things you enjoyed as a child.
The first thing you'll probably notice about graphics for children is the use of color, as shown in Figure 4.1. Generally bright colors, bold lines, large buttons, and cartoonish images top the list of characteristics. Remember that log called a pencil you used to write with in kindergarten? When you're developing graphics for kids, use this knowledge to your advantage. Look through a child's eyes to find what will interest them.
Figure 4.1 : Use of bright colors for sites for kids.
As we grow up, one of the saddest things that happens to us is that we forget how to have fun. I watch my daughter, who is 11¦2, have fun with almost anything; she loves empty boxes and wrapping paper. As of late, she has a fatal attraction to Pooh and Tigger.
Designing a site for kids must include something that is graphically fun and aesthetically stimulating, such as what is shown in Figure 4.2. I think most little boys go through the dinosaur stage. Focus a site for kids on something they will like. Use of imaginative cartoon characters is recommended. Development of graphics for these sites can be both fun and challenging, but if you can make your site a fun place to be, you will probably attract kids.
Figure 4.2 : Making your site interesting for kids.
The following Web sites are examples of sites that are specifically designed for children:
cellini.leonardo.net/museum/main.html www.memst.edu/egypt/main.html ucmp1.berkeley.edu/exhibittext/dinosaur.html www.kidlink.org/home-std.html
In comparison to Web sites for kids, corporate sites may seem to be a more constricting environment. Indeed, in some instances they are. While decisions about the contents of the site are usually made by the "higher-ups," this does not mean that there is a lack of innovation. Many corporations, familiar with the idea that uniqueness is a marketing key, are striving to integrate the latest technology into their sites.
Much like a formatted business letter, most corporate sites have formal, balanced designs such as are shown in Figure 4.3. Unlike sites for kids or the avant garde, these sites strive to present formality through their design characteristics. A balanced design simply means that the page has symmetrical items on each side of the page. Paragraphs are usually justified and employee pages usually conform to preset standard templates.
Figure 4.3 : The corporate Web look.
To see examples of corporate Web sites, take a look at the following sites:
www.microsoft.com www.adobe.com www.sony.com www.autodesk.com www.mcp.com
Every corporation develops its own look. If you've got the job of designing a Web site for a commercial client, you probably have some research ahead of you. Here are some suggestions:
Avant garde is defined as a group or individual active in the
invention and application of new techniques in a given field,
especially in the arts. This statement sums up much of what is
taking place on 90 percent of the Web. Let's face it, mom and
dad weren't doin' cool stuff like this on the Web. They didn't
even have a Web.
| Note |
In the design world there is a significant difference between ingenuity and creativity. Ingenuity is modification of an idea or a process. Alternatively, creativity is the development of an entirely new idea or process. The biggest difference between these two principles is the time required for each; ingenuity equals the square of creativity. Sites that are truly avant garde are creative. On the Web there are many ingenious individuals, but very few who are truly creative. |
The avant garde look is a function of an individual's background and experience and can be subjective. Regardless, we can all pretty much agree that a design that shifts our paradigm or way of thinking, even in the slightest way, is avant garde to us. As you continue to surf the Web and even begin to design your own graphics, your idea of avant garde will undoubtedly change. Figure 4.4 shows an example of a site that appears avant garde to me.
Figure 4.4 : A site that could be considered avant garde.
| Note |
Most of the early designs on the Web mimic traditional publications; this is a natural occurrence due to experiential influences. But this is quickly changing. The paradigm for Web design is becoming its own beast. New interface designs, navigational aids, and structures are emerging due to increasing hardware and software capability. Coupled with continually decreasing costs, we will continue to see the avant garde as individuals and corporations strive to combat a singular way of thinking. |
Look at the following Web sites for examples of what we believe to be the avant garde in Web page design:
www.fns.net/~mrosica/ www.digifrontier.com/ www.gmatter.com/GMS/GrayMatterStudios.html www.recom.com/~hypno/
When you begin working with page design and layout, no discussion would be complete without talking about fonts. The feature that most distinguishes one font from another is the presence or absence of serifs. Serifs are the small tails and feet that appear on certain characters to help distinguish them from other characters. Fonts with tails and feet are called serif fonts, those without are called sans serif. (See Figure 4.5.)
Figure 4.5 : Serif fonts versus sans serif fonts.
There are also other defined features associated with each type of font:
Figure 4.6 : The horizontal space of a font.
Figure 4.7 : The weight of a font.
Figure 4.8 : A font at different point sizes.
Figure 4.9 : A font's leading.
Figure 4.10 : The letter spacing of a font.
Different font styles connote different tones in your design. For example, font can be used to aid in developing an emotion. They can also be used to add atmosphere or to support what the particular page is discussing (see Figure 4.12).
Figure 4.12: Fonts that can be used to help set the lone of a graphic or page.
Developing style through the use of fonts is often overlooked by new Web designers. Don't forget to use some of the fonts you already have to aid in your design, but don't go font-happy. Stick a font or two on a single page. If your font supply is limited, there are several places on the Web where you can get public-domain fonts. Check out these sites for fonts that you can buy and use in your designs:
http://www.dol.com/fontsOnline/ http://www.imageclub.com/ http://www.webcom.com/ztek/ users.aol.com/typewire/home.htm
Most of the unique fonts that you use in your Web pages will be graphic text that is a bitmap from an image editor. Fonts that are actually used in the body of a Web page via the HTML <P> tag are limited to fonts on the user's machine. Specifying a font in your HTML code that is not on the end user's machine won't work. Make sure you stick with standard operating system fonts when you're coding. Use unique fonts as inline images.
Look at Figure 5.1 for an example of a page containing a large number of text elements. There are two ways to get a text font onto a Web page. One way is to use the text available as HTML commands. See Chapter 11, "How to Avoid the Ten Most Common Web Mistakes," for an in-depth discussion of this topic. Another way is to bring in text as part of a graphic.
This is a bittersweet situation. On the plus side, HTML text carries almost no file size overhead because the text you display on the screen is created from the fonts you have resident on your machine. You can display a considerable amount of text on a Web page from a 20KB HTML file. The bad news is that HTML text is limited in its design capabilities, as well as in its font choices, which are slim and none. You should design only in fonts that you can assume will be on your audience's machine (that is, those that come with the operating system).
You can manipulate text all you want in PostScript programs such as Illustrator, FreeHand, or CorelDRAW! But as of this writing, PostScript outline font technology has yet to be delivered to the Web. In raster programs such as Photoshop and Fractal Painter, text committed to the canvas becomes just another pattern of pixels. The solution to this graphic text problem? Make into graphics only passages that you know are not going to change.
A text-rich page has its own set of design considerations:
Many a Web site is dismissed due to the initial reaction to a splash page. A splash page's poor design, inappropriate graphics, and lack of structure all decrease the potential perceived value of the site. Without careful consideration of splash page contents, the Web site's potential for entertaining, informing, communicating, and persuading can be overlooked by the user.
Have you ever noticed that humans are impatient? Think back six years ago. You'd drive up to McDonald's to get a cup of coffee, and there was one window. You'd always have to wait for one car that was ordering for eight. Finally, they noticed that waiting made us impatient, so they added another window. McDonald's has learned the deep truth of humankind: We know what we want and we want it now.
The same principle, slightly modified from the McDonald's model, applies to splash pages: Users hate to scroll. When you're putting your splash page together, put your site overview right at the top where users can immediately jump wherever they're going. Before you know it, you may just have the next sign proclaiming "Over 1 Billion Served!"
You may have already begun planning your splash page, or at least have an idea of what you want your site to include via an abstract. Among the many items that a splash page can have, make sure that you include the following:
Figure 4.1 shows a simple yet effective opening page for Adler Park School (http://www.mcs.net/~adler/home.html). Refer to it as the task steps are listed:
As you are laying out a site, plan on including inline images.
Sites without them are generally on David Letterman's Top Ten
List of Worst Sites or Yahoo!'s Worst Pages (www.yahoo.com).
It is much easier to plan for them and not include them than it
is to try to incorporate them after the fact. Even if your Web
page is just a personal page, add an image of yourself for visual
appeal.
| Tip |
As you're planning for inline graphics, remember that they only need to be 72 dpi (the resolution of most computer monitors). They should also conform to a 256-color (8-bit) palette. Anything more, and the cyber-police may pull you over for hogging the road. Just kidding, but anything higher just wastes Net bandwidth. |
As you're working on your page, you may need to let the user view higher resolutions of your work. This is particularly true in environments that deal primarily with graphics. But hey, you never know. You may be a political science major who creates an awesome, cool beans, hold-on-to-your-seat, better-than-Da Vinci graphic. It could happen!
If you do and you're not thrilled with the 256-color version,
allow the user to download a high-resolution version from your
site and view it externally in a paint editor such as Photoshop
or Fractal Painter. This is the only real way for them to view
it at a higher resolution and bit depth. If you're thinking about
doing this, you may want to consider compressing your files with
a product like PKWARE, Inc.'s PKZIP or Aladdin's StuffIt Deluxe.
| Note |
Graphic image file size increases exponentially when you begin beefing up the resolution and bit depth. A 16.7 million color image at 800¥600 tends to be 1.44MB, which is relatively large for Net delivery. One option you have is to use file compression to shrink the file. Depending on the compression algorithm, you may be able to cut the size in half. You'll probably want to look at lossless compression schemes. These schemes retain all the original data-in English: Your images stay sharp and clear. To find out more about file compression, check out the Web site at http://www.cis.ohio-state.edu/hypertext/faq/usenet/compression-faq/top.html |
Undoubtedly, one of the worst things you have to work with in HTML is hexadecimal values for background colors. Yahoo! Just when you thought you were getting a handle on things, here comes hex. Chapter 3 "Creating Cool Graphics for the Web," shows you how to convert RGB into hexadecimal using a scientific calculator, and you know there are resources out there on the Web to help do the conversions. Once you have the color converted, changing the hue of your background is pretty straightforward. Just remember, background color is set per HTML file. That is, you can't change the background color within a file (without loading a graphic as an alternative). To set the background color of a page, follow these steps:
| Web Work Shop |
If you use a colored background, some decisions you may have already made with your graphics, such as shadows and anti-aliased edges, may be inappropriate. The drop shadow that looked realistic on white looks like a gray glow when displayed on a black (000000) background such as this. It would be better to keep the opaque white. Better yet, go back in and remove the shadow. |
Hexadecimal math codes allow you to use colored backgrounds, text,
links, and rules in HTML coding. Unlike defining RGB or CYMK colors,
hexadecimal color codes are base-16 mathematics. Even though they
are a pain to work with, they are the most efficient way to create
solid-colored backgrounds, because the colors are defined mathematically
rather than through bitmaps.
| Note |
If you're like me, calculating hex codes is not your thing. There are several resources on the Web designed to help you. Check out the hex resources at http://www.bga.com/~rlp/dwp/palette/palette.html or http://www.echonyc.com/~xixax/Mediarama/hex.html |
Once you've found the hex code for the color you want (the hard
part), you use the hex value in your HTML code like this (where
FFFFFF equals white):
| Color your... | HTML code |
| Background | <BODY BGCOLOR="FFFFFF"> |
| Text | <TEXT="FFFFFF"> |
| Links | <LINK="FFFFFF"> |
An additional method of filling your background is to use a tiled or repeated bitmap across the back of your page. This is effective, but the larger the bitmap, the longer it takes to load. When you search for images to use, however, make sure that the image is repeatable. This means that the image's edges have similar patterns allowing it to be tiled without a visible seam. This first custom background task describes a non-seamless tile technique. Say you want to create a tiled background like that in Figure 4.13. To make custom background pattern from a tiled image, do the following:
Figure 4.13: An example of a tiled background.
| Web Work Shop |
A tiled background can be an effective way to add interest to your Web pages. It allows you to overlay HTML text on top of a GIF graphic, which is something you usually can't do. It also gives selected pages a different look. Don't use a tiled background behind normal text. The background is built from a single GIF tile that is repeated as often as necessary to paint the background using the <BODY BACKGROUND=> tag. To make a tile whose edges match, follow the steps shown in the example. Vary the size of the canvas for different effects. |
Now that you know how to make effective Web graphics, here are suggestions for your next steps:
| I specified a font to be used in my HTML code, but when I viewed it on a friend's computer, the text was not the font I specified. What did I do wrong? | |
| It's likely that you've specified a font that is not on the user's machine. This is a common problem. If you specify a nonstandard font (a font not included with the operating system), the browser will automatically insert another font. This is called font substitution. Some common standard fonts on the PC include Arial, Times New Roman, and Courier. Standard Mac fonts include Helvetica, Times, Geneva, and Palatino. | |
| I decided to change some things in my Web pages. I added an inline graphic, changed the background color, and moved some text around. But now, when my browser opens the page, it's all messed up. What do I do? | |
| If you decide to go back and change the code in your pages, like adding an inline image or changing the background color, do one thing at a time. A common programming error is to change several things at once. Programming is more than just entering code. It is also problem solving. By changing one thing at a time in your code, you can help yourself find problem areas if they exist. All you have to do is look at the last thing you did. If you change several things at a time, solving the problem is more difficult. |
