All currently editable chapters are in the Working Version section. -- All finished versions are in the Finished Version section.
Please create an account and log in to start editing
Chapter 1
From Digital Foundations
Contents |
Chapter 1: Metaphor
Design software interfaces are built on metaphors that link your computer to the tools that it aims to replace: pencils, brushes, artboards, and photographic enlargers. These metaphors are consistent across the interfaces of operating systems and design applications. For example, the palettes and the toolbars are the same, despite subtle differences, in Adobe’s Illustrator, Photoshop, Dreamweaver, and Flash. Learning the metaphors and similarities among these application interfaces will be one of the fastest routes to mastering the tools.
All design software runs in an operating system such as Mac OS, Windows, or Linux. An operating system is the software that is responsible for running all other software. Regardless of the operating system you are using, all of them share a few central metaphors that will help you understand how they work.
Operating systems use metaphors such as Document, Folder, Hard Drive, File System, and the Desktop to present their content. Before today’s so-called “paperless office”, office workers created documents on paper, filed them in file folders and organized the folders in filing cabinets located next to their desk. The most important or current project folders might have been sitting on their desktop. Of course the original paper system persists along side the computerized system, as well as in the computer’s metaphorical structure.
To create a new file folder on your computer, navigate to the folder you want to contain your new folder, and select File > New Folder. Most computer users typically store folders in the Documents folder or on the Desktop. (INSERT PATH)
The trash is a salient metaphor in all computer operating systems. To delete a document in MacOS, click on the document and drag it onto the trash icon on the dock.
(SIDEBAR)Another way to move an item to the trash is by selecting the item and hitting Cmd + delete. The Command (Cmd) keys are located directly to the left and right of the space bar. They are used in most keyboard shortcuts in Mac OS, much like the Control key (ctrl) is used in Windows.
(SIDEBAR)Contextual menus provide yet another way to delete a file. The contextual menus appear by right-clicking the mouse. If your mouse has only one button, ctrl + clicking accesses the contextual menu.(Is this part of the sidebar information?) Contextual menu options change depending on the context in which you click. If you click on a folder, you get list of actions that can be done to a folder. This menu is different than if you clicked on a file. To delete an item using the contextual menu, right click on the file and select "Move to Trash" from the contextual menu.
In order to change the name of a folder, click once on the folder to select it, and then click on the name of the folder. Once the name appears highlighted, you can type on top of the original name to replace it.
Exercise 1: Creating a new file in Adobe Illustrator
- In Mac OS, move the mouse to the bottom of the screen so that it appears over the dock. The dock displays icons that are buttons which launch various applications in one click.
(SIDEBAR)Your dock may be on the left or right of your screen, and it may be hiding. Move your cursor to the edge of the screen and it will appear. To change your Dock settings, use APPLE > Dock.
Click on the Illustrator icon once and the application will open. You can also find the application in Harddrive > PLACES > Applications > Adobe Illustrator. In Windows OS (INSERT PATH) It is important to remember that there is nearly always more than one way to complete every task. The best method is the one that you can remember and fits most efficiently within your work habits.
- When Illustrator opens, the Welcome Screen appears. This happens at the launch of most Adobe applications, and can be turned of by checking the box in the lower left corner, “Don’t show again.” From the Welcome Screen, click “Print Document” beneath the header, “Create New” to create a new document.
When defining a new file, several settings must be taken into consideration. By choosing a new print document as opposed to a new video document, Illustrator has loaded some of the types of settings that we would be interested in when choosing to work with one type of file over another.
- In the New Document dialog box, choose “Letter” from the size pull-down menu. Click “OK”.
(SIDEBAR)A Dialog Box is a screen that pops-up when the user activates an area of the software which requires specific settings before the work process can be continued. For instance, File > New…opens the New Document dialog box. Before working on a new document, the software needs to know which settings you want to use. Dialog boxes are common within all Adobe software products. While you are working, keep in mind that the dialog box asks questions that must be answered before continuing the work process. Dialog boxes must be put away by clicking “OK” or “Cancel.”
Look around your new document and notice the elements of the interface. In the center is the Artboard. Analog design was created on paper that was referred to as the artboard. Illustrator reproduces the analog experience through metaphor.
On the left side of the Artboard is the toolbar. Like an artist’s or designer’s toolbox, the toolbar holds your pens, pencils, brushes, shape tools, and so on.
To the right of the Artboard are palettes. As an example of metaphor in the digital palettes, take notice of the Color Palette. Painters mix their colors on a palette. In Illustrator you can create colors by using the Color Palette.
You can move the tools and palettes around on your screen, and hide or show them based on how much workspace you have on your monitor and what you are using. To hide a palette, click the “Close Window” button in its top left corner. Alternately, you can close windows (closing is the same as hiding) through the Window Menu.
- To close the Layers Palette, select Window > Layers. To open a closed palette, select its name from the Window menu. Open the Layers Palette by selecting Window > Layers.
As you work within an application, your user preferences will be saved. You will notice after quitting and opening a program that the Palettes will be in the same place that they were when you were last working. In a home computing environment, this can be a time-saver. In a classroom laboratory situation, this can be an annoyance (who knows what the person was doing in Illustrator before you sat down at the machine). Most applications have basic or default workspace layouts available from the Window Menu. If you want to reset your workspace layout in Illustrator, click Window > Workspace >> [Basic]. Before starting each of the exercises in this book, set the Workspace to the default or basic settings so that your set-up is consistent with how we were looking at the application at the time of writing.
Exercise 2: Creating a dynamic composition
Dynamic compositions are full of energy or movement. They are the opposite of static or restful. In this exercise, we will make a dynamic composition using squares. Angles create motion. While a flat line, such as the horizon, is at rest, a triangle is in motion. Angles and uneven spacing between objects causes our eyes to move back and forth. The repetition of even spacing is easy on the eye. Our heads predict the simple rhythm of an evenly spaced grid. As opposed to the stability of a grid, a dynamic composition will be created with sharp, unpredictable angles.
NOTEFORM-->Create a dynamic composition: use the rectangular shape tool to create and organize a series of squares. First, draw them with the rectangular shape tool. Then, move and rotate them with the selection tool.
- Select the Rectangle Tool from the Tools Palette and
click and drag on the Artboard to create a rectangle.
(SIDEBAR)Notice that a tool tip shows up when the mouse hovers over the Rectangle Tool. The tool tip displays the name of the tool and the keyboard shortcut. This is consistent in all Adobe applications. Change the color of a shape by clicking on the shape with the Selection Tool (or “selecting the shape”) and mixing a new color in the Color Palette.
To move a shape, click on the shape and drag it to the desired location with the Selection Tool.
To rotate a shape, first select it. Then, move the cursor just outside the corner of the shape. You will see the cursor change into a curved arrow. This is the signal that the Selection Tool has shifted into a tool that allows you to rotate the selected object. Click and drag to the left or right to rotate the shape.
(SIDEBAR) Shapes can also be rotated via the Object > Transform > Rotate menu or with the Rotate Tool in the Tool Palette.
Exercise: Saving a File
- All actions related to your file are located in the File Menu. Select File > Save to open the Save Dialog Box.
Choose a location to save your file. It is common to save files in the Documents folder. On a Mac, this is located in the PLACES area on the left side of the Save Dialog Box. On a Windows computer this is located (insert path here).
- Use the following file naming conventions for naming your files:Avoid spaces, instead use underscores_to_separate_words.
Never use “reserved characters” (! @ # $ , : ; > < ). These characters imply specific ideas to applications and operating systems. File names containing these characters can disable websites and crash applications.
Make sure to use a descriptive title, such as xtine_dynamiccomp.ai. Including your full name in a file name is especially important if you are submitting a file in a classroom or professional setting.
Also, make sure the file includes an extension. In this exercise, the file is saved as an Illustrator (.ai) document. The extension is “.ai”.
'(SIDEBAR)'File Formatting As mentioned above, it is very important that file extensions, or suffixes, remain intact.
Some important file formats include: .doc - Microsoft Word document .rtf - Rich Text Format, non-proprietary word processing format .txt - Text only, no formatting .ai - Adobe Illustrator file .pdf - Portable Desktop Format .psd - Photoshop document .tif or .tiff - high res format for photographs- Lossless - used for scanning and printing .jpg - a compressed web format for photographs .gif – a compressed web format for graphics .html - hypertext markup language – used in web pages .fla - Flash master file .swf - shock wave format – exported Flash file for web
An .ai file is a master file as it is native to the Illustrator program. (not exactly true – ie. I can open an ai file in PS, I just can’t edit it in vector format) The master file is used when editing the original file. Typically, master files can only be opened in their native programs (for example the .ai file can only be opened and edited in Adobe Illustrator), so they need to be converted to a more user-friendly format if they would be sent to someone who may not have Adobe Illustrator installed on her computer. For example, if you created a logo in Adobe Illustrator that you wanted to share with your friend or printer (who may not have Illustrator installed), you would save the master file as a PDF, which can be viewed in Adobe Acrobat or Preview (programs that are accessible on any computer). The exported files cannot be edited and are usually much smaller in file size.
Closing, Quitting, and Ejecting
To close a file in Illustrator, click the red X in the upper left hand corner of the window or go to the file menu and select close.
(SIDEBAR)Key Command: Cmd + W closes windows in any application and on the Desktop. If you see the Save dialog box, you can use the Enter key to save the file or Cmd + D to access “Don’t Save.”
Quit the application by selecting File > Quit Illustrator or by use the keyboard shortcut Cmd + Q.

