"Illustrator Foundations" was retired on January 6, 2020. You are now viewing the recommended replacement.
- Design
- Beginner
About this 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.
6 stepsCreating 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.
17 steps-
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.
8 stepsWebpage Mockup
In this section, you will bring the wireframe to life by adding the logo, color, images, and finishing design touches.
8 stepsSave for the Web
Save for web, including how to export SVGs and using CSS properties within Illustrator.
7 stepsTeacher
-
Ashley Burke
Ashley is a motion graphics artist and illustrator. She collaborates on projects that culminate in a range of multidisciplinary forms including: broadcast, film, print, interactive/mobile, web and live performance. Through these collaborations, she’s had the great opportunity to work with various studios including Turner Studios, Cartoon Network, Wieden+Kennedy, Laika, FGA, Nervo, Curious Pictures, and the Chiodo Bros. Her client list includes Nike, PBS, Adult Swim, FX Network and Deadmau5. In 2011, her first illustrated children's book was published, Right Where You are Now.
Ashley holds a MFA in Design and Technology from Parsons School of Design and a BFA in Graphic Design from the University of Georgia. She has taught at Parsons School of Design and the Art Institute of Portland, as well as led various industry related workshops. The courses she's instructed include Kinetic Typography, Motion Graphics I and II, 3D Motion Graphics, Production Studio, Creating Visual Music, Art of the Title, and Portfolio.