Adobe Illustrator for Web Design Course

Using a project-based learning approach to Illustrator’s core features, walk through the process of designing a simple website beginning with making a wireframe, and then using that wireframe as the basis for creating a page mock up for mobile and desktop platforms. Along the way, use the basic drawing and shape tools to create an illustrated graphic logo. And with responsive web design in mind, we’ll utilize the benefits of both scalable vector graphics (SVGs) and CSS export capabilities.

What you'll learn

• Creating a Wireframe
• Logo Design
• Webpage Mockups
• SVGs
• Save for the Web

Starting Your Adobe Illustrator Project

First, preview the assets that you will be creating in the course. We will then talk about the unique qualities of vector graphics and SVGs, and how they relate to modern needs of responsive web design. After a brief overview of the workspace and how to customize it, we will go step by step through the process of creating a new document with multiple artboards and preparing a design for mobile and desktop platforms.

• Introducing the Project

  2:19

• Vectorific Illustrator

  3:04

• Adobe Illustrator Review

  5 questions

• Becoming Familiar with the Workspace

  5:42

• Document Settings and Artboards

  6:03

• Workspace and Settings Review

  5 questions

Creating a Wireframe

In this section, create a wireframe for mobile and desktop using basic boxes and lines to represent content and define how spaces within the webpage will be used. Then, move on to adding in typography and buttons. Finally, learn all about how to use Styles.

• Introduction to Grids and Guides

  5:38

• Padding and Margins

  8:22

• Layer Organization

  2:43

• Grids and Guides Review

  5 questions

• Layout for Mobile

  5:19

• Align and Distribute Tools

  2:53

• Ellipse Tool

  1:58

• Layout for Desktop

  3:09

• Desktop Wireframe cont'd

  1:28

• Adding Arrows and Using Stroke

  5:13

• Adding Type

  6:49

• Text Containers

  4:21

• Buttons

  4:41

• Graphic Styles

  1:27

• Symbols

  2:44

• Naming and Organizing Layers

  5:36

• Wireframe Review

  7 questions

Logo Design

In this section, you will create the graphic logo. Beginning with a sketch, you will bring it all the way to a finished vector illustration with typography.

• Pen Tool

  5:08

• Pen Tool Review

  5 questions

• Importing a Sketch and Embedding Images

  2:59

• Building with Color

  3:45

• Shapebuilder

  1:33

• Layer Order

  1:38

• Converting Text

  2:35

• Logo Design Review

  5 questions

Webpage Mockup

In this section, you will bring the wireframe to life by adding the logo, color, images, and finishing design touches.

• Adding in Vector Art and Colors

  2:06

• Logo and Grouping

  2:50

• Social Media Icons

  2:52

• Vector Art Review

  5 questions

• Character Styles

  7:54

• Paragraph Styles

  1:54

• Placing Raster Images and Masking

  3:07

• Webpage Mockup Review

  5 questions

Save for the Web

Save for web, including how to export SVGs and using CSS properties within Illustrator.

• Save as PDF

  2:30

• SVG Graphics

  3:11

• Export Multiple Artboards

  2:46

• Image Optimization and Saving For Web

  7:18

• Image Optimization Review

  5 questions

• CSS and Final Thoughts

  5:32

• Save for the Web Review

  5 questions