How to create a sci-fi avatar set

Beginner level Adobe Illustrator Adobe Illustrator

1. How to Set Up a New Document

As we do with all of our projects, start by setting up a New Document (File > New or Control + N) which we will adjust using the following settings:

 

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

 

And from the Advanced tab:

 

  • Color Mode: RGB
  • Raster Effects: Screen (72 ppi)

 

We’re going to be creating the icons using a Pixel Perfect Workflow, so I highly recommend you to take a moment and read this in-depth tutorial that will get you up to speed in no time.

2. How to Set Up the Layers

Once we’ve set up our new document, it would be a good idea to separate our icons using a couple of different layers, since this way we can streamline our workflow by focusing on one item at a time, which allows us to keep track of each and every shape at all time.

So, open up the Layers panel, and let’s create a total of four layers which we will name as follows:

 

  • Layer 1 > reference grids
  • Layer 2 > scout trooper
  • Layer 3 > darth vader
  • Layer 4 > boba fett

 

The way we’re going to be using these layers within our workflow is pretty easy. We’ll want to lock all except the one that we'll be working on, so that we don’t move or misplace some of the shapes by accident. Then, once we’re done with the current icon, we can then lock its layer and move on up to the next one.

3. How to Create the Reference Grids

As soon as we have our project file all layered up, we can start creating the reference grids which will help us build our icons by focusing on consistency and size.

Step 1

Grab the Rectangle Tool (M) and create a 128x128 px square, which we will color using #F15A24, and then position it to the center of the Artboard using the Align panel’s Horizontal and Vertical Align Center options.

Step 2

Create another smaller 120x120 px square (#FFFFFF), which will act as the active drawing area, this giving us an all-around 4 px padding. Group the two squares (Control + G) and then create two side copies (Control + C > Control + F twice), distancing them at 40 px from the original.

Once you’re done creating and positioning the reference grids, you can lock their layer, and then move on to the next step.

4. How to Create the Scout Trooper Avatar

Assuming you’ve successfully managed to create and position the reference grids, let’s start working on our first icon by making sure we’re on the right layer (that would be the second one) and then zooming in on the first active drawing area.

Step 1

Start working on the helmet’s main body by creating an 88x100 px rectangle, which we'll color using #E5E4EA and then center align to the underlying active drawing area, positioning it at a distance of 4 px from its bottom edge.

Step 2

Using the Add Anchor Point Tool (+), add two new anchor points to the center of the rectangle’s bottom edge, positioning them at a distance of 28 px from the sides.

Step 3

Adjust the lower section of the shape by selecting its bottom corners using the Direct Selection Tool (A) and then pushing them to the top by a distance of 24 px with the Move tool (right click > Transform > Move > Vertical > -24 px).

Step 4

Add some curvature to the section that we’ve just adjusted by selecting and converting its bottom anchor points to smooth using the Convert selected anchor points to smooth function. Reposition its left handles vertically at a distance of 8 px from its bottom edge, and its right ones horizontally.

Step 5

Continue adjusting the shape by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+), and then selecting and pushing its corners to the bottom by a distance of 20 px using the Move tool (right click > Transform > Move > Vertical > 20 px).

Step 6

Select and convert the top three anchor points to smooth, repositioning their handles as seen in the reference image. Take your time, and once you’re done, move on to the next step.

Step 7

Give the resulting shape an outline using the Stroke method, by creating a copy of it (Control + C) which we will paste in front (Control + F), and then adjust by first changing its color to #4F455E and then flipping its Fill with its Stroke (Shift + X). Set the resulting shape’s Weight to 8 px, and its Corner to Round, making sure to select and group (Control + G) the two together afterward.

Step 8

