Reflections Done Right – Creating a Money Roll Icon
Cash-in when you follow this tutorial for creating accurate and logical reflections. I'll cover how to use shading and masking to create an illustration that's worth the look.
Final Image Preview
Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.
- Program: Adobe Illustrator CS4
- Difficulty: Intermediate
- Estimated Completion Time: 1.5 hours
Here is the illustration I'll be creating.
Start by using the Ellipse Tool (L) to draw a perfect circle. Hold down the Shift key to accomplish this.
Add a radial gradient with light green colors. Ensure that the center and outer edges are lighter.
Using the Direct Select Tool (V) distort the circle down to an oval shape.
Duplicate the oval lower on the page. Make sure to keep it perfectly in alignment with the first shape. The distance that the shapes are away from each other will be the height of your roll of money.
Using the Rectangle Tool (M) draw a rectangle that is exactly the width of the ovals. The rectangle should start and end at the halfway points of both ovals.
Select the rectangle and the bottom oval. In the Pathfinder Palette select Unite. The two shapes should now be one.
Give the roll of money a linear gradient. Observe that the right edge has a bit of highlight to it. This is called reflective lighting and is important in the overall effectiveness of the icon's look. Spend a little time getting your gradient right before you move on. Note, if the oval on top is not in front simply select it and go to Object > Arrange > Bring to Front.
IMPORTANT: Duplicate all your shapes and keep the original off to the side.
Using the new copy, make sure the oval is on top of the dark green gradient shape (Object > Arrange > Bring to Front), then select both shapes and in the Pathfinder Palette click Minus Front.
This is what you should be left with.
Select the shape and go to Object > Path > Offset Path. Enter a negative value for the Offset. Note, your value will be determined by how big your artwork is created so enter a number that looks good to you.
Before you can color the new shape individually, you will need to ungroup the object. Go to Object > Ungroup. Using the Direct Selection Tool, select the center shape and give it a black fill. In the Transparency Palette select Multiply, then adjust the Opacity to about 25%. Now, you can position the new smaller shape on top of the roll of money you set off to the side and get rid of the larger shape.
Create the hole through the top of the roll by copying the oval on top and then pasting directly in place by pressing Command + F. Scale the oval down using the Direct Select Tool. Hold Shift + Option and drag the object down until its smaller.
Fill the shape with a black to white radial gradient, set the mode to Multiply in the Transparency Palette and bring the Opacity down to about 42%.
Create a more arbitrary shape on the face of the roll by using the Pencil Tool (N) to draw the shape. Tip: hold down the Option key to easily close the shape when you are drawing it.
To create the illusion of folds or creases on top of the roll is easy to do. Use two overlapping ellipses to start.
In the Pathfinder Palette select Minus Front. This will leave you with a crescent shape. Duplicate the shape and change the scale and color to add a variety of folds and creases.
This is what your artwork should look like right now.
To create the band around the roll use a process similar to the one for creating the creases on top. Again, start by overlapping two ellipses.
Click Minus Front in the Pathfinder Palette.
If you zoom in you'll see that there is now a sharp point on the edge of the band. You'll need to use the Pen Tool to correct it.
Using the Pen Tool (P) draw a shape that covers the pointed edge. Use Minus Front in the Pathfinder to modify the shape of the band.
Give the band a rich red to dark red gradient. Observe how I'm still using reflective lighting on this element too. Keep in mind your light source. For this illustration, the light is coming from the upper left side.
Give the band a little more detail by adding a darker edge around it. Go to Effect > Stylize > Inner Glow. Select Multiply and use a dark color like black. Adjust the Opacity and Blur, then click OK.
Give the band a shadow by first using the Pencil Tool to draw a shape similar to below.
Blur the shape by going to Effect > Blur > Gaussian Blur. In the Transparency Palette select Multiply so the shadow blends well with the green color behind it.
Enhance the detail of the band by using the Pen Tool to draw a slight highlight on its edge.
Create the coins by first drawing an ellipse and filling it with a linear gradient.
I've added a subtle inner shape that is slightly darker than the shape behind it. This creates the impression of a ridge or lip within the surface of the coin. Again, use the copy and paste in place technique (used in Step 12) to be certain your new shape is in the middle of the shape behind it.
Give the coin depth by duplicating the oval and placing it lower than the first oval. Draw a rectangle that is the width of the oval and starts and ends at the horizontal halfway point of both the top and bottom oval. Use the Pathfinder Palette to Unite the bottom oval and rectangle shape. In a nutshell, create this shape the same way that you created the shape of the roll of money.
Use the Pen Tool to draw some of the small details like rivets on the side and reflections on the edges.
Draw a few other coins, rotate and stack them on top of each other. Group each coin as you draw it to make selecting one coin at a time easier.
Give each coin its own shadow using the Gaussian Blur technique. Observe how the center shadow is darker since more coins cover this area.
Place the coins next to the roll of money. Add another blurred shadow in the area where the coins touch the roll.
Add a shadow under the roll of money too.
To create the reflection start by grouping the roll of money and all the elements that comprise it. Duplicate it and send it to the back by going to Object > Arrange > Send to back.
Select the bottom roll and in the Transparency Palette double click the blank area highlighted in yellow.
Your bottom roll shape should now be invisible.
Using the Rectangle Tool, draw a rectangle (that has a white fill) on top of the area where the bottom roll should be. Now, your bottom roll should be visible again.
Still working on the mask side of the Transparency Palette (the right-hand side,) give the "white" shape you just drew a black to white radial gradient. This gradient is gradually masked out to give the impression of the reflection fading out. Ensure that your black is made up of all 0 values and your white is made up of all 255 values. Neglecting this step will render your reflection unable to fade out or in completely.
Note that Steps 36-39 should be completed on the mask side of the Transparency Palette (the right-hand side.) Switch back to the left-hand side of the Transparency Palette by double-clicking the yellow area. Now, in the Transparency Palette you can select the bottom roll shape and adjust the Opacity to something lower, like approximately 60%.
This is what your artwork should look like right now.
Creating a logical reflection for the coins is usually where most people have trouble visualizing the correct execution. In the first example, the coins have simply been copied and pasted upside down. This is incorrect. The correct look that the coins should have is that of a true reflection.
It's easy to make the reflection look believable. I've broken the process down into 3 images. First, copy the coin on the left. Rotate it and send it to the back of all the other objects. Second, duplicate the edge of the center coin and paste it directly below. Third, duplicate the right coin a send that behind all the other objects too.
Now, the coins are stacked in a more realistic manner than simply copying and pasting the entire thing.
Fade the coins out by using the same masking technique used for the roll of money.
Draw a Rounded Corner Rectangle. Note, you can adjust the radius of the corners by holding the up or down arrow while you draw the shape.
Fill it with a cool blue gradient.
Make the edges darker by going to Effect > Stylize > Inner Glow.
Add a bit of atmosphere by drawing some random wave shapes and giving them a white to transparent gradient.
Add the text at the bottom. I've used a font called ITC Franklin Gothic.
To give the text a gradient fill, first select the text, then in the Appearance Palette select the flyout triangle and click Add New Fill. Adjust the gradient to your liking.
To give the text a shadow, I've simply burred a square shape using Gaussian Blur.
Last, give the text a reflection as was done for the roll of money and coins.
This is what the final icon looks like!
Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.