Introduction to Adobe Illustrator for Web Designers

Learn how to create clear, crisp illustrations to embed into your website

Welcome to the Introduction to Adobe Illustrator for web based instructional designers.

My name is Chris Richter and in this class I will introduce you to Adobe Illustrator. I will show you how as an instructional designer, you can use Adobe Illustrator to create amazing designs that can be added to your web based content using SVG (Scalable Vector Graphics).

The content focuses on the basics of how to use Adobe Illustrator but then provides an introduction into the world of Web Development and SVG.

The practical use for this is that you can design graphics that will scale perfectly for mobile devices without having to be concerned with complex CSS calculations. You can create designs that are HTML based, scalable and easy to manage. You can also add classes to your Adobe Illustrator designs to apply your web theme colours and fonts.

We will work through 5 different projects creating the Adobe Illustrator file then exporting to SVG and adding the HTML to your web page.

This course is best suited to you if you are interested in web development and would like to learn how to use Adobe Illustrator to add meaningful graphics to your web content.

If you develop online education materials then this course will be suitable for you as it will teach you how to embed your designs into your HTML based training materials.

Let’s go.

Course contents

Getting started

• Introduction (1:08)
• Introducing the designs we will create (2:10)
• What you will need (0:52)
• Vector versus bitmap (3:48)

Introduction to Adobe Illustrator

• Layout overview (3:27)
• Tools overview (6:21)
• Properties overview (4:37)
• Layers overview (4:57)

Design

• Design 1 – Six levels of cognitive learning (10:30)
• Export 1 – Six levels of cognitive learning (4:44)
• Design 2 – Topics (8:00)
• Export 2 – Topics (2:58)
• Design 3 – Five steps to success (11:15)
• Export 3 – Five steps to success (4:23)
• Design 4 – What to do with your life (7:18)
• Export 4 – What to do with your life (2:54)
• Design 5 – Your health (7:11)
• Design 5 – House (5:11)
• Design 5 – Speech bubble (2:30)
• Design 5 – Money (1:08)
• Design 5 – Statistics (1:49)
• Design 5 – Weights (3:10)
• Design 5 – Suitcase (3:06)
• Design 5 – Heart (3:31)
• Design 5 – Person (3:14)
• Export 5 – Your health (1:33)

Getting into the code

• Export options (5:34)
• Adding HTML IDs (1:53)
• Grouping layers (1:59)
• Adding HREF (5:37)

Congratulations

• What next and thankyou (1:26)