Overview

Standards

Getting Started

Other Resources

Getting Started

This section introduces basic skills on Illustration and Editing of Graphics. As you read, you will be invited to "Try Out" the skill introduced.Each time you see the Interactive Mouse Icon, we encourage you to return to your own Graphics application to practice.

Note: If you are on a Mac, use the Finder to switch back and forth between the window for this tutorial and the window for your application. The Finder is in the upper right hand corner of your screen, and, by holding the mouse button down on the Finder, you will see a list of all applications open on your Mac. If you are on a PC, "Alt+Tab" will automatically switch between your open windows.

1. Introduction

1. Online Help
2. Menu Items
3. Graphic Tools

2. File Management

1. New
2. Save, Save As, Open
3. View & Magnification

3. Illustration:

1. Draw lines & shapes; Change line attributes.
2. Fill an object or make transparent; Use paint bucket.
3. Select objects and text boxes.
4. Cut, Copy, Paste

4. Image Editing:

1. Flip and rotate objects.
2. Change image size.
3. Rearrange layered objects.
4. Insert your own image into a word processing document.
5. Wrap text around your image.
6. Insert images into a graphics program from file, scanner, library, or Internet

1. INTRODUCTION

1.1 Introduction: Online Help

All software applications have an online Help resource. Most often it is one of the last menu items on the right, and, at minimum, it will usually include an index, a list of contents, a search feature, and balloon help. Remember that this resource is here for you as you meet new challenges with your software in the future.

Look at your help on your application and find items mentioned above. Be sure you understand how to turn the balloon feature on and off. Try out your help's search feature by entering a keyword, such as "rotate". Also, notice what other items are listed under your help menu. Is there a tutorial listed? If so, you may want to take the time to do this tutorial at some point.

Back to Top

1.2 Introduction: Menu Items

Each application has menu items across the top of the screen which allow you to use the features of your software. Notice the similarities between these two applications' menu items.

Become familiar with the menu items in your application. Notice the shortcut icons located just below the menu items. Use the "Show Balloons" feature under the Help menu items; slowly drag your mouse over each shortcut to familiarize yourself with your shortcut icons.

Back to Top

1.3 Introduction: Graphics Tools

To create and edit graphics, you will use the tools provided by your software. In most programs, there will be an option to show or hide these tools, usually by checking or un-checking under a Window or View menu item. Notice the similarities between these two sets of graphics tools on the right.

The most common tools are described in the following sites created by University of Alberta:

• Common Draw Features http://www.quasar.ualberta.ca/edpy202/tutorial/draw/draw.htm
• Common Paint Features http://www.quasar.ualberta.ca/edpy202/tutorial/paint/paint.htm

Find your graphics tools. Slowly drag your mouse over each tool to familiarize yourself with your tool icons. If your application doesn't define each tool as you do this, use the "Show Balloons" feature under the Help menu items.

Back to Top

2. FILE MANAGEMENT

2.1 File Management: New

To create a new graphic illustration, go to File>New. In some integrative applications, at this point, you will have to choose which type of document you would like to begin creating. It may look something like the picture to the right. If so, choose an option that will let you draw or paint, and click OK.

See what your options are under the File>New area. Create a new document in your application so that you can begin creating a unique, practice graphic.

Back to Top

2.2 File Management: Save, Save As, Open

To save an image, go to File>Save. The first time you save, you can choose a destination and file name. After this point your computer will automatically save it to that destination. However, if you would like to specify a new destination or verify the original destination again, it never hurts to go to File>Save As. In most applications, within the Save As window, you will also have options to change the file format if you choose. The most universally used graphic formats include pict, gif, jpg, and tiff. Choosing graphic formats becomes more relevant as it applies to web design.

Return to the new document you created in 2.1 of this tutorial. Practice saving this document. Browse the options in the save window. Choose a destination on your hard drive and a name for your file. As a test, close the window or quit the application and see if you can find the document you just saved by going to File>Open.

Back to Top

2.3 File Management: View & Magnification

