Unit time: 3 hours

Intro to Illustrator

Along with Photoshop, Illustrator is an industry-standard web design tool. Designers love the program because of its ability to create scalable, vector-based graphics. It's an especially great tool for purposes like icon creation, tracing type, and more — but it works great for simple web layouts as well.

In this unit, we've curated videos and put together some simple practice exercises to help you get up to speed with the basics of Illustrator in a web design context. Unlike other units in this course, you won't share any of the exercises you work on with your mentor. By the end of the unit, you will be familiar enough with Illustrator to complete all the projects in Design 101.

Learning Goals

Know when to use Illustrator
Set up artboards and pages using Illustrator
Know how to style shapes & text
Use the grid and alignment tools to create ordered layouts
Manipulate basic shapes
Use simple shortcuts to simplify the Illustrator workflow

Getting Started

Let's get started with an intro to Illustrator, and then get acquainted with the basics, like how to set up artboards.

Set up your document

Go to video

Work with artboards

Go to video

How to save a file for output

Go to video

Styles, Shapes, & Layout

Now, we'll learn how to create & style different shapes and text on the canvas.

Use Shapes Tools

Go to video

Apply Colors

Go to video

Transform artwork

Go to video

Work with type

Go to video

Styles, Shapes & Layout: Exercise

Create a new Illustrator document, and set up your first artboard (iPhone size: 640x960). Recreate this simple login screen using what you've learned about layers, text, and shape.

Intermediate Tricks

Now, we'll learn how to create & style different shapes and text on the canvas.

Learn gradients

Go to video

Create patterns

Go to video

Navigation Techniques

Go to video

Use symbols

Go to video

Unit Mini-Project

Create a 960x1100 artboard in Illustrator.
Recreate this webpage mockup in Illustrator using the techniques you’ve learned about in this module. You can find placeholder images for the background on Unsplash.