Advertisement
  1. Design & Illustration
  2. Global Influences
Design

How to Create a Set of Veil and Hijab Avatars in Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:
Final product image
What You'll Be Creating

What is a "Hijab" and why is it worn?

Hijab in the Arabic language actually means “covered”, or veil/headscarf, but is more commonly used in reference to Islamic women who wear the head covering as a witness of their faith, a sign of modesty, or an expression of their cultural identity. Also referred to by the word "hijab" is the wearing of loose-fit, non-revealing clothing, associated with wearing the headscarf.

Follow this tutorial by using Adobe Illustrator, and let’s learn together how to design different styles of hijab avatars, using simple tools and handy shortcuts. By the end of this tutorial, you’ll be able to distinguish the styles of hijab and associate them with the regions they are worn, plus create your very own avatars.

Explore more great inspiration for amazing Hijab Designs on GraphicRiver.

Let’s start covering this tutorial!

1. How to Set Up the Avatar Project

Step 1

Start by searching for some photo references of hijabs in order to distinguish the styles and understand the way they are worn.

There are various styles of 'hijab', with different names. We will illustrate the top eight most common ones:

  1. The most popular hijab worn is the Shayla: It is a loose-fit, long, rectangular scarf which is wrapped lightly around to cover the head and tucked or pinned at the shoulders, leaving the neck and face uncovered. It is sometimes fashionably stylized with pins or clips, and popular in countries in the Gulf regions of United Arab Emirates, Kuwait, Bahrain, Oman, Iraq, Qatar, and Saudi Arabia.
  2. The second most commonly worn, in the Gulf, is referred to as simply as Hijab. It's similar to the Shayla but squarish in form. To distinguish it, the ends would settle on the side of the face instead of layering down to the shoulders like the Shayla.
  3. Niqāb is a face-covering veil that reveals the eyes, yet covers the mouth and nose, which is worn with a head scarf called a Khimar.
  4. The Khimar is a long, cape-like scarf that encircles the face and hangs to the middle of the back. It covers the head, neck, and shoulders. Mostly worn in Iran.
  5. Chador is a very long cloak with no hand openings, which covers the full body down to the feet. It's held by the hands and wraps around the head, sometimes covering the mouth. Worn commonly in Iran, or during pilgrimage.
  6. The Gulf Burqa or Batula is a gold or metal decorative piece, worn by women in the UAE, Bahrain  Oman, Qatar and regions in South Iran. It is a horizontal "H" shape and partially covers the forehead and upper lip. This is worn over the Shayla/Hijab, and usually seen more on older women than it is among the young.
  7. The Iranian Burqa is completely different from the Gulf Burqa. Mostly worn in Iran and  Central Asia, it covers the entire face and body, leaving a small mesh screen for the eyes.
  8. An Al-Amira hijab is a two-piece veil, worn in parts of Asia and the Gulf. First, a snug, one piece tube-like headband is slipped over the head to contour the face. Then a Hijab is pinned onto it.

In today's world, hijab fashion has taken a modern turn with different fashion trends, colorful decorative prints, patterns and embroidery styles, yet the modesty is kept.

Use Adobe Photoshop to sketch out one face and upper body, and then multiply it across the board so we have the same features in all our avatars. Then sketch over each avatar the different veil types.

Note: A Digital/Graphics Tablet helps speed up the work.

Save the sketch as JPG.

hijab avatar sketches

Step 2

Launch Adobe Illustrator.

File > New (Control-N) to open a New Document, and set the dimensions:

Name: "Hijab_Avatars".

  • Number of Artboards: 1
  • Width: 680 px
  • Height: 680 px
  • Units: Pixels
  • Color Mode: RGB

Using the Place shortcut (Command-Shift-P), place and expand the sketch, so that one avatar sketch is centered within the artboard.

Place sketch onto artboard hijab adobe illustrator

Then dim the layer so we can illustrate on top of the sketch.

Open the Layers panel, Window > Layers.

Double-click the layer or click on the sub-menu of the Layers panel, and:

  • Name: Sketch
  • Check: Lock
  • Dim Images to: 20%
  • Click OK
layer dim sketch lock Illustration adobe Illustrator

Above the 'Sketch' layer, Create a New Layer, and name it 'Body'.

File > Save (Command-S) to Save the Illustrator file.

2. How to Create the Base Features of Our Avatar

Step 1

Start by drawing a circular background to fit the avatar's dimensions. Set the Fill to None, and Black Stroke color chosen from the Tools panel.

