Icon Design in Adobe XD - From Sketching to Flat Icon Sets

Name: Icon Design in Adobe XD - From Sketching to Flat Icon Sets
Rating: 4.4 (149 reviews)

Learn the fundamentals of icon design and create a beautiful flat icon set by combining and overlaying shapes

Created byCaleb Kingston

Last updated 3/2019

English

What you'll learn

Vector Design
Sketching your ideas
Establishing grids
Creating simple shapes, paths, and strokes to make complex icons
Creating custom shapes with the pen tool
Using Transparency
Practical graphic design skills that can be used in Illustrator, Affinity Designer, Sketch, Figma and dozens of other design tools
Exporting icons in PNG, SVG, JPG, PDF and more

Course content

9 sections • 36 lectures • 1h 34m total length

Welcome to Learn Icon Design Using Adobe XD1:12
Getting design feedback through this course0:38
Using the exercise files1:06

What you should know0:32
Explore icon design in Adobe XD from sketching to flat icon sets, using familiar vector tools across programs, while learning basic file navigation and free cross-platform nature of the course.
Installing Adobe XD0:07
Understanding Adobe XD interface for icon design0:40
Explore essential Adobe XD tools for icon design by using the left toolbar to create boards and shapes, adjust sizes, corner radii, and colors, and combine shapes with boolean tools.

Types of icons0:44
Learn two icon types: pictogram, a picture glyph representing tangible items like phone, camera, folder, and mail; and audio graham, an icon for abstract ideas such as play and delete.
When to use icons1:25
Keep your icons consistent0:50
Learn to keep your icon library cohesive by harmonizing stroke weight, color, and shapes across designs, using reference ideas to achieve a balanced, consistent look.
Different source formats1:07

Creating a notification icon3:48
Creating a heart icon3:19
Create a heart icon in Adobe XD using two ways: rectangles with rotations for a heart, or the pen tool for a curved heart, convert to a single path.
Creating a cloud icon2:22
Creating a chat icon2:42
Creating a calendar icon4:06
Converting icons to outlines4:02
Learn how to convert field icons into outlined icons in Adobe XD, create active and inactive states with a three-pixel border, and toggle between field and outline versions.
Toggling between filled and outlined icons1:32

Requirements

A computer with Adobe XD installed (which is FREE)
Basic knowledge of how to navigate around your computer's file system
Basic drawing tools are recommended such as a pencil, eraser, and sketchbook or paper

Description

Learn how to design visually engaging and cohesive icon sets in any program. I'll teach best practices on brainstorming icons, finding the right metaphors, sketching your ideas, and finally designing high resolution icons and simple icon versions that will work on smaller screens.

Although I'll be teaching you in Adobe XD (because it is free), I'm going to cover tools that are also found in your favorite design programs including:

Adobe Illustrator
Sketch
Figma
Affinity Design
Invision Studio
and many more

The concepts you learn here can be put into practice for web graphics, web design, interaction design, graphic illustration and much more.

Things you will learn in this course include:

Overview of Adobe XD
Understanding types of icons and when to use them
Creating a design brief and planning your icons to have a consistent style and colors.
Researching icon metaphors and sketching your ideas
Setting up your workspace for icon design
Creating and merging shapes to create complex icons
Using Transparency
Balancing icon sizes and positions
Creating a simple icon set
Converting a filled icon set to outlines
Exporting icons
and more.

Who this course is for:

Graphic designers wanting to design icons
Interface designers wanting to design icons
Designers wanting to learn Adobe XD by example
Students wanting to advance their career as a graphic or interface designer
Students wanting to learn Vector Design

Icon Design in Adobe XD - From Sketching to Flat Icon Sets

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 3min

Getting Set Up3 lectures • 1min

Understanding Icons4 lectures • 4min

Planning your icons4 lectures • 5min

Setting up your workspace for icons5 lectures • 9min

Drawing icons7 lectures • 38min

Icon balance and consistency2 lectures • 7min

Creating an icon set7 lectures • 22min

Exporting your icons1 lecture • 5min

Requirements

Description

Who this course is for: