McInnes K. Rockstar Icon Designer

Подождите немного. Документ загружается.

Perspective121

and right sides of the shadow to be a single pixel so that the inner

part of the shadow stands out more.

Conclusion

If you turn on the layer guides once more, you can see how easy

it is to mark out a planometric shape using the pixel grid as a

guideline.

Here’s the nished object. You will notice how even the tone can be

made by using the HSB color sliders and how pure white and black

with blending modes will change the colors to add highlights and

shade with a consistent value.

Turn the guide layers on to see how easy it is to mark out a planometric

shape with a pixel line.

The ﬁnished image.

Perspective122

Isometric Projection

In modern icon design isometric projection is a popular style. You

will see it used for a variety of icons with the most popular being

the 8-bit inspired mini environments and sprites made popular by

early video games and more recently artists such as Eboy.

Isometric projection is also a great way to plan and draw a three

dimensional object. The isometric angle lends itself well to “Desk

View” application icons as there is no vanishing point to distort the

image, but the angle clearly displays three surfaces of the object.

You can build an isometric object by rst drawing a cube the size

of the object you want to create, then breaking that square gown

into smaller cubes and rectangles for the different parts of the

object. Using the lines as a guide you can then condently add the

details of the object knowing that it’s using the correct perspective.

Isometric projection has an advantage over one-point perspective

because it has equal foreshortening of each of the three axis,

which results in a three dimensional image without distorting the

image depending on where it is in relation to the vanishing point.

35˚35˚

The angle used in isometric projection.

Perspective123

Because true isometric projection uses a 30 degree line angle,

which for clear pixel rendering is altered to be a ddly 26.565

degrees so that the lines will render clearly along pixel boundaries.

If you want to draw a 26.565 degree line pixel by pixel you will need

to draw 2 pixel “bricks” joined corner to corner.

An example of a truck icon and the technique used to plan the image with

isometric cubes.

Perspective124

Tips to Draw an Isometric Projection in Adobe

Illustrator

I spend a lot of time moving between graphics programs and

while some illustrators will choose a single application and stick

to it (which is great), I like to get the most out of the tools available

to both vector and raster. I nd that the ability to set custom

guidelines in Adobe Illustrator is a big plus when it comes to

drawing isometric icons. It doesn’t take much time or effort to set

them in place, and if you save a copy for future working les, you

will only have to do it once.

This quick exercise will start you thinking about perspective in icon

design and how lighting is applied to a three dimensional object.

This tutorial is a good introduction to Guides, Pathnder options

and Object Styles in Adobe Illustrator.

You Will Need:

• A suitable drawing application. This tutorial uses Adobe

Illustrator, but any vector based graphics program is ne to

use.

30º angle 26.56º angle

A true 30 degree line will create a blurry pixel line, where a 26.56 degree

line will create a clean two pixel "brick".

Perspective125

Setting Guides

Adobe Illustrator lets you set any line that you draw as a guide

line. This is especially useful when you need to draw perspective.

Remember that we’re drawing what I like to call, “Icon Style

Isometric Projection” at 26.56 degrees, rather than the traditional

30 degree isometric projection. Select the Line Segment tool

(backslash) and Alt + Click onto the artboard, this will open a

dialogue box where you can input the line settings. Set a length

that’s larger than the width of the artboard, in this case it’s 48px

wide, so I’ve chosen a 100px line. Then, in the angle, set the line to

be 26.56 (icon style isometric) and click OK to create the line.

Set the line segment tool to create a line longer than the artboard at an

angle of 26.56 degrees.

Perspective126

Position the line at the top left corner of the artboard and copy it

(command + C then command + V) position the copy of the line on

the bottom right corner of the artboard.

Select the Blend tool (W) and click on the rst line, then click on

the second line. This will make a blend between the two. With the

two lines selected, double click the Blend tool icon and set the

spacing to specied distance, 1px. Click OK, then go to Object >

Blend > Expand to convert the blend to lines.

With the lines selected Option + Click on the artboard with the

Reect tool (O), set the axis to vertical with an angle of 90 degrees,

click Copy.

Set the blend options for the lines.

Perspective127

With both sets of custom lines selected, go to View > Guides >

Make Guides. Once the lines are converted to guides, they will only

show up on the layer that you have made them on.

A quick way to toggle the view of the guides is to lock the layer that

they’re on and create a new layer above the guides as the art layer.

From there you can show and hide the guides by turning the guides

layer to visible and invisible.

Building and Coloring Isometric Vector Shapes

Start by drawing in the rst side of the cube. Select the shape and

Reect it (Option + Click the area on the artboard where the two

shapes will join, Set the angle to Vertical then click Copy.)

Create the guides.

Perspective128

To make the top with the same angles on each side, draw a triangle

in the space between the two sides of the cube and reect it

horizontally to make the top. Select the two sides of the shape

and merge them together with the Unite option from the Pathnder

panel.

Draw the sides and top of the cube using the custom guides to position

the lines.

You should have a cube consisting of three sides.

Perspective129

Select the Cube and hold down the Option key to drag a duplicate

of the cube to the right, and repeat the same step to make a

duplicate at the front. Color the three cubes with a bright tone over

the entire shape. I’ve used bright tones or red, blue and yellow. Use

the HSB color sliders to make pure hues without any dark tones.

Add shades to the cubes by changing the HSB values of the

main tone. Make the shadow tone on the right side of the cube by

setting B to 80% and the highlight tone on the top of the cube by

changing the saturation to 80%.

Color each cube a bright tone.

Perspective130

Creating Clear and Precise Shadows and

Reflections with an Opacity Mask

Since CS4, Adobe Illustrator has had the ability to make

transparent gradients. Transparent gradients are great for object

shading and simple drop shadows, but they can sometimes look a

bit muddy in the transition from 100% opaque to 0%. This can be a

problem with icon design, using an Opacity Mask is an alternative

method to create the effect without losing clarity and color.

To create an Opacity Mask for the cubes, copy and paste a

duplicate of the cubes, positioning them at the base of the main

cubes. This will be the basis of the drop reection.

Add shades to the sides of the cubes by changing the HSB values of the

main tone