Quantcast
Viewing all articles
Browse latest Browse all 8961

How to Create an Alien Abduction Illustration

Image may be NSFW.
Clik here to view.
Final product image
What You'll Be Creating

As a kid, I used to spend my nights watching The X-Files and wondering if there truly is something else in the universe, something that might change the way we think but most importantly help us see our place within it. 

Whether it’s little green men or grey ones, our imagination has always run wild creating stories that might or might not be true, so today we’re going to try and gather some evidence by creating our very own alien abduction illustration. Of course, we’re going to do all of that using our creative imagination and a few shapes and tools found in Adobe Illustrator.

That being said, go pour some magic bean juice in that special agent mug, and let’s get started!

Oh, and don’t forget you can always expand your project by heading over to GraphicRiver where you’ll find a great selection of alien-themed vector assets.

1. How to Set Up a New Project File

Assuming you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) for our project using the following settings:

  • Number of Artboards: 1
  • Width:920 px
  • Height:680 px
  • Units:Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
Image may be NSFW.
Clik here to view.
setting up a new document

2. How to Set Up a Custom Grid

Even though today’s project is not an icon-based one, we’ll still want to create the illustration using a pixel-perfect workflow, so let’s set up a nice little grid so that we can have full control over our shapes.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

  • Gridline every: 1 px
  • Subdivisions: 1
Image may be NSFW.
Clik here to view.
setting up a custom grid

