The Web Tutorials
Chapter Index
Introduction
History
Getting Connected
Browsers
Copyright
Search
Engines
Hyperlinks
HTML
Linking documents
Images
Newsgroups
Tables
Photoshop
Page Design
Publishing
Javascript
Free Stuff
Styles
DHTML
On-line Shopping
Internationalism
Advertising
Forums and Chat
Manipulating images in Photoshop
You have a picture but you need to get it so it can be viewed on the web. Your average image is not web friendly. Generally speaking you will have a BMP or TIFF, and the web supports neither format. An EPS file doesn't help either. You need your image to be either a GIF or a JPEG. (Or PNG - pronounced 'ping'; but this format does not seem to be catching on.)
There are programs that will turn images into web friendly formats, but if you are scanning an image which you then want to place on your site you will need to use a program such as PaintShop Pro or Photoshop to adjust its format. Below is a run-thru on the routines you will typically need in order to turn a bitmap into a GIF or JPEG using Photoshop.
Either open a bitmap image in Photoshop, or scan an image directly from within Photoshop, using the Acquire option from the File menu. By default you will probably end up with an image in a Photoshop format using the three colours that monitors traditionally use to display graphics: Red, Green, Blue, (the RGB mode). This mode will probably also be displaying 256 colours by default. If you are scanning your image, restrict the colour palette to 256 colours (8-bit colour). You can only see 216 colours on the web so to scan at a higher rate is just a waste of time.
When you have scanned or imported your picture you will need to manipulate it. You can first of all check and adjust its brightness and contrast, and maybe adjust the colour hues. This can all be done from the Image menu, using the various options under Adjust. You will note there are many options you can choose to adjust, probably the only ones you will need are those for brightness and contrast, but experiment with the others to see what they do to your picture. You may be pleased/appalled by the results, but if you don't experiment you will never know what can be done with your image.
Next you need to look at your image and decide whether there are large blocks of colours, or whether there are continuous tones giving gradations of colour. If the latter, then you need to save your image as a JPEG. This will give Photoshop the chance to compress the file according to its own algorhythms. The only control you have over this process is the choice of High, Medium, or Low compression rates.
To do this, choose Save Copy As from the File menu, and select JPEG as your preferred file format.
Indexing the Colour
If your image does contain large blocks of colour, you can use the GIF format. What you need to do is index the colour, or reduce the bit depth. Your 256 colour image contains a pixel depth of 8 bits. By going to the Image menu, and choosing Mode and then Indexed Color you will be presented with a dialog box which asks you (among other things) how much information you want to keep for each pixel.
To cut the colours to only eight you will be reducing the pixel depth to 3. An equivalence is given below:
Bits
1 bit
2
3
4
5
6
7
8Colours
2 colours
4
8
16
32
64
128
256The colours available in your palette, and therefore in your image when you have 8 bits of information per pixel are as below:
When there are only 3 bits of information you get just eight colours:
Cutting the amount of information from 8 bits per pixel to 3 bits per pixel will cut down the size of your file considerably.
Next you can go back to the Image menu and select Image Size. Reduce your image to the size you want it to be on your web page. Making it larger is just a waste of bandwidth, you will be importing the larger file, and the object of the exercise is to keep the file size down.
Transparancies
One further way of reducing file size is to make one of your colours transparant. This can only be done with Gifs. You may have a picture of an aeroplane, and only want a picture of the aeroplane, rather than a pictures of an aeroplane flying thru a square frame of sky. You can select the sky, and make it transparant.
First you must have indexed the colour. Next make sure your sky is just one colour, if it isn't make it so. Then go to the File menu and choose Export, and from the side menu choose Export Gif 89a. This will bring up a dialog box with part of your picture displayed, and a series of boxes showing the colours in the picture.
Click on the color in the picture that you want to make transparant. Your cursor will change into an eye-dropped tool. Selecting the color will highlight its box in the lower part of the dialog box. This is the color that will be thrown away, thus leaving you with no information about the background, thus leaving you with a considerably smaller file.
You can also choose to have an interlaced file as well. This will cause it to be displayed gradually, alternate lines at a time.
