Types of 2D Graphics

For digital images, there are two basic formats: bitmap images and vector images. This can be a tricky subject, but one that’s bound to come up the more you work with graphics — especially those designed for use on web pages.

Let’s start by talking about bitmap images — the most common type, and the type you’ll use for most of your web design work.

Bitmap Images
Bitmap images (sometimes referred to as raster images) consist of pixels aligned in a grid. As explained earlier in this chapter, pixels are those tiny dots of color that come together to form an image. If you’re familiar with art, pixels are similar to the art technique of pointillism (where tiny dots make up a picture), as used in Georges Seurat’s famous A Sunday Afternoon on the Island of La Grande Jatte painting. If you were to take a magnifying glass to this image, you’d see a pixelated image. Pixelated images are those where each individual square dot of color is visible to the naked eye, as shown in Figure below.

To get a better idea of what bitmap images are — specifically as they apply to the World Wide Web — let’s look at an icon that might be found on a website. Figure below displays a web button that is 232 by 66 pixels (or 232x66). In other words, there are 232 pixels horizontally and 66 pixels vertically. When combined, these tiny dots form an image.

Web Image Resolution
With web images, resolution refers to the number of pixels in an image. Web designers define image resolution in dpi (dots per inch) or ppi (pixels per inch). The larger the image resolution, the more clear and crisp the graphic.

You’d think from that last statement that you’d want to save your images at the highest resolution possible. If you were creating images to display in a local newsletter or some other print media, then yes, you’d want your images to display with the highest resolution.

Unfortunately, higher resolution also means larger image file sizes. In web design, larger file sizes will result in web pages loading slower. If your pages take longer than 20 to 30 seconds to load, there’s a chance users will simply click to another site rather than stick around.

What does this all mean? It means that when designing images for the World Wide Web, 72 to 96 ppi is the resolution you’ll want to use for your images.

GIFs or JPEGs: The Web Images of Choice
Bitmap images include various image file formats, including:

• GIF (short for Graphics Interchange Format)
• JPEG (short for Joint Photographic Experts Group)
• TIFF (short for Tagged Image File Format)
• PNG (short for Portable Network Graphics)
• BMP (short for Standard Bit-Mapped Graphics Format)

Of this entire list, you should use only GIFs and JPEGs for images that will be displayed on web pages. These graphics are the most widely supported by web browsers. So is there a difference between GIFs and JPEGs? Should you use one over the other?

Although opinions differ, I would suggest the following rule of thumb with GIFs and JPEGs:

Use GIFs for images where you have large flat areas and single colors (such as a diagram). Also, GIFs support transparency(something JPEGs don’t support).

Use JPEGs for all other images that aren’t diagrams. JPEGs compress data better than GIFs, meaning they’ll have smaller file sizes.

Vector Images
Although they’re not as common as bitmap graphics, vector graphics are being used more and more frequently within the World Wide Web. A vector graphic consists of many individual objects, with each of these objects defined by mathematical statements. In other words, each object has individual properties assigned to it such as color, fill, and outline.

Vector images are resolution independent. You can increase and decrease the size of vector images to any degree, and your lines will remain sharp — be it on a computer monitor or in print. Figure below displays an example of a vector drawing that is increased in scale. The size of the file stays the same, and the image does not degrade (as is the case with bitmap images).

Unfortunately, photo-realistic imagery cannot be created with vector graphics. Vector images can’t depict the subtle tones of a photograph. They are best suited for logos and graphics without photographic elements.

Vector images must originate from software. You can’t scan an image and save it as a vector file (at least not without using special conversion software). On the other hand, vector images can be converted to bitmaps (a process known as rasterizing).

However, once you convert a vector image to a bitmap image, it loses all the wonderful qualities it had in its vector state. If you convert a vector to a bitmap at a size of 200x200 pixels, and then want the image larger, for the best quality you’ll need to go back to the original vector file and convert the image again.

Currently, you cannot view vector images on the web without downloading a plug-in (such as Flash) for your World Wide Web browser. Thus, you’ll probably need to convert vector images to a bitmap format if they’re used for the web.

Common vector formats include AI (Adobe Illustrator), CDR (CorelDRAW), CGM (Computer Graphics Metafile), SWF (Shock- wave Flash), and DXF (AutoCAD and other CAD software).

In this tutorial:

1. The World of Web Design
2. Information Every Web Designer Should Know 
3. Exploring Digital Images
4. Types of 2D Graphics

