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
Each color must be on separate layer as show in the below image. I have used the following colors, Thin Green Neon, Thin Orange Neon, Thin Yellow Neon, Thin Violet Neon, Thin Aqua Neon, Thin Chartreuse Neon and Thin Red Neon you can use any of the colors you like in the Thin styles. If we select the Thick Neon Graphic Styles then the text will be more thick and the rendered output will not be too precise or sharp as in the Thin Graphic styles.
Now we have to change the outer metallic ring color to make it appear like a metallic chrome plating. Go to Window Menu > Gradients and on the Gradient panel selecting Gradient type Linear, Now make 3 black stops, 2 white stops and 1 grey stop by clicking in the middle on gradient window.
The first black stop Location is "0%", second black stop location is "46.7%" and the third black stop location is at "100%".
The first white stop Location is "19.78%", second white stop location is at "81.32%" and finally the Grey (C =1.52, M = 1.38, Y = 1.36, K = 48.35) is at location "65.93%".
Now for this metallic ring set the Angle : -140.13 degree.
Here we have to use the Type tool (T) and write the text "RNEL" this is the kind owner of this tutorial site. Font Name : Times New Roman, Bold, 12pt. Color Codes are mentioned below C = 100 M = 100 Y = 25 K = 25.
Date Month & Year : Take the type tool and with the downloaded fonts link 7 SEGMENTAL DIGITAL provided in the beginning of the tutorial start typing the date 01 JAN 2012. Font size 16.51pt, Regular.
We want this also to Animate, so as we had done for the Time, lets do the same for the date. Right click with the mouse on the date and Create Outlines.
Use the Direct Selection Tool (A) from the tools box, select each text eg Number "1" as shown below.
Click on the end black box of the Number "1" and press delete key on your keyboard, do this till you have got all of the Date in black color.
Here I have deleted the entire black box and only the date remains. The next step Animation part.
Select the date text and Go to Window Menu > Graphic Styles > Open Graphic Style Library > Neon Effects. Here we must use any effect in the thin category. I have used Thin Green Neon. Stroke of this text will be 5pt.