About Web Graphics

If you've been studying the HTML and CSS tutorials on this site, you will know how to embed a graphic image into a web page. In HTML you use the img tag, combined with the path to the image. In CSS you can specify a background image to appear on an element's background. To do this in CSS you use the background-image property.

Both the HTML and CSS tutorials assume that you already have an image located on the Internet somewhere. This tutorial will show you how to create the actual image .

Examples of Web Graphics

Before we start creating our own graphic, lets look at some examples of web graphics.

Logo		Logos are one of the most common uses of web graphics. Most websites have a logo on every page. Logos are usually created using illustration software, such as Adobe Illustrator, then exported to GIF format.
Photo		Photos are becoming increasingly popular too, especially with so many digital cameras and camera phones available these days. Photos are usually either scanned into the computer, or imported directly from a digital camera. Once the photo is saved on the computer, you can make adjustments, re-size it, and then save it in JPEG format.
Icons		Icons can help a website look more professional, as well as help users quickly identify the purpose of a link. Icons are usually created using illustration software, such as Adobe Illustrator, then exported to GIF format.
Decorative Image		Decorative images are often used to do the bits that HTML and CSS can't do. For example, diagonal lines and rounded corners. Decorative images are also commonly used for repeating backgrounds on web pages. Depending on the image, a decorative graphic can be created using illustration software such as Adobe Illustrator, or image editing software such as Photoshop or GIMP. It is then exported to GIF format.

Web Graphics - Properties

Most browsers provide you with an easy way to view the properties of any graphic on the web. The following example demonstrates how to do this using Firefox on a Windows computer:

1. Load a web page with a graphic
2. Right click on the graphic, and select "Properties":
   
3. You should now see the properties of the image:
   
4. Sometimes the image path is too long to fit in the window. In this case, depending on your browser, you may be able to click and drag the window to make it wider.

Displaying Web Graphics

Once an image has been created, it needs to be uploaded to a web server so that you can display it in your web pages. These are the steps you need to take in order to get a graphic to display on your website:

1. Create the graphic
2. Save it in a web format
3. Upload it to a web server
4. Embed the graphic into your web page (using HTML or CSS)

• << Previous
• Next Lesson >>