GIF 101 - learn basic info on GIF and JPG graphic format.

Home

Free Web Graphics

- More Graphics

3D Gallery

Here you can find some basic info and help on web graphics:

(this page is still under construction)

What are GIF and JPEG

How to download them to your computer

How to use them on your webpage

What software should I use to make GIF / JPEG files

Where can I get more web graphics

Here are some basic info on GIF and JPEG

GIF	JPEG
GIF = Graphics Interchange Format	JPEG = Joint Photographic Experts Group
8 bits/pixel (256 or fewer colors)	24 bits/pixel (16 million colors)
GIF is better on images with only a few distinct colors (line drawings and simple cartoons)	JPEG is superior to GIF for storing full-color images of realistic scenes (scanned photographs and similar material)
"lossless compression"	"lossy compression"
supprts transparency	does not support transparency
supports animation	does not support animation

Click here to send me an email if you have any question/comment.

Back to the top.

Download GIF / JPEG from the net to your computer

Netscape	Internet Explorer
Move your mouse pointer over the image, then click with your right mouse button and click "Save Image As..."	Move your mouse pointer over the image, then click with your right mouse button and click "Save Picture As..."

You can't download files if you have WebTV.
You need to get a free webpage from Geocities or Tripod, then transload files to your own webspace using Star Boulevard Transload Service.
Click here to get more info on how to transload files via WebTV.

Click here to send me an email if you have any question/comment.

Back to the top.

The easiest method of adding web graphics to your webpages is to use software such as HomeSite 4.5, Astound V6.0, HoTMetaL Pro V6.0, Dreamweaver 3, FrontPage 2000, or Netscape Composer. But if you want to do this manually, then follow the following steps.

Let's say you download "logo.gif" and "dog.jpg" from the net and decide to use them on your webpage.

Open / create a webpage with a text editor (eg. Notepad, MS-DOS Editor, WordPad...etc)

Your web page should look something like this:

<html>
<head>
<title>My Webpage!</title>
</head>
<body>
THIS IS WHERE YOU TYPE YOUR CODE
</body>
</html>

The two images can be used as follow:
<img src="logo.gif" border=0 height=32 width=208>
<a href="mydog.htm"><img src="dog.jpg" alt="Woof" border=0 height=81 width=120></a>
Note:
"border=#" controls the thickness of the border around the image in pixels
"alt=????" gives you the ability to display text in place of an image
"width=#" and "height=#" allow you to specify the width and height of an image in pixels
Place "<img src=????>" between "<a href="????">" and "</a>" to hyperlink the image to a webpage or document.

Web Design in a Nutshell - this book covers the basic elements of web design, ranging from basic design principles to browsers and types of displays; basic html elements to image formats; and Cascading Style Sheets to JavaScript and basic server background.

Click here to send me an email if you have any question/comment.

Back to the top.

What software should I use to make GIF / JPEG files

Here are some good graphics software you might want to try to make web graphics:

PhotoImpact V6.0 - design Web graphics like a pro with Ulead PhotoImpact 6 improved comprehensive set of Web graphics, animation and optimization tools.

Paint Shop Pro 7 - award-winning program from Jasc Software, Inc. Paint Shop Pro 5 contains the tools you will need to paint, edit, and retouch your images.

Ulead GIF Animator 4 - an award- winning bundle for making professional web-based 3D graphics, without the steep learning curve of traditional 3D programs.

Flash 5 - the best tool for making smooth, quick-to-download and interactive web graphics / animation.

Fireworks 3 - the professional solution for designing and producing graphics and taking them to the Web.

Photoshop 6 - one of the most powerful graphics / imaging editing package out there, but also one of the most expensive.

Designing Web Graphics.3 - this book features all new images and text, a new interior design, and a new cover. Written in Lynda's trademark style, Designing Web Graphics.3 will provide extensive step-by-step coverage of how today's best and most-used web tools, including Adobe Photoshop, Adobe Illustrator, Paint Shop Pro, Photo-Paint and more are used to create web images and media.

Click here to send me an email if you have any question/comment.

Back to the top.

Where can I get more web graphics

If you are looking for more free web graphics, then here are some good resources:

Clipart.com - very good free web graphics directory.

Animation Factory - tons of free animated gifs, clip art, and graphics.

A-1 Icon Archive / Free Web Graphics - Icons, balls, backgrounds, bars, graphics, animated gifs, clip art, and more!

Click here to send me an email if you have any question/comment.

Back to the top.