Special offers now — see discounted courses.
day
:
hour
:
min
:
sec
See special offers
Illustrator for Web Design

Illustrator for Web Design

2h 52mIntermediate2018-06-15

Authors

Emily Kay

Emily Kay

Web Developer and Graphic Designer

Course details

Adobe Illustrator is a key tool for creating web content and assets. Using the strong layout and color management tools in Illustrator along with ability to use vector-based assets, designers can create vibrant web assets. In this course, Emily Kay breaks down the key features and workflows that web designers need to know to get up and running quickly. Emily covers topics such as designing responsively, using the library for asset management, and how using graphic and typographic styles and symbols allow you to streamline and control elements globally. She also goes over the development process—including how to create site maps, wireframes, moodboards, and comps—and explains how to create and export optimized web graphics and SVG files for scalable, resolution-independent graphics in the browser.

Learning objectives
Customizing a web workspace
Using the artboards to create multiple sized files easily
Laying out responsive web experiences using Illustrator
Creating and using character and paragraph styles
Working with symbols
Recoloring selected artwork
Creating a site map
Creating moodboards
Creating wireframes
Creating full-blown comps
Exporting icons for screens
Extracting CSS styles

Skills covered

Mobile Web DesignIllustrationIllustratorWeb DesignProjectAdobeAnimation and Illustration

Concepts

0. Introduction

  • 01 - Welcome
  • 02 - Illustrator and web design
  • 03 - How to use the exercise files

1. Set Up the Project

  • 04 - Document settings
  • 05 - Custom web workspaces
  • 06 - Artboards
  • 07 - Grids
  • 08 - Color modes and settings

2. Design Responsively

  • 09 - What is responsive design
  • 10 - Set breakpoints
  • 11 - Libraries - Work with Adobe Stock
  • 12 - Libraries - Manage your resources
  • 13 - Libraries - Collaborate
  • 14 - Text styles
  • 15 - Dynamic buttons
  • 16 - Graphic styles
  • 17 - Symbols
  • 18 - 9-slice scaling
  • 19 - Edit color
  • 20 - Recolor artwork
  • 21 - Seamless backgrounds

3. Development Process

  • 22 - Site maps
  • 23 - Moodboards
  • 24 - Wireframe overview
  • 25 - Create a wireframe
  • 26 - Develop comps
  • 27 - Navigation
  • 28 - Templates

4. Collaborate and Share

  • 29 - Style guides
  • 30 - Comps for client review

5. Export Assets

  • 31 - Assets panel
  • 32 - SVG format
  • 33 - Export icons for screens
  • 34 - Extract CSS styles

Conclusion

  • 35 - Design tips and tricks
  • 36 - Next steps

Related courses

Related learn paths

About us

LyndaKade is a leading learning platform that helps people learn business, software, technology, and creative skills to achieve personal and professional goals.

Phone numberAparat ChannelTelegram SupportTelegram ChannelInstagram Page

All rights to this site belong to LyndaKade.

Terms of Service|Privacy Policy

نماد الکترونیک enamad در صورت اتصال با آی‌پی داخل کشور، نمایش داده خواهد شد.
logo-samandehi - لوگو ساماندهی
zarinpal
zibal