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
Create a new 800 pixels wide and 800 pixels high document in Illustrator CS3.
We are going to make the outer ring of the metallic watch. Therefore make two new circles one slightly bigger than the other, there is no specific diameter or radius of the circles. Make them as per your requirements. Fill the color of the bigger circle as Black and smaller circle as Brown. This is just to know the difference between the two circles while making the ring.
Vertically Align their Centers as shown in the below image. Or go to Window Menu > Align, and align it from the right hand side tab.
After alignment, now we just want the ring so go to Window Menu > Pathfinder. The below image shows the same (Pathfinder tab in the right hand side). Select both the circles by firstly selecting the first circle by mouse click and then for the other circle press the Shift key and keeping it pressed down use the mouse click again. Then click on the Trim in the pathfinder. Control click the inner circle and drag it outside. We can now delete the inner circle as we no longer need it, because we have the outer ring left which we were looking for.
For the metallic gradient, select the ring and then on the Gradient slider. (as show in the below image) select the start and the end stop color as black and the middle stopper with the color white.
Move the middle white gradient stopper to the left side.
Now we have to create the inner base part of the watch so on a new layer Go to Window Menu > Symbols > Open the symbols library > Web buttons and bars. Select Button 9 Mouse down symbol by dragging it into our document.
Tip : Each part of the watch must be on a separate layer we can also name the layers to avoid confusions, as Illustrator does not give options to make folders as in Photoshop, also this will help you to know which part of the watch your working effectively. Moreover you can also Lock the layers after completing the work on a particular and moving on to the other layer, this also will prevent you from accidentally working on the same layer.
We only require the green gradient circle so select the symbol and use the Break Link option next to the Edit Symbol option as shown in the below image.
Delete the rest and here we have our watch base. Now we have to do some fine tuning work on it.
After selecting the green gradient circle, kindly notice the bottom left hand side of our tools window will show the gradient as metallic. As that was our previous gradient, click on none option and the gradient will be changed to the green gradient. The blue arrows show the same.