Designing Web Graphics.3

by Lynda Weinman

Lynda Weinman, Designing Web Graphics.3, 1999.

She has a new edition of the book out, Designing Web Graphics.4, which I bet is worth checking out, as well as many others on Web design which you can find at her web site, Lynda.com or buy directly at the book section of her web site store.

I mostly took notes on information which I both felt would be useful and didn’t already know; hence this is evidence that I found the book useful but you are advised to get it yourself to find the parts useful to you.

Remember, this is all pretty out-of-date (1999) and the author has an updated book out. See her site, Lynda.com.

Don’t save as JPEG until final export

Weinman explains that JPEG is a lossy compression system, and every time you add JPEG compression (meaning every time you save the graphic as a JPEG, the image will lose quality). Use Photoshop files, PIT, TIFF, EPS, BMP, TGA, or any other non-compressing or lossless comperssion when working with the image and only save as a JPEG on the last step before putting it on the Web. {Page 88.}

Jagged Edges: Cool

Aliased artwork (with jagged edges to the pixels, rather than anti-aliased graphics with the illusion of smoothness) can reduce file size and look good too. See, for instance, Don Barnett’s background tiles. {Page 92.}

GIF Compression: Four Rules

Save the file at the lowest bit depth (use the least colors that is reasonable)
Avoid dithering if the image looks OK without it
Create (or use on) images with lots of areas of solid color; avoid noise, gradations, and photographic content
Avoid anti-aliasing if the image looks OK without it

{Page 96.}

Optimizing GIFs: Photoshop Plug-Ins

Plug-ins that optimize GIFs more effectively than Photoshop include Boxtop Software’s PhotoGIF and Digital Frontier’s HVS ColorGIF. {Page 103.}

A general image optimization resource she notes is the Bandwidth Conservation Society. {Page 111.}

Browser-Safe Colors

Lynda now argues that you don’t have to limit yourself to the 216 colors that won’t dither in 8-bit graphics systems, but one of the nicest resources in her book, charts of the non-dithering colors organized by hue (reds togethers, blues together, etc) and by value (lightest to darkest), are available on-line (though not as prettily):

Browser-Safe Colors Organized by Hue

Browser-Safe Colors Organized by Value

Browsersafe Hexadecimals

An excellent tip of which I was staggeringly ignoran: all the browser safe colors are made up of exactly six values, which follow, for each of the three color channels (Red, Green, Blue, in that order). Here are the HEX codes, from dark to light, with the RGB plain base ten equivalents that you might find in image-editing programs.

HEX	00	33	66	99	CC	FF
RGB	0	51	102	153	204	255

{Page 132.}

Ensuring GIF Art Stays Browser Safe in Photoshop

Photoshop 5.0 does a poor job on maintaining browser-safe colors. It’s better to use another program (see below). If necessary, here’s the work-around:

Open or create browser-safe image (.psd, .pict, .tiff, .bmp).
Choose Mode: Indexed Color: Web. This converts the image to the 216 Web-safe colors.
Choose Mode: RGB. This converts the image back to RGB color.
Choose Mode: Indexed Color: Exact. This keeps the colors browser-safe and removes all the ones you’re not using.

ImageReady can simply be set to “Web” and colors to “Auto” and it eliminates unused colors and results in a smaller file than Photoshop.

Fireworks simply using palette “Web 216” eliminates all unused colors and results also in a smaller file size.

{Page 144 to 145.}

JPEG Cannot Retain Browser-Safe Colors

It’s compression doesn’t keep colors exact. So you cannot have JPEG graphics match your HTML-set colors (body background, table cell background, etc.) and you cannot keep a JPEG to browser-safe colors.

{Page 149.}

Browser-Safe Color summary

Always use browser-safe color with HTML-based schemes.
Always use browser-safe color for graphics that includes areas of solid color.
Don’t use browser-safe colors on photographs; save photographs as JPEGs.
For hybrid image that has areas of solid color and continuous tones, use the GIF format with an adaptive palette.
You can shift solid color artwork to browser-safe colors using Fireworks or ImageReady.

{Page 154.}

Color

Color relationships you can use in a site color scheme:

Complementary colors (opposite on a color wheel), split complementaries (one color and the two next to its complement), analogous (nearby), primary colors (red, yellow, blue), Secondary colors (orange, green, purple), monochromatic (a single hue, or ‘color,’ in different values, or ‘dark to light’; do things in grayscale first to learn to think like this). Always remember to vary value and saturation (intensity) and not just hue. Better color combinations have variety in saturation and value.

{Pages 156 to 161.}

Indicating Importance

You want to draw your viewer to the areas of your site that are most important, and you can do so in a variety of ways. For example, you can use color as a device for creating visual importance or hierarchy. You can make the most important element – the logo, the navigation, or whatever you choose – “pop” with color.

{Page 167.}

Color Names Are Rarely Browser Safe

Of all the color names, only ten refer to browser-safe colors: Aqua and Cyan (00FFFF), Black (000000), Blue (0000FF), Fuschia and Magenta (FF00FF), Lime (00FF00), Red (FF0000), White (00FFFF), and Yellow (FFFF00). [That most names aren’t browser safe is really ridiculous. I had assumed the opposite. Let that be a lesson to you: never suppose, it makes an ass out of u and me.]

{Page 177.}

