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

How to Create Snooker App Icon Using Adobe Illustrator and SubScribe Designer 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





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)…


---


http://www.tutorialized.com/view/tutorial/How-to-Create-Snooker-App-Icon-Using-Adobe-Illustrator-and-SubScribe-Designer-Plugin/75879