McInnes K. Rockstar Icon Designer

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

View Points191

• Cloth: Mostly just shade and light, the bers absorb most of

the light.

• Wood: Varnished wood will have a high gloss nish, non-

varnished wood and bark will absorb most light.

View Points192

Creating a Glossy Desk View Icon in Illustrator

As the associate editor of Vectortuts+, I may be a bit bias towards

using Adobe Illustrator, and although Photoshop and other raster

based software can create amazing

icons, I nd vector has the exibility of

scale and convenience of advanced

drawing tools which make it an

attractive choice for icon design. If you

want to use the drawing tools of Adobe

Illustrator and the rendering capability

of Photoshop, you can create the shape

of your icon in Illustrator and paste it

into Photoshop as a Smart Object or a

Shape Layer.

For this icon I will begin by making

some custom guides following the

instructions in the previous exercises.

I’ve marked out the approximate angle

I would like the document to be, the

pencil part of the icon will be aligned by

sight.

Custom Guides

The icon I’m creating is an application

icon with a pencil and a stack of paper.

As with all of the icons I’ve made so far,

I’m going to be using a custom grid.

Because the desk view icon is large

enough to render any angle clearly and

is in a style that doesn’t have a strict

perspective I will set some guides to

dene the angle of the rst sheet of

Working with Smart

Objects in Photoshop

Smart objects are special

layers in Photoshop that

are linked to an image

outside of the main

working ﬁle. If you paste

a vector illustration from

Adobe Illustrator into

Photoshop you have the

option to import the image

as a Vector Smart Object.

Because the imported

image is linked to an

external resource, any

effects or transformations

that are applied to the

Smart Object won’t

permanently alter the state

of the layer. To edit the

contents of a Smart layer,

double click the image

thumbnail, this will open

a version of the smart

object that is linked to

the Photoshop ﬁle. When

you have made the edits

you will need to save the

linked ﬁle with exactly the

same name in the exact

location so the changes

can be translated to the

Photoshop ﬁle. Smart

objects are also great for

creating variations of icons

with different color sets or

effects.

View Points193

paper and I’ll judge the placement of the other elements from this

main point.

As with the previous icons, I’ve set the guidelines by making a

blend of lines and expanding the blend so I can transform it into

custom guidelines. If you haven’t read about custom guides in

Adobe Illustrator, you can do so in the "Tips to Create a Flat View

Pictogram Set with Adobe Illustrator CS4 and Above" section of

this book.

Building Graphic Styles

As I mentioned earlier, I really like the exibility of Illustrator for

icon design and the addition of Graphic Styles in CS4 has to be

one of my favorite tools. Graphic Styles work like layer styles in

Adobe Photoshop and will style an object with various effects and

transformations that can be toggled on or off and edited freely.

Once an object has an appearance applied to it, it can then be

saved as a Graphic Style and used for other objects. With regular

Use blended lines to create a custom grid.

View Points194

use you can easily build a library of styles and save valuable time

in your design processes.

For the Application icon, I’m going to style the document to

have rounded corners and an offset path in a darker color with a

highlight line around it. The best thing about this style is how I can

apply it to both pages of the document and style it slightly different

for color changes and tweak the design as I go. You will see the

color of the icon change a few times during the design process,

the Appearance panel gives me the exibility to make minor tweaks

without wasting time nding and isolating sections of the design.

The appearance panel is fantastic for applying complicated styles and

ﬁnishes to a basic shape. Use the appearance panel to create an inner

offset path and rounded corners for the page.

View Points195

Stacking and Arranging Elements

The trick to creating an easy to understand and eye-caching icon is

the use of color and the visual balance of the design. An icon with

too many elements will look over crowded and may confuse the

meaning of the icon. With this design I have placed a plain colored

document behind the grid style document to provide visual balance

and ll the available space without completely overcrowding the

image by scaling the grid sheet to ll the space on its own.

Adding Grids the Easy Way

Another overlooked tool is the Rectangular Grid tool. As the name suggests,

this is a tool to draw grids. Each line in the grid can be selected and edited, so

thicker lines can be added to create the ﬁnish of Graph Paper. Double Click the

Rectangular Grid tool to edit the segments and settings before you draw it onto

your artboard.

View Points196

I’ve also taken the time to save the two Appearance styles to the

Graphic Styles panel. I’ve grouped the rst document and the grid

to create a new object to apply a drop shadow style to. New styles

can be applied to groups without changing the styles applied to

the individual objects.

Blocking and Alignment

When it was time to create the pencil, I blocked out the

approximate location and scale I wanted it to be in and made

a duplicate of the shape to build the pencil from. Sometimes

when a rotated image is rotated back to a straight sided shape,

some of the lines can be slightly wonky. To x this, you can either

draw another shape, or (and this is a trick most people don’t

know about) you can select corresponding points with the Direct

Selection tool and straighten them by using the Alignment panel to

align one point against the other.

Group the ﬁrst document and the grid to create a new object to apply a

drop shadow using the appearance panel.

View Points197

Joining and Cutting Shapes

To make the wavy line around the base of the pencil, I used the

wave effect on a line and took the Scissors tool to cut it to size.

Block out the shape of the pencil.

Use the Zig Zag tool to make the wavy edge of the pencil.

View Points198

I then cut the bottom out of the rectangle of the pencil body and

fused the wavy line into place by joining the points. To join a

point, select a point and the one you want to join it to and press

Command + J. Using this technique will help you build clean and

precise shapes that have cleaner lines that drawing them with the

Pen tool.

Adding Gradients to Create Volume

As you learned earlier, each material has its own reection style.

To create believable metallic effects you have to let loose and

not be afraid to alternate bright and dark colors within a gradient.

To create the metallic effect for the pencil end I used light tones

of grey and blue for the start, added a slightly darker tone in the

middle, and another light tone at the end. The variation of tones

gives the illusion of reection and curvature on the shape. Change

the colors to create gold, platinum and copper toned metallic

nishes.

Join the wavy line to the main body of the pencil.

View Points199

The pencil's eraser has two layers: one is an Opacity Mask with a

radial highlight and the other is a solid colored shape with a grain

effect added in the Appearance panel. The grain adds depth and

realism to the object while the gradient forms the round shape. The

ridges on the metal ring around the eraser are made with a simple

blend.

Apply a metallic gradient to the top part of the pencil.

Use blend and grain to add detail to the pencil.

View Points200

For the surface of the pencil I created a mask with the main shape

of the pencil and added three segments of gradient inside to create

the at surfaces. I added highlights along the ridges to accentuate

the effect. Rather than using an opaque to transparent gradient,

the main highlights are made from thin rectangles that have an

opacity mask applied to it to create the subtle blend into the yellow

of the pencil.

Twe a king Col o rs a n d A d ding the Fina l Touc h es

Brushes can be used to create some nice looking effects, I’ve

used a chalk nish brush from the default Illustrator set to create

a sketch on the blueprint document. Because it’s vector I can try

a few different brushes to nd the effect I’m looking for and tweak

the line weight to balance the sketch with the document area. You

can also make your own custom brushes by dragging shapes and

textures into the Brushes panel.

Make highlights with a transparency mask to add form to the pencil.