As you work on your file, you may want to zoom in to get a closer look, or zoom out to get some perspective on your work of art. Often times, a zoom or magnification feature will be located in a View menu item. This is true for Fireworks as seen below:

Another place to find this feature is in the lower left hand corner of the document window. This is true for AppleWorks.

It looks like this picture on the left.

When you click on the magnification number, in the picture above, you would click the '100' and a menu pops up.

Find the zoom and magnification feature on your application.

Back to Top

3. ILLUSTRATION

3.1 Illustration: Draw lines and shapes; Change line attributes.

Applications will provide the option to draw lines and shapes. Lines can be given attributes such as width, color, and more, depending on the program. The line attributes often appear similar to this AppleWorks Tool Panel. Shapes are created by clicking and dragging diagonally on your page.

In your practice document, create lines and shapes. Give varying attributes to the lines in your graphic. Use your balloon help to see what each tool does, if necessary.

Back to Top

3.2 Illustration: Fill an object or make transparent; Use paint bucket.

The most common attributes for shapes and objects include filling with color and gradient, making transparent (by having no color), and creating borders. The paint bucket feature is one way to fill an enclosed area. These options appear in AppleWorks just above the line attributes.

In the Fireworks Toolbox, shape borders and fill attributes are circled on the right.

One of the most important things to remember when applying attributes is, before beginning, to properly select the object you wish to modify.

Create various shapes in your document. Give your shapes different attributes. Make sure you notice the difference between a white fill and a transparent fill.

Back to Top

3.3 Illustration: Select objects and text boxes.

To create a text box, click on the text tool which is usually the letter "A". Click and drag a box on your document, and the cursor begins blinking, ready to type text. To edit text, click once on the pointer tool, then double click on your existing text box. This should automatically give you a blinking cursor in your text box.

These are the text tools in AppleWorks and Fireworks:

To select objects and text boxes, not to edit contents, but rather, to move, cut, copy, or re-size, for example, you will need to click the pointer tool once, then single click the object you wish to select. To select more than one, either hold down the shift key while clicking additional objects, or, click and drag the tool around the objects you wish to select.

You will know if your object is selected because handles, or small dots, will appear either in the corners or along the edges of the object, as shown below:

Back to Top

Create a text box in your document. Click off of it, then practice reentering it to continue editing. Practice selecting objects in your document and moving them around on the page. Try selecting more than one at a time in the two different ways discussed above.

3.4 Illustration: Cut, Copy, Paste.

To cut or copy objects, first select them, as explained in 3.3. From the Edit menu, or through a shortcut icon, select the cut or copy option. If you are on a PC or have a two button mouse, you may also right click the mouse to access cut, copy and paste actions. If pasting, be sure, when you are preparing to paste, that you click the pointer tool once then click once on the document in an open area. Once you paste, the object usually appears in the selected mode, ready for you to click and drag into place.

Select objects in your practice document to cut, copy and paste.

Back to Top

4. IMAGE EDITING

4.1 Image Editing: Flip and rotate objects.

Graphics applications have an option to flip or rotate your objects.

A rotated object look like this:

The universal icon for rotation looks like a circular arrow, like this: .

Applications sometimes provide shortcuts or tools for rotating and flipping, but sometimes you will need to find these features in the menu items. For example, find the rotation and flip features in these Fireworks and AppleWorks menu items below:

Fireworks:

AppleWorks:

Find the rotation and flip features in your own application. In your practice document, select objects and practice rotating and flipping them.

Back to Top

4.2 Image Editing: Change image size.

To change image size, select an object. You can either manually click and drag a highlighted point, but this often ruins the proportion and/or the resolution of the object. Ideally, after selecting the object, choose a menu item such as, Modify>Image Size. Change the number of pixels or inches, but before clicking okay or apply, be sure to notice if your object has remained proportional. Remember that you can always use your Edit>Undo menu item immediately after a mistake, as a back up. Some applications allow you to clearly select whether or not you wish to maintain the proportion of an image.

Fireworks provides this option in Modify>Image Size:

