Designing Icons for the Web

Video Introducing this tutorial

Using the exercise files

1. Planning for Successful Icons
The power of icons
Creating effective icons
Designing for the screen

2. Conceptualizing Icons
Developing a brief
Defining the metaphor
Sketching ideas
Taking sketches digital

3. Drawing Icons
Setting up your workspace
Establishing grids
Creating artboards
Organizing with layers
Managing color
Creating a preview window
Adding sketches
Creating basic shapes
Adding paths
Merging shapes
Modifying strokes
Using transparency
Equalizing icon weight
Designing for smaller sizes
Simplifying icons

4. Exporting Icons
Exporting icons
Generating PNGs and GIFs
Generating SVGs
Optimizing SVGs

Additional resources

©2021 | All rights reserved.