Adobe Illustrator is a great tool for game graphic design. Today, we will learn how to make spaceships by Adobe Illustrator and use them in a HTML5 Construct 2 Game Engine.

OK. Let’s go!

Tutorial Information

• Difficulty: Beginner
• Platform used: Adobe Illustrator
  
• Estimated completion time: 2 hour
  

Adobe Illustrator Installation

In this tutorial, I will use Adobe Illustrator CS6, but any other version of Adobe Illustrator should be able to make the same result.

If you haven’t install Adobe Illustrator, you can download trial version it here:

Download Adobe Illustrator CS6

For Direct Link, you can use:

Adobe Illustrator CS6 English Mac
http://trials2.adobe.com/AdobeProducts/ILST/16/osx10/Illustrator_16_LS16.dmg
Adobe Illustrator CS6 English Windows
http://trials2.adobe.com/AdobeProducts/ILST/16/win32/Illustrator_16_LS16.7z

Adobe Illustrator VS Adobe Photoshop

You should have heard Adobe Photoshop and consider it a excellent tool to make game graphic, and to tell the truth, I think the same as you. Then why we use Illustrator instead of Photoshop? Great question, I do use Photoshop quite frequently, or even all the time, before I started using Illustrator. But when my life is intersected with Adobe Illustrator, I found there are some great features included in Illustrator but not in Photoshop, and vice versus. Let’s see what I found at the angle of a game graphic designer:

• We work with vector in Illustrator but Pixel in Photoshop.
• Blending Options control are easier in Photoshop compared to Illustrator.

Ok, just 2 points. But Really, these two are big enough to tell me that I have to use both. Let’s dig in these 2 differences.

• What is vector and what is pixel? Vector are the type of objects that built by mathematical calculation. Pixel? Just a collection of a lot of color points. But I don’t like math, can I use vector? Very funny question. All of the calculation in Illustrator is handle by computer itself, we will not touch a single number in Illustrator. Let’s me give you an example, if you draw a circle in Photoshop, and you resize it to be hundred time bigger, you will get a blur and maybe incomplete circle. That is because, from the beginning your circle is just made from a lot of dot (we call it pixel), as the enlargement taking part, Photoshop doesn’t know how to fill in those missing pixels. However, in Illustrator, a circle is saved as a lot of attributes, such as diameter, center position, etc. So when we transform it to a bigger circle, Illustrator will re-calculate a new path of the bigger one. Therefore, the circle still a perfect circle. So when I use Illustrator, I don’t need to concern the size of the final product that can fit in to my game, since I can resize it later without any quality reduction.
• For Blending Options, such as drop shadow, feather effect, glowing, blend mode, Illustrator are not very keen of. We still can do it in Illustrator, but it will take a lot more step and the result is not as nice as in Photoshop also.

But of course, there are thousand other differences. But we will discuss them in another article. Anyway, let’s make the spaceship.

Step 1:

Let’s prepare our working interface.

Run Adobe Illustrator.

Go to File/ New…

Name our file: Spaceship

Go to Window/ Pathfinder

There should be a new panel appear if there is no Pathfinder in Illustrator toolbar.

We drag it into the right side toolbar.

Step 2:

Import the draft drawing in to stage, and make a outline.

You are welcome to use your own drawing. I will use mine. ^^

(You can download this image by Right-click the image/Save Image As)

Go to File/ Place…

Browse to your file, click Place.

Resize it for the image to fit the working area by drag the corner of the image.

Lock the image from further transformation by click the Layers Icon in the Right toolbar. (1)

Click in empty cell next to the eye cell until the lock icon appear.(2)

Create new layer by click Create New Layer icon in the Layers panel.(3)

Now we should have a new layer called Layer 2 on the top of Layer 1.

Now we use Pen tool to outline half of the space ship, either side is OK.

Notes:

• The beginning point and the ending point should be exactly in the same line (vertical line in our case)

The Pen Tool is not easy to use at first, but it is a very power and important tool we have to use every time. So slowly get use to it. If you make a mistake, press Ctrl + Z to undo and Ctrl + Shift + Z to redo.