Exploring Digital Images

Digital images are a web designer’s stock-in-trade. Yet, if the images repulse or annoy people — no matter how informative the content of the site — they’ll never give your web page the time of day. Thus, before jumping into your web design efforts, it’s helpful to familiarize yourself with some digital image basics.

Understanding Digital Image Color
If you were to stick a magnifying glass up to your computer monitor, you’d find the screen consists of hundreds of individual dots or units called pixels. These pixels remain in rows and columns, just like a table.

Computer monitors essentially have a palette that holds the following colors:

• A blob of red paint
• A blob of green paint
• A blob of blue paint

You can create other colors by mixing these colors together. Because red, green, and blue are a computer monitor’s primary colors, computer monitors work in RGB color space.

In your computer monitor, each primary color allows for 256 individual shades (ranging from 0 to 255).

Caution: Besides RGB, you may have heard of CMYK. CMYK is another color model, which stands for cyan (blue), magenta (red), yellow, and black. The differences between the two are that CMYK removes color from a white background, whereas RGB adds color to a black background.

So what does all this mean to you? Essentially, RGB works best with electronic display devices (for example, monitors), whereas CMYK works best with color printers. Thus, for our purposes, since we’re designing for the World Wide Web, we’ll use the RGB color model. This will ensure that what you see in Photoshop is what will display on a finished web page.

Digital Image Dimensions
The number of pixels contained in the width and height define the dimensions of an image.

For example, say you’ve got an image 25 pixels wide by 25 pixels high. Web designers typically express that image as having dimensions of 25x25.

As a web designer, you’ll always need to keep image dimension in mind. Your canvas (the computer monitor) contains fixed display dimensions ranging from 640x480 to 1280x1024. Most people keep their monitors at 800x600 or 1024x768. Figure below displays the Walt Disney web page on an 800x600 screen and on a 1024x768 screen.

Viewing the same web page at different monitor settings Courtesy of www.disney.com
The Disney web page was designed for best viewing on a 1024x768 monitor display. You can view the Disney web page on a 800x600 monitor display; however, the page requires vertical scrolling.

Tip I’d recommend designing your images for an 800x600 screen. This will ensure that those looking at your images won’t have to scroll to view your entire screen.

I wouldn’t worry about designing web pages for those using a 640x480 screen setting. Hardly anyone uses that large of a screen resolution anymore, and if they do, they’re probably used to using horizontal scroll bars.

A good rule of thumb is to not make any web image larger than 775 pixels wide. It’s OK to have users scroll vertically if needed, but avoid making images so large that users have to scroll horizontally. No one likes to do that.

When defining your image dimensions, not only will you want to account for the screen dimension, but you’ll also want to account for the web browser. For example, if you know you’re designing for an 800x600 screen (which is the norm), you’d also want to subtract some space for the browser.

Table below shows the dimensions you can use for your web pages and images depending on the monitor screen size.

In this tutorial:

1. The World of Web Design
2. Information Every Web Designer Should Know 
3. Exploring Digital Images
4. Types of 2D Graphics

Information Every Web Designer Should Know

Michelangelo understood architecture and the human body. Beethoven understood pianos and violins. As a creative type, it’s important you understand a little about the medium for which you’ll be designing — specifically, the World Wide Web.

The World Wide Web is made up of a system of Internet servers that supports hypertext. Hypertext objects (text, pictures, music, programs) are elements on web pages that link to other documents or files (such as other web pages).

Navigating the Web
Hypertext links provide the motion of the web. For example, while reading a web page about The Beatles, you might click on the hypertext phrase The White Album. Clicking this link might take you to a website where you can order the album, or perhaps even invoke a recording of “While My Guitar Gently Weeps.”

A single web page can contain many connections to other documents or files. Overall, the World Wide Web contains a complex web of connections among a huge number of documents, graphics, videos, and sounds.

Web designers can create hypertext for the World Wide Web using a coding language called Hypertext Markup Language (or HTML). Figure below displays a web page with multiple hyperlinks.

Although it’s useful to know HTML, it’s not a necessity for web design. With the tools and software programs today (such as Macromedia Dreamweaver), you can create a web page or add pictures and text to a page without typing a single line of code.

In this tutorial:

1. The World of Web Design
2. Information Every Web Designer Should Know 
3. Exploring Digital Images
4. Types of 2D Graphics