{"id":222,"date":"2008-08-18T15:22:36","date_gmt":"2008-08-18T19:22:36","guid":{"rendered":"http:\/\/www.eyoungwon.com\/journal\/?p=222"},"modified":"2008-08-18T15:24:00","modified_gmt":"2008-08-18T19:24:00","slug":"adobe-illustrator-level-1","status":"publish","type":"post","link":"https:\/\/eyoungwon.com\/journal\/adobe-illustrator-level-1\/","title":{"rendered":"Adobe Illustrator – Level 1"},"content":{"rendered":"

Adobe Illustrator<\/font> – Level 1<\/h1>\n\n\n
\"Class<\/td>\nWeek 1 – Lecture, Part 1 <\/span><\/td>\n<\/tr>\n<\/table>\n

Hello and welcome to Introduction to Adobe Illustrator.<\/p>\n

I’ve placed version-specific instructions throughout the course; for many tools versions 10 and CS are indistinguishable. However there are new tools in Adobe’s latest versions and each successive version does seem to incorporate greater capability and ease of use.<\/p>\n

I do want to emphasize that these illustration applications are extremely complex programs with an enormous amount of capability. Because this is an introductory- to intermediate-level course, I won’t be going into a great depth, but rather will try to touch upon as many aspects of the programs as I can within the 8 week time frame. Don’t hesitate to ask questions, though, if something comes to mind. I’m always happy to go beyond the constraints of the lectures.<\/p>\n

Although I’ll be showing you what I think to be the easiest way of controlling the various objects or tools you’ll be using, Illustrator generally offers you two or more ways to accomplish the same thing. So do play around a bit and see what works the best for you. For instance, you may find that changing an object’s position by typing coordinates directly into the various Inspectors or toolbars is more to your liking than manipulating objects with your mouse.<\/p>\n

<\/p>\n

This first week will be a pretty easy week as we get familiar with the work area and set up our preferences. We’ll also learn how to gather information about our drawings such as file size, and look at the different options available for printing and saving the work. This may sound pretty basic, but as with any graphic illustration program, you’ll have a wide range of choices for printing and saving. Which options you select will be dependent upon the ultimate use for your drawing.<\/p>\n

Before we get started, though, I’d like to give you a little overview of drawing and graphics programs in general as well as provide you with a glossary<\/a> of terms you might find helpful.<\/p>\n

Graphics Overview<\/h2>\n

There are two types of graphics you will come across as you work with digital illustration; “raster” graphics and “vector” graphics.<\/p>\n

Raster Graphics<\/h3>\n

Raster graphics (often referred to as “bitmaps”) are bitmapped images made up of a matrix of dots – rather like your TV. Raster images are called bitmaps because each pixel (or dot) is given a “bit” value. That is, a certain number of bits (the smallest element of computer memory).<\/p>\n

For instance, in a single-color bitmap, one bit is allotted to each pixel – it either has color or it doesn’t. As you add more colors to the bitmap, more pixels are required to cover the range of shades in each color. As a result, more bits are required to store the information needed to produce any given color. This is the depth of color. The reason your bitmapped files are reduced in size when you optimize them is because, by reducing the number of colors in your image, you reduce the number of bits necessary to render that image.<\/p>\n

Although raster graphics can be edited in the sense that they can be modified using a program such as PhotoPaint, PhotoShop or Fireworks, these graphic images cannot be taken apart piece-by-piece for editing as can vector images. Digital Cameras, scanners and photoshop-type programs can all create raster graphics and these types of graphics can also be exported by illustration applications.<\/p>\n

Vector Graphics<\/h3>\n

Vector graphics, on the other hand, are graphics made up of geometric forms such as points and lines. Vector-based images are easily scalable and can be taken apart for editing. These are created when you use a drawing program such as CorelDraw or Adobe Illustrator. CAD drawings (such as those used in architectural or automotive design) also generate vector drawings.<\/p>\n

As you draw an image in a vector graphics program, each line is stored as a vector which is two end points on an x-y matrix*<\/strong>. A square, for instance, would be made up of four vectors – one for each side. A circle would be constructed of bunches of vectors because it’s actually made up of a series of tiny straight lines. A complete image, therefore, would be a group of graphic elements. Each of these elements may be selected, altered or deleted – in essence modified in any way – without affecting the other elements.<\/p>\n

There are 3D vector graphics as well, but that goes beyond the scope of this class, although we will be working with Illustrator’s 3D modeling tools (versions CS and CS2 – not available in version 10).<\/p>\n

Printing Graphics<\/h3>\n

Before we move on, I’d like to touch briefly on the subject of color selection. Although we will be covering this at length in week 4, it’s a good idea to identify, up front, what media you will be using to produce your final product. There are several types of color management systems that can be used but, generally speaking, when working with a print shop you’ll want to use CMYK color. CMYK is what is known as a subtractive color system. The more color there is on the page, the more light is subtracted.<\/p>\n

If, however, your project will be presented on the web or another onscreen display, the preferred color choice is usually RGB. RGB uses an additive color system. An additive color system uses projected light (your monitor, for instance, projects light) and the more RGB color that’s added, the closer your image gets to white.<\/p>\n

Keep in mind that the color you see on your screen is not likely to match the color of a printed job. The reason for this is your screen uses an additive color system and print media utilizes a subtractive system. If you find yourself doing a great deal of designing for print publications, you may want to invest in color matching swatch books. Your print or imaging house will also have a comparison chart to help you select colors that will print true to the color you have planned in your project.<\/p>\n

Creating New Drawings & Opening Old Ones<\/h2>\n

Although the two top contenders in the digital illustration market are CorelDraw and Illustrator, you’ll find most other drawing (and even photo processing software) have similar tools and methodologies.<\/p>\n

When you open your drawing package, the later versions may offer a popup screen asking (among other things) if you’d like to create a new drawing or open a previous one. This is a nifty feature, but not one that we’ll cover here for the reason that it’s pretty self-explanatory. If you don’t want to see this dialog box, there’s usually a little checkbox somewhere on its face stating that if you check it you won’t have to deal with the dialog again. For this class, we’ll be using the menus and menu bars for navigation.<\/p>\n

Illustrator – all versions<\/strong>When you choose File from the top menu bar, you’ll be faced with fewer choices: 1) New, 2) Open. If you choose “Open” you’ll be offered an opportunity to browse for your file. You can select from a variety of file types including CorelDraw files, and you’ll have the ability to preview a file you’ve selected. Illustrator, however, does not give you additional information about the file.<\/p>\n

