Adobe Illustrator for web based instructional designers

Name: Adobe Illustrator for web based instructional designers
Rating: 5.0 (1 reviews)

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

Created byChris Richter

Last updated 3/2025

English

English [Auto],

What you'll learn

How to use Adobe Illustrator
How to export Adobe Illustrator into HTML
How to create 5 designs using Adobe Illustrator
How to add additional CSS and HTML to your embedded graphics

Course content

5 sections • 31 lectures • 2h 8m total length

Introduction1:08
Introducing the designs we will create2:10
Learn hands-on Adobe Illustrator techniques for web instructional design, including six levels of cognitive learning, topic navigation menus with html exports, and health, life, and destiny graphics for web publishing.
What you will need0:52
Vector versus bitmap3:48
Compare vector and bitmap images, showing how anchors and handles create smooth paths versus pixelated squares. Learn how vector graphics scale cleanly for web and mobile by exporting from Illustrator.

Design 1 - Six levels of cognitive learning10:30
You can down load a copy of the Adobe Illustrator file for this design for you to use as a reference in the resources list.
Export 1 - Six levels of cognitive learning4:44
Export your Illustrator design to the web by setting kerning to zero, exporting SVG code, and embedding it in HTML, then ensure font consistency and responsive sizing for web pages.
Design 2 - Topics8:00
You can down load a copy of the Adobe Illustrator file for this design for you to use as a reference in the resources list.
Export 2 - Topics2:58
Design 3 - Five steps to success11:16
You can down load a copy of the Adobe Illustrator file for this design for you to use as a reference in the resources list.
Export 3 - Five steps to success4:23
Design 4 - What to do with your life7:18
You can down load a copy of the Adobe Illustrator file for this design for you to use as a reference in the resources list.
Export 4 - What to do with your life2:54
Export your Illustrator creation for the web, then adjust typography and spacing with kerning to zero, padding, and margins, and enforce a max width for a responsive layout.
Design 5 - Your health7:11
You can down load a copy of the Adobe Illustrator file for this design for you to use as a reference in the resources list.
Design 5 - House5:11
Design 5 - Speech bubble2:30
Design a speech bubble in Adobe Illustrator by adding anchor points and using the direct selection tool to adjust the tail without distorting the rest, and refine stroke and fill.
Design 5 - Money1:08
Design 5 - Statistics1:49
Design 5 - Weights3:10
Create a symmetrical layout by using the grid and rectangular tool to form white bars with a red accent, adjusting spacing and snapping for consistent alignment.
Design 5 - Suitcase3:06
Design 5 - Heart3:31
Design 5 - Person3:14
Create a little person in Illustrator by forming a head with an ellipse, a rectangular body and legs, adding curved edges, aligning with the grid, and exporting for the web.
Export 5 - Your health1:33

Requirements

Access to Adobe Illustrator
A basic understanding of HTML, CSS and JavaScript is beneficial

Description

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.

Who this course is for:

Beginner web developers
Learning designers
Instructional Designers

Adobe Illustrator for web based instructional designers

What you'll learn

Explore related topics

Course content

Getting started4 lectures • 8min

Introduction to Adobe Illustrator4 lectures • 19min

Design18 lectures • 1hr 24min

Getting into the code4 lectures • 15min

Congratulations1 lecture • 1min

Requirements

Description

Who this course is for: