Design better experiences Get started free
InVision Enterprise Learn more
The world's smartest companies use InVision

The world's smartest companies use InVision Enterprise Edition

Design Resources

How to create a flat and minimal avatar

by

on

View all posts

Flat design is clean and modern—you won’t ever find elements like drop shadows, gradients, or textures used. It’s a great way to keep things simple, clear, and free of distraction.

Plus, it just looks cool.

There are endless applications for flat design, but I’m going to talk about one of my favorites: the flat and minimal avatar. These avatars are all about showing your face in a simple way.

“Flat design is a great way to keep things simple and free of distraction.”

Here’s a step-by-step guide to making your very own flat and minimal avatar.

Before we begin, you’ll need:

  • Adobe Illustrator
  • A high-resolution photo of yourself that clearly shows your face

Step 1: Prepare the canvas

Open Illustrator and go to File > New, or just press Ctrl/Cmd + N.

Name your file and select Profile as Web (if you’re not going to use this avatar online, then select Profile as Print).

Set the height and width as 800×800 pixels. This is just your working canvas size—don’t worry about the higher resolutions, as Illustrator is vector-based and allows your artwork to be scaled up to extremely large sizes. Just increase the canvas and artwork size whenever you save for image formats like JPEG and PNG.

Canvas

Step 2: Import your photo

Go to File > Place and select the photo of yourself that you’d like to turn into the flat and minimal avatar. The photo should clearly show your face so that you can easily trace it.

Once you’re happy with the image placement, embed it to the canvas (You’ll find the embed option in the control panel).

Place

After the image is embedded, go to Window > Transparency and lower the opacity of the image to 60%. This will make your design process a little less distracting, as you’re going to design over your photo.

Lock this layer to prevent any unwanted changes—this is the base of your whole avatar and you’ll be creating more layers above it.

Transparency

Step 3: Identifying the unique elements

What’s unique about your appearance? Maybe it’s a nose piercing, thin-framed glasses, or bright blue eyes. For me, it’s my hair, beard, and the mole on my neck.

Pinpoint some of your identifying characteristics and highlight them in your avatar.

Step 4: Start designing

Create a new layer by selecting the Create New Layer option from the bottom of the Layers Window. Name this layer Head. Creating new layers for new elements and naming them descriptively helps keep your file organized.

Head

Let’s first trace the outline of the head. Select Pen tool from the Tools panel, or press P. Trace the outline of the head as shown in the screenshot below.

Head-Trace

Once you’re done tracing, add some color. I recommend picking a color from the original image.

To pick a color, press I when the head’s path is selected. Note that this copies the complete property of the image, making the path 60% opaque. To resolve this, go the Transparency window when the path is selected and make the opacity 100%. Don’t forget to trace the ears (they’ll be the same color as the face).

Head-Color

Create a new layer and name it Hair. Trace your hair and choose your hair color from the original image. Try to create as few anchor points as possible to keep the design clean.

Hairs

You can turn the visibility of the layers on or off. Take care of the positioning of the layers: smartly positioning layers in Illustrator speeds up your process. In this case, placing the Head layer below the Hair layer allowed me to be inaccurate while drawing the Head, since it was going to be covered by the Hair. Change the position of the layers by dragging them up and below each other in the Layers panel.

Positioning

Step 5: Add details

Follow the same procedure outlined in Step 4 to create the rest of the design elements. To resolve issues like poorly traced paths, select the Direct Selection tool from the Tools panel or press the shortcut key A and press over the anchor points. This lets you change the position and the curve. You can also add or remove anchor points from the path by right-clicking on the Pen tool in the Tools panel and selecting the appropriate tool.

Detailing

Don’t forget to zoom in and out while adding those details to your avatar. It’s the little details that’ll make a big difference in your design.

Your final design will look something like this:

Finished-Design

Step 6: Save your avatar

Hit Ctrl/Cmd + S or go to File > Save and save your file. Stick with the default preferences.

Save

You can also save your file for the web by hitting Ctrl/Cmd + Alt + Shift + S or by selecting File > Save for Web. This option lets you save your file as a JPEG or transparent PNG.

Save-for-Web

Play around with colors, add background or geometric boundaries, or just use it as-is. Now that you have your very own flat and minimal avatar, we’d love to see it: Tweet it to @InVisionApp and @WeirdoWizard.

CTA for those not in hs to DO UI kit
CTA for those not in hs to DO UI kit
Author

Darshan Gajara
Darshan is a designer, storyteller, and thinker. He currently leads the product design team at Wishberry. His past experience includes UI designing at BookMyShow. He writes about product design at darshangajara.com. He believes creativity can be weird and weird is good.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.