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 51

For the top part of the Digital Watch create a shape on a new layer like the shown in the image with the Pen Tool (P), go to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Steel.

 

Step 52

Now that we have done the top and the sides of the watch, we must do the clicker time changer buttons, for this on a new layer make a Rectangle shape with the Rectangle Tool (M) like the below image and go to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Steel.

We must make like this clicker buttons on both the sides of the watch, two on each side.

 

Step 53

The button we just made looks flat and floating so we must give some dept to this, and give it a feeling like its attached to the watch and the buttons are coming out from the watch body. To do this we must create a Circular shape with the Ellipse Tool (L) beneath Rectangle button then fill it by gradient by going to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Aluminum.

 

Step 54

Change the Blending mode to Multiply. Opacity 100%. But still our clicker button looks very incomplete.

 

Step 55

So to make it look complete we must have to give it a flat top and make it look like a solid metal. For this again make a circular shape with the Ellipse Tool (L) Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Pewter.

While applying the gradient, here is the trick play with the gradient randomly seeing to it that the darker shade of Pewter comes in the middle. This will make the button top appear like the metal is depressed in the middle, making it feel that there is space for a finger nail click. If taken keen observation at the below image gradient fill you will know what I am telling you about. Hope I am very clear and that you people are following me till here.

After you have made one Button, just make three more copies of the layer by duplicating the first button layer by dragging it on a new layer and Transform the Button and fit it on the other side of the Watch.

 

Step 56

Now that our Digital Watch is finally coming to shape, we just have to add the metallic chain and the final display touch ups to it. So on a new layer open the "Realistic Chain Pattern by Michael Lenarcic" which downloaded by you in the beginning of the tutorial. Drag it in this document only, and click on Edit Original. Please have a look at the image for the Edit Original button, its at the top of the window next to Live Trace button.

 

Step 57

On clicking on Edit Original > Click OK a new window will open in Illustrator just copy the small chain part which is select in the below image, and paste it in our Digital Watch Document. We no longer need the other chain patterns so you can close the window.

 

Step 58

The chain is an excellent piece but its color does not match our watch color, so we have to fill it with our gradient again. So go to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Chrome. And now our chain stands out and looks stunning. Just transform and scale the chain to make it fit our watch. Then duplicate the chain by selecting the chain part and holding down the "Alt" key on the keyboard and dragging it to a new location. Again transform and fit it.

 

Step 59

We now just have to have the upper Ring for the chain, just duplicate one of the small ring from the chain part, it will have a gap. You can close the gap by adding and transforming small vector parts of the chain itself.

 

Step 60

In the image you can I have shown you that the chain element is on one layer and the ring has been enlarged and added on the other layer. Well I guess that was the easy part.