When choosing File >New, Illustrator will ask you for some information. It will want to know the name of your new document, the size of the artboard and which color mode you’d like you use (check RGB for web work, CMYK for print). You can also choose the page orientation during this setup process.<\/p>\n

Once you’ve used Illustrator to create and save a drawing, it will offer you a new option File>Open Recent Files, allowing you easy access to files you have previously used.<\/p>\n

You can open raster graphics in Illustrator using the “Open” menu option. Or you can import a raster graphic by creating a new document and choosing the “Place” option from the File menu. Place allows you to position a graphic into an open drawing. Open, on the other hand, opens the graphic as a new file.<\/p>\n

Page Set Up<\/h2>\n

Rulers, Grids, Guidelines<\/h3>\n

Once you begin working with a drawing program, you’ll find some of the most important and useful items you’ll have at your disposal are the rulers, grids and guidelines.<\/p>\n

Rulers allow you to visualize the size of your image as well as assisting in its positioning on the drawing page. You’ll notice that with the rulers visible, movement of the mouse is tracked on the x and y axes of the drawing page. You can easily set your rulers to measure space in inches, millimeters, picas, points, pixels, or ciceros (similar to a pica). Settings made be in the preferences options or by right-clicking (ctrl-clicking) on the ruler and selecting the measurement unit you’d like to use.<\/p>\n

The nudge measure is another setting you can control. You can nudge an object’s location by small increments using the arrow keys on your keyboard.<\/p>\n

The other ruler adjustment that’s available is the origin of the rulers. But keep in mind that when you do this, it will affect the tiling of patterns as well as bounding box settings when you’re working with print media. In all the years I’ve worked with drawing programs, I’ve never had cause to modify the default origin positions. Still, it’s good to know you have that option should you need it.<\/p>\n

Illustrator – all versions<\/strong>Adobe sets their default to hide rulers. If you’d like to turn them on, choose the View menu then select “Show Rulers”. To set the measurement unit, you must do so from the Edit menu as follows:<\/p>\n

