Composer Webpage Design: home |1|2|3|4|5|6|7|8|9|HTML Resources
Creating Your Own Web Graphics


In the last activity, you saw how easy it is to add graphics from clipart collections and other websites to your webpages.

In this next activity, you will create your own web graphics. It is suggested that Windows 95/98/2000/NT users use the Microsoft Paint application for this activity.

Mac users can use the ClarisWorks / AppleWorks Paint Application. You will also want to check your computer applications for other graphics tools or photo editors which may also work.

If you are unable to locate a suitable graphics tools installed on your computer, you can use these online graphics tools to create your own web graphics. Instructions for using the tools are found on the website.

GIFWorks.com - GIFWorks is a full-featured online graphics editing tool. You can open images from your computer, apply special effects and save the modified image back to your computer.

3D Text Maker - Create personalized 3-D Banners for your webpages.

Creating Web Graphics Using Paint

  1. Click on the Start button located in the lower left corner of the Windows 98 screen.
  2. Move the cursor up to Programs, over to Accessories and then down to Paint.
  3. Click on Paint and the application will open on the screen.
  4. First you will want to set size of the image you will create.
  5. Click on the Image menu and select Attributes.
  6. A dialog box will appear allowing you to set the heighth and widt of the image.
  7. Remember that the larger the image is, the longer it will take to appear on the screen. You might want to start with a 300 pixel by 200 pixel size. As reference point, remember that the normal size of a webpage is 640 pixels by 480 pixels so you will want to create images that are smaller than those dimensions to allow room for the webpage text.
  8. The Tool Buttons on the left side of the screen will allow you to select the Paint tool you want to use.
  9. Begin by experimenting with the Pencil, Brush and Airbrush Tools which will allow you to draw lines and shapes on the palette.
  10. Clicking on the Color Chips at the bottom of the screen will allow you to change the color displayed on the screen.
  11. The Line and Curve tools allow you to draw straight lines and string-like curves on the screen.
  12. The Shape Tools on the lower left side of the Tools bar allow you to create geometric objects.
  13. You can change the thickness of the line by selecting from the Line Size buttons.
  14. The Eraser Tool allows you to correct mistakes.
  15. The Fill Tool will fill closed shapes with a selected color.
  16. Clicking on the Text Tool will allow you to add text to the image.
  17. Hold down the left mouse button while you draw a text box on the screen.
  18. When you release the mouse button, a box will appear allowing you to type the text, select the Font and Font Size.
  19. Spend some time creating your personal web graphic.
  20. You will find the Help files useful if you need more information on how to use the tools.
  21. If you want to begin again, just select New from the File menu.
  22. When you are satisfied with your digital image you will want to save it so you can insert it into your webpage.
  23. You will want to be very careful in this next step since web browsers can not display the .bmp (bitmap) images that Paint uses as the default save as option.
  24. Follow these steps to save your graphic in a format that can be displayed.
  25. Select Save As from the File menu.
  26. When the dialog box appears, select the Desktop or the 3 1/2 Floppy (A:)
  27. Now, click the down arrow to the right of Save as type: and click on .gif or .jpg (Note: GIF and JPG files can be displayed by all web browsers and are the best choice for your personal web graphics).
  28. Click on Save.
  29. Open your graphics webpage with Netscape Composer and insert your image following the steps you used earlier.

Mac Users: ClarisWorks/AppleWorks Paint is very similar to Microsoft Paint. Consult the Help files for specifics. Be sure to save your graphics in either the .gif or .jpg graphics format rather than the default Mac .pict format which will not work on webpages.

 

 

Website maintained by Bob Jost | bjost@josts.net | last revised July 21, 2004

Copyright © 1997-1999 by Bob Jost.  All rights reserved. No part of this website may be
transmitted, stored or recorded in any form without written permission from the author.