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)

Step 3:

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.

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 😀

About the Author

I am a game design freelancer. I make games, from 2D to 3D, from PC to mobile. I work in both graphic designing as well as programming. Game designing is everything to me. I live in Singapore at the moment. Feel free to contact me at: brianlin1992@yahoo.com