CREATING WEB ICONS WITH ADOBE ILLUSTRATOR FOR YEAR 8s

LESSON OBJECTIVES
By the end of this lesson, you should be able to:
-Calibrate a New Document for a piece of work destined for publication on the web
-Place and transform a variety of Illustrators selection of geometric shapes
-Place and transform a simple gradient using Illustrators Gradient tool.
-Implement an Opacity Mask using Illustrators Transparency tool.

STEP ONE
Once weve spent a little bit of time together bemoaning Illustrators peskily lengthy boot up processes,
the first thing well do is create a New Document in the File menu.
STEP TWO
Now to configure our new document to our needs! Firstly, lets name our new piece Reflective Icon.
Secondly, youll notice that the Document Profile is set to Print by default, but as we are creating an
icon for display on a webpage and not intending to print it out, well need to open the Profile dropbox
and select Basic RGB, which sits down the very bottom of the menu. We will only require a single
artboard for now, so the rest of the settings can remain unchanged.
STEP THREE
After we have set up our new document we should be presented with our artboard. Lets get a better view
of our artboard by zooming in using the magnification keyboard shortcut (ctrl / +). Another useful way to
adjust your magnification in the future is using the magnification drop menu in the bottommost toolbar,
positioned on the far left, and selecting Fit to Screen.

STEP FOUR
Now weve nearly finished the dull stuff, we can finally start thinking about placing things on our artboard.
Well start by placing down a black square using the Rectangle Tool, but before we can even begin to do
that, theres some preparation to be done.
Lets begin by pressing F6 to bring up our Color window. Alternatively, the Color window can be
activated by clicking the paint palette shaped icon in the top right hand corner of Illustrator. In the top left
hand corner of our Color window well find our Fill and Stroke icons. Click on the solid Fill icon, and
make your fill black by selecting the black panel in the row of three boxes which sits just above the rainbow
coloured bar which contains the range of RGB colours. Once your fill is black, click on your Stroke icon,
and proceeding back to the three boxes we used previously, select the No Stroke box, which is a white
box struck through with a red line.
STEP FIVE
Now weve calibrated our box, lets place it down. Select the Rectangle Tool from the toolbar on the left
hand side of the screen, which is coincidentally and sensibly shaped like a rectangle. An easy shortcut for
selecting this toolset in the future is to simply press m. Before we proceed from here lets make sure your
Smart Guides, or your little pieces of green feedback text, are active by opening up the View menu and
checking if there is a tick beside the Smart Guides option. If there is not, give the Smart Guides option a
click. A simple shortcut to activate your Smart Guides in future is (ctrl + u)
Place your cursor on the bottom left hand corner on your artboard. You can tell youve been precise if your
Smart Guide reads intersect in green type. Click, hold and drag your new rectangle across your whole
artboard until the entire space is black. Use (ctrl + left click) to quickly deselect your brand new box, so we
can proceed.
STEP SIX
Remember the Rectangle Tool icon on the right hand toolbar we spoke about earlier? If you hold down
your left click over this icon, youll notice a flyout menu appears containing a range of fun geometric
shapes. For the purposes of this tutorial today, and the fact that were all stars, lets select the star.
We want to make our star as distinct from our black background as possible for the best effect, so lets
revisit our Color window and change our fill to white.
STEP SEVEN
Now lets place our star. Youll notice that the Smart Guides notify you when youre hovering your mouse
over the very middle point of the box weve created, so lets spend a little time finding that point. Once
youve located your centre, well want to place a straight, neat star whose middle axis is parallel with the
sides of our artboard by holding down our Shift key while we click and drag.
Lets make our star about a third of the total length of our artboard.

STEP EIGHT
Youll notice in Illustrator as soon as you place a shape, as with our black rectangle, it will remain selected
until you deselect it via a simple (ctrl + left click). Our star therefore should still be selected immediately
after we place it down, making the next step in the process easy.
Try holding down your Control key. Youll notice that the crosshair cursor which we used to place our star
changes into a black arrow and a blue box appears around our star for as long as we have the key held
down. Lets go ahead and make an exact copy of our star by holding down (ctrl + alt) and dragging our
star downward. A star of the exact same dimensions as the first should appear.
Youll see now that we have our fresh new star selected. Hold down your Control key again and lets hold
down our left click on the anchor point at the apex, or topmost point of our star and invert it to make a
mirror image of the first, making sure our two stars connect at the base. To create the most realistic and
striking reflection we can, make the bottommost star roughly a third to half the size of our top star.
STEP NINE
Now heres where things get a little trickier!
Press m to reselect our Rectangle Tool. We want to create a rectangle which covers our transformed
bottom star totally. Your Smart Guides will assist you greatly in achieving a perfect coverage. The end
result should result in your star looking like its sitting atop a fancy plinth, or base.
From here we want to hold down Control once again and select our new rectangle, or our plinth, as well
as the star which it covers. Youll find that when you do this the black background will be selected too,
which we dont want. An easy shortcut to remember which you can use to deselect any particular object
or objects is to use (shift + left click) while using the Direct Selection tool, clicking on the object you
would like to deselect. Lets deselect our background.
STEP TEN
Now that we have our rectangle and our bottom star selected, lets proceed over to our toolbar on the
right hand side of the screen and open our Gradient window. The Gradient icon is a rectangle
containing a black and white gradient, or a rectangle which fades from black to white. A useful shortcut to
open this window in the future is (ctrl + F9).
In the top left hand corner of this window you will see a box containing a black and white gradient which
runs from left to right. Upon selecting this box you will notice we now have a shiny new gradient fill
within our rectangle, darkening from white on the left, to black on the right. To make our reflection look
genuine, we will need to change the direction this gradient flows so that it is white at the base of our top
star, fading to black gradually at the top point of our bottom star.
Achieving this is as simple as adjusting the angle of the gradient in the Angle drop menu which is
situated immediately below the Stroke options in our window, and changing the angle to -90 degrees.
Our gradient should now be running from top to bottom.

STEP ELEVEN
Now for the exciting last step in our miniature project, lets bring up our Transparency window and make
an Opacity Mask!
There are a few convenient ways to bring up this window. We could use the shortcut (shift + ctrl + F10), left
click the Transparency tab at the top of our Gradient window or select the icon in our right hand toolbar
which resembles two circles overlapping, or a skewed venn diagram.
If you have accidentally deselected your gradient filled rectangle and the star beneath it take the time now
to select them again, making sure to deselect your background.
In the top right hand corner of our Transparency window is the Make Mask button. If everything has
gone to plan, left clicking this button will confine our gradient to our bottom star to create the illusion that
our top star has a subtle reflection.
STEP TWELVE
Congratulate yourself and your colleagues on completing the task!
If youve finished early, why not try your hand at making a reflecting icon using another geometric shape
as a base?