WWW graphics

If you brought your own pictures you can scan them in the computer lab.

In case you don't have any pictures of your own you can edit some of the following. Pick an image and save it to MyTemp folder on drive C:. If you have scanned images on the U: drive copy them to MyTemp as editing images on the network drive is very time consuming. Note! The images are very big (2.6 - 4.4 megabytes).

Use Corel Photo-paint to edit the picture you selected to one that can be used in the WWW. (Start|Programs|Corel Draw 9|Corel Photo-paint 9). Save the image every now and then but keep the original!

Corel Photo-Paint 9

  1. Position

    Make sure the image is in upright position. After scanning it may well be upside down.

    1. Try Image|Flip to turn the image. Edit|Undo or pressing ctrl-z cancels the changes you have made.
    2. Image|Rotate turns the image on continuous scale.
  2. Crop

    Crop the image and keep only the part you want to use.

    1. Select Rectangle Mask Tool of the tools on the left corner.
    2. Use mouse to select an area you want
    3. Select Image|Crop|To Mask to crop.
  3. Adjusting colors

    Correct the colors or adjust them just for fun.

    1. First try how the gamma correction affects the image Image|Adjust|Gamma
    2. If needed, adjust the brightness, contrast or intensity Image|Adjust|Brightness-Contrast-Intensity
    3. And also the hue, saturation and lightness Image|Adjust|Hue/Saturation/Lightness
  4. Effects

    There are numerous effect tools available in the graphic programs. The most important ones are sharpening and softening. The other effects you can try some other time.

    Sharpening

    For sharpening the image select Effects|Sharpen|Sharpen

    Softening

    For softeing the image select Effects|Blur|Soften. Also try the other Blur tools.
  5. Size

    If you haven't saved the image so far save it now! Then adjust the size of the image to suitable for WWW use. Approximately 600x400 pixels is a good maximum size for an image. If you want to use an image larger than this, use a small image as a link to the large one and notify the user of the size of it.

    1. Adjust the size by selecting Image|Resample
    2. Select pixels for the unit in use
    3. Adjust the size either as percents or pixels
  6. Number of colors

    If the image is not a photo but for example a draft or a diagram it is best to minimize the amount of colors in use.

    For changing the image to a grayscale image select Image|Mode|Grayscale (8 bit).

    1. Selecting a spesific numer of colors can be done by Image|Mode|Paletted (8 bit)
    2. Select optimized for Palette
    3. Select Ordered for Dithering. Dithering means replacing the lost hues by mixing other colors. You can try options other than ordered.
    4. Put the numer of colors you want to Colors. Compare the original and the result and select the minimum number of colors that still looks good.
  7. Format

    Mainly three image formats are used in the WWW: jpg, gif and png.

    1. Save the original image in the own format of the program or as full color and full size version in the png format
    2. After adjusting the size and number of colors save the image in one of the formats mentioned above by selecting File|Export
    3. Select the correct format to Save as type
    4. After selecting the format you can adjust the settings of the image. When you save the image in jpg format remember to set the compression to as high as possible without any visible changes in the quality of the image.

Diagrams

Save one of the diagrams below.

Diagram 1 Diagram 2

Minimize the number of colors and save the image in the GIF format. When saving it is possible in Photo-paint to set the background color as transparent.

Change the default background color of your browser to gray, for instance, and open the diagram you saved to make sure the background is transparent.

Black and white images

Often one can by mistake save black and white images with too many colors when they become unnecessary large. Copy the image below and set the number of colors to two. Save it in the GIF format and set the background color to transparent.

Change the default background color of your browser to gray, for instance, and open the image you saved to make sure the background is transparent.

Black and white image

Print screen

Often one has to save a program window or the whole screen which is very easy in Windows. Press Print Screen and Windows copies the whole screen to the clip board. You can paste the image to Photo-paint to edit normally (Edit|Paste|New Document or File|New from Clipboard). For copying the active window only press Alt + Print Screen. Try!

Photopaint handbooks

Common tricks

http://appro.mit.jyu.fi/2001/syksy/tietoverkot/demot/demo6/index.html
© Petri Heinonen ()<URL: http://www.mit.jyu.fi/peheinon/>
11.10.2001 12:59:44