Intuitive Tools for Digital Artists

How to Create Snooker App Icon Using Adobe Illustrator and SubScribe Designer Plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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)

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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:

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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:

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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:

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

Step 13

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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:

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

Step 14

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

Step 15

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

Now our balls look like this:

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

Step 19

Let’s create glare on the rack…

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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…

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

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.

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

How to create App Snooker Icon using Adobe Illustrator and SubScribe plugin

Download the snooker app icon artwork

Click here for the Illustrator CS3/CS4 version…

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

Written by Iaroslav

Iaroslav

Iaroslav Lazunov is a graphic designer from Zhytomyr, Ukraine who has found the job that allows him to share his extensive knowledge and experiments with Adobe Illustrator and plug-ins from Astute Graphics. Iaroslav was also a key author over at Vector Tuts+ as well as his own website Vectorboom

Comments (02)

Leave a Reply

to complete your set! 11 Days 19 Hours 17 Minutes 32 Seconds
Buy Now