Select the Ellipse Tool (L) from the Tools panel. Tap once on the artboard and the Ellipse dialog box will open. Enter the Width and Height of the circle as 680 px to fit our artboard size.

create a circular background

Fit the circle into the center of the artboard.

Then select the Pen Tool (P) and with Fill to None and a black Stroke all set, simply trace parts of the left side of the face, neck, and body. We will mirror some facial features later.

Use the Ellipse Tool (L) to draw in the pupils.

Select the Ellipse Tool (L), hold down the Option and Shift keys, and drag to constrain the selection.

Your illustration should look similar to this:

trace with the pen tool

Step 2

Next is color. Give each feature a color Fill of your choice. 

You may need to Align some elements to the Front or Back.

To move a selection to the top or bottom position, select the object and choose Object > Arrange > Bring to Front (Shift-Command-]) or Object > Arrange > Send to Back (Shift-Command-[).

To move objects by just one step to the back or to the front, select the object and choose Object > Arrange > Send Backward (Command-[) or Forward (Command‑]).Object > Arrange > Bring

So move each feature according to its proper layer alignment. The illustration should be similar to this:

fill the half side of the face

To add blush to the cheeks, use a light shade of pink with the Hex Code #F9CDD9.

Open the Transparency panel: Window > Transparency. From the Transparency panel, set the Blending Mode to Multiply.

From the main menu, go to Effect > Stylize > Feather, and set it at 8 px.

add blush to the cheeks

Step 3

Afterwards, we need to mirror some of the avatar's features to make the face symmetrical.

Using the Selection Tool (V), select the features to be mirrored.

Select the Reflect Tool (O) and set up the blue center reference point in the middle of the canvas; Option-Shift-Drag and release when the object is properly mirrored into position.

mirror the avatar features

You might need to tweak some elements, using the Direct Selection Tool (A).

Step 4

Select the Pen Tool (P). Set the Fill to None with a black Stroke and add some visual effects to give the artwork more character. Now it's not looking so symmetrical and lifeless. For example, a simple neck shadow or pretty lip gloss shine would help to liven up the image.

add shadows and shine

Give the new features a color Fill and Align them in their respective order.

Once you are done, select all the features (except the background avatar ellipse) and
Command-G to Group the elements together.

Then go to File > Save (Command-S).

group the elements together

3. How to Create Multiple Hijab Avatars

Step 1

Now that the basic avatar features have been created, we should Duplicate our artboard to create our eight Hijab styles using the same avatar features.

From the Main Menu, go to Window > Artboards. To Duplicate an artboard with the contents from the Artboard control panel, click the drop-down menu and select Duplicate Artboards.

Note: Make sure all of the content you wish to have duplicated is unlocked, so it can be duplicated.

Create seven additional artboards.

create multiple avatars

To custom arrange the order of the artboards from the Artboard's Control Panel, click on the drop-down menu to select, Rearrange Artboards, and set it at:

  • Layout: Grid by Row
  • Columns: 4
  • Spacing: 25 px
  • Click OK.
arrange the order of the artboards

Step 2

Next we need to move the sketch on top of our avatars in order to see and trace the hijabs.

In the Layers panel, Unlock the 'Sketch' layer, select the sketch, and move it into the 'Body' layer.

Set the Blending Mode of the sketch to Multiply so we can see through it once it's laid properly over our avatars.

trace the sketches for the hijabs

Lock the 'Body' layer, from the Layers panel.

We need to move our sketch with the Selection Tool (V) to align it with the artwork created.

Rearrange the 'Sketch layer by dragging it on top of 'Body' and renaming it 'Hijabs'.

align the sketch to the artwork

Step 3

Next, start tracing over the hijab line work with the Pen Tool (P). Set the Fill to None with a Black Stroke.

  1. Trace the outline.
  2. Draw in the areas that will be filled out.
trace the hijab linework

Once you have laid out the lines, then:

  1. Give the hijab outlines a Black Fill color.
  2. Give the "fill-in areas" a grayish Fill. Vary the grey tones so the artwork doesn't look so blunt.
  3. Arrange the objects, when necessary, to the back or front. Go to Object > Arrange > Send Backward (Command-[) or Object > Arrange > Bring Forward (Command‑]).
fill in the hijabs

With the Pen Tool (P), add some light grey highlights where it seems visually appropriate.

add grey highlights
  1. From the Layers panel, Unlock the "Body" layer. Use the Selection Tool (V) to move the sketch to the next artboard and lay the respective hijab on top of the avatar.
  2. Lock the "Body" layer, and select the "Hijab" layer to start tracing again.

Step 4

Repeat these steps until all the avatars are traced and filled.

Once you are done, trash the sketch.

Now Unlock the "Body" layer, select the sketch, and Delete it.

create all the hijab avatars

Step 5

Next, let's add the hijab's cast shadow to our avatar bodies.

Create a New Layer from the Layers panel (between the 'Body' layer and 'Hijab') and name it 'Cast Shadow.'

Next, select the Pen Tool (P) and set the Fill to None with a Black Stroke. Add in the areas that might cast a shadow on the body.

add a cast shadow

Add a cast shadow to all the avatars.

add cast shadows to all avatars

Step 6

Select all the illustrated cast shadows. Give them a light beige color Fill with the hex code #DFB07C.

From the Transparency panel, set the Blending Mode to Multiply. This effect will cast a pretty shadow over all the faces.

Add shadows to their faces

Step 7

You will notice some empty space left behind some of the avatar faces or necks. We need to fill those in.

Make sure you are working with the 'Body' Layer, selected in the Layers panel.

  1. Select the Ellipse Tool (L) from the Tools panel, and draw in over those empty areas.
  2. Go to Object > Arrange > Send to Back (Shift-Command-[), to send them behind the features.
fill in the empty spaces

Step 8

Let's add color.

The sixth artboard has the Gulf Burqa which needs to be metallic or golden in color.

Use the Selection Tool (V), and select the Burqa parts to give them two different yellow tones. This will help create a 2D effect using these colors:

  • Dark Yellow: Hex Code #FFCE02
  • Light Yellow: Hex Code #FFDE52
add color to the burqa

Step 9

Next, let's give the avatar backgrounds some feminine colors, like pinks, purples, corals, and pastels.

With the Selection Tool (V), select each circular ellipse we created for our avatars' backgrounds and give them the feminine colors of your choice.

Then Object > Arrange > Send to Back (Shift-Command-[).

add background colors

4. How to Finalize the File and Export

Step 1

In the Layers panel, (on top of 'Hijab' layer) Create a New Layer and name it 'Avatars.'

  1. Using the Selection Tool (V), select the pinkish backgrounds.
  2. Then Copy (Command-C).
  3. And Paste in Front (Command-F).
  4. From the Layers panel, drag the selection onto the 'Avatars' layer.
Create the final avatars
  1. Lock the 'Avatar' layer.
  2. Turn Off Toggle Visibility (the eye icon) in the Layers panel, so we can see the layers below.

Step 2

Next we need to Group each avatar with its contents.

  1. Using the Selection Tool (V), select the pinkish backgrounds.
  2. Go to Object > Lock > Selection (Command-2).
  3. Select all the elements of one avatar, and Group (Command-G) them together.
group each avatars components

We need to scale up the artwork slightly to fit within the circular dimensions. 

With the new group selected, go to Object > Transform > Scale. The Scale dialog box will open, so enter:

  • Uniform: 110%
  • Select Preview to see if it scales properly.
  • Click OK.
scale up the artwork

Repeat these steps until all the avatars are grouped and scaled.

Step 3

Turn on Visibility Toggle for 'Avatars' by clicking the eye icon in the Layers panel, and Unlock the layer.

We need a Clipping Mask for the avatar to fit within the circular dimensions.

Start with the first artboard and work your way through the rest.

  1. Select the avatar.
  2. Select the ellipse on top.
  3. Go to Object > Clipping Mask > Make (Command-7).
clip the avatars to the circles

Continue the same steps with the seven other artboards.

clip all the avatars

Step 4

Finally, from the Artboard panel, name each artboard according to its respective veil avatar. See below:

name each artboard

Step 5

Go to File > Export As.

For the Format, either make it a PNG with a Transparent background or a JPG for a white background, depending on how or where you will use it. Make sure Use Artboards is selected. Then Export.

Next, a PNG dialog box will appear. Set the Resolution to Screen (72 ppi) and click OK.

export the avatars

Lovely! Our Set of Hijab Avatars Is Complete!

Congratulations! We’ve done a brilliant job in creating hijab avatars by using basic shortcuts and the Pen and Ellipse Tools. We can use these simple techniques to expand our set and create more amazing avatars for our contacts or social media accounts.

hijab avatars on instagram and social media

Enjoy creating and uploading them to any of your social media profiles!

Hijab Avatars Adobe Illustrator Tutorial by Miss Chatz
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.