Rejoice! You no longer need to know complex geometric construction techniques to create a detailed and precise graphics. All you need is the SubScribe plugin which is free to all DrawScribe, VectorScribe and Phantasm CS v2 customers! It will make all the calculations for you.

However, do not think that you will not have to work at all — this plugin has not learned how to click the mouse for you yet… which is why we help you with these tutorials. In this one, we’ll be creating an App style icon where snooker balls are precisely located inside the rack.

Step 1

Take the Dynamic Shapes Tool (part of VectorScribe Studio) and select the Circle shape, or use the standard Ellipse Tool (L) and create a circle 75 px in diameter. Keeping the circle selected, go to Object > Transform > Move… and set the horizontal offset value in the dialog window and click on Copy button. This offset should equal the diameter of the circle

Step 2

Now we need to create the third circle, which will have the same diameter as the first two and be tangent to them. This problem can be solved very simply if you have the SubScribe plugin installed. Take the Tangent Circle Tool and click with it on the existing circles. After the second click there opens a dialog window where you need to key in a new radius of the circle. In my case, this radius is equal to 37.5 px (75 px divided by 2)

Let’s assume that the created circle will be places at the top of the pyramid.

Step 3

Using the technique described in the previous step, create new circles, moving to the base of the pyramid:

It took me less than a minute to build the whole pyramid of balls, while I did not have to think too much how to do that. All the necessary calculations for you is done by the SubScribe plugin. The only thing you have to remember is that the pyramid should have 5 rows and 15 balls in total

Step 4

To build the rack’s frame shape we need to know where the center of the pyramid is located. Here, another tool of the SubScribe plugin can help us, it is called the ‘Line tangent from path’. Select one of the central circles of the pyramid and create a tangent line from the circle’s tangency point.

Now create a tangent line from the tangency point of the second central circle, as it is shown in the picture below:

The intersection point of two tangents is the center of the pyramid.

Step 5

Create a shape of triangle using the Dynamic Shapes Tool which is one of the tools of the VectorScribe Studio plugin. Take the Dynamic Shapes Tool, open its panel (Window > VectorScribe > Dynamic Shapes panel), then choose the Dynamic Polygon and set the number of sides to three. Place the center of the triangle to the point of intersection of tangents (the center of the pyramid), and then holding down Shift create a triangle as it shown in the picture below:

Step 6

Now set an arbitrary radius of rounding for all of the triangle’s corners via the Dynamic Shapes panel or by Alt-dragging a corner point whilst still in the Dynamic Shapes tool.

Drag one of the corner’s centre points to coincide with the center of the closest circle:

The remaining radii of the corners rounding will change at the same amount. Copy the triangle and paste it in front (Cmd / Ctrl + C; Cmd / Ctrl + F). Change the sizes and radii of the corners rounding of the new object:

Step 7

Delete the tangent construction lines that we created in step 4. Select both triangles and go to Object > Compound Path > Make. Now the shape of the rack represents a single object with a hole.

This must be done so that we were able to fill the object.

Step 8

Now let’s proceed to the creation of the composition. Icons for iOS applications have standard sizes. Today we are going to make an icon that is 512 x 512 px in size. This size is used for displaying in iTunes, including CoverFlow and the App Store. Let’s create a shape of this icon. Take the Dynamic Shapes Tool, select the Dynamic Square, set the size and radius of rounding corners for our icons in the Dynamic Shapes panel.

Fill the resulting object with a radial gradient from green to dark green color.

The background of our icon will be the surface of our snooker or pool table.

Step 9

Open the Appearance panel, and keeping the shape of the icon selected, create new fill by clicking on the Add New Fill button. Apply gray color to this filling.

Select the gray shading in the Appearance panel and go to Effect > Texture > Grain… In the open dialog window set the parameters indicated in the picture below.

Set the Overlay Blending Mode for this fill and reduce the opacity to 50%.

The texture of the snooker or pool table is ready.

Step 10

With the help of the Dynamic Shapes Tool or Ellipse Tool (L) create an ellipse with a linear gradient fill which consists of two shades of gray. Apply the Overlay Blending Mode for this object and reduce the opacity to 90%.

Using this technique, create another ellipse as shown in the picture below.

