Dice Poster
jma501
rev 10/08/2014
Objectives: To show how to use:







Gradients
Blends
Point text
Symbols
Symbol Spraying
3D Extruding
Pathfinder Unite operation
 Start Illustrator
Dice Poster
Page 1
 specify : new print document, portrait orientation, units inches,
profile switches to (Custom)
 Name it dice
 Save as dice.ai in InClass/Illustrator
 Reset Essential workspace
Assume making poster for a casino and you want to have dice with
different faces showing. We will be using Blend tool to create the
illusion of the dice rolling.
 Select the rectangle tool and draw a rectangle that will eventually
become a die
 Specify 1.7” x 1.4”: Best way is to just click on the artboard:
 Click OK
 Select the Fill tool
 Open swatches panel:
 Use this CMYK red fill color:
Dice Poster
Page 2
 No stroke: strokes and 3D don’t seem to mix
 Use the Selection tool (black arrow) to position the rectangle near
the upper left corner of the artboard.
Now, we have to add the pips (the white dots)…Click away with
Selection tool, i.e. to select nothing
 Select the ellipse tool
We will create a small ellipse that we will use to represent the pips on a
dice surface: Make it a shade of gray…if we use white, it won’t show up.
Make the pip small because we eventually will need to add up to six
pips to one side of the dice.
 Size: .278” x .278”, light gray Fill color CMYK seen below, CMY all
zeroes , K=10%, no stroke
Dice Poster
Page 3
Result:
 We need sets of six, five, four, three, two and one pip. Take
advantage of copy/paste as you create the six sets. Zoom in
 Do it now.
 Use Smart Guides to help position:
Dice Poster
Page 4
Creating Compound Groups
 We will group each set but won’t use Ctrl-G. Instead, make use of
