Dice Poster…jma501 rev 10/5/2015

Goal: Create something like this:

It will use:

  • Blends
  • Text
  • Gradients
  • Symbols
  • Layers
  • Pathfinder
  • Extruding 2D to 3D
  • Scaling
  • Adding anchor points

Basic approach

Two layers:

  • Bottom one (Named Background) will contain a gradient, a border, maybe text, some symbols.
  • Top layer the dice

Start Illustrator: new print document, portrait orientation, units inches;the profile switches to (Custom)

  • Name it dice
  • Reset Essential workspace

Assume we are making a poster for a casino.

We will be using Blendtool to create the illusion of a die have been rolled.

Note: Here is a blend from a red rectangle to a green star in 8 steps

  • Select the rectangle toolwe will use to drawadie
  • Specify a rectangle 1.7” x 1.4”:

Note: If you know the desired values, best way may be to just click on the artboard and enter those values:

(Also: Could drag, shift-drag…)

  • Click OK
  • Select the Fill tool
  • Open swatches panel:
  • Use this CMYK red fill color: (What does CMYK stand for?

  • No stroke

Result:

  • 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…OR Select>Deselect

  • Select the ellipse tool, which we will use to draw the pips.

We will create a small ellipse that we will use to represent a pipa on a dice surface: Make it a shade of gray (Isn’t that a movie/book name!!)

If we use white, it won’t show up. Make the pip small because we eventuallywill need to placeup 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

I used the color picker (double-clicked the fill swatch, which opened the swatches panel)

Result:

If you can’t see the pip, increase the k% value via the color picker.

  • We need sets of: five, four, three, two and one pip. Take advantage of copy/pasteas you create the six sets. Do it now. One thing: Don’t bother with 6-pip side: Will use a graphic instead
  • Grouped as shown.You might use SmartGuides to help position: I also used the zoom tool. Also used the nudge tool to move a pixel at a time

Instead of 6 sets of pips, we’ll place a photo on one surface.This means we need to convert a raster to a vector.

  • File>Place
  • Navigate to Ducky.tif
  • Click Place (We Place graphics)

Wow! Kind of large, and it’s a raster

To convert: ChooseImage Trace>Photo quality(Depends on the source material)

  • Choose Image Trace>High Fidelity Photoin the dropdown
  • It’s now a vector. To see the paths so we can resize, click Expand

Don’t worry!

  • Click away
  • Select the ducky
  • Use Transform panel and scale the height to about 1.4”tall. (Matches the original size of the rectangle)
  • Make sure the link is active so that when you adjust the height, the width automatically changes also.

Using Pathfinderfor Creating Compound Groups

  • Group each set(except the 6 pips side) but don’t use Ctrl-G(which also groups objects). Instead, make use of the PathfinderUnitetool and make each set of pips into a new compound object. Here is how to do that:
  • Open Pathfinderpanel and select each set (2-6), one group at a time. I started with the “2” set
  • Find theUnite tool, shown below,and Alt-clickit to create four more newcompound objects. (3,4,5,-groups)

.

Convertinggroups into symbols

Symbols are only saved once, regardless of how many times we use them, and they are vectors so they can be resized.

We will apply a symbol groupto each of six surfaces

  • Open the Symbols Panel(See below)..It has about 7 pre-defined symbols
  • We will save (drag) ourpip groupsthere, one group at a time

:

Here we go

  • Dragthe single pip to the second row of theSymbol panel. When prompted for a symbol name, type “1”
  • Now, do the same forthe remaining groups, naming the symbols 2,3,4,…,5 ( 6 is named ducky)
  • If you make a mistake:
  • Make any corrections…or delete the symbol. If you delete, select Delete Instances
  • When you have created the six symbols, move the pips to the canvas area; we don’t need them any more. If they won’t fit in the canvas area, Ctrl—to shrink the pips

Extruding the Rectangle

Next, let’s make the 2D rectangle into a 3D cube.

If there is a stroke on the rectangle, delete it

  • Select the red rectangle
  • SelectEffect>3D>Extrude and Bevel
  • Check the Preview button
  • Our valuesare shown next: (Don’t press OK yet)

(-44, -24, 11, 11, 108,Tall Round (Bevel value), 4)

Here is the preview:

  • Enter the above values andthen click Map Art.
  • We will map (place) a symbol (1-6) onto each surface.

Note: We will now map the 5 pip groups, one group/symbol per face.

  • Map the symbol named 1to surface1: (Choose the surface, then the corresponding Symbol)
  • Here isthe resulting “1”side of the cube:
  • Select Surface 2, find and map Symbol“2”

Note:If you need to re-edit a surface, re-select the 3D Extrude & Bevel in the Appearance Tool:

You might see figure below at times. It indicates edges, and you can’t map art to an edge, only to a surface. Skip them:

When you get to surface, specify Ducky as the symbol. You’ll have to crop Ducky:

Basic rule: Select a surface; find the appropriate symbol

  • Continue until all six surfaces are mapped
  • Click OK
  • Click OK again

Here is ourcompleted die

Copy and Paste the Die

  • Select the die, copy it (Ctrl-C) and click a new location, drop the pasted version to near the lower right corner, Edit>Paste, 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 (Selection tool)
  • Choose Window>Appearance (used to edit something)
  • Look for 3D Extrude & Bevel,
  • Click 3D Extrude & Bevel, click Preview, and when the panel opens, rotate the cube that represents the die you just added:

Blending is next

  • Select both images. (first Click on lowerright corner die, shift-click top left one)
  • Q: What does Shift-click do?
  • Choose Object>Blend>Blend Options. (You recall this, correct!)
  • Choose Blend Make

Smooth color lets Illustrator decide how many steps to require

Spacing:

The number of dice you get depends on the distance the two dice are apart

  • 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.

  • Choose the Add Anchor Point tool and add some anchor points in between the dice
  • Use Direct Select(White Arrow) and drag/push the new anchors:

File>Save as DiceFinalV1

Adding the Additional Poster Content

Recall we want 2 layers;

  • One layer, the top one, named dice, will contain the dice we just created
  • Layer two, named Background, and which will be behind the dice, will contain a gradient, and some symbols and text
  • Open the Layers panel (Window>Layers)…There should be one layer, named Layer 1.
  • Rename the layer Dice
  • Look at itssub layers
  • Lock the Dicelayer
  • Add a new layer and name it Background. Be sure it’s a new layer, NOT a sublayer
  • Your Layers panel should now look like this: 2 layers
  • Drag the Background layer belowthe Dice layer (i.e Dicelayer on top)
  • Unlock Dice layer
  • Draw a rectangleon the Dice layer, no fill, no strokethat covers only the dice
  • Make the fill and stroke be null
  • Hide the dice layer

We’re going to add a gradient fill to the Background rectangle. First we have to create a suitable gradient.

Creating a Gradient

  • Open the Gradient Panel:Window> Gradient
  • Note there are two types: Linear and Radial…choose linear
  • At that point, Illustrator may apply the black and white gradient…don’t worry.
  • Tear off the Gradient tab
  • Drag our already-used Redswatch to the first stop (the extreme left) , a dark blue to the ending stop:
  • Slide the diamond left or right to change the transition point. Select the fill tool, then choose the gradient:
  • Choose no stroke, fill to gradient
  • As you can see from below, the gradient is applied to the rectangle

Let’s change the direction of the gradient.

  • Click the Gradient at the bottom of the Tools Panelto reveal
  • Open the main Gradient tool,
  • You can drag the line to any orientation…You mayhave to select this:
  • 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.
  • Unlockthe Dice layer

Here is the revised artboard

Now, let’s add some type to the Dice layer. (No real reason)

Point-Text: We will “point” to where we want text. There are other type options, such as type on a path, in a text-box, type on a path,…

  • Set your Fill and Stroke:
  • Window>Type>Character
  • ChooseImpact, 100 points
  • In the upper right corner type “Happy”, click Enter, Type “Hour”
  • Click the Selection tool and click away.
  • Click the text
  • Try changing the font to Broadway, 72 pt. Decide which you like better.

Change the Fill color to almost white.Use the eyedropper and select a pip to choose a shade of gray as the color:

Now, let’s add some symbols on the Background layer. Review:

  • Select Window>Symbol Library>Celebration
  • Celebration symbols:

:

  • Drag and drop some symbols onto the Background Layer
  • Notice that the text and the symbols are being added to the Background layer, if you had it selected. If not, go ahead and select the Background layer.
  • Expand the layer :
  • Experiment with the stacking order to place objects behind others.

Now, let’s add some logo-specific symbols. Find the symbol library (Window>Symbols) panel, click the panel menu and choose Logo Elements:

  • Locate the Martini glass symbol
  • Drag to the Background layer, near the lower left
  • Use the scale tool and resize the glass to 200% , or click a corner of the Bounding Box and shift-drag to maintain the aspect ratio
  • Click/select the Background layer
  • And then click on the Path object (the rectangle)
  • Look for the Art circle, select it. See the red?
  • Temporarily hide the Dice layer
  • Select the Background layer
  • Choose a blue 10pt stroke around the rectangle

Saving for the Web

Decide if you want to crop, or leave border. I chose to NOT crop

  • Save as Poster Final
  • Assume you want the poster to be on the Web. To do so:
  • File>Save for web. This shows:

Choose the desired format: jpg, gif, png…select gif for now

  • Choose gif. Note the transparency; Let’s NOT make it transparent, the actual graphic will be 8 1/2” by 11”

Name the file dice.gif and save in InClassIllustrator folder

Add to CMS

  • Create a new page named poster.
  • Place an IMAGES element
  • Finish on own… to add the gif.

Dice PosterPage 1