Choose Edit > Preferences > Units & Display Performance. (On a Mac OSX Preferences for version 10 is on the Illustrator menu.<\/strong>) This will set the units of measure for all files (in other words this will become your default setting). Alternatively, if you right-click on the ruler, you can change the unit of measure as well.<\/p>\n

Setting the origin of the rulers in Illustrator is fairly easy. Simply click on the intersection of the two rulers and drag the origin point to its desired location. To restore the default settings, you may do so by double-clicking the intersection of the two rulers.<\/p>\n

To set the nudge measurement in Illustrator, choose the Edit>Preferences>General. The first checkbox is the “Keyboard Increment” text box. Then type in the amount of movement you’d like to have when pressing the arrow keys on your keyboard.<\/p>\n

Generally speaking, you’ll find all the settings for grids and guides in the same menu as those for the rulers, that is the Preferences menu in Illustrator. Both these elements are instrumental in the creation of good drawings as they allow you to align objects with ease. There are times when you may want to use the “snap to guide or grid” or “objects” feature available in drawing programs. Personally, I find for the most part the “snap to” is more of a nuisance than a feature. But there are times when it’s invaluable.<\/p>\n

Grids are just as you’d suspect, a grid that appears behind your work. These grids will not print nor will they show up in a full screen preview or print preview. However, they are handy when you’re trying to line up two objects equally on a vertical or horizontal plane. You are given the ability to set the size, divisions, color and line style of your grid in Illustrator.<\/p>\n

Guides are one of my favorite drawing aids and I use them religiously. I once had a drafting teacher who insisted on guides for all lettering. He was so adamant about it that he would cut your grade by 50% if you failed to include them. He said there was no way to achieve a consistency of height without guides. And he was right. Any time you are creating objects of the same size, you’ll want to use guides.<\/p>\n

In Illustrator, you’ll find the color and style choices in the same menu as the Grid options; Edit>Preferences. Illustrator gives you the angle options for your guides in the “Smart Guides and Slices” menu (smart guides are covered in the Level 2 course). You can also angle your guides by selecting a guideline, choosing the rotate tool and manipulating the guide to the angle you’d like.<\/p>\n

To pull the guides onto your workspace in Illustrator, you must have the rulers visible. Simply place your mouse over the horizontal or vertical ruler (depending, of course on whether you want a vertical or horizontal guide) and with the mouse button pressed, drag it to the drawing board. This will bring the guidelines onto your work space and, unless you lock them in place, you’ll have the ability to move them at any time. To do this, place your mouse over the guideline and, keeping the button depressed, drag the guideline to its new position. Word of caution, when you’ve created a complex drawing, it’s very easy to accidentally pick up a portion of your artwork instead of the guide! So it’s a good idea to keep the guides locked unless you want to move or rotate them. (They can be rotated just like any other object.)<\/p>\n

To lock your guidelines go to the View>Guides>Lock Guides from the pull down menus. The default setting is locked in all versions of the application.<\/p>\n

Smart Guides<\/h3>\n

Smart Guides are temporary guides. When you have them turned on, they will show up every time you draw a new object or work with an existing one. They can be quite disconcerting when you first try using them because they flash around as you move your mouse. That is, they don’t remain on the screen continuously as do regular guides. It’s only when you hover over an object that you’ll see them.<\/p>\n

They can be very helpful and you may find you only use some of their components (like text label hints) or you may prefer their “snap to” feature to align objects. In any event, I’d like to give you a quick overview of working with them.<\/p>\n

First, two of the Smart Guide features I love are Text Label Hints and Object Highlight. Object Highlighting allows you to find the edges of objects such as those in a group or that have odd shapes. Text Label Hints is just what it implies, labels. With the Text Label Hints option chosen, you’ll see various components of your object as you run your mouse over it; i.e. “path”, “anchor”, “intersect” where lines intersect one another. To make any adjustments to Smart Guide settings, use your Edit>Preferences>Smart Guides & Slices menu.<\/p>\n

Like regular guidelines, to turn them on or off, use your View menu. View>Smart Guides is a toggle setting. Smart Guides are not lockable but as they are not continuously present, you won’t grab them accidentally.<\/p>\n

