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 21

Now press control and mouse click the inside red circle, drag it out and delete it, here we get our ring base. For now don't worry about the time text its just for display. Hope you people are with me till here and understanding, hope I have explained properly and I am not too fast for you guys.

 

Step 22

Select the Maroon ring and go to Window Menu > Gradients > Metals.

 

Step 23

Use Copper radical gradient to this new ring as show below.

 

Step 24

Then drop shadow of this Copper ring, for that go to Effect Menu > Stylize > Drop Shadow.

 

Step 25

The below image shows the drop shadow settings. The reason we give a drop shadow effect to the copper ring, is to make the green base layer appear like a circular dome at the bottom.

 

Step 26

In the below image I have highlighted the drop shadow effect with the pointer, we can clearly see here the green base layer is starting to appear like a dome shaped base.

 

Step 27

Time : for the time, use the font link provided at the start of the tutorial i.e. 7 SEGMENTAL DIGITAL, and on a new layer type the text "10:25" with the text tool. Font size 60pt Regular. When we type the text we will get the text in white color which will appear in a black box. We must get rid of the black box as we just need the font to change color. So please use the Direct Selection Tool by pressing (A) on your keyboard. Select the time "10:25" and use the mouse right click on the text and click on Create Outlines. Doing so will create outlines for the text. Now use the Direction Selection Tool and carefully click on any one corner of the black box and press "Delete" from your keyboard. This will convert the white font to black color, do this for all the numbers i.e. 1, 0 , : , 2 , 5 till only the fonts remain in black.

 

Step 28

Now we have to put colors for the time font to be Animating. Select each number with the Direct Selection Tool.

 

Step 29

Go to the Window Menu > Graphic Styles > Select Open Graphic Style Library > Neon Effects . The below images shows the same.

 

Step 30

Change the stroke to 4pt, as in the below image. Duplicate this text layer by dragging it on the Create New Layer option from the layers panel, we must do this to animate the text in different colors.