Adobe ILLUSTRATOR

VRA 104E/3 [ School of the Arts | USM ]

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

What is Adobe Illustrator?

a vector graphics editor software developed and marketed by Adobe Systems.

- used by artists and graphic designers to create scalable vector artwork for use in projects for both
print production and web design.

the creation of documents using page layout skills linked to computer

[publication design / desktop publishing items]
- poster, pamphlets (unbound booklet), brochures , leaflet, flyers, packaging, C.I.S, signs,
wallpaper, slides presentation templates, greeting cards, magazines, newspapers, calendar,
newsletters, books, annual report, journals, product catalogue articles, advertising, etc.

Integrate with other Adobe applications:

- [Photoshop: smart filters, image manipulation]
- [InDesign: print productions & digital magazines]

- [Flash: website mock-up, web animation & games illustration]

- [After Effects & Premiere Pro: title sequences & video animation

http://en.wikipedia.org/wiki/Adobe_Illustrator

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

AI Brief History

Developed for the Apple Macintosh, 1986

as a commercialization of Adobe's in-house
font development software and PostScript
file format.
- 7th generation in the product line,
[AI CC, 2014]

Companion product of Adobe Photoshop

(digital photo manipulation and
photorealistic styles of computer
illustration), AI provides results in
the typesetting and logo graphic
areas of design.

Early magazine advertisements

(featured in graphic design trade
magazines such as Communication Arts
referred to the product as "the AI.

http://en.wikipedia.org/wiki/Adobe_Illustrator

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Packaging design

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Gift card design

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Brochure design

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Book art design

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

What is Vector Graphic?

the use of geometrical primitives such as points, lines,

curves, and shapes or polygons -all of which are based
on mathematical expressions --to represent images in
computer graphics.

based on vectors (also called paths or strokes), which

lead through locations called control points or nodes.

Each of these points has a definite position on the x

and y axes of the work plane and determines the
direction of the path; further, each path may be
assigned a stroke color, shape, thickness, and fill.

Vector Bitmap example.svg >>

http://en.wikipedia.org/wiki/Vector_graphics

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Vector Graphic

a computer program that allows users to compose and edit vector graphics images interactively on a computer
and save them in various formats [EPS, PDF, WMF, SVG, or VML].

Vector editors vs bitmap editors

Vector editors :
- page layout, typography, logos, sharp-edged
artistic illustrations (e.g. cartoons, clip art,
complex Geometric patterns), technical
illustrations, diagramming and flowcharting.

Bitmap editors :
retouching, photo processing, photorealistic
illustrations, collage, and illustrations drawn
by hand with a pen tablet.

A screenshot of the modern vector graphics editor Inkscape

http://en.wikipedia.org/wiki/Vector_graphics_editor

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Vector images

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Setting up AI document specs

[1] Purpose
Designing a web page or a poster? / viewed online or in printed form? / pages / etc.

File name

New Document Profile [common art board sizes / custom]

Number of Art Boards [multi-page brochure of different or same sizes, or multi-page website design], above 12 pgs. > InDesign: larger
docs

Spacing [If multiple art boards, min 300pts]

Columns [NOT column guides but how AI arranges / adjusts automatically number of art boards / may leave it alone]

Size [size of the art board. If for print - require a bleed dimensions / If Save For Web, - it will not include that bleed artwork]

Width & Height] [if creating a custom art board size]

Units [print dimensions: inches / web dimensions : pixels]

Orientation [established by the width and height, but if decided to flip it > swap dimensions]

Bleed [most printers > .125 inches on all four sides. Double-arrow > Advanced area]

Color Mode [print: CMYK / Web: RGB / Branding: used both print &web: RGB - establish Pantone spot-colors for company]

Raster Effects [AI resolution > render its effects (e.g. drop shadows).
Web: 72dpi / 300dpi (might want to print or blow-up a part of the design)

Preview Mode [default view / Overprint preview mode,

Web: more realistic view of how design will look once rasterized, the Pixel Preview Mode: useful

Align New Objects to Pixel Grid [if designing web checking this off will force vectors to align to the pixel grid.
Helps keep vectors pixel-perfect when rasterize. Objects snapping into locations that are not necessarily where youre putting them.

http://gomedia.us/zine/tutorials/6-essentials-to-setting-up-your-illustrator-documents/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

http://gomedia.us/zine/tutorials/6-essentials-to-setting-up-your-illustrator-documents/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

[2] Set up and save preferred Workspace

Tool panels (known as Windows) all over screen. Save your work space, own color swatch palette set up as
preferred
(different workspaces depending on the type of project youre working on > click Window/Workspace/Save
Workspace > Name it
Set up own custom color swatch palette > Edit the normal swatches window until you have all the colors you
like > Open the drop-down menu and click Save Swatch Library as ASE
Window/Swatch Libraries/User Defined.

http://gomedia.us/zine/tutorials/6-essentials-to-setting-up-your-illustrator-documents/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

[3] Layers

Use for managing AI docs.

More specific with names like Header
Art, Navigation or Footer.
Locking / unlocking > allows to easily
manipulate the elements without
disturbing the elements on the other
layers.

[4] Create a Template

http://gomedia.us/zine/tutorials/6-essentials-to-setting-up-your-illustrator-documents/

Top layer of document is labeled

Template. > Always start by
designing a template and locking
the layer.
Print projects > Solid black line for
the exterior full-bleed area, then
.125 inside of that I make a solid
red line for the trimmed art area
and finally, .25 inside of that I
make a dashed black line for the
live area.
web designs .> start with a 960
grid template.

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

[5] Link Photos

2 options > embed the image or link it.

If dont check off this Link box, AI assumes you want to embed your
image. When you embed an image it means that the photos data
becomes part of the AI file. When you link your images AI does not
embed the photo data. Instead, it just refers back to the photo file that
is saved on your hard drive.
Link photos > Will keep your illustrator file sizes down. Can edit the
photo outside of AI and it will automatically update the image in AI.
if you move your images on your hard drive, youll need to re-link them
when you open your AI file.
Embedded images > known to corrupt AI files.

[6] When saving, uncheck Create PDF

Compatible File

AI by default, creates a PDF compatible file when you save it >

will bloats file size to something similar to a raster file [only use
this option when saving the final file to client / or send to a
printer]
If youre not done and dont plan on trying to open the file in
some alternative software, uncheck the Create PDF Compatible
File option when saving.

http://gomedia.us/zine/tutorials/6-essentials-to-setting-up-your-illustrator-documents/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | VRA111E SemII 2014/15

http://help.adobe.com/en_US/illustrator/cs/using/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | VRA111E SemII 2014/15

Web link / references

How To Get Started with Adobe Illustrator CS6 - 10 Things Beginners Want To Know How To Do http://www.youtube.com/watch?v=Kgmu8RwLi28
Adobe Help tool http://helpx.adobe.com/illustrator/using/tools.html
Useful AI Tutorials http://www.smashingapps.com/2011/02/08/50-fresh-and-useful-adobe-illustrator-tutorials.html
Design Freelance Graphic Design Studio http://www.aart.us.com/index.html
Free font http://www.dafont.com/
Approach a design problem with the right questions, practical methods to help you brainstorm better, smarter, and more effectively http://www.slideshare.net/innovationexcellence/getting-better-ideas faster?ref=http://elearning.usm.my/current/course/view.php?id=55

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | VRA111E SemII 2014/15

http://paper-leaf.com/blog/2011/02/elements-of-design-quick-reference-sheet/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

http://paper-leaf.com/blog/2012/10/principles-of-design-quick-reference-poster/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

http://paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

Week 7 - [AI Design Brief]

Tutorial 3 Practise [Compulsory Submission]

Task: Vector Postcard Design

Theme: open
- Create a greeting postcard design (including text) using the basic tools in Adobe Illustrator.

Specification:
- Dimension: A4 in either vertival or horizontal orientation
- Raster Effects : 300ppi (if possible)
- File formats : .ai & .pdf (submission only in e-learn)

Filename:
T3_[Full Name]_[Matrik no.]

Due dates :
27.10.2015 [before 10:00AM / class start] Group A & Group B
29.10.2015 [before 10:00AM / class start] Group C

Please submit in e-learning website in softcopy format.

Submission via email is prohibited and will not be considered as submission!
Please reduce your file to web version.

Thank you
SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

examples

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM

LETS START
PRACTISING
NOW

http://en.wikipedia.org/wiki/Vector_graphics_editor

SYAHNAZ MOKHTER | Dept. of Graphic Comm. Design | ARTS | USM