(Updated: May 20, 2006)

Ultimate Paint

Created by: Kathy Lo
Revised by: Tanya Ellchuk
Revised by: Jake Wires
Comments to: Steve Wolfman

Objectives
Before the Lab
During the Lab
Deliverables

Objectives

Ultimate Paint is a powerful graphics program. In this lab you will learn how to create and manipulate images using Ultimate Paint.

Before the Lab

Start thinking creatively and prepare to bring out your artistic side. You will need to be creative in this lab!

During the Lab

Part I: Getting to Know Ultimate Paint

Remember you can undo: Press Control-Z immediately after anything you've done that you want to undo. This can make it more fun to play around with different shapes and brushes. Be aware also that if you click on the Eraser (Clear Image) option of the paint toolbar, everything in your image will be erased. If you do this accidentally, you can click on Edit in the top horizontal toolbar, and then on Undo.

1. Open Ultimate Paint - Click on Start > Programs > Ultimate Paint > Ultimate Paint.
You should see a horizontal menu bar and a canvas.

2. Choose Options > Toolbar.
A toolbar should appear with brushes, circles and squares.

3. Choose Options > Palette.
The Tools window should appear with a colour palette.

4. Fun things you can try:

Setting the Background Color
1. To change the background color of the canvas, open the Select Drawing Color window by clicking on the Drawing Color menu item:
2. Select a new color.
3. Select the Solid Fill tool from the menu:
4. Click anywhere on the canvas.
Freehand Drawing
1. Like all artists, you need a brush to paint. If you click and hold your left mouse button down on the Brush button ( at top right in the toolbar), an array of brush options will appear: continuous freehand, dotted freehand, and single freehand. You might want to click on continuous freehand to start with. Then, click on the toolbar button just to the left of the Brush button to opt for freehand drawing.
2. Now you need a colour, so take your brush (ie. your mouse) and click, with the left mouse button, on the colour you would like to use. Don't forget to use the horizontal scrollbar if you want to see more colours. If you want to have another colour handy while you draw, click on a second colour with the right mouse button.
3. To draw, hold down a mouse button and drag the "brush" across the canvas (the white space).
Shape Drawing
1. Ultimate Paint is capable of drawing many kinds of shapes or lines. You may start by clicking on a circle, a square, a line, or an arc in the toolbar.
2. Once you do, there may be some parameters you can adjust in the Tools window. Feel free to experiment with these values!
Saving an Image
1. When you save your image, make sure it's saved as a ".gif" file.
  
  If you only want to save the image you have created, and not the background, make sure that the Transparent box is checked in the Save File window. If the Transparent box is not checked, then the background, along with its color, is part of the image, and that will be undesirable later if you want to place the image on a different background. (If the option to make the picture transparent doesn't work, please ignore this issue.)
Advanced Brush Options
1. There are many advanced options for the brush in the Brush menu. Some tools, like Stretch, allow you to manually change the brush shape by clicking and dragging on the canvas. Others, like Halve, change the brush shape automatically. Below are some examples:
  Size = 20, square brush, transparency = 50
  Size = 15, circular brush that has been stretched width-wise and bent up-and-down.
2. To undo a brush change, choose Brush > Undo.
Special Effects
1. There are a LOT of fun things you can do to your image under the Image menu. For example, try selecting:
  1. Image > Noise > Noise Blur (this is what your picture would look like in a sandstorm)
  2. Image > Transform > BlowOut (what your picture would look like with some electricity running through it
  There are lots of effects to try. Take some time to try them out. You can also use the selection tool (the button on the toolbar) to select a portion of the image and try different effects on different parts of your image.
2. You can also create custom special effects. Choose Image > Custom Filter and play around with any of the numbers, including the Div and Bias numbers. Try out some larger numbers like 20 or 50. The preview button shows you what the effect will look like if you click OK.
Resizing
1. You may want to set the exact size of your image. To do this, choose Image > Resize to show the Resize tab in the Tools window. Here, you can set the exact width (SizeX) and height (SizeY) of your image. If these numbers seem high, it's because they represent the number of pixels wide and high that your image is. If you want the entire image to be resized equally, instead of stretched in one direction, make sure that Keep Aspect Ratio is check-marked in the Resize tab.
Cropping
1. When you crop an image, you're keeping only the part of the image that you currently have selected. To crop an image, first select part of the image using the select tool ( in the toolbar) to click and drag on the image. Then, choose Image > Crop, and a new window should appear with only the piece you've selected.
2. To get a better idea of the location of your mouse cursor when you're selecting a piece of the image, you can look at the pixel coordinate position. Choose Options > Preferences, then click on the Interface tab, and finally make sure that the Measurement Unit drop-down box is set to Pixel. The (X, Y) coordinates of your mouse cursor are now displayed in the bottom left-hand corner of your window, as shown in the following picture:
  
  The X and Y coordinates represent pixels in the image. For example, if your image has 640 x 480 pixels, then (because we start counting from 0) the top left-most pixel in the image is at (X=0, Y=0) and the bottom right-most pixel is at (X=639, Y=479).
3. Now you can precisely select part of your image. If you want to select the top left quarter of an image that is 640 x 480 pixels, then click the mouse at (X=0, Y=0) and drag it to (X=319, Y=239). (Remember that because we started counting at 0, we end at 1 less than 320 and 240). Then choose Image > Crop and you'll have a new image that contains just the top left quarter of your original image. You can save this new image as a separate image just like you saved the origina- image.
Importing an Image
1. Remember in Lab 0 when you downloaded an image off the Web? Go to File > Open to find that image (or any other image you may wish to use).
2. You may use the same techniques described above to modify this image.
Other Fun Tools
1. If you want to learn more about what the other tools do, simply hold (don't click) the mouse pointer over a button on the toolbar. A small yellow tag should appear with a description of the tool.

Part II: Creating and Splitting an Image

1. Create an Image: Use Ultimate Paint to create a new image and set the size to 640 x 480 (SizeX=640, SizeY=480). To prepare your image, you are required to use the various shapes, colours, textures and effects that were introduced in Part I. Make sure as well that you use at least two different types of custom brushes that have been modified a few times (e.g., make the size bigger, stretch and bend the brush), and a custom filter.

Some possible images you could create that would make use of the many features of Ultimate Paint include drawing:

a basket or a bowl of fruit
a beach scene or landscape scene
the view from a window / a cityscape scene

You are not limited to these suggestions. If you have an idea other than the above, create it! Just make sure to incorporate various shapes, colours, textures, etc. of Ultimate Paint. Try to come up with something that you could add to your web page.

You can also copy and paste together images from the web to create an image or add to your creation.

When you save your image, there are two things that you need to check in the Save File window:

That the "gif" file format is selected.
That the Transparent box is checked (it's in the lower half of the window) if you don't want to save the background as part of your image.

2. Split it up: (Make sure you save enough time for this step.) Next, you need to split your image up into 8 smaller images using the crop tool, like this:

Before you begin, make sure you are viewing the image at 100% zoom. The zoom can be adjusted using the zoom buttons on the top toolbar (). Click the up or down arrows until you reach "1".

The idea is to crop the image first into two rows, then to crop each row into four columns. This will create 8 separate images that you should save as pic0.gif, pic1.gif, etc. The heights of the rows do not have to be exactly equal, nor do the widths of the columns. To do this:

Select the top part of the image and crop it. From the new temporary image, select a rectangular piece starting at the left. Crop this, save it as pic0.gif, and close it. Continue for pic1.gif to pic3.gif. Once you have split the top part of the image into four pieces, close the temporary image you were working with.
You should be left with the original image again. Now select and crop the bottom part of this image and divide that part into 4 pieces (pic4.gif to pic7.gif).
Tip: The idea is that you should be able to take the smaller pieces and reassemble them to form the original image. To make sure that your small images won't overlap, use the (X, Y) pixel coordinates to figure out where the edge of each selection is before you crop it. For example, if you crop the top part of the image from (0,0) to (639, 220), then make sure when you return to crop the bottom half of the image, that you start at (0, 221) (i.e., the very next pixel row) and go to (639, 479).

Deliverables

Show the original image you created to your TA, along with the 8 smaller images. If you like, add the original image to your web page.

Grading scheme for this lab: