4,575 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 61

Now that we have our Digital Watch body done, but what it looks like its floating in mid air. So lets go ahead friends and make it feel like the watch sits on a surface with a shadow of its own giving dept to the whole watch bringing out our gradient background too.

For this create a circle on the second last layer just above the gradient background layer with the Ellipse Tool (L) by holding down the Shift key on the keyboard and creating the circle with mouse first click. Fill this circle with Radial gradient.

Go to Window Menu > Color, in the color panel add these codes.

Stop settings and colors are as follows.

  • C = 74.9, M = 67.84, Y = 67.06, K = 89.41 Location at 0 %.
  • C = 50.2, M = 42.35, Y = 42.35, K = 6.27 Location at 40.66% , this is the second grey one.
  • C = 0, M = 0.39, Y = 0, K = 0 Location at 100 %, this is the white one.

 

Step 62

Transform the gradient circle by dragging the sides towards the top, as the below image.

 

Step 63

Now place this gradient circle in such a way that the center darker shade falls exactly at the bottom center of the Digital Watch lower body.

This will make the whole scene look as if the is a big focus light above the top and the watch is casting its shadow below, whereas the gradient background gives more dept to it. Tip : This gradient trick can also be done if you have done some character illustration and want to give shadow and dept to the character.

 

Step 64

Here is the final touch up parts for our watch, the location viewer. Make a Rectangle with the Rectangle Tool (M) and fill it with solid color "Black", and change the Blending mode to "Multiply". Please see the below image.

 

Step 65

With the Direct Selection Tool (A). Click on the top end point of the square, and below the "Select Menu" option you will see and option saying "Convert". Use the second option saying "Convert selected anchor points to smooth". Then select the handle and drag it down making a curve in the center, as in the image.

 

Step 66

Now we have to write the text "New York", for this use the Pen tool (P) and make a small curve path on a new layer above the rectangle layer. Then go to Tools, and use Type on Path Tool its in the drop down of Type Tool (T), and type the text "New York" in white color on this curve path.

 

Step 67

Change the Blending Mode of our location viewer Rectangle to Multiply.

 

Step 68

I hope you my friend, my reader have understood it till hear, Now we have to name the clicker buttons. So make a new layer above the Metallic Ring layer, and with the Pen Tool (P) make a curve path as show in the below image, Then use the Type on Path Tool its in the drop down of Type Tool (T).

 

Step 69

Type the text "LIGHT", with font Times New Roman, Bold, size 10 pt and go to the color pallet and fill it with #999594 color. See the below image.

 

Step 70

Go to the Transparency window and change the blending mode to "Multiply".