If you want to align two existing objects on any plane, you can get perfect alignment using Smart Guides. Let’s try one. Create two objects, doesn’t matter what they are. Make sure your grid and any “snap to” options are turned off and the Smart Guides are turned on. You should have the Text Label Hints box checked in preferences so you can utilize those hints. Now grab one of the objects and move it toward the second object. Notice a couple of things:<\/p>\n

    \n
  • As your mouse hovered over the object you grabbed, the text hints gave you some information about that object.<\/li>\n<\/ul>\n
      \n
    • As you moved the object and hit various points on the drawing board (45 degree angle, perfectly vertical, etc) you’ll have seen a line appear noting that angle and a text hint telling you the origin degree. If you’re zipping your object around like an Indy 500 race car (as I’m wont to do), you may have noticed something flashing, but not caught what it was. Slow down a bit and see what shows up.<\/li>\n<\/ul>\n
        \n
      • Look for the word “on” to appear as a text hint as you move the object closer to the second object. When you see that word appear right at your cursor point, you’ll have hit perfect alignment between the two objects (the degree of alignment is given as well). Pretty neat, huh? I love these text hints!<\/li>\n<\/ul>\n
          \n
        • If you want to align the centers of two objects that are stacked, just drag one on top of the other until you see the word “center”. That tells you the centers are aligned.<\/li>\n<\/ul>\n
            \n
          • To align two objects’ anchor points, grab one object by the anchor point you’d like to have aligned with the second object. Move the object until the anchor point you’re holding aligns with the anchor point you’d like it to match and look for the “anchor” text next to your cursor.<\/li>\n<\/ul>\n

            Another area where Smart Guides can come in handy is during the transformation of an object. You need to make sure the Transform Tools box is checked in the Smart Guides Preferences menu before you begin. Then, with the guides turned on, you can use any tool except<\/strong><\/em> the Free Transform tool.<\/p>\n

            So, for example if you’d like to scale the object along a given angle, grab the Scale Tool, then one corner of the object. You’ll see the Smart Guides appear. Now drag along the guideline. If you waver, you’ll see the line disappear, make a slight adjustment and it’s back. Now you know you’ve scaled with object without inadvertently moving it a smidge one way or another. Try the same thing with the Shear Tool – that’s really neat!<\/p>\n

            The final checkbox in the Smart Guides Preferences that you can choose is the Construction Guides. One use for these is when drawing a continuous object with multiple sides using the Pen Tool. This will let you know when the corner anchor point hits a particular angle or if your line is perfectly vertical or horizontal. Basically, it displays the angles as you draw. I must admit I don’t use these often as I find they are a bit confusing as they flash on and off while you draw.<\/p>\n

            Smart Guide Preferences<\/h3>\n

            If you take a look at the Smart Guide preferences dialog box, you’ll see there’s several options.<\/p>\n

            \"[Image]:<\/p>\n

            Of course you have the display options that we’ve discussed, but you also have preset angles and a little map showing you what your angled guides will look like. You can choose from a variety of preset angles by using the pull down menu or set any degree of angle you choose by typing the appropriate numbers into the boxes as I’ve done here in the following screen shot.<\/p>\n

            \"[Image]:<\/p>\n

            Notice that now the “Angles” textbox reads Custom Angles (you can’t choose this option, by the way, it automatically appears when you start typing in numbers). Also, notice how the little diagram shows what my angles will look like with these settings.<\/p>\n

            The next item as we move down the preferences box is the Snapping Tolerance. Again, this is customizable, and represents the distance your pointer (cursor) is located from an object before the Smart Guides will display.<\/p>\n

            At the bottom, we have another checkbox, “Show Slice Numbers”. This allows slice numbers and individual slice colors to be displayed on the screen for easy identification. The box next to it, Line Color, is related to the slice numbers option, as that is where you set the colors of the lines surrounding each slice.<\/p>\n

            One Last Guide To Set<\/h3>\n

            This one has to do with how to set your regular guidelines (not the smart guides) so they are angled. Make sure your guidelines are visible and unlocked. Then, select the guide you want to rotate with the Select Tool and then choose the Rotate Tool. Now look for the center cross-hairs to appear at the center point of the guideline (just like any line you draw). If you choose the Rotate Tool and then select the guide, you’ll wind up placing the guideline’s center point at the insertion point.<\/p>\n

            Now you can simply grab the guideline and rotate it. If you have Smart Guides turned on, you’ll see the text label show you when the origin (center) has been rotated 45 degrees. Alternatively, you can select Transform>Rotate from the Object menu and set the degree of rotation that way. Either of these steps can be undone by using the undo option (Ctrl + Z\/Cmd + Z).<\/p>\n

            Viewing Your Work<\/h2>\n

            There are several ways to view your work.<\/p>\n

            Illustrator – all versions<\/strong>Go to the View pull down menu and you’ll have the option of Zooming In, Zooming Out, Fitting in the Window or viewing your drawing actual size.<\/p>\n

            You can also use the zoom tool from the tool bar (a little magnifying glass) and zoom in by increments.<\/p>\n

            If you prefer to work with keyboard shortcuts, Ctrl and + will zoom in, Ctrl and – will zoom out.<\/p>\n

            Document Info<\/h3>\n

            A important feature of any program, is the ability to glean information about your document, and drawing programs are no exception. You can find out a whole range of information about your document such as the number of pages it contains, detailed information on the objects in your document, if you have bitmaps you’ll see the size and type of color they utilize.<\/p>\n

            Illustrator 10 and CS<\/strong>You can choose to view the document information via the Windows menu, but it is object-specific. That is, the Info palette will be displayed, but you must click on a object to get information such as its size, color, etc. Otherwise, you are given a general summary on the Document Info tab. To open this palette, choose Window>Info.<\/p>\n

            If you choose the options flyout for this palette you’ll be able to select from a listing of different elements affecting your object. Things such as which brushes were used, the font name, etc. If you choose the Object option, you’ll be able to see path information etc. This same type of information is available on the Actions Palette, but that’s a little harder to decipher.<\/p>\n

            Illustrator CS2 & Later<\/strong><\/p>\n

            With the release of CS2, Adobe has brought Illustrator more in line with Freehand and CorelDraw by included a Control Palette that behaves as the dockers in those other applications.<\/p>\n

            The Control Palette is found just under the main menus at the top of your workspace and offers you an instant look at information about a selected object(s) or the document in general if nothing is selected. It will tell you the current fill color and opacity settings, for instance.\u00a0 It looks something like this:<\/p>\n

            \"[Image]:<\/p>\n

            \"[Image]:<\/p>\n

             <\/p>\n

             <\/p>\n

            You’ll notice the very last thing on the right-hand end of the Control Palette is an options button.\u00a0 You can use this to choose which attributes are displayed on the panel.\u00a0 As you can see from this screen shot, I have the whole nine yards. :O)
            <\/p>\n

             <\/p>\n

            \"CS3<\/p>\n

            I guess they felt this to be a bit much and simplified it quite a bit for CS3. They’ve also jazzed up the interface quite a bit in CS3, as we’ll see later on.
            <\/p>\n

            Annotating An Object<\/h3>\n

            You can annotate an object within a file. It’s a little different than the PhotoShop method however – you won’t be seeing a little notation marker that holds the note. Instead it’s located on the Attributes (Window>Attributes) Palette.<\/p>\n

            Once you have the palette visible, from the palette’s options flyout (the little arrow in the upper right-hand corner of the palette) choose Show Note. You will need to have your object selected and you’ll be able to type a note into the textbox that appears below the ImageMap box. You can add up to 240 characters, but don’t use any carriage or line returns, the text will wrap automatically.<\/p>\n

            Now any time the object is selected and the user has the Attributes palette open they will see your note. The same technique can be used in either all versions<\/strong>. It does not appear to work on a text object unless you convert it to outlines (that’s a subject covered in the Level 2 class).<\/p>\n

             <\/p>\n","protected":false},"excerpt":{"rendered":"

            Adobe Illustrator – Level 1 Week 1 – Lecture, Part 1 Hello and welcome to Introduction to Adobe Illustrator. I’ve placed version-specific instructions throughout the course; for many tools versions 10 and CS are indistinguishable. However there are new tools in Adobe’s latest versions and each successive version does seem to incorporate greater capability and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,50,2],"tags":[],"class_list":["post-222","post","type-post","status-publish","format-standard","hentry","category-illustrator-tutorials","category-online-classes","category-web-development"],"_links":{"self":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/posts\/222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/comments?post=222"}],"version-history":[{"count":0,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"wp:attachment":[{"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eyoungwon.com\/journal\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}