lynda.com » lynda.com library » Adobe » Illustrator CS5 for Web and Interactive Design

John Hersey

Illustrator CS5 for Web and Interactive Design

with Mordy Golding

In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.

Topics include:

Getting perfectly sized pixel graphics from Illustrator
Setting up preferences in Illustrator for web design
Creating custom document profiles
Getting great color on the web
Understanding web graphic file formats (GIF, JPG, PNG, SWF, and SVG)
Setting great-looking type
Slicing artwork for various tasks
Creating Flash animations directly from Illustrator
Working with Photoshop Smart Objects
Exporting HTML and CSS from Illustrator
Integrating with Flash Catalyst

show more show less

author: Mordy Golding
subject: Web, Web Graphics, Interaction Design, Prototyping, Web Design
software: Illustrator CS5
level: Intermediate

duration: 6h 20m
released: Sep 24, 2010

Share this course

Learn more about lynda.com

Ready to join? get started

Members who watched this also viewed

WordPress Essential Training

Muse Essential Training

JavaScript Essential Training

Illustrator CS5 Essential Training

InDesign CS6 Essential Training

Dreamweaver CS5 Essential Training

PHP with MySQL Essential Training (2007)

HTML Essential Training

Illustrator CS5 One-on-One: Fundamentals

Flash Professional CS5 Essential Training

expand all | collapse all

viewed duration

Introduction 6m 56s

Welcome 1m 33s

Choosing Illustrator for web and interactive design 2m 54s

Illustrator and the web design workflow 2m 7s

Using the exercise files 22s

1. Key Concepts and Settings 40m 9s

Pixel dimension vs. resolution 4m 14s

Pixel Preview mode and anti-aliasing 5m 39s

Taking charge of anti-aliasing 5m 27s

Choosing the right color management settings 7m 25s

Setting up important preferences 6m 22s

Setting up a workspace optimized for web design 11m 2s

2. Creating New Documents and Projects 54m 5s

Using the Web document profile 3m 39s

Creating custom document profiles 9m 38s

Using Illustrator's free web templates 2m 33s

Creating a sitemap or wireframe 2m 50s

Setting up an entire web site 9m 33s

Setting up a grid 10m 37s

Setting up an online ad campaign 8m 13s

Setting up icons for iOS 2m 24s

Setting up mobile content with Adobe Device Central 4m 38s

3. Working with Web Color 32m 22s

Understanding web-safe colors 11m 50s

Limiting the Color Guide to web-safe colors 4m 53s

Using Recolor Art to convert art to web-safe colors 4m 54s

Getting color inspiration from Adobe Kuler 6m 48s

Using Recolor Artwork to modify colors across a site 3m 57s

4. Optimizing Web Graphics 56m 54s

Using the Save for Web & Devices feature 6m 44s

Understanding the GIF file format and its settings 10m 20s

Understanding the JPEG file format and its settings 7m 39s

Understanding the PNG file format and its settings 3m 21s

Understanding the WBMP file format and its settings 1m 18s

Understanding the SWF file format and its settings 4m 13s

Understanding the SVG file format and its settings 3m 41s

Adjusting the dimensions of a graphic 4m 46s

Optimizing files to a specific file size 4m 5s

Modifying Save for Web & Devices output settings 6m 51s

Previewing content in Adobe Device Central 3m 56s

5. Working with Text 56m 6s

Setting point type in Illustrator 4m 11s

Setting area type in Illustrator 5m 20s

Formatting text quickly with paragraph styles 14m 39s

Overriding formatting with character styles 3m 2s

Controlling text anti-aliasing 4m 50s

Simulating the CSS box model 11m 14s

Adding cool reflections to text and graphics 8m 26s

Applying settings quickly with Graphic Styles 4m 24s

6. Working with Web Slices 35m 56s

Understanding the concept of slicing 3m 22s

Creating slices manually 4m 26s

Creating slices from guides 2m 45s

Creating slices from objects 7m 33s

Understanding the different slice types 4m 20s

Applying settings to slices 9m 20s

Creating hotspots with image maps 4m 10s

7. Creating SWF Files from Illustrator 23m 35s

Exporting static SWF files from Illustrator 3m 35s

Animated SWF: Converting Illustrator layers to SWF frames 4m 3s

Animated SWF: Using blends to define motion 8m 35s

Animated SWF: Adding static artwork to an animation 3m 24s

Animated SWF: Controlling time within an animation 3m 58s

8. Workflow: Using Photoshop 17m 13s

Preserving slices and structure with PSD export 6m 10s

Working with Photoshop Smart Objects 4m 35s

Sharing color swatches between Illustrator and Photoshop 2m 52s

Generating an animated GIF file with Photoshop 3m 36s

9. Workflow: Using Dreamweaver 7m 28s

Exporting HTML from Illustrator for use in Dreamweaver 3m 31s

Exporting CSS and DIVs from an Illustrator layout 3m 57s

10. Workflow: Using Fireworks 12m 37s

Moving art between Illustrator and Fireworks 6m 25s

Using dynamic shapes from Fireworks 3m 48s

Sharing color swatches between Illustrator and Fireworks 2m 24s

11. Workflow: Using Flash Catalyst 16m 7s

Building files for use in Flash Catalyst 4m 28s

Creating a new Flash Catalyst project from an Illustrator file 3m 40s

Copying and pasting artwork between Illustrator and Flash Catalyst 2m 4s

Roundtrip editing between Illustrator and Flash Catalyst 3m 36s

Creating Flex skins for use in Flash Builder 2m 19s

12. Workflow: Using Flash Professional 19m 48s

Understanding symbols: The lifeblood of Flash 4m 58s

Symbols: Understanding 9-slice scaling 4m 18s

Setting text that will be used in Flash Professional 3m 5s

Moving artwork between Illustrator and Flash Professional 7m 27s

Conclusion 1m 6s

Goodbye 1m 6s

Suggested courses to watch next:

Illustrator CS5 Essential Training (10h 37m)
Mordy Golding

Illustrator CS5 One-on-One: Fundamentals (23h 12m)
Deke McClelland

Fireworks CS5 Essential Training (8h 51m)
Jim Babbage

You must be a lynda.com member to watch this video.

Every course in the lynda.com library contains free videos that let you assess the quality of our tutorials before you subscribe—just click on the blue links to watch them. Become a member to access all 104,069 instructional videos.

get started

learn more

If you are already an active lynda.com member, please log in to access the lynda.com library.

Get access to all lynda.com videos

You are currently signed into your admin account, which doesn't let you view lynda.com videos. For full access to the lynda.com library, log in through iplogin.lynda.com, or sign in through your organization's portal. You may also request a user account by calling 1 1 (888) 335-9632 or emailing us at cs@lynda.com.

Get access to all lynda.com videos

How to access this video.

If this course is one of your five classes, then your class currently isn't in session.

If you want to watch this video and it is not part of your class, upgrade your membership for unlimited access to the full library of 2,024 courses anytime, anywhere.

You can always watch the free content included in every course.

Questions? Call Customer Service at 1 1 (888) 335-9632 or email cs@lynda.com.

Illustrator CS5 for Web and Interactive Design

with Mordy Golding

Share this course

table of contents

exercise files

transcript

author

preferences

FAQs

Suggested courses to watch next:

Bookmark this Tutorial

Name

Description

Tags

bookmark this course

Create new playlist

You must be a lynda.com member to watch this video.

Get access to all lynda.com videos

Get access to all lynda.com videos

Access to lynda.com videos

How to access this video.

You don't have access to this video.

Need help accessing this video?

Try our new course pages

name:
description:
	save cancel