Copy the shape of the icon and paste it in front, then place it above all the created objects. Select all the objects and create a Clipping Mask using Cmd / Ctrl + 7 shortcut.

Step 11

Reduce the size of rack with balls and rotate it at 180°. Using the Ellipse Tool create another ball and place it next to the rack.

The composition is created; let’s proceed to the final coloring of the icon.

Step 12

Fill in the rack shape with radial gradient which consists of two shades of a wood (beige) color.

Now, keeping the object selected, go to Object > Path > Offset Path… and set the offset value in the dialog window

Fill a new shape with a radial gradient which consists of darker shades of beige.

Step 13

With the help of the Blend Tool (W) create a blend object based on the upper and lower shape of the rack

Copy the blend object and paste it back (Cmd / Ctrl + C; Cmd / Ctrl + B). Replace the fill of the objects with a dark green color. Set 0% opacity for the lower, bigger object in order to create a smooth transition from light to shadow. Move the shape of the shadow a little bit down and to the right.

This is how this technique looks in theory. In practice I always tweak the shape and fill of the blend object after it is created. After some manipulations with points, sizes and fills of the blended shapes, they look as follows:

Using the same technique, I created dropping shadows from all the balls.

Step 14

Fill the balls with radial gradient which consists of different shades of gray color.

Use Phantasm CS to produce the variation in color of the balls. Select one of the balls and go to Effect > Phantasm CS > Hue/Saturation…

Now tick Colorize in the dialog window of the effect, and by controlling the sliders, select the desired color.

The advantage of this method is that you do not have to pick shades of the radial gradient, which in its turn will accelerate the process of recoloring.

I will show you the further work with the snooker balls through the example of one ball. Create a figure on the ball. Take the Dynamic Shapes Tool (Ellipse shape) or the standard Ellipse Tool (L) and create an ellipse filled with dark gray color.

Copy and paste this ellipse in front, and then proportionally decrease the sizes of the top-most ellipse.

Step 15

Duplicate the upper ellipse, then select the upper and lower ellipses, and click on the Minus Front button in the Pathfinder panel.

Reduce the opacity of the remaining upper ellipse to 75%.

With the help of the Dynamic Shapes Tool or Polygon Tool, create two triangles as shown in the picture below.

Now take the Type Tool (T) and create figures on the ball.

Step 16

Proceed to the creation of glare on the ball. Create an ellipse with a black-and-white radial gradient fill. Set the Screen Blending Mode for this ellipse in the Transparency panel.

Using the same technique, create a second glare on the surface of the ball.

Step 17

Balls will reflect on each other, so to look more realistic, reproduce this reflections. I created them with the help of the ellipses which have a gradient fill and Screen Blending Mode.

Hide parts of the ball the go beyond its boundaries with the help of the Clipping Mask.

Step 18

On some balls at the edges, I created bow-shaped glares from the side of the rack. Such shapes are easy to create using the InkScribe Tool which is one of the tools of the DrawScribe plugin.

Now our balls look like this:

Step 19

Let’s create glare on the rack…

To create the shape of the glares, using Illustrator CS5, I used the profiles from the Stroke panel. By opting for Object > Expand Appearance, the shapes were filled with black-and-white linear gradients, then the Screen Blending Mode was set for the glares.

If using Illustrator CS3 or CS4, you can easily create the same profiles manually with the InkScribe Tool or the standard Pen tool.

Step 20

Now we have to create a few items on the corners of the rack. I think you are not going to have trouble creating such objects, so I’ll show you only the stages of their creation…

Conclusion

So, we have created an icon having the size of 512 x 512 px. Due to the purely vector nature of the artwork, it is possible to use this for the creation of icons of various sizes. However, it should be recommended to alter some elements. For example, for smaller icons you do not have to use the snooker/pool table texture and possibly remove the numbers from the snooker balls.

Download the snooker app icon artwork

Click here for the Illustrator CS3/CS4 version…

Click here for the Illustrator CS5 version (also PDF compatible)…

---

About the author

My name is Iaroslav Lazunov, I am a graphic designer from Zhytomyr, Ukraine. I am glad that I finally found the job in my life that I can share my knowledge and experiments with you in my tutorials.

Follow me on Twitter, Facebook or visit my blog Vectorboom.