How Do I ... Create Graphics for the Web

Contents


Introduction

Creating graphics for the Web can mean anything from creating small buttons to fullsize images. There are numerous methods for creating graphics (which are also referred to as images) and the method you choose will depend largely on the software which is both available and familiar to you. Whichever method you choose, and several are outlined in this document, the goal is to create either a GIF (Graphics Interchange Format) or a JPEG (Joint Photographic Experts Group) file. The JPEG file extension is JPG.

To begin with, for some general guidelines about graphics, read the Guide for UWO Web Information Providers, Graphics It is important to remember that graphics (gif/jpg files) cannot be viewed by text-based browsers and, therefore, information may have to be conveyed in an alternative way, by using the ALT tag in your HTML.

Screen Capture

Screen capture is a very useful way of getting any graphic that can be displayed on your screen (such as a chart from Excel or a graphic in a package that does not create gif or jpeg files) into a Web compliant graphic file format. The other important feature of a good screen capture utility is that it creates a graphic file at SCREEN resolution, perfect for viewing on-line from Web pages.

Using a Wordprocessor

  1. You can use the capabilities of your wordprocessor to create a graphic. For example, with WordPerfect or MS-Word, you can create a graphic which may be as simple as text with borders or a combination of a graphic which comes with the wordprocessing package and your own creative touches.
  2. Once your graphic is ready, you use a screen capture package to create the gif/jpg file. See the section Screen Capture above for steps to do this.

Using a Spreadsheet Package

Tables and graphs are often created in a spreadsheet program and become part of your Web document. These can also be converted to a graphic image using a screen capture package. See the section Screen Capture above for steps to do this.

In such cases you need to decide whether or not the information is being conveyed adequately to your audience.

Using Graphics Packages

The following packages can be used to create graphics and in most cases the package will produce a gif/jpg file.

  • PC - CorelDraw
  • Mac/PC - PhotoShop
  • Unix - xpaint, xv, tgiff

You have far greater control over the creation and saving of your graphic with these packages and along with this is the responsibility of keeping the graphics file a reasonable size for downloading. Having a graphic on a Web page that has 300 dpi is a waste of disk space and network bandwidth when downloading since most monitors can only display 72 dpi.

Tips

Photoshop is heavily used for creating graphics for the Web and has several good sites that provide TIPS and TRICKS.
http://www.cooltext.com has information on how to create a button and http://www.mccannas.com/pshop/photoshO.htm has "One Minute Photoshop Tips".

Using a Scanner

The results you get will depend on the scanner and software you are using. If the software you are using does not have the ability to save to gif files, you can always scan and then use a screen capture utility to create your file. You may scan at high resolution and then make any changes or tidying that are needed. Before saving the file you should reduce the resolution and if possible, change to indexed colour (no need if you are capturing the screen).

Borrowing Images

You can use graphics created by others, however, an acknowledgement may be required. In some cases, copyright rules apply. If you have permission, and the graphic is already on the Web page in front of you, it is VERY easy to get a copy. In Netscape, for example, you point to an image and press the mouse button down for two seconds (right button on a PC) and a pop up menu will ask you if you would like to save the graphic.

There is a selection of images on the UWO Web server. These are located at http://www.uwo.ca/images/ and can be viewed on-line at http://www.uwo.ca/cgi-bin/images.perl. For some interesting graphics sites available on the internet you may want to check out http://www.abcgiant.com.

Incorporating graphics into your html document

Once your graphic file is ready there are two ways of including it in your html document.

The first way puts the graphic on the current page.
<img src="graphicfile" alt="alternate text when graphic not seen">
The second way calls the graphic up on a page of its own.
<a href="graphicfile"> clickable text </a>

In each case, graphicfile refers to the url of your graphic file. This can be as simple as the file name if the graphic file is going to reside in the same directory as your html file or it may be an absolute url which includes the server and path.

 

Disclaimer: The provided instructions are for information purposes only. Neither The University of Western Ontario nor the Division of Information Technology Services assume any responsibility for loss of use or damage to a computer system (including any data or software contained within the computer system) which is the result (directly or indirectly) of the application of these instructions. Any problems, questions or concerns not addressed by these instructions should be directed to the vendor and/or the manufacturer and not to The University of Western Ontario or any of its employees or incumbents.

©2010, The University of Western Ontario. Permission is granted to copy in whole or in part provided that due credit is given to the authors, Information Technology Services, and The University of Western Ontario.

Western provides the best student experience among Canada's leading research-intensive universities.