Quick tip: you can learn more about grids by reading this in-depth piece on How Illustrator’s Grid System Works.

Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu (that’s if you're using an older version of Illustrator).

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my How to Create Pixel-Perfect Artwork tutorial, which will help you widen your technical skills in no time.

3. How to Set Up the Layers

Once we’ve finished setting up our project file, it would be a good idea to structure our document using a couple of layers, since this way we can maintain a steady workflow by focusing on one section of the illustration at a time.

That being said, bring up the Layers panel, and create a total of four layers, which we will rename as follows:

  • layer 1: background
  • layer 2: main composition
  • layer 3: texture
  • layer 4: hud overlay
Image may be NSFW.
Clik here to view.
setting up the layers

Quick tip: I’ve colored all of my layers using the same green value, since it’s the easiest one to view when used to highlight your selected shapes (whether they’re closed or open paths).

4. How to Create the Background

As soon as we’ve layered our document, we can start working on the project by creating the dark background, so make sure you position yourself on the first layer, and let’s jump straight into it.

Step 1

Create a 920 x 680 px rectangle, which we will color using #2C2D2D and then center align to the underlying Artboard using the Align panel’s Horizontal and Vertical Align Center options.

Image may be NSFW.
Clik here to view.
creating the background

Step 2

Lock the current layer using the Layerspanel, and then move on up to the next one (that would be the second one) where we’ll gradually build our composition.

Image may be NSFW.
Clik here to view.
locking the background layer

5. How to Create the Cellar Entrance

With the background in place, we can start working on our surreal composition, and we will do so by creating the cellar entrance where the person behind the camera lens is documenting the close encounter.

Step 1

Create a 280 x 536 px rectangle (#656868), which we will center align to the underlying Artboard and then turn into a subtle light curtain by applying a Lineargradient to it. Use the same #656868 hex value for both color stops, making sure to set the left one’s Opacity to 0%.

Image may be NSFW.
Clik here to view.
creating the light curtain

Step 2

Add the cellar’s entrance using a 280 x 396 px rectangle (#868989) which we will position on top of the one that we’ve just created, center aligning it to the underlying one’s top edge.

Image may be NSFW.
Clik here to view.
creating the entrance for the cellar

Step 3

Adjust the smaller rectangle, by individually selecting its bottom anchor points using the Direct Selection Tool (A), and then pushing them to the inside by 20 px using the Move tool (right click > Transform > Move > Horizontal > +/- 20 px depending on which side you start with).

Image may be NSFW.
Clik here to view.
adjusting the shape of the entrance

Step 4

Zoom in on the document, and then start working on the entrance’s sill by creating a 240 x 16 px rectangle (#6A6D6D), which we will position below the previously adjusted shape.

Image may be NSFW.
Clik here to view.
adding the sill to the cellar entrance

Step 5

Add another shorter 248 x 4 px rectangle which we will color using #515454, and then position as seen in the reference image.

Image may be NSFW.
Clik here to view.
adding the bottom section to the sill

Step 6

Select the Pen Tool (P), and using #2C2D2D as your Fill color draw the little wood cracks using the reference image as your main guide. Take your time, and once you’re done, select and group them all together using the Control-G keyboard shortcut, doing the same for all of the current section’s composing shapes.

Image may be NSFW.
Clik here to view.
adding the wood cracks to the sill

Step 7

Create the stairs using a 240 x 28 px rectangle for the top one, followed by a 256 x 28 px one for the center one and an even larger 272 x 28 px one for the bottom one. Color all three shapes using #515454, making sure to vertically stack them 8 px from one another.

Image may be NSFW.
Clik here to view.
creating the stairs

Step 8

Give each stair a subtle highlight using three 2 px tall rectangles, which we will color using #6A6D6D and then center align to their top edges.

Image may be NSFW.
Clik here to view.
adding the highlights to the stairs

Step 9

Add the hard shadows using three curved segments, which we will color using #2C2D2D and then position onto the larger rectangles’ bottom edges as seen in the reference image.

Image may be NSFW.
Clik here to view.
adding the shadows to the stairs

Step 10

As we did with the sill, take a couple of moments and draw a few cracks on each stair, using #2C2D2D as your Fill color. Take your time, and once you’re done, select and individually group (Control-G) each stair with its corresponding details, doing the same for the entire set afterwards.

Image may be NSFW.
Clik here to view.
adding the cracks to the stairs

6. How to Create the Stars

As soon as we’ve finished working on the stairs, we can focus on adding details to the background framed by our cellar’s entrance, and we will do so by creating little stars.

Using a couple of 4 x 4 px circles (#B1B5B5), gradually populate the night sky, making sure to select and group all of them together afterwards using the Control-G keyboard shortcut.

Image may be NSFW.
Clik here to view.
adding the stars

7. How to Create the Windmill

With the stars in place, we can start developing our composition by building some of the farm utilities, the first one on our list being the windmill.

Step 1

Create the main shape for the windmill using a 72 x 248 px rectangle with a 4 px thick Stroke (#2C2D2D) with aRound Join, which we will position on the lower side of the entrance, as seen in the reference image.

Image may be NSFW.
Clik here to view.
creating the main shape for the body of the windmill

Step 2

Adjust the shape that we’ve just created, by adding a new anchor point to the center of its top edge using the Add Anchor Point Tool (+) and then removing its corner ones using the Delete Anchor Point Tool (-).

Image may be NSFW.
Clik here to view.
adjusting the shape of the body of the windmill

Step 3

Add the drop pipe assembly using a 248 px tall 4 px thick Stroke line (#2C2D2D), which we will center align to the windmill’s body.

Image may be NSFW.
Clik here to view.
adding the drop pipe to the windmill

Step 4

Add the horizontal structure beams using two 4 px thick Stroke lines (#2C2D2D), which we will position onto the mill’s larger body as seen in the reference image.

Image may be NSFW.
Clik here to view.
adding the horizontal beams to the windmill

Step 5

Draw the diagonal beams using a couple of slightly thinner 2 px Stroke lines (#2C2D2D), which we will position between the horizontal ones that we’ve just created. Take your time, and once you’re done, select and group all of the body’s composing shapes together using the Control-G keyboard shortcut.

Image may be NSFW.
Clik here to view.
adding the diagonal beams to the windmill

Step 6

Start working on the windmill’s head by creating a 16 x 16 pxcircle with a 1 px thick Stroke (#2C2D2D), which we will center align to the larger body’s tip.

Image may be NSFW.
Clik here to view.
creating the main shape for the head of the windmill

Step 7

Create a 24 x 24 px circle with a 2 px thick Stroke (#2C2D2D), followed by a slightly larger 48 x 48 px one (#2C2D2D), both of which we will center align to the previously created shape.

Image may be NSFW.
Clik here to view.
adding the thicker circles to the head of the windmill

Step 8

Add the vertical and horizontal detail lines using two 2 px thick Strokes (#2C2D2D), which we will center align to the head’s smaller circle.

Image may be NSFW.
Clik here to view.
adding the center beams to the head of the windmill

Step 9

Create the vertical pair of blades using two 8 x 28 px rectangles (#2C2D2D), which we will adjust by individually selecting and pushing their inner-facing anchor points to the inside by 2 px using the Move tool (right click > Transform > Move > Horizontal > +/- 2 px depending on which side you start with). Once you’re done, group (Control-G) and position the resulting shapes on the head’s smaller circle.

Image may be NSFW.
Clik here to view.
creating the vertical windmill blades

Step 10

Add the remaining blades using three copies (Control-C > Control-F) of the ones that we’ve just grouped, which we will adjust using the Rotate tool (right click > Transform > Rotate> 90º for the horizontal ones and 45º for the diagonal ones). Once you’re done, select and group (Control-G) all of the head’s composing shapes, doing the same for the entire windmill afterwards.

Image may be NSFW.
Clik here to view.
adding the remaining windmill blades

8. How to Create the Phone Pole

As soon as you’ve finished building the windmill, we can move a few pixels to the right and start working on the phone pole. 

Step 1

Create the pole’s main body using a 4 x 108 px rectangle, which we will color using #2C2D2D and then position onto the right side of the cellar’s sill as seen in the reference image.

Image may be NSFW.
Clik here to view.
creating the body of the phone poll

Step 2

Using a couple of #2C2D2D colored rectangles, gradually add the remaining sections to the pole, making sure to select and group them all together afterwards using the Control-G keyboard shortcut.

Image may be NSFW.
Clik here to view.
adding details to the phone poll

Step 3

Add the phone line using a 48 x 12 px ellipse with a 2 px thick Stroke (#2C2D2D), which we will adjust by removing its top half by selecting its top anchor point using the Direct Selection Tool (A) and then removing it by pressing Delete. Once you’re done, position the resulting shape onto the pole’s horizontal section, making sure to select and group (Control-G) all of its composing shapes before moving on to the next section.

Image may be NSFW.
Clik here to view.
adding the line to the phone poll

9. How to Create the Flying Saucer

With the phone pole in place, we can finally start working on the scarier section of our composition, where we will get to create the imposing flying saucer.

Step 1

We're going to start by quickly drawing the floating cow that’s being abducted using #2C2D2D as our Fill color, positioning the resulting shape as seen in the reference image.

Image may be NSFW.
Clik here to view.
drawing the floating cow

Step 2

Create the main shape for the saucer’s upper section using an 80 x 40 px ellipse, which we will color using #515454 and then position 42 px from the upper edge of the cellar’s entrance.

Image may be NSFW.
Clik here to view.
creating the upper section of the saucer

Step 3

Add the hard shadow using a 200 x 64 px ellipse (#2C2D2D), which we will position 8 px from the upper edge of the shape that we’ve just created. Mask the larger shape using a copy (Control-C) of the one from underneath (highlighted with red) which we will paste in front (Control-F) and then right click > Make Clipping Mask, making sure to select and group (Control-G) the two together afterwards.

Image may be NSFW.
Clik here to view.
adding the hard shadow to the upper section of the saucer

Step 4

Start working on the saucer’s lower body by creating a 200 x 64 px rectangle, which we will color using #6A6D6D and then position at a distance of 12 px from the top edge of the previous section.

Image may be NSFW.
Clik here to view.
creating the main body of the saucer

Step 5

Add the bottom section using a darker 200 x 56 px ellipse (#2C2D2D), which we will center align to the lower edge of the shape that we’ve just created.

Image may be NSFW.
Clik here to view.
creating the bottom section of the saucer

Step 6

Create the circular insertion using a 12 x 8 px ellipse (#2C2D2D), which we will position as seen in the reference image. Once you have the shape in place, select and group (Control-G) all of the lower body’s composing shapes before moving on to the next step.

Image may be NSFW.
Clik here to view.
adding the circular insertion to the saucer

Step 7

Create the main shape for the tractor beam using an 80 x 12 px ellipse, which we will color using #6A6D6D and then position as seen in the reference image.

Image may be NSFW.
Clik here to view.
creating the base section of the tractor beam

Step 8

Add an 80 x 8 px rectangle (#6A6D6D) to the lower half of the ellipse that we’ve just created, making sure to adjust the new shape by individually selecting and pushing its bottom anchor points to the inside by 8 px using the Move tool (right click > Transform > Move > Horizontal > +/- 8 px depending on which side you start with).

Image may be NSFW.
Clik here to view.
creating the center section of the tractor beam

Step 9

Create the tractor beam’s lower section using a 64 x 12 px ellipse (#515454), on top of which we will add a smaller48 x 6 px one (#2C2D2D), positioning the two on the bottom edge of the shape that we’ve just created. Once you have the ellipses in place, select and group (Control-G) all of the current section’s composing shapes, doing the same for the entire saucer afterwards.

Image may be NSFW.
Clik here to view.
creating the bottom section of the tractor beam

Step 10

Create the actual beam pulling the cow from the ground using a 32 x 296 px rectangle (#B1B5B5), which we will position onto the lower half of the darker ellipse and then adjust by selecting and pushing its bottom-left anchor point to the outside by 36 px (right click > Transform > Move > Horizontal > -36 px).

Image may be NSFW.
Clik here to view.
creating the tractor beam ray

Step 11

Create the upper section of the beam using a 64 x 2 px ellipse (#B1B5B5), which we will adjust by removing its right half, positioning the resulting shape onto the taller shape. Then, select the two and combine them into a single larger shape using Pathfinder’s Make Compound Shape option.

Image may be NSFW.
Clik here to view.
adding the upper section to the tractor beam ray

Step 12

Turn the beam into a gradient using #B1B5B5 for both of its color stops, making sure to set the left one’s Opacity to 0%. Once you’re done, select and group both the flying saucer and the beam using the Control-G keyboard shortcut.

Image may be NSFW.
Clik here to view.
adding a gradient to the tractor beam ray

Step 13

Add the smaller saucers using two 48 x 2 px rectangles (#B1B5B5) with a 1 px right corner Radius, which we will turn into gradients following the same process used for the beam, making sure to leave the Angle set to . Position the resulting shapes as seen in the reference image, making sure to group (Control-G) them together before moving on to the next step.

Image may be NSFW.
Clik here to view.
creating the smaller saucers

10. How to Create the Fence

As you can see, our composition is gradually taking shape, so let’s continue working on it by creating the two fence sections.

Step 1

Create the left section of the fence using a couple of #2C2D2D coloredrectangles, which we will position and adjust as seen in the reference image. Take your time, and once you’re done, select and group (Control-G) all of the shapes together before moving on to the next step.

Image may be NSFW.
Clik here to view.
creating the left fence section

Step 2

Create the right section 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 on the opposite side of the cellar’s entrance.

Image may be NSFW.
Clik here to view.
creating the right fence section

Step 3

Once you’re done working on the fence, we can select and group (Control-G) all of the composition’s shapes framed by the cellar's entrance, masking them afterwards using a copy (Control-C > Control-F) of the underlying shape by right clicking > Make Clipping Mask.

Image may be NSFW.
Clik here to view.
masking the main composition

11. How to Create the Alien

Since at this point our composition is pretty much done, we can add the central piece of our illustration, the little grey man.

Step 1

Create the alien’s main body using a 28 x 12 px rectangle (#2C2D2D), which we will adjust by setting theRadius of its top corners to 8 px, positioning the resulting shape in the center of the entrance’s sill.

Image may be NSFW.
Clik here to view.
creating the torso of the alien

Step 2

Add the neck section using two 8 x 16 px ellipses (highlighted with red), which we will horizontally distribute 4 px from one another, adjusting them by selecting and removing their top and outer anchor points. Unite the resulting paths into a single larger shape by pressing Control-J twice, setting its color to #2C2D2D.

Image may be NSFW.
Clik here to view.
creating the neck of the alien

Step 3

Create the head using a 40 x 40 px circle (#2C2D2D), which we will adjust by selecting and pushing its bottom anchor point to the outside by 8 px using the Move tool (right click > Transform > Move > Vertical > 8 px).

Image may be NSFW.
Clik here to view.
creating the head of the alien

Step 4

Give the resulting shape a subtle highlight, which we will color using #515454.

Image may be NSFW.
Clik here to view.
adding the highlight to the head of the alien

Step 5

Separate the arms from his body using two 2 x 2 px squares (#868989) with a 1 px top corner Radius, which we will position at a distance of 4 px from the torso’s sides. Once you’re done, select and group (Control-G) all of its composing shapes together, before moving on to the next section.

Image may be NSFW.
Clik here to view.
finishing off the alien

Step 6

Add the shadows cast by the little grey man’s head onto the stairs using a 56 x 158 px ellipse (#2C2D2D) with a 64% Opacity as your base shape, gradually adding 8 px to each new copy (Control-C > Control-F) and masking them using a copy of the corresponding stair’s fill shape. Once you’re done, select and group (Control-G) all of the current layer’s composing shapes before moving on to the next one.

Image may be NSFW.
Clik here to view.
casting the shadows onto the stairs

12. How to Create the Textures

As soon as we’ve finished working on our composition, we can start adding some visual effects to it. So, assuming you’ve positioned yourself on the next layer (that would be the third one), let’s do just that by applying some subtle textures.

Step 1

Make the illustration look as if it was shot on film, by adding a couple of 920 x 2 px rectangles (#FFFFFF), which we will vertically stack 2 px from one another. Once you’re done, group (Control-G) and then center align the shapes to the underlying Artboard, making sure to lower their Opacity to 6%.

Image may be NSFW.
Clik here to view.
adding the horizontal texture lines

Step 2

Give the illustration some noise by creating a 920 x 680 px rectangle (#2C2D2D), which we will turn into a texture by going over to Effect > Photoshop Effects > Texture > Grain, where we will set the Intensity to 40, the Contrast to 50, and the Grain Type to Stippled.

Image may be NSFW.
Clik here to view.
adding the grain texture

Step 3

Set the resulting texture’s Opacity to 12%, changing its Blending Mode from Normal to Lighten.

Image may be NSFW.
Clik here to view.
adjusting the grain texture

13. How to Create the HUD

Once we’ve finished adding the textures, all we need to do in order to finish our illustration is create the little camera HUD. That being said, move on up to the fourth and last layer, and let’s wrap things up!

Step 1

Start by creating the framing guides using four 76 x 52 px rectangles with a 4 px thick Stroke (#868989), which we will position at a distance of 28 px from the Artboard’s corners and then adjust by individually selecting and removing their inner-facing anchor point.

Image may be NSFW.
Clik here to view.
creating the hud framing guides

Step 2

Zoom in on the Artboard’s bottom-left corner, and create the battery level indicator using a 30 x 16 px rectangle with a 4 px thick Stroke (#D8D8D8) for its main body. Add the levels using three 4 x 8 px rectangles (#D8D8D8) horizontally spaced 2 pxfrom one another, followed by the nose using a 6 x 8 px rectangle (#D8D8D8). Once you’re done, select and group (Control-G) all its composing shapes together, positioning them as seen in the reference image.

Image may be NSFW.
Clik here to view.
creating the battery

Step 3

Add the recording state using a 16 x 16 px circle (#F26A46), which we will position at a distance of 12 px from the top-right framing guide. Add the “REC” text (#F26A46) in front of it using a font of your choice.

Image may be NSFW.
Clik here to view.
adding the recording state

Step 4

Finish off the HUD, and with it the project itself, by adding the elapsed time indicator to the bottom framing guide, making sure to select and group (Control-G) all of its composing shapes together before hitting that save button.

Image may be NSFW.
Clik here to view.
finishing off the illustration

Great Job!

There you have it, fellow conspiracy theory lovers, an in-depth step-by-step tutorial on how to create an alien abduction illustration.

I hope you’ve managed to keep up with each and every step, and most importantly learned something new and useful along the way.

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

Image may be NSFW.
Clik here to view.
finished project preview
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.

Viewing all articles
Browse latest Browse all 8961

Trending Articles