The result should be as below:

Now click the Selection Tool and select our half of the space ship.

Right-click at it, pick Transform/Reflect…

Pick Vertical in Axis Panel/ Press Copy

Move the new half airship outline to it correct position (exactly intersect point to point) as below.

Shift select both side of the airship, click Pathfinder icon in the right Toolbar. (1)

Click Unite Icon in the Pathfinder Panel. (2)

In case these two objects not united. Undo (Ctrl + Z), zoom in (Ctrl + Alt + Z + middle mouse scroll), select Direct Selection Tool , drag intersection points on to each other. Change back to Selection Tool, select both sides and unite them again.

Step 3:

Create other components of the spaceship.

Click the path created in step 2, click Fill in the left toolbar(1).

Click None color (2).

In this case, we can see the draft drawing and continue to create other components.

Another way you can do to see the draft drawing is unable visibility of the outline path, by click the eyes icon of that path in the Layers panel.

Now we can use the Pen Tool and create the other parts of the space ship using the previous steps.

From the above image, we can use the unite feature for the engine made by a circle and the created path.

There is another good feature, the third function in the Pathfinder, Intersection. You can cut out the intersection between 2 paths.

But we have to copy the base (the path that you want to remain later) into two, because after perform the intersection function, 2 paths will be removed and leave back the intersection area. Do it by select the base, press Ctrl + C, then Ctrl + F. Ctrl + F means paste at the same position of the original’s. (Ctrl + V means paste in the center of window). See example as below:

After we finish half of the spaceship as:

Now we group the components into 3 parts by select the those we want to group (with Selection Tool) then press Ctrl + G. Let’s see 3 parts of the ship:

In the Layers panel, it should be as follow:

Now it should be easier to color each components.

Step 4:

Color! Color! Color!

We double-click to the group we want to color and select the path we want to color. Fill free to pick the color you like.

Use The top group navigation bar to navigate between groups.

There are many ways to color the path:

So this is my color result.

Notes:

• For arrange the paths order (which on the top of which), we can just drag and rearrange them in the Layers panel.
• Or there is another shortcut. :Ctrl + [ for move Down, Ctrl + ] for move Up between path order.

After add some detail, and reflect the components, we have something like this.

Step 5:

Special Move!!!!

Now I will show you guys my special technique.

Here is one example.

Let’s create a circle and color it.

Color Stroke color to None.

Use Pen Tool to create a smaller circle (don’t create a perfect one).

Duplicate the base circle (Select by Selection Tool/ Ctrl + C/ Ctrl + F).

Use the forth function in the Pathfinder, Exclude. You can cut a hole in the base with the upper circle.

Color Fill to black, Color Stroke to None.

Change Blend Mode to Multiply, and Opacity to 50%.

Let make shade for the ball.

Then use Intersection Tool (Pathfinder Panel) to cut it out.

Change Blend Mode to Multiply, and Opacity to 50%.

Use Pen Tool to create the light refection effect (with White Fill).

Let’s make it a bit further.

Color the base path with gradient to emphasize the light effect on the ball.

That’s everything for this special move ~ easy right? 😀

Let’s apply this for all the area of the space ship.

In the end, we should get something like this:

Examples:

I have also done illustrate the other spaceship included in the drawing.

Have a look 😀

You can download the source file here:

Export:

We can easily copy components from Illustrator to Photoshop.

• Copy selected components by Ctrl + C.
• Run Adobe Photoshop.
• Create a new file by go to File/New.
• Photoshop should automatically remember the size of your copy components so just click OK.
• Paste selected components by Ctrl + V.
• Press Enter to place Objects.

Now we can save it as png file or do any further color correction.

Now we can use it in game!

I have also made a Construct 2 game tutorial for using this graphic. Very easy! Have a look! ^^

Ending:

I am sure you now can create any graphic assets for your game ^^ If there is so much work, I am always open for commission. Contact me anytime.

If there is any question, please feel free express it in the comment area, I will assist you to the end.

Thanks all 😀