the Pathfinder >Unite tool and make each set of pips into a new
compound object. Here is how to do that:
o Open Pathfinder panel and select each set (#2-6), one at a
time.
o Find the Unite tool, shown below and Alt-click it to create
compound objects.
.
Convert your groups into symbols
We will apply them to die surfaces
 Open the Symbols Panel
 We will save our pips in the panel: we can then add them to the
artboard many times but without extra storage required
 Drag, one by one, each compound group (all 6 of them)onto the
Symbols panel…to see panel: Window>Symbols:
Dice Poster
Page 5
 For example, drag the single pip to the Symbol panel. When
prompted for a name, type “1”
 Now, do the same for the remaining groups, naming the symbols
2,3,4,…,6
 If you make a mistake:
 Make any corrections…or delete the symbol. If you delete, also
select Delete Instances
Dice Poster
Page 6
 Move the pips to the canvas area
Extruding the Rectangle
Makes the 2D rectangle into a 3D cube.
If there is a stroke on your rectangle, delete it
 Select the red rectangle
 Select Effect>3D>Extrude and Bevel
 My values are shown next: (Don’t press OK yet)
 Values were:
Dice Poster
Page 7
 Values were:-44, -24, 11,11, 108, tall-round, also check
Preview
 Click Map Art . We will map (place) one of the symbols (1-6) on
each cube’s surface.
We could actually map any symbol to a surface: A tree, person, martini
glass, …We will map the 6 pips, one group/symbol per cube face.
 Map the “1” symbol to side 1:
 Here is the “1” side of the cube:
Dice Poster
Page 8
 Select Surface 2
 Map Symbol “2” to surface #2
NOTE: If you need to re-edit a surface, re-select the 3D Extrude &
Bevel in the Appearance Tool:
Dice Poster
Page 9
As you cycle through the surfaces you might see a figure like the one
below. It indicates edges, and you can’t map art to an edge, only to a
surface; skip over them.
 Continue until all six surfaces are mapped
 Click OK
 Click OK again
Here is my completed die
Dice Poster
Page 10
Copy and Paste the Die
 Select the die, copy it (Ctrl-C) and paste.
 Drag the pasted version to near the lower right corner, as shown
next
We want to make the poster look as though the dice are being thrown.
The problem is our ending die has same surface showing (“6”) as the
starting side: Highly unlikely. Solution: Rotate the bottom Die
 Select the die in the lower right corner
Dice Poster
Page 11
 Choose Window>Appearance .(use to edit something you’ve
done)
 Look for 3D Extrude & Bevel,
 In the Appearance panel, Click 3D Extrude & Bevel, click Preview,
and when the panel opens, rotate the cube that represents the
die you just added
Dice Poster
Page 12
Blending is next
 Select both images. (Click on upper left corner die, shift-click
second one)
 Choose Object>Blend>Blend Options.
 Use these Blend settings:
Smooth Color lets Illustrator decide how many steps to take.
Orientation:
Dice Poster
Page 13
 Choose Object>Blend>Make to show :
Unlikely that dice would be in a straight line, once thrown. Let’s make
the path be not a straight line.
Dice Poster
Page 14
 Choose the Add Anchor Point tool and add some anchor points in
between the dice
 Use Direct Select and drag the new anchors:
File>Save as DiceLayer.ai
Adding the Additional Poster Content
 Open the Layers panel (Window>Layers)…we have one layer,
named Layer 1
Dice Poster
Page 15
 Name it dice
 Lock the layer
 Add a new layer and name it Background
Dice Poster
Page 16
 Your Layers panel should now look like this:
 Drag the Background layer below the Dice layer (i.e Dice on top)
 Select the Background layer
 Set both the fill and stroke to none…the Background layer
becomes invisible, but it’s still there
 We’re going to draw a rectangle on the Background layer that
effectively covers just the dice part of the poster.
 Because there is no color for the stroke and fill, nothing will
show. However, the rectangle will be there.
Dice Poster
Page 17
 Draw a rectangle that covers only the dice (see below
 Try to make the borders the same size.
 This is actually an invisible rectangle on top of the dice. Rectangles
are usually filled with color, but they can also be filled with a
gradient; which is what we’ll do next
 Hide the dice layer
Dice Poster
Page 18
We’re going to add a gradient fill to the Background rectangle
 Open the Gradient Panel: Window> Gradient
NOTE: Yours may look different
 Note there are two types: Linear and Radial…choose linear
 At that point, Illustrator may apply the black and white
gradient…don’t worry.
 There are also many predefined gradients: To see, click the down
arrow to the left of Type:
Dice Poster
Page 19
 Click the default gradient box next to Type:




Alt-Click the start stop
Select a color…select our red from Swatches…
Alt click the end stop
Select a dark blue color from Swatches
Example
Dice Poster
Page 20
 Slide the diamond to change the transition point. Move it to the
right
 It should fill the rectangle
 The rectangle should have a gradient fill, no stroke
 If necessary, select the Background’s fill tool, then choose the
Gradient>
 As you can see from below, the gradient is applied to the
rectangle
Dice Poster
Page 21
Let’s change the direction of the gradient.
 Click the Gradient > at the bottom of the Tools Panel
 Open the main Gradient tool,
 You can drag the line to any orientation…You may have to select
this:
Dice Poster
Page 22
Dice Poster
Page 23
 Drag from the upper left corner, to the lower right.
 Be sure the Dice layer is above the Background layer
 Make Dice layer be visible.
Here is the revised artboard
Dice Poster
Page 24
 Select the Background layer. We’ll put everything else on the
Background Layer
Add some point type.
 Window>Type>Character




Choose Impact, 100 points
In the upper right corner type “Happy”, click Enter, Type “Hour”
Click the Selection tool and click away.
Click the text
Dice Poster
Page 25
Try changing the font to Broadway, 72 pt. Decide which you like
better.
Dice Poster
Page 26
Change the Fill color to almost white. Double-click and choose a shade
of gray as the color:
 Or, choose the light gray swatch as the Fill color.
Dice Poster
Page 27
Kerning, tracking and leading
Use the Character panel to add some space between the H and the A
in “Happy”…called kerning
Window>Type>Character or select Character in the Control area
 Click in between the H and the A
 Try Kerning +100…moves letters apart
Use Selection to select the entire word “hour” Use tracking to bring
letters closer together (or farther apart). I used -10
Dice Poster
Page 28
 Finally, use leading to spread the two lines out vertically: Select
both lines and
 Try 85
Extrude the text
 Select the Happy Hour text using white arrow…just click the first
“H”
 Choose Type>Create outlines
Result:
Dice Poster
Page 29




Ungroup the letters: Object>Ungroup
Select the letter “H” in happy using white arrrow
Select Effect>3D Bevel and Emboss
Change the depth to 25 pt and rotate the letter:
 Choose a light color for the “H”. I chose a yellow
 Extrude the other “H”
My result:
Dice Poster
Page 30
Now, let’s add some symbols
 Select Symbols panel
 Open the panel menu and choose Open Symbol Library>
Celebration as below
Dice Poster
Page 31
:
 Drag and drop some symbols onto the Background Layer
 Use symbol sprayer to spray some confetti
 Notice that the text and the symbols are being added to the
Background layer,
 Expand the layer :
 Experiment with the stacking order to place objects behind
others.
Dice Poster
Page 32
 Use the Control area and add a 10 point dark blue stroke color
around the rectangle (You might want to temporarily hide the
Dice layer before you apply the rectangle)
Saving for the Web
Dice Poster
Page 33
 Save as Poster Final.ai
Assume you want the poster to be on the Web. To do so:
 The actual poster itself is smaller than that size
 Crop using the artboard tool
The result:
Dice Poster
Page 34
 Select the anchor points and move them to crop
 File>Save for web. This shows:
Choose the desired format: jpg, gif, png
 Choose gif. Note the transparency; Let’s make the poster to
be transparent.
Dice Poster
Page 35
 Name the file dice.gif and save in InClass>Illustrator folder
 In Dreamweaver on a new page, use Insert > Image>Image
to add the gif to the page.
 Name (save) the page as poster.htm in Practice folder
 On the new html page, I’d add a Home link.
 And in my digital portfolio I’d link to the new page.
 Open index.htm
 Add/use a Link to poster.htm
 FTP the dice.gif
 F12
To save as a pdf, File>Save as
 Choose pdf off the pick list
Dice Poster
Page 36