HCI Tutorial
Adobe Illustrator
Instructor: Dr. Rajiv Ratn Shah, Associate Professor, IIIT Delhi
Teaching Assistants: Adarsh Pandey, Ritwik Bamba, IIIT Delhi
Presented by: Shubhi Jain, IIIT Delhi
What is Adobe Illustrator?
Overview
● Vector-based design tool.
● Used for creating logos, illustrations, icons, and more.
Key Features
● Precision and scalability of vector graphics.
● Popular in graphic design, UI/UX design, and digital art.
Getting Started with the Interface
1. Toolbar (on the left).
Getting Started with the Interface
1. Toolbar (on the left).
2. Artboard (main canvas area).
Getting Started with the Interface
1. Toolbar (on the left).
2. Artboard (main canvas area).
3. Panels (Properties, Layers, Color, etc.).
Getting Started with the Interface
1. Toolbar (on the left).
2. Artboard (main canvas area).
3. Panels (Properties, Layers, Color, etc.).
4. Menu bar (on the top).
Starting Your First Project
Steps to create a new document:
1. Go to File → New.
2. Set dimensions (e.g., 1920x1080 px for a screen or A4 for print).
3. Choose color mode (RGB for digital, CMYK for print).
Basic Tools
● Selection Tool (V): Selects and moves objects.
● Pen Tool (P): Creates paths and shapes.
● Shape Tools: Draw rectangles, circles, etc.
● Type Tool (T): Adds text.
● Eyedropper Tool (I): Picks colors.
Direct Select Tool
Allows you to select individual anchor points or line segments of an object
You can:
● Select point or lines making up the shape
● Delete them
● Move them by simply dragging
● Also, you can select multiple point or lines select your first point or line
then hold shift key and select the rest of the desired points or lines
Pen Tool
One can draw a free-form array of points connected by line segments or can be
used to construct shapes as well as trace non-vector artwork.
How to do it?
● Click where they want the anchor point to be then moves to the next point
and clicks
● A shape will start developing
● To close the shape, return to the first point and click it
● You can alter the contour of the lines by moving the handles which
appears when click anchor point is clicked with CONVERT ANCHOR
POINT tool
Artboards
An artboard is called live area as any object
placed on that will be exported to your final
file
● Artboards are like digital canvases in
Illustrator.
● They define the area where you create
and organize your artwork.
● Useful for working on multi-page
designs
Artboards
Creating Artboards
● Go to File → New to define the artboard size and number.
● Or use the Artboard Tool (Shift+O):
● Click and drag to create a new artboard.
Managing Artboards
● Repositioning: Drag the artboard to move it around.
● Resizing: Use the bounding box handles or adjust size in the Properties
Panel.
● Renaming: Double-click on the artboard name in the Artboards Panel.
Adding/Removing Artboards
● Add: Click the “+” button in the Artboards Panel or use the Artboard Tool.
● Remove: Select the artboard and press Delete.
Creating Shapes with Illustrator
How to draw and manipulate basic shapes:
● Hold Shift for proportionate shapes (perfect circles, squares).
● Combine shapes using the Shape Builder Tool.
Example: Create a simple logo using circles and rectangles.
Using Pathfinder
Combine, subtract, intersect, and exclude shapes.
Working with Colors
How to fill objects with color:
● Using the Color Picker or Swatches panel.
● Adding gradients via the Gradient Tool (G).
Using Layers
Why layers are important:
● Keep design elements organized.
● Lock or hide elements for convenience.
Adding and Editing Text
How to add text:
1. Select the Type Tool (T) and click on the canvas.
2. Change font, size, and color via the Properties panel.
More options:
1. Create outlines for editable shapes from text.
2. Adjust spacing (kerning and tracking).
Exporting Your Work
Saving your work:
● File → Save As: AI (native format).
Exporting for different uses:
● File → Export → Export As: PNG, JPG, SVG, etc.
Web Export Best Practices
● File Formats: PNG, JPG, SVG
● Color Mode: RGB
● Resolution: 72 PPI (standard)
● Bleeds: Not required
● Purpose: Screen/display use
Exporting Your Work
Print Export Best Practices
● File Formats: PDF, TIFF, EPS
● Color Mode: CMYK
● Resolution: 300 DPI (high-quality)
● Bleeds: Required (e.g., 0.125 in)
● Purpose: Physical printing
● When exporting for print, ensure fonts are embedded or converted to
outlines (Type → Create Outlines).
● Embed all linked images to avoid missing assets.
● File → Save As → Select PDF → PDF preset:
○ PDF/X-1a: High-quality print with flattened transparency.
○ High Quality Print: Keeps vector and color fidelity intact.
● File → Export → Export As… → Use TIFF or EPS (if required)
Tips
Tips for improving Illustrator skills:
● Use keyboard shortcuts.
● Explore free tutorials and resources (e.g., Adobe's official site, YouTube).
Practice regularly with small projects.
Resources and References
1. The Complete Beginners Guide To Adobe Illustrator, a 19 part series (by
Gareth David Studio)
2. Adobe Illustrator for Scientists, a 10 part series (by Kevin Bonham)
3. Adobe Illustrator Tutorials, choose one of 218 videos [more general
audience] by Dansky.
4. https://www2.mrc-lmb.cam.ac.uk/groups/cartera/download/Illustrator-for-
Scientists-A-Brief-Overview.pdf