Select objects in your practice document. Change the size of the selected objects proportionally and non-proportionally. Use Edit>Undo as necessary.

Back to Top

4.3 Image Editing: Rearrange layered objects.

Objects in graphics applications can be layered on top of one another. For example, the following graphic is a series of four individual objects on top of each other.

This is an orange ellipse, a blue rectangle, a text box, and a green line. All of them are layered on top of each other. While creating this graphic, it was necessary to rearrange the layered objects by doing a few of the following actions: Bring or Move Forward, to Front, Backward, to Back, or similar types of commands.

Most often, these actions are found in the menu items. First select the object or objects you want to rearrange, then find the appropriate action in your menu items. Notice how similar they are below:

Fireworks:

AppleWorks:  

Layer the objects in your practice document so they are right on top of one another. Practice selecting each object and rearranging its level within the layers.

Back to Top

4.4 Image Editing: Insert your own image into a word processing document.

To open your image into a word processing document, first save it in the graphics application. Your application should automatically save it in a format that will allow you to insert it into your word processing document. If you want to be sure that it will be saved in a transferrable format, use Save As and browse your File Format choices. If gif is a choice, this is a standard format to choose. Complete the saving process and close the application altogether. Important: Remember where you saved it and what you named your file.

Open your word processing application. Either open an existing document, to which you would like to add the image you created, or, open a new blank document. In your word processor, there should be a feature somewhere within your menus called Insert or Insert Image. Often times it will be located under File>Insert. A window will pop up that will allow you to find your image. You may have to browse through folders or directories until you find it.

Once you find it and choose it, it will appear in your word processing document, often as a selected image. It will either be inline or floating. This is a critical difference. Inline means that it is fixed between the text where it appears with very limited modification. Floating means it can be modified and relocated more easily. You should consult your help menu for more details on this.

Save your practice image. Open up a word processing application on your computer, Microsoft Word or AppleWorks, for example. Find your Insert feature, and insert your image. You may want to practice moving your inserted image into position while it is selected. Learn the method of your application to switch your image from an inline to a floating status.

Back to Top

4.5 Image Editing: Wrap text around your image.

In your word processing document, you can wrap text around your inserted image in a variety of ways. First select the image by clicking once on it. In some word processors, it must be in floating status. For instance, in AppleWorks, you will only see the necessary menu item, Options>Text Wrap, if the object is selected while in floating status.

After selecting your item, find an option in the menu items that will allow you to modify your image. Text wrapping is an attribute of the image itself, not a format of the text. Don't get confused by this.

AppleWorks

The lines around the blue diamond show how the text around your image will appear.

In the word processing document into which you inserted your image in 4.4 of this tutorial, apply different text wrap options to your image. If you don't have any text near your image, you may want to type a sample paragraph so you can see the effects of your choices.

Back to Top

4.6 Image Editing: Insert images into a graphics program from file, scanner, library, or Internet.

In addition to creating an image from scratch in a graphics application, you can also insert images of various types. You may have a digital camera picture file or a scanned image file that you might want to insert into your graphics application. You could edit these files in a variety of ways, from labeling the people in the picture to editing color, lighting, and contrast.

You might also want to use clip art from a library of images on your computer. You might want to use an image you created and saved previously. The Internet offers a variety of images which you could use, as well, depending on the copyright information. Look for a statement about copyright within the site. If no copyright information is provided, be sure to request permission from the artist before copying or downloading.

First, make sure the images you want to insert are in a designated folder that you will be able to find. Second, in your graphics application, go to File>Insert or the Insert menu item and browse your hard drive for the file you would like to use. If you need to make a citation under the image, create a text box and locate under the image.

Following is an example of something created by inserting an image from the Internet. The image is a digitized political persuasion poster from the National Archives and Records Administration. The resulting graphic, after the orange text and citation information was added, is ready to print and put on a bulletin board of a classroom studying World War II.

Gather some images into a designated folder in your hard drive. Practice inserting each image into a new or existing file in your graphics application. Cite the source of images as necessary.

Back to Top