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
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
Introduction
- Welcome
- Using the exercise files
Planning for Successful Icons
- The power of icons
- Creating effective icons
- Designing for the screen
Conceptualizing Icons
- Developing a brief
- Defining the metaphor
- Sketching ideas
- Taking sketches digital
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
Exporting Icons
- Exporting icons
- Generating PNGs and GIFs
- Generating SVGs
- Optimizing SVGs
Conclusion
- Additional resources