Background Tiles

Long, skinny horizontal ones can put borders on either side of your page (if the browser window fits you width, that is) and tall, skinny horizontal ones fill up side-by side and can be used to give your screen stripes (thick or thin), used with exact style sheets or exact-height tables you can put the text in just the right places for nice effect.

{Page 202.}

If using a background pattern, it must be low contrast because high-contrast will make text hard to read. That is, dark value text will read well over a light background and light text will read well over an all-dark background. The background can’t have high contrast or this won’t work.

{Page 203.}

Match foreground graphic formats to the background graphic format (GIF on GIF or JPEG on JPEG) when creating an irregularly shaped graphic against a solid background color. (That is, if you want colors in your foreground graphic to match your background graphic, especially blend smoothly into it, they must be the same file format or the colors won’t match perfectly (it’s JPEG’s fault).

{Page 218.}

Transparent GIFs

When making a transparent GIF in ImageReady, use Matte None which creates an aliased edge (jagged pixels) against the transparent background but leaves the internal areas anti-aliased (pixels along edges have intermediate colors to make it appear smooth). This way you can put the graphic on any background color.

If you know what color the graphic will be on, you can leave the transparency but put the color you want in the foreground color swatch and choose Matte: Foreground Color.

{Page 212.}

In PhotoShop and ImageReady, you can make even complex backgrounds transparent by using a layer mask and ‘painting’ over the background by hand.

{Page 213.}

Horizontal Rules

Don’t need to have fake emboss shading!

<hr noshade />

Can be thick:
<hr size="10" />

Can be vertical:
<hr width="2" size="40" />

(This is probably only useful, if ever, in table cells, and in Mozilla, at least, the width has to be at least 3 pixels to be visable.)

Come to think of it, with less it’s a way to put in white space:

<hr width="0" size="20" />

Can be square (in theory):
<hr width="8" size="8" />

Can be all kinds of combinations:
<hr width="80" size="8" align="left" noshade />

{Page 223.}

Vertical rules can be created with a table or a background tile.

{Page 228.}

Lists: Bulleted, Numbered, Numeraled, Definition

Bullets (Unorderd List)

<ul>
<li type="circle"> Circle-shaped bullet</li>
<li type="square"> Square-shaped bullet</li>
</ul>

Circle-shaped bullet
Square-shaped bullet

(Which one is solid or empty is anyone’s guess. When you nest bulleted lists, at least when you don’t tell it what kind of bullet to use, it’ll switch to a new style.)

Definition Lists

<dl>
<dt>A word</dt>
<dd>with a definition</dd>
<dt>Another</dt>
<dd>with two definitions</dd>
<dd>Any of various alternatives; some other</dd>
</dl>

A word: with a definition
Another: with two definitions; Any of various alternatives; some other

Ordered Lists

You can do all kinds of outline-style stuff:

<ol>
<li type=1> Item one</li>
<li type=1> Item two (note the type is still "1")</li>
<li type=A> Uppercase Letters</li>
<li type=a> Lowercase letters</li>
<li type=I> Uppercase Roman Numerals</li>
<li type=i> Lowercase Roman Numerals</li>
<li type=i> We&#0146;ll have two lowercase roman numeral items</li>
<li type=1> And back to numbers!</li>
</ol>

Item one
Item two (note the type is still "1")
Uppercase Letters
Lowercase letters
Uppercase Roman Numerals
Lowercase Roman Numerals
We’ll have two lowercase roman numeral items
And back to numbers!

(When you do it, I recommend you start a new list, including a nested list, before picking a new style! Unfortunately, most or all browsers are not smart enough to stick with a list style once you pick it.)

{Page 231.}

Combining Server- and Client-Side Imagemaps

Using frames to have permanent borders

This page will use the contents of left.html, right.html, top.html, and bottom.html to display the left, right, top, and bottom borders which will always be present whatever the size of the page.

(I changed frame left to no scrolling and inside to auto because I think it’s just a typo that the book didn’t for frame left and hey, the content has to scroll if it needs to.

Oh yes, and after all that always have noframes content! And that is not “You need frames to view this page”; it is the <noframes> tag with the body tag and all body content from your main page (inside.html in this example).

{Pages 302 to 303.}

Stylesheets absolute positioning

You can use absolute positioning to perfectly align an image over a background tile. {Page 315.}

Monotone an image

For a neat effect you can use Photoshop to create monotones of images simply by clicking the Colorize checkbox (naturally) under Image: Adjust: Hue/Saturation.

QuickTime movie posters: thumbnails for multimedia

You make a small one-frame movie with no soundtrack, and when someone clicks on it it will try to play the real movie. You can do the same thing with audiotracks and such also.

<embed src="poster.mov" bgcolor="#ffffff" controller=false height="216" width="320" href="real.mov" />

{Page 388.}

Useful digital movie term:

codec: software that translates video or audio between its uncompressed form and the compressed form in which it is stored

{Page 392.}

And a final warning since you clearly didn’t listen earlier. This information is from a 1999 book and is out of date. For instance, the Internet might not exist anymore. The author, Lynda Weinman, has an updated book which you can check out at her site, Lynda.com or buy directly at her web site’s store, book section.

Melançon Enterprises Maurice Institute Library > Book reviews > Lynda Weinman, Designing Web Graphics.3