Effective Web pages combine textual and graphical elements in order to convey information. What you might forget is that text elements do more than just convey written information. Font, size, weight, color, and placement all contribute subtle (and sometimes not so subtle) nuances to your reading. So text is more than just the words. . .it's how those words are presented.
Take, for example, the word "picnic" in Figure 12.1. Both instances have the same characters, but one does a much better job of conveying the feeling of the word because of the choice of font, weight, color, and design.
Figure 12.1 : Your choice of font characteristics contributes to the effectiveness of the message.
In order to effectively use text on Web pages, you need to combine a knowledge of what Hypertext Markup Language (HTML) can and can't do with other graphics programs such as Photoshop and Illustrator (or Fractal Painter and FreeHand).
Let's find out what we can do with HTML text so this can be supplemented later with graphic text. Many browser-specific extensions have been included in Release 3 of HTML, but you'll still have to experiment with browsers to find out which tags will work.
As of this writing, HTML and its extensions remain a poor choice for doing creative text manipulation; plus, each browser does its own thing in interpreting the HTML code. Still, here are some ideas you can try:
| NOTE |
A neat way to get more flexibility in your HTML type design is to create a number of transparent Graphical Interchange Format (GIF) files of specific widths to be used as spacers. This is how you do it. In an image editor create a white canvas 12 pixels high and 1 pixel wide. Save this in bitmap mode and in GIF format. Make the white pixels trans-parent. Then, edit this file, adding canvas to make a number of files of incremental width-say 10, 20, 30, and so on. Or if you think in inches, make the files 18, 36, 54, and 72 pixels wide. This results in spacers 1/ 4, 1/ 2, 3/ 4, and 1 inch wide. To implement, determine the space you need and use the <IMG SRC="spacer.gif"> structure at the spot you want the space. |
The real power and flexibility of Web page design lies in the mixing of HTML text and text that you compose in a graphic editor and combine on the page. To combine HTML text and graphic text
Many Web pages are designed to mimic existing publications and require a techni-cian's eye rather than that of a creative designer. Existing publications are matched on the Web when readers have learned to expect information in certain locations or with familiar formatting. To create a brand new design would reduce the effectiveness-what might even be the product identity-that may have taken years to establish.
Several text processing and page layout programs have automated this process. PageMaker 6, for example, lets you design your pages in PageMaker and then translate the pages into HTML code. Be prepared to fiddle with the code to establish links to external URLs and to ensure that paths to images are correct.
Matching an existing style is often as challenging as making a page with few, if any, guidelines. Figure 12.9 shows a page from a technical journal and its re-creation in HTML.
Figure 12.9 : Using HTML to recreate an existing page design.
If you're old enough to remember programming graphics on computers by laboriously determining the placement of characters (+, *, ^, |, -), you're probably thinking about retirement. Not that I'd do very much of this-although there are utilities that exist to translate grayscale information into ASCII characters. Still, it's an interesting alternative to bitmapped graphics. Figure 12.10 shows a title page done in character graphics, including an HREF text menu bar.
Figure 12.10: Using character graphics to produce a
graphic style.
| WEB WORKSHOP |
In previous workshops you have seen how to format text and graphics using the <TABLE> structure. In this example, a page of text utilizes many of the formatting structures just discussed. By far, the greatest limitations in using HTML-only text formatting are in having no really large and bold text for big headings and in having access to only two font families (serif and typewriter). |
You can't discuss formatting text without discussing formatting graphics because if they're on the same page, one affects the other. If you thought HTML was limited in its ability to control design through text, its graphic functionality is almost zip! As a starter, you have control over
A graphic on a Web page actually doesn't exist on the page itself. Instead, it is brought to the page using the <IMG SRC> tag. For the browser to locate and display the graphic, the following must occur:
If any of the above are not satisfied, your browser will display an icon representing the graphic. If you are considerate, you already have included a textual description so the user can see what they're missing.
To plan effective headings, just reach into your memory banks to somewhere around the seventh grade. Remember what Mrs. Frump told you: "Don't include a heading with only one subhead." Use headings to break the page into logical divisions. You can accept HTML's <H> tag organization or make your own. Personally, I think heads in HTML are just fine.
Headings without a sufficient amount of whitespace do little to break the page into readable sections. Use the <BR></BR> structure to insert line breaks into a page. It's like VSPACE for paragraphs! Figure 12.15 shows two examples. Which one would you rather read?
Figure 12.15: Combine effective heads with whitespace and you increase readability.
The last structure to help divide a page visually is to use horizontal rules (<HR>), which are horizontal grooves on the page of your graphic browser. Adding the parameter NOSHADE within the delimiters produces a black rule, no groove. The shaded horizontal rule is a default design based on a gray background. This still works with most hexadecimal backgrounds or backgrounds you create, more or less.
Rules are often overused. A page with too many horizontal rules is more difficult to read. Use them to set off major sections of your page or things like footnotes or e-mail addresses. The <HR> can be modified with a thickness parameter such as <HR SIZE=4>. Our page with heads, space, and rules is shown in Figure 12.16.
Figure 12.16: The completed page.
Let's leave the discussion of HTML text and explore ways where more design flexibility can be introduced to the page. To do this, you need to become familiar with programs that produce well-defined text in a raster or bitmap format.
Before you get into the actual mechanics of making more interesting text, you should be aware of at least the basics of font technology because these issues directly affect the quality of text you can produce.
The text you see on the screen is, by default, bitmapped. There's no way around it. A raster display device displays raster text. However, your ability to create good-looking text at any size depends on the following:
Three-dimensional text adds lots of eye appeal to your page. It is so strong, however, that it should be used carefully, generally as logos, headers, or splash page graphics. The best way to produce 3D text is to use a 3D modeling program. Figure 12.17 shows a graphic with 3D text created in Autodesk's 3D Studio program.
Figure 12.17: Three-dimensional text from a modeling-rendering-animation
program.
| TIP |
Text looks 3D because you can see the top, front, and sides of the letters. It looks even more 3D when these three planes are shaded consistently with the top being the lightest and the side the darkest. |
If you don't want to follow the 3D modeling route, you can produce credible results by creating two-dimensional pictorial text (flat text that looks 3D) by completing the following steps:
Figure 12.18: Developing 2D pictorial text that looks 3D.
Text that looks engraved has a more realistic appearance than text that looks like it's simply been painted on a surface. Use this technique for icons (see Figure 12.19) and text on buttons. To make engraved text, follow these steps:
Figure 12.19: Engraved text darkens the text so it looks like it is below the surface.
| TIP |
Don't use engraved or embossed text for passages that require in-depth reading. Use these techniques for text that is part of a manufactured product. |
Embossed text is just like engraved text with the shadow and highlight reversed and with the body of the text lightened to make it look like it is raised from the surface (see Figure 12.20). To make embossed text, follow these steps:
Figure 12.20: Embossed text lightens the text so it looks like it is above the surface.
Metallic text uses smooth changes in the value or color to make a surface look shiny. Metallic text is effective when it is contrasted with a darker background (see Figure 12.21). To create metallic text, follow these steps:
| TIP |
Metallic text works best when the letters have a slight thickness. Study the final metal text in Figure 12.21. Make sure highlight direction matches highlight edges and drop shadows. Pick a direction of sun and stick with it. |
Rounded text provides an interesting contrast with the rest of the text on your pages. Much like the metallic text, soft rounded text is the most effective when good contrast is achieved between the text and the background. To create soft rounded text, follow these steps:
| TIP |
Anytime you need instant highlights and shadows, adjust the brightness +60 percent and -60 percent. You'll never have to mix colors again! |
Text that looks like it is being projected in light onto a screen is a subtle, effective way to add terms or words to a graphic (see Figure 12.23). Use this technique when you want an almost subliminal message to accompany an image. To make text look like its being projected on an image, follow these steps:
Figure 12.23: Text projected on a photograph is used to convey a subtle message.
Rather than using lighter text projected on an image, let's try regular black text on a transparent or smoke gray panel. This is best when you want the text for reading-when the text is 12 to 14 points in size (see Figure 12.24). To create a transparent panel text, follow these steps:
Figure 12.24: Text on transparent and smoked panels.
This technique is easier than you might first think, and it is one that is popular right now (though it may look dated next week). The key is in using the brightness adjustment rather than mixing shadow colors. To create a soft drop shadow, follow these steps:
Figure 12.25: That popular fuzzy drop shadow.
| TIP |
A shadow's edge becomes more fuzzy as an object gets farther away from the surface catching the shadow. This visual cue helps build depth in your graphics. |
Now that you have been shown techniques to use text to maximum effectiveness on your Web pages, consider the following:
| Q: | I created a great graphic for my home page but when it loads, I can only see the upper left corner. What happened? |
| A: | You used a resolution higher than 72 dpi when you made the graphic. Your browser maps each pixel in your graphic to a pixel on the screen. You have two alternatives. First, scale the graphic with WIDTH and HEIGHT variables inside the <IMG SRC> structure. It will slow down the load, and you may get surprise dithering. Or, go back into your image editor and resample the image to 72 dpi. Save as a new file so you don't destroy all that hard work! You'll lose the detail you were so proud of, but it will display at the right scale. |
| Q: | All my inline graphics keep the following text on the same line. I want the text to follow the graphic. What do I do? |
| A: | Sounds like you're using the LEFT alignment option in the <IMG SRC> structure. Force the text onto another line with a line break, <BR></BR>. |
| Q: | All of my text after a H1 heading is the same size as the heading. What went wrong? |
| A: | You left off the closing </H1> tag. Your browser is looking for it. Add it at the end of the heading text. |
| Q: | I have trouble combining the artistic text I've done in Photoshop with background textures. I turn the white pixels around the text transparent, but I still get a ring around each letter. How can I get rid of this? |
| A: | You have the dreaded anti-alias halo! If your text is already anti-aliased, you have a little editing to do. See "Mistake Number 3" in Chapter 11, "How to Avoid the Ten Most Common Web Mistakes." Suggestion: Anti-alias after combining the text and background. |
| Q: | When I make rounded text, I always end up messing with the pixels around the letters. How can I just work on the letters? |
| A: | The best strategy for adding text to anything other than a white background is to work on the text in a separate file or on a separate layer. That way you won't be changing background pixels. Combine the text and background when you're ready by copying and pasting or merging layers. |
