4,586 views

Hi everyone, a very warm welcome to my new tutorial. I am Godwin D'Souza, thanks to everyone for viewing, liking and taking time to read and learn my first tutorial "Create an Ankylosaurus Dinosaur Scene in Illustrator". I am overwhelmed with its response and so I decided to make another tutorial. This is an advanced Illustrator tutorial. In this Illustrator CS3 Tutorial I will show you how to make a realistic Digital Concept Watch with Animation (Part 1). The output of which will be a swf file. By learning this tutorial you will be able to design your very own UI for any small watch application. In the end of the tutorial I will be giving you the free Adobe Illustrator design file, swf file for download for study reference, also in addition to this tutorial I will be giving another freebie. i.e at the end of this tutorial the so called Digital Concept Watch will no longer be just be a Concept Watch with the same time blinking and changing colors, you will be getting a free real working Digital Watch Desktop Application (a pc software installation file) with random flashing colors displaying you the current time, date, month and year of your very own pc time zone. Which is safely tested on Windows XP and Windows 7 machines. And if you are really interested in learing how to make the free Digital Watch Desktop Application (Part 2), yes which is the 2nd part of this tutorial, at the end of this tutorial I have guided you with links to my website, where you can learn from it, but for that you will have to learn or know at least the 1st part of this tutorial that is the UI Design. So have fun and a happy learning Resources needed Illustrator Brush Realistic Chain Pattern by Michael Lenarcic Font 7 Segmental Digital Display by Ash Pikachu    

By godwin, on November 15, 2012, under Illustrator Tutorials

Step 11

In the below image we have the Gradient changed and the right hand side of the gradient slider also showing the same.

 

Step 12

Now move the middle Gradient stopper slightly towards the left so this will bring down the light green glare of the circle and will give it more darker green from the middle towards the end.

 

Step 13

We have to create the second inner ring of the Digital watch, So select the out metallic ring, duplicate it by pressing down the Alt key (the mouse cursor changes) and drag it to a new location then reduce its size by transforming it. Cut this ring and paste it on a new layer and Align their centers.

 

Step 14

We are now going to give this second inner ring a bronze metallic look, therefore go to Window Menu > Swatches > Open Swatch Library > Gradients > Metals.

 

Step 15

Select the Bronze metal as shown in the below image.

 

Step 16

Changes to be made, vertically align their centers again.

 

Step 17

Now make a new circle below the bronze ring layer and fill it with light green color, code #CDE4B6. Then change the Transparency blend mode to SoftLight and Opacity to 20%. This will give a very slight light shade to the green watch base, adding up a depth to the darker shades.

 

Step 18

We have now to create a holding Copper metal ring base below the Bronze ring layer, this Copper metal ring layer will bring out the whole green lighting as if there is an glowing element as in the glowing watches in the dark.

For that we have to make two new circles below the Bronze ring layer, one slightly larger than the other. In the below figure, the purple circle is the bigger one.

 

Step 19

Here is the smaller red circle shown in the center in the below image, then we must again Horizontally align all the circles and rings centers. Alignment is important otherwise we won't get a proper circular watch.

 

Step 20

After the alignment, select both the big circle (i.e. maroon) and the small circle (i.e. red)go to the Windows Menu > Pathfinder, and use the divide option as show below.