Phantom Art Resources: Art Tips

Creating Web-Viewable Images 

 This tutorial is meant as a guide to help those inexperienced with creating images for the web, and hopefully make it easier for them, so they can make fewer of the mistakes I did. ;D  I hope that you will find it useful.

1) You have to have access to a scanner and a computer image editor, or you will not get very far.

Scanners: I don't know what is best here, get one that scans, and what it messes up, hopefully your image editor will be able to fix.

Image Editors: Whatever you have, learn to use it, scan something in and mess around with it until you know what each of the tools do and what their capabilities and limitations are. This just takes time. Hopefully this tutorial will help you get started.

Various Image Editors:

Adobe Photoshop: The very best available. If you have Photoshop, consider yourself blest, kiss whoever made it available to you, love it, use it, get to know it very well. Photoshop ranges from $600 to $300 or so with a student discount, and less for pirated versions.

Adobe Photodeluxe: this came with my home scanner, works alright for scanning, sharpening, and doing minor clean-up of already decent images. I haven't managed to make any decent computer colored art with it yet.

Corel Draw, etc-- there are a lot of other photo editors out there, learn to use the one you have, both its capabilities and limitations. It will be frustrating but worth it.

2) Follow the manufacturer's instructions and scan your image; open it in your image editor. Use the contrast/sharpness tool, and any other tool necessary to adjust your image until it either looks like a passable copy of the original, or better.

3) Crop your image till your work is framed the way you want without access blank space.

4) Use the airbrush tool or rubber stamp to erase stuff you don't want. These are great for getting rid of markers that accidentally went over the line, and other hand slips. And for evening up a splotchy background. Learn to use the rubber stamp tool, its tricky but quite useful.

 5) Once the image is cleaned up to your liking, save a copy of it and then change the resolution of your image from the 150 or 300 pixels per inch you scanned it at, to 72 pixels per inch. This is the best resolution for images on the web, higher resolutions are for printing.  Lowering the resolution will change the screen size of your image, so it is important to change the resolution before adjusting the size of your image. It is good to save a copy of the original cleaned up scan in the higher resolution if you ever wish to come back and change it or print it later.

6) Change the size of your image so it will be easily viewable on the web. You want your image as small as it can be without losing to much detail. Most web browsers show web pages at 600 x 800 pixels. That would be quite a large image, so save it smaller, at least width-wise. The smaller your image, the quicker it will load. Use pixels when adjusting size, for inches and centimeters refer to print size and are not helpful in gauging what your image will look like on the web.

7) Once it is to your liking, save your image, either to the hard drive or on a disk. Zip (or Jazz) disks are the most useful for carrying images around with you to different computers, but normal disks will work fine (they just have less space). Bare in mind that anywhere you save your images is likely to become corrupted at some point, so saving back-up copies in various places is recommended. Your image editor will save the image in some format that is formulated for viewing only in your image editor, you will have to save it in a different format to put it on the web.

8) Save your image in a web-viewable format, either as a .gif or .jpg. In Photoshop, you do this under "Save for web."

JPEG-- designed for photographs, jpeg is great for artwork with a lot of shading and colors. You will save most of your artwork as a jpeg.

Don't continually open and re-edit your image as a jpeg, because it is designed to compress, or make the image less detailed, every time you resave. Edit it in your image editor's save format and then resave it as a jpeg.

GIF-- these are great for images with a lot of flat color, such as web graphics, especially because you can make one color transparent (one and only one). This way you can make non-square shaped web-images and still have them work on any background you put them on.

9) Upload your image to your web page, email it to your friends as attachments. Post your Phantom artwork on the Forum, and I'll add it to the Phantom Gallery, if you so wish.

I hope this was helpful!

Rebecca JJ, 2001