Creating Beautiful Flat Avatar Icons In Adobe Illustrator

0
199
Flat Avatar Icons

If you want to make it big as a graphic designer, you always have to be on top of the design trends.

One of the biggest trends is flat avatar icons.

When we say “avatar”, by technological definition according to Merriam-Webster.com, is “an icon or figure representing a particular person in video games, Internet forums, etc.”

This can also mean that for every user there will be a corresponding avatar.

Now, there could be lots of different avatar varieties out there like photos or icons, but for this tutorial, we are going to solely focus on the flat avatar icon kind.

The FullStack JavaScript Developer E-Degree

Examples of Flat Avatar Icons

To give you a better reference, we’ve scouted the internet for different examples of flat avatar icons.

See which one resonates best with your style and use it as your “base look” for when you begin creating flat avatar icons.
Avatar
Avatar 2
Avatar 3
Avatar 4
Avatar 5
Now that you have seen a handful samples of flat avatar icons, let’s jump into 3 reasons why you should use them.

3 Reasons Why You Should Use Flat Avatar Icons

1. They show a fun side to your personality
Let’s admit it, flat avatar icons are snazzy and fun. They come in different colors and styles and not only that, you can even customize your own!
From the face, hairstyle, skin color, eyes, eyebrows, lips, nose, and ears… every facial feature imaginable can be personalized!
Depending on your personality, you can direct the style of your avatar with just a few tweaks.
After all, flat avatar icons are the next best thing to an empty user photo.

2. They’re an alternative to profile photos
A flat avatar icons is a great placeholder for when you don’t have your photo yet.
Say for example, you’ve just created an account on a social platform. A flat avatar icon is a good way to showcase your identity without revealing too much.
You can create or find almost any avatar based on your profession, ethnicity, country or skill.
In short, there is a summary of how you want an identity to be portrayed.

3. They are incredibly simple but professional
The best flat avatar icons are the ones that capture attention and convey the message they are created to convey.
Once in a while, you will notice that apps will use flat avatar icons as user photos by default. This is one of the good examples of how you can use flat avatar icons.
Some styles come in a cartoon form, some come in round, some polygonal or hexagonal, others are perfect miniature copies of the person they embody.
Avatar 6

How To Create Your Own Flat Avatar Icon in Adobe Illustrator

To successfully create your own flat avatar icons in Adobe Illustrator, you need to have a basic knowledge of the program and some drawing abilities.
If you don’t have though, it’s fine but having prerequisite knowledge will speed up the process.

Step 1: Come up with the idea for your avatar

First, decide what do you want to create?
What kind of avatar is it?
Is it going to be an avatar depicting your profession?
Is it going to be a portrait avatar?
Is it going to be a user profile icon?
Knowing what kind of flat avatar icon you need will help you in arriving at your ideal design.

Step 2: Sketch out your avatar

Once you have the idea, it’s time to map out your design.
Open up Adobe Illustrator and create a new document. Let’s make it into 600 x 600 pixels.

Flat Icons 01

Note that our color mode is in RGB because the avatar is only intended for screens. We only use CMYK for print purposes.
Now that the document is ready, we can start with the following steps:

Flat Icons 02

1. Show the rulers by going to the View menu > Rulers > Show Ruler (Ctrl + R).

Flat Icons 03

2. Then create guides to mark the center. Should the guides appear to be locked, just right click and deselect Lock Guides from the dropdown menu.
3. Create a large circle using the Ellipse Tool (L) on the center line.
4. Soon as you click on the intersection, simultaneously hold down Ctrl + Alt + Shift to create a perfect circle forming from the center. Make it almost as large as your document.
This is how it should look:

Flat Icons 04

Now we have our avatar’s base frame. Let’s continue.
5. After the circular frame, outline different features. Here we are going to do the head, neck, shoulders and torso.

Flat Icons 05

For this tutorial, we are going to create a medical nurse flat avatar icon. Don’t worry about the excess, we will trim them later.
Some tips when creating an avatar:
1. Create an outlined sketch first (like what we have done above) before proceeding to fill in shapes. We used 1px black stroke for the outline.
2. Work with the guides to make sure your
3. Create half of the paths first. For example, you’re going to draw the head, make half of the left side first and close off the path.

Then select this half and connect it to the “left side”. Make sure the paths overlap or touch each other, otherwise they won’t connect.

Then use Pathfinder and select to merge it. See the video below on how this process works for creating this vector heart shape.

Flat Avatar Icon Tutorial

Now our next step would be to delete the excess area of the avatar’s clothes. We’ll do that with the help of the Scissors Tool (C):

1. Select Scissors Tool (C) and then click on the starting point of where the excess begins. Try not to do this at the intersection path where the circular frame and the path of the dress meets because Adobe Illustrator will render this invalid and you can’t cut your path.
2. Click on the intersection on the opposite end of the cloth’s path (see video).
3. Then hit Delete (Del) when you have finished both the steps . This should delete the whole excess segment but may have residual ends that you need to clean up. For this, you will use the Eraser Tool (Shift+E) to dispatch the bits and pieces.

Flat Avatar Icon Tutorial 2

Step 3: Color the outlines of your flat avatar icon
Once you have done the outlines of your flat avatar icon, we’ll go ahead now with filling the colors.
Create colored shapes to go under your outline.

Flat Icons 06

1. Begin with the circular frame. For this tutorial, we’re coloring it purple. Once you have selected a color Fill (X), remove the 1px black stroke by selecting Stroke (hit X again to swap from Fill) and then select None (/) for the stroke.

Flat Icons 07

2. Then create other filled shapes as per the feature of your flat avatar nurse icon. Keep doing this until you’ve finished the whole render.
Tip: You may want to lock your layer (toggle the box next to the eye icon or “visibility” option for layer. See photo below.)

Flat Icons 08

3. Mellow down the colors to make it soothing for the eyes. We’ve toned down the purple color to a muted version to make it more user-friendly.
4. Convert all the other outlines to a closed shape by using the Pen Tool (P) to continue the loose path ends. To do this, double click the anchor point of the path ends.
5. Clean up your work by removing all the strokes.

Flat Avatar Icon Tutorial 3

Now you have your flat avatar icon!

Eduonix Flat Avatar Icon - Final

Wasn’t that easy?
Tell us was this tutorial helpful for you, please comment in the section below.
And before you go, don’t forget to grab our practice file in .AI for your Adobe Illustrator so you can see the step-by-step procedure we did for this avatar.
All you have to do is subscribe below:

LEAVE A REPLY

Please enter your comment!
Please enter your name here