Post on 28-Jan-2015
description
Adobe Illustrator CS4vector drawing essentials
your instructor: matteo wyllyamz
matteo@mouselinkmedia.com
http://mouselink.info
Adobe Illustrator CS4 2
Getting started today
Quick introductionsQuick introductions
» customizing this coursecustomizing this course
AdministriviaAdministrivia
How to have a great classHow to have a great class
Menu of possible topicsMenu of possible topics
Adobe Illustrator CS4 3
Quick introductions » customizing this course
Who are you and what do you do?Who are you and what do you do?
What is your experience with …What is your experience with …
» Computers & MS WindowsComputers & MS Windows
» Vector-based drawingVector-based drawing
» Adobe IllustratorAdobe Illustrator
What is something interesting about What is something interesting about you?you?
Adobe Illustrator CS4 4
» matteo wyllyamzSoftware instructor since 1993, with an emphasis on multimedia, graphic
design, and Internet development.
Have created courses for Jefferson County Adult Ed,Colorado Christian University, Productivity Point,Colorado Free University, and the Department of Defense.
Taught Apple Macintosh classes exclusively for five years,and have been active on the Internet since 1994.
Have been using vector-based digital illustrators since 1992.
Illustrated a 300+ page book with three illustrations/page with Macromedia Freehand in 1993.
Corporate graphic designer / webmaster for two years ('97-'99).
TODAY: Managing Partner of Mouselink Media Group, technical and creative instructor and consultant, designer, project manager, artist, amateur photographer, and author. BA in English writing, and have sold three books.
» http://mouselink.me
Adobe Illustrator CS4 5
Administrivia
Workshop scheduleWorkshop schedule
» Six DaysSix Days
» 1pm – 4pm1pm – 4pm
» Two sessions per afternoon Two sessions per afternoon
» Short break (15 mins)Short break (15 mins)around 2:30pmaround 2:30pm
Facilities …Facilities …
» Bathrooms, vending, Bathrooms, vending, Starbucks …Starbucks …
Adobe Illustrator CS4 6
Please set cell phones to silent or turn off.Please set cell phones to silent or turn off.
Understand Understand concentrated computer training:concentrated computer training:
» Please sit at the front of the classroom and don’t sit alone.
» Be careful with multitasking.
» Class is part discussion, part lecture, part hands-on.
» PARTICIPATE! Ask questions. Answer questions. Take notes.
» Watch the screen, then try it yourself.
» This is a cooperative learning environment:
We are here to learn from each other.
Keep in mind that this class was designed for aKeep in mind that this class was designed for aspecific level of student:specific level of student:
How to have a great class
Adobe Illustrator CS4 7
Keep in mind that this course was designed for a Keep in mind that this course was designed for a specific level of student:specific level of student:
Created for
» A semi-experienced computer user with a comfortable working knowledge of the Windows environment.
» The beginning Adobe Illustrator user who has never or rarely used this specific software.
NOT created for
» The beginning computer user.
» The more intermediate or advanced Illustrator user.
most importantly …most importantly …
How to have a great class
Adobe Illustrator CS4 8
Make it fun! Make it fun!
most importantly …most importantly …
How to have a great class
Adobe Illustrator CS4 9
Menu of possible topics
Workshop objectives
What is Illustrator?
Specific features of CS4
Raster pixels vs. vector objects
Overview of the interface
Adobe Bridge preview
Viewing and navigation
Toolbox overview
Working with documents
Color modes or “spaces”
Common image formats
Paths, tangents, and the pen tool
Drawing basic lines and shapes
Snapping and Guides
Draw the Tonalpohualli
Layers and stacking order
Path manipulations
Working with colors
Fill and stroke essentials
Constraining and alignment
Grouping
Conclusions
… and a word about your materials
Adobe Illustrator CS4 10
Moving on …
ILLUSTRATOR OVERVIEW DAY1
Adobe Illustrator CS4Workshop emphases & objectives
Learning jargonLearning jargon
Mastering core conceptsMastering core concepts
Becoming more comfortableBecoming more comfortable
Understanding more advanced techniquesUnderstanding more advanced techniques
Gaining confidence through immersionGaining confidence through immersion
Increasing speed & efficiencyIncreasing speed & efficiency
Adobe Illustrator CS4 12
What is Illustrator? » For what can this software application be used?
Adobe Illustrator is the industry-standard, market-leader, vector-based object drawing application.
Illustrator allows the user to draw through the creation and manipulation of lines and shapes called “paths.”
It functions by generating curved paths (Bezier curves) connected by modifiable anchor points.
These anchors, with their handles (tangents) are always editable, and never "leave" the structure of the file.
Vector-based drawing programs create the various elements of the image as individual vector objects which always retain their characteristics and do not automatically become part of a "bitmap.”
Adobe Illustrator CS4 13
Specific features of Illustrator CS3* » Some product enhancements introduced in this version
A.K.A. Illustrator 13
Panel-based user interface,consistent within Creative Suite 3
New Document profiles
Enhanced color support
Advanced Symbols
Increased Adobe Flash integration
Improved Live Trace
* Adobe Creative Suite 3 was announcedon March 27, 2007.
Adobe Illustrator CS4 14
Adobe Bridge comes standard with CS4
So why use it?
Folders tab Thumbnails
Thumbnail slider Workspace buttons
Metadata
Adobe Illustrator CS4 15
Overview of the Illustrator interface
Welcome Screen
Title bars
Status area
MenusPrimary, contextual,
and shortcut
Keyboard shortcuts
Toolbars & Panelsand Docks
Changing viewsand hiding tools
Customizationand Workspaces
Status bar PanelsZoom box
Control panel Tools panel Artboard Scratch area
Adobe Illustrator CS4 16
Viewing and navigation controls
Changing magnification» View menu
» Keyboard
» Magnify tool
» Navigator
» Shortcuts
Scrolling vs. Panning» Tools vs. Shortcuts
Changing the Screen Modeand hiding panels
Rulers and Guides
Switching between documents
Adobe Illustrator CS4 17
Raster or pixel-based graphics vs.Vector or object-oriented graphics
Adobe Illustrator CS4 18
Toolbox overview
Tool sets
Hover or mouse-over
Nested tools (or “fly-out” menus
Keyboard shortcuts
Tool options bar
Adobe Illustrator CS4 19
Understanding paths and tangents (control handles)
Paths in themselves do nothing.
It is their *formatting* (stroke and fill) which gives your illustration its visual appearance.
http://en.wikipedia.org/wiki/Tangent
Adobe Illustrator CS4 20
HOMEWORK DUE
Axzo workbook Unit 1: “Getting Started”
Time: 50 minutes.
Moving on …
CREATING BASIC SHAPES DAY2
Adobe Illustrator CS4 21The keys to working in Illustrator …
Everything you’ve already learned still applies!
Always pay close attention to …
The tool you have selected. The layer you are in.
Learn your modifiers and keyboard shortcuts!
Constrain Shift
Draw from center Alt
Zoom Ctrl + (or) –
Center artboard Ctrl 0Magnifier(Keep your magnification appropriate!)
Ctrl spacebar (or)
Ctrl Alt spacebar
Outlines Ctrl Y
Layer outlines Ctrl click
Layer visibility Alt click
Undo Ctrl ZSelection tool V(A drawing tool is not a selection tool!)
Direct Selection tool A
Last selection tool (temp)Hold Ctrl
Deselect Ctrl Shift A
Hide selection Ctrl H
Hand tool spacebar
Hide toolbars Tab
Change view mode F
Adobe Illustrator CS4 22
How curved paths align to tangents
http://en.wikipedia.org/wiki/Tangent
Adobe Illustrator CS4 23
Understanding the infamous Pen Tool
Pen clicks & drags plot the anchor points of a path.
Clicking vs. clicking-and-dragging (and combinations)
Watch carefully for visual clues!
Anchor Points
» The difference between Corner Points, Smooth Points, and Cusp Points
Manipulating anchor points
» Moving, adding, deleting, converting
» Adjusting control handles
Viewing a more precise pen tool (Caps Lock)
Pen tool keyboard shortcut P
Adobe Illustrator CS4 24
Pencil and Paintbrush
More intuitive, but not as precise?
The opposite of the pen tool
Important preferences
Applying brushes to strokes
The Eyedropper
Adobe Illustrator CS4 25
Snapping and Guides
Rulers (Ctrl R)
Turning on and off
Specifying ruler units
Guides (Ctrl ;)
Creating, repositioning, locking, deleting, showing, hiding, and layering
Grids (Ctrl ”)
Smart Guides (Ctrl U)
Snapping …
… to a guide, the grid, or a point
Adobe Illustrator CS4 26
HOMEWORK DUE
Axzo workbook Unit 2: “Creating a simple illustration”
Topic A: Create a New DocumentTopic B: Basic Shapes
Time: 30 minutes.
Moving on …
PRECISION DRAWING DAY3
Adobe Illustrator CS4 27
Basic drawing
What are “paths” and “anchor points” exactly?
Drawing shapes
Drawing line segments
Constraining and manipulating shapes and lineswith keyboard strokes: (2-12)
Control, Alt, Shift, spacebar, (F)lip, arrow keys …
Specifying precision measurements
The Selection Tool (V) and Direct Selection Tool (A)
Basic Stroke and Fill
http://www.logodesignworks.com/blog/what-are-paths-anchor-points-in-adobe-illustrator
Adobe Illustrator CS4 28
Layers and stacking order » What’s the difference?
Stacking adjustments
Send Backward, Send to Back
Bring Forward, Bring to Front
Or use the Layers palette …
How do layers work?
Always pay attention to the active layer(s)
Add, delete, lock, show, hide, move …
Working with outlines or “wire frames”
Naming and organizing
Opacity adjustments
Shift-click to make selections across multiple layers
Adobe Illustrator CS4 29
HOMEWORK DUE
Axzo workbook Unit 2: “Creating a simple illustration”
Topic C: Manipulate ShapesTopic D: Export an Illustration
Time: 30 minutes.
Moving on …
LAYERS & STACKING ORDER DAY4
Draw the Tonalpohuallihttp://en.wikipedia.org/wiki/Tonalpohualli
Create a Tracing Layer
Set Rulers and Guides
Draw primary circles
Draw primary stars
Clone secondary stars
Begin coloring
Clone secondary circles
Draw four major outer squares
Rotate/clone four more major outer squares
Draw and clone-rotate “eggs”
Draw and reflect inner rectangles at a 30° angle
Draw and clone-rotate “obscured” minor squares
Draw and clone-rotate minor outer squares with ovals*
Draw the face
Beaded necklace
Nose
Mouth and tongue
Hair and antennae
Add all shadows and pattern fill* first minor square from center clockwise is at -15°
Adobe Illustrator CS4 31
Path manipulationsAlways select by the path
Basic transformationsUsing the bounding box …
Tools: move, scale, rotate, reflect …
Duplication and Cloning
Making multiple selectionsShift key, marquee, or lasso
Alignment and Distribution
Group and Ungroup
Shape Mode commands
Compound shapes
Changing the Reference Point
Adobe Illustrator CS4 32
Understanding color modes or “spaces”
Additive Subtractive
Adobe Illustrator CS4 33
RGB light: The more, the brighter (additive).» For on-screen output
CMYK ink: The more, the darker (subtractive).» For four-color printing
HSB approach
HTML hexidecimals
Grayscale
Black & White “bitmap”
Bit depth: number of bits per pixel» 8 bit = 256 values of color
» 16 bit = 65,536 “high colors”
» 32 bit = 4,294,967,296 “true colors”
Understanding color modes or “spaces”
Adobe Illustrator CS4 34
HOMEWORK DUE
Axzo workbook Unit 3: “Applying Basic Color”
Time: 50 minutes.
Moving on …
CLONE, REFLECT, ROTATE DAY5
Adobe Illustrator CS4 35
Working with documents
New document settings
Deciding on output
Paying attention to raster effects
Changing the document setup
All about Saving and Exporting
Save for Web
Creating multiple back-ups
ARTICLE: Pasting Illustrator documents into InDesign
Adobe Illustrator CS4 36
Common image file formats
BMP and PCT: simple files, not recommended for use in production
AI, PSD, INDD: Adobe proprietary formats
TIF and EPS: best formats to place images intoprint documents
JPG: most common file type for photography, including use on the web
GIF: transparencies and animation for web
PDF: perhaps the most universally exchanged format today
PNG: smaller files, better quality, less support
RAW or DNG: up-and-coming, unprocessed camera data
http://en.wikipedia.org/wiki/Image_file_format http://www.fileformat.info/format/cloud.htm
Adobe Illustrator CS4 37Review from previous weeks
Average time to complete: 60 minutes.
Utilizes essential skills sets: Basic drawing and cloning, layers and stacking order, working with stroke and fill colors, grouping and reflecting.
Instructions:1) As your Tonalpohualli illustration currently stands, there are still some missing concentric
circles. Compare to the tracing image layer to determine how many.
2) Draw or clone these additional circles using the methods you have learned in the last couple classes. Use the Outlines view as you trace. Take special care to make sure you draw them within the existing layers in the correct stacking order.
3) Fill in all your shapes with complimentary colors.
4) Stroke the line weight of all shape paths in the illustration according to the tracing image. (Some lines are thicker than others, and a couple don’t have strokes at all!)
5) Create a new layer on the top of the Circles layer and call it “Outer Squares.”
6) In this layer, draw the top and bottom outermost squares, stacking accordingly. Pay attention to the varying stroke weights.
7) Also, draw the two left and right outermost squares. Make sure the all the paths are precisely aligned so there are no odd variations in line weight or alignment.
Hints: Each of these squares is composed of three squares, all stacked one upon another. Once you draw one complete set of squares, GROUP and REFECT that set across the vertical axis, using the Reflect Tool.
When you have finished, please see if you can help other students who are still working.
Adobe Illustrator CS4 38
HOMEWORK DUE
Axzo workbook Unit 5: “Working with Text” Time: 50 minutes.
Moving on …
MORE COMPLEX SHAPES DAY6
Adobe Illustrator CS4 39The keys to working in Illustrator …
Everything you’ve already learned still applies!
Always pay close attention to …
The tool you have selected. The layer you are in.
Learn your modifiers and keyboard shortcuts!
Constrain Shift
Draw from center Alt
Zoom Ctrl + (or) –
Center artboard Ctrl 0Magnifier(Keep your magnification appropriate!)
Ctrl spacebar (or)
Ctrl Alt spacebar
Outlines Ctrl Y
Layer outlines Ctrl click
Layer visibility Alt click
Undo Ctrl ZSelection tool V(A drawing tool is not a selection tool!)
Direct Selection tool A
Last selection tool (temp)Hold Ctrl
Deselect Ctrl Shift A
Hide selection Ctrl H
Hand tool spacebar
Hide toolbars Tab
Change view mode F
Adobe Illustrator CS4 40
Conclusions …Sincere thanks!
You cannot learn the violin in a day or two.
Digital illustration is a skill – like any other – that requires gradual & continual practice & improvement.
Approach everything on a need-to-know basis, and don't worry about that which you do not yet understand.
Stay upbeat!… but if you get frustrated, remember:
You can always turn off the machine and walk away. :)
Good luck. Best wishes.And get in touch if you need more help!
Adobe Illustrator CS4 41
© 2010 by m.wyllyamz© 2010 by m.wyllyamz
Adobe Illustrator CS4 42
Review from last week» Resizing, resampling, and saving images
A
B
C
Average time to complete: 20 minutes.
Utilizes essential skills sets: Manipulating image size & resolution, resampling, and saving multiple versions of the same image.
Instructions:
1) Use Adobe Bridge to open the file:C:\Program Files\Adobe\Adobe Photoshop CS2\Samples Sunflower.psd
2) Use the Image Size command and resample down 50%. What is the resulting file size and pixel dimensions of the image?
3) Use the Save for Web command. Create a JPEG set to High-60 quality, and save the image to your desktop.
4) Use the command File: Revert to restore the .psd file to its original size.
5) Use Image Size again. Resize (not resample) the image so that it may be printed at 300dpi. How large will the image appear on a printed page?
6) Use Save As to create a TIFF image and save it to your desktop.
7) Extra credit: Crop the image tightly to show only the sunflower’s petals.Save another version of the image: Sunflower cropped.psd
Adobe Illustrator CS4 43
Most popular online resources
urls urls
Adobe Illustrator CS4 44
Summary of common keyboard shortcuts(Q-1)