Create the upper section of the mask using a 64x16 px rectangle (#AEADB2) which we will adjust by setting the Radius of its top corners to 12 px from within the Transform panel’s Rectangle Properties. Give the resulting shape an 8 px thick outline (#4F455E), grouping (Control + G) and then positioning the two to the center of the active drawing area’s top edge.

Step 9

Position the shapes that we’ve just created underneath the larger body by right clicking > Arrange > Send to Back.

Step 10

Start working on the section covering the visor, by creating a copy (Control + C) of the larger body’s fill shape, which we will paste in front (Control + F) and then adjust by removing its bottom anchor points using the Delete Anchor Point Tool (-), making sure to set its color to #F0EFF4.

Step 11

Add a copy of the resulting shape to the clipboard (Control + C) and then adjust the shape by individually selecting and pushing its side anchor points to the outside by a distance of 4 px (right-click > Transform > Move > Horizontal > ± 4 px depending on which side you start with).

Step 12

Paste the copy from the clipboard (highlighted with red) onto the shape that we’ve just adjusted (Control + F), and then position it so that you have a 12 px gap between their outer edges.

Step 13

Remove the highlighted copy from the surface of the larger underlying shape using Pathfinder’sMinus Front Shape Mode.

Step 14

Shorten the length of the resulting shape’s side sections, by selecting their bottom anchor points using the Direct Selection Tool (A), and then pushing them to the top by a distance of 12 px using the Move tool (right click > Transform > Move > Vertical > -12 px).

Step 15

Continue adjusting the current section by setting the Radius of its bottom corners to 6 px from within the Live Corners input box.

Step 16

Give the resulting shape an 8 px thick outline (#4F455E), selecting and grouping the two together afterward using the Control + G keyboard shortcut.

Step 17

Start working on the goggles, by creating two 24x24 px circles which we will color using #6D6A77, and then position as seen in the reference image.

Step 18

Open up the paths of the two circles by selecting their top and inner facing anchor points using the Direct Selection Tool (A) and then removing them by pressing Delete. Unite the two resulting paths using the Control + J keyboard shortcut, adjusting the shape of the goggles as seen in the reference image.

Step 19

Give the resulting shape an 8 px thick outline (#4F455E), selecting and grouping (Control + G) the two together before moving on to the next step.

Step 20

Add the vertical detail lines using three 10 px tall 4 px thick Stroke lines (#4F455E) with a Round Cap, which we will horizontally distance at 2 px from one another, grouping (Control + G) and then center aligning them to the visor protector’s bottom edge.

Step 21

Start working on the mouthpiece, by creating a 20x32 px rectangle (#908D96), which we will adjust by setting the Radius of its top corners to 10 px from within the Transform panel’s Rectangle Properties. Give the resulting shape an 8 px thick outline (#4F455E), center aligning the two to the mask’s bottom edge.

Step 22

Give the current section some details using an 8x8 px circle (#4F455E) followed by an 8x10 px rectangle with a 4 px top Corner Radius, making sure to select and group (Control + G) all its composing shapes together afterward.

Step 23

Select the Pen Tool (P) and draw the small insertion from underneath the visor, using #4F455E as your Fill color.

Step 24

Finish off the mask, by adding its side sections using two 24x24 px circles (#4F455E), which we will adjust by selecting and pushing their top anchor points to the top by a distance of 4 px (right-click > Transform > Move > Vertical > -4 px). Position the resulting shapes as seen in the reference image, making sure to send them to the back of all the other shapes (right click > Arrange > Send to Back). Once you’re done, select and group (Control + G) all of its composing shapes together before moving on to the next one.

5. How to Create the Darth Vader Avatar

As soon as you’ve finished working on the Scout Trooper, lock its layer and then move on up to the next one (that would be the third one) where we will start working on the Sith Lord.

Step 1

Create the main shape for the helmet’s top section using an 80x102 px rectangle (#7D7A84), which we will adjust by setting the Radius of its top corners to 40 px. Give the resulting shape an 8 px thick outline (#4F455E), grouping (Control + G) and then positioning the two at a distance of 4 px from the active drawing area’s bottom edge.

Step 2

Add the vertical bonding line using a 16x46 px rectangle (#908D96) with an 8 px thick outline (#4F455E), which we will group (Control + G) and then center align to the active drawing area’s top edge.

Step 3

Grab the Pen Tool (P) and draw the helmet’s lower body (#5F5C6D) using the reference image as your main guide. Take your time, and once you’re done, move on to the next step.

Step 4

Create the helmet’s front section using a 104x68 px rectangle (#6D6A77), which we will adjust by adding two new anchor points to the center of its sides, and then selecting and pushing its bottom ones to the inside by a distance of 32 px (right-click > Transform > Move > Horizontal > ± 32 px depending on which side you start with).

Step 5

Give the resulting shape an 8 px thick outline (#4F455E), grouping (Control + G) and then masking the two using a copy (Control > C) of the mask’s lower section, which we will paste in front (Control + F) and then right-click > Make Clipping Mask.

Step 6

Give the current section an 8 px thick outline (#4F455E), making sure to position it in front of the other shapes as seen in the reference image. Once you’re done, select and group all four shapes together using the Control + G keyboard shortcut.

Step 7

Start working on the mouthpiece by creating a 36x16 px rectangle (#908D96), which we will adjust by individually selecting and pushing its top anchor points to the inside by a distance of 12 px (right-click > Transform > Move > Horizontal > ± 12 px depending on which side you start with). Give the resulting shape an 8 px thick outline (#4F455E), positioning the two as seen in the reference image.

Step 8

Add the vertical detail lines using three 16 px tall 4 px thick Stroke lines (#4F455E), which we will horizontally distance at 2 px from one another, grouping (Control + G) and then center aligning them to the larger mouthpiece. Once you’re done, select and group (Control + G) all of the current section’s composing shapes before moving on to the next step.

Step 9

Add the bottom circular details using two 12x12 px circles with an 8 px thick outline (#4F455E), which we will individually group (Control + G) and then position onto the sides as seen in the reference image.

Step 10

Add the nose section using a 12x12 px rectangle (#B8B8BF), which we will adjust by setting the Radius of its top corners to 6 px. Give the resulting shape an 8 px thick outline (#4F455E), grouping (Control + G) and then positioning the two on top of the mouthpiece. Once you’re done, select and group (Control + G) all of the current sections composing shapes together before moving on to the next step.

Step 11

Start working on the eyes section by creating the main shape for the left one using a 24x24 px circle, which we will color using #5F5C6D and then position as seen in the reference image.

Step 12

Adjust the shape that we’ve just created by selecting and pushing its bottom anchor point to the top by a distance of 4 px, and then to the left side by just 2 px (right-click > Transform > Move > Horizontal > -2 px > Vertical > -4 px) and then slightly repositioning some of its handles.

Step 13

Give the resulting shape an 8 px thick outline (#4F455E), selecting and grouping the two together afterward using the Control + G keyboard shortcut.

Step 14

Finish off the avatar, by adding the right eye using a copy (Control + C > Control + F) of the one that we’ve just finished working on, which we will vertically reflect (right click > Transform > Reflect > Vertical) and then position onto the opposite side of the helmet. Once you’re done, select and group (Control + G) all of its composing sections together before moving on to the next one.

6. How to Create the Boba Fett Avatar

We are now down to our third and last avatar, so assuming you’ve positioned yourself onto the fourth layer, let’s jump straight into it!

Step 1

Create the main shape for the helmet’s upper section using an 88x72 px ellipse, which we will color using #93B780, and then center align to the underlying active drawing area, positioning it at a distance of 4 px from its top edge.

Step 2

Remove the ellipse’s lower half, giving the resulting shape an 8 px thick outline (#4F455E) making sure to select and group the two together afterward using the Control + G keyboard shortcut.

Step 3

Add the vertical detail lines using three 8 px tall 4 px thick Strokes (#4F455E) horizontally distanced at 2 px from one another, which we will group (Control + G) and then position onto the right side of the current section.

Step 4

Start working on the lower section of the helmet, by creating an 88x56 px rectangle, which we will color using #93B780, and then position as seen in the reference image.

Step 5

Add another smaller 88x20 px rectangle (#93B780), which we will position below the one that we’ve just created, uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 6

Adjust the resulting shape by individually selecting and pushing its center anchor points to the outside by a distance of 8 px with the help of the Move tool (right click > Transform > Move > Horizontally > ± 8 px depending on which side you start with).

Step 7

Continue adjusting the current shape by individually selecting and pushing its bottom anchor points to the inside by a distance of 32 px (right click > Transform > Move > Horizontal > ± 32 px depending on which side you start with).

Step 8

Start working on the red painted section, by creating a 96x32 px rectangle, which we will color using #EA7B59, and then center align to the top edge of the shape that we’ve just adjusted.

Step 9

Position a smaller 40x44 px rectangle (#EA7B59) underneath the one that we’ve just created, uniting the two into a single larger shape using Pathfinder’s Unite Shape Mode.

Step 10

Adjust the curvature of the resulting shape’s sides, by selecting and repositioning the bottom anchor points’ handles as seen in the reference image. Take your time, and once you’re done, move on to the next step.

Step 11

Give the resulting shape an 8 px thick outline (#4F455E) using the Stroke method, making sure to select and group the two together afterward using the Control + G keyboard shortcut.

Step 12

Mask the shapes that we’ve just grouped using a copy (Control + C > Control + F) of the helmet’s lower body (shapes selected > right click > Make Clipping Mask), adding an 8 px thick outline (#4F455E) to the current section. Once you’re done, select and group (Control + G) all of its composing shapes before moving on to the next step.

Step 13

Start working on the view plate, by creating a 70x10 px rectangle, which we will color using #6D6A77, and then center align to the red section, positioning it at a distance of 8 px from its top edge.

Step 14

Add a taller 20x54 px rectangle (#6D6A77), selecting and uniting the two into a single larger shape using Pathfinder’sUnite Shape Mode.

Step 15

Start adjusting the resulting shape by individually selecting and pushing the horizontal rectangle's bottom anchor points to the outside by a distance of 1 px (right-click > Transform > Move > Horizontal > ± 1 px depending on which side you start with).

Step 16

Next, select the inner facing anchor points and push them to the bottom by a distance of 8 px using the Move tool (right click > Transform > Move > Vertical > 8 px).

Step 17

Give the resulting shape an 8 px thick outline (#4F455E), making sure to select and group the two together afterward using the Control + G keyboard shortcut, doing the same for the entire lower section.

Step 18

Start working on the antenna/rangefinder assembly by creating the base using a 12x40 px rectangle (#EDB770), which we will adjust by selecting and pushing its left anchor points to the bottom by a distance of 8 px (right-click > Transform > Move > Vertical > 8 px). Give the resulting shape an 8 px thick outline (#4F455E), grouping (Control + G) and then positioning the two onto the left side of the helmet.

Step 19

Add the extension arm using a 36 px tall 4 px thick Stroke line (#4F455E), which we will position onto the base as seen in the reference image.

Step 20

Finish off the helmet and with it the project itself, by drawing the holographic targeting display using a 20x8 px rectangle (#4F455E) as your starting point. Select and group (Control + G) all of assembly’s composing shapes together, making sure to position them underneath the helmet itself (right click > Arrange > Send to Back). Once you’re done, do the same for the entire avatar before hitting that save button.

7. May the Force Be with You!

There you have it fellow Sith Lord lovers, an in-depth step-by-step tutorial on how to create your very own dark side avatars, using nothing more than a couple of geometric shapes that we’ve adjusted here and there. As always I really hope you had fun with this project and most importantly managed to learn something new and useful along the way.

That being said, I’m looking forward to seeing your results, and if you have any questions, feel free to post them within the comments area and I’ll get back to you as soon as I can!

دسته ها: وبلاگ

دیدگاه خود را بنویسید

دیدگاه پس از تائید مدیریت منتشر می شود.
 
فهرست نوشته‌ها

نماد اعتماد و مجوزهای صلاحی دیزاینــ⌬ـ

logo-samandehi
صلاحی دیزاینــ⌬ـ از مرکز توسعه تجارت الکترونیکی وزارت صنعت و معدن دارای نماد اعتماد الکترونیکی می باشد و همچنین با ارائه مستندات لازم در پایگاه ساماندهی سایت های اینترنتی ثبت گردیده است. لذا می توانید با آرامش کامل نسبت به خرید و پرداخت وجه اقدام فرمائید.