Designing Icons for the Web

2h 50mIntermediate2015-08-27

Authors

James Williamson

Adobe Certified Instructor

Course details

Learn techniques and best practices for designing smart, visually interesting web icons in any software, in this guide with senior author James Williamson. First, find out what makes icons most effective and how to plan your design right from the start. Then review the best practices for brainstorming, sketching your ideas, and finding the right visual metaphors. James shows how to build your designs at high resolutions and create variations that will work at smaller sizes. Finally, learn how to export your work to multiple file types, and optimize SVGs, one of the most popular formats for icons.

Learning objectives
Developing a brief
Sketching your ideas
Establishing grids
Creating shapes, paths, and strokes
Using transparency
Exporting icons as PNGs, GIFs, and SVGs

Skills covered

Interaction DesignIllustratorPhotoshopUser ExperienceProjectAdobe

Concepts

0. Introduction

01 - Welcome
02 - Using the exercise files

1. Planning for Successful Icons

03 - The power of icons
04 - Creating effective icons
05 - Designing for the screen

2. Conceptualizing Icons

06 - Developing a brief
07 - Defining the metaphor
08 - Sketching ideas
09 - Taking sketches digital

3. Drawing Icons

10 - Setting up your workspace
11 - Establishing grids
12 - Creating artboards
13 - Organizing with layers
14 - Managing color
15 - Creating a preview window
16 - Adding sketches
17 - Creating basic shapes
18 - Adding paths
19 - Merging shapes
20 - Modifying strokes
21 - Using transparency
22 - Equalizing icon weight
23 - Designing for smaller sizes
24 - Simplifying icons

4. Exporting Icons

25 - Exporting icons
26 - Generating PNGs and GIFs
27 - Generating SVGs
28 - Optimizing SVGs

Conclusion

29 - Additional resources