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 81

To do the "AM" text, on a new layer type the text AM with the font "7 SEGMENTAL DIGITAL DISPLAY" size "12pt". Then select the text and right click it, use the option "Create Outlines".

Now use the Direct Selection Tool (A), and click on the square of the alphabet "A", delete the square, do the same for alphabet "M". Select both the alphabets and increase the stroke to "1pt".

Then use the Selection Tool (V), Ctrl + click and again Shift + Ctrl + click on the alphabet "M", this will select "M" now we can give spacing between them.


Step 82

Here in this this part we are going to make sensor for the watch. So on a new layer above the Metallic Ring Layer make a small circle and duplicate it four times, arrange it 3 on top and 2 below it like in the image. From the color pallet, fill the circles with color # 231F20.


Step 83

Now in that same sensor layer, Create New SubLayer from the layers panel. Copy and paste our previous 5 circles on this new sub layer.

Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Cast Iron.

See the image for sub layer.


Step 84

Now lock the 1st sub layer i.e. the layer with 5 circles with solid color. Then select the 5 circles with the "Cast Iron" gradient and move these circles slightly towards the right. These circles together will give the effect of 5 sensor holes in the Metallic Ring Layer for picking up weather conditions that will be displayed on the watch display.

Well its a Concept Watch right. Wink


Step 85

Finally we have reached towards the end of the tutorial, the publishing part or you may say creation or export of "SWF output file." And yes I remember about my promise about the freebie, but its in the end Smile

Coming back to our tutorial the publishing part, In the below image I have showed you exactly which layers will be animating, it will be Layer 5, Layer 12 and copies of

Layer 12 rest of the layers will be static i.e. they wont be rendered as Animating.


Step 86

Go to File Menu > Export > in the save as type drop down select "Flash (SWF)" . Name your file for saving then the below image option will pop up.

Image Format - Loss less.

Resolution - 150 ppi.

Frame Rate - 2fps (I wanted this to animate fast so I have given 2fps).

Check on box - Looping.

Check on box - Export Static Layers.


Step 87

In the Export Static Layers option, Select everything i.e. all layers by Ctrl + clicking on each layer, only leave the Layer 12, 12 copies and Layer 5.


Step 88

Ctrl + Click on Layer 23 also which comes in between Layer 12 copies. Please note : We have not selected layer 12 and its copies as these are animating layers, i.e they are the timer part of the watch. Later click on OK button to export the swf output file.



Step 89

On exporting we finally get our Digital Concept Watch animating swf file. Hope you people have enjoyed the tutorial and learn't something new today. Feel free to comment here and also at my website. Laughing Please continue reading for Part 2.


Step 90


Digital Watch Desktop Application


Here is the freebie I promised you guys. The download .rar file contains

1) Digital Desktop Watch Software app

2) Tutorial Resources : (swf file, illustrator file, link.txt file for tutorial Part 2 and Action Script which is also for the second part of the tutorial.)

3) Images / screenshots.

Please click any one of the below links for download and installation :

If you guys are really interested in how to make the Digital Watch Desktop Application which is the 2nd Part of this tutorial please visit my website page here :Digital Watch Desktop Application (Part2). its below the Installation & Uninstall Procedure.

In the next images you can have a preview of how the Digital Watch Desktop Application looks on the Windows 7 and XP machines.