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 41

The below images show that I have duplicated the date layer, by dragging the date layer to the new layer from the layers panel and used Thin Orange Neon effect on it.

 

Step 42

Timer : Now that our Digital Watch is coming to shape somewhat, we add the Timer on a new layer with the 7 SEGMENTAL DIGITAL DISPLAY, regular 23.6pt, just drag the width of the font to make it look like a big fat timer. This we don't want to animate so give it "Black" color.

 

Step 43

Now comes the part where we have to put an outer glass to the Digital watch. So make a Circle on a new layer just above the Bronze ring layer and below the silver metallic ring layer. Add linear gradient to it with the angle at -90 degree, the gradient settings are as follows.

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

Angle : -90 Degree.

Stop settings and colors are as follows.

  • C = 0.78, M = 0.78, Y = 0.39, K = 0. Location at 28.02 %.
  • C = 49.93, M = 50.05, Y = 51.67, K = 11.09 Location at 80.77% , this is the second grey one.
  • C = 9.41, M = 71.37, Y = 100, K = 0.78 Location at 100 %, this is the last orange one.

Pull down the opacity of this layer to 50%

Tip : if your color palette has CMYK you can change it to RGB, by simply going to Window Menu > Color > from the drop down list change to RGB or CMYK here you can give your values.

 

Step 44

After the outer glass is done we have to add shine to the glass and metallic ring. So on a new layer above the Metallic ring layer make a shape name it Highlight, as shown below. Make a semi circle shape with the Pen tool like the letter "S" formation in the center extending the semi circle beyond the Metallic ring layer. Fill this with color White, Blend normal, Opacity - 18%. Then select the metallic ring layer ( if you have locked the metallic ring layer please unlock it) and the Semi circle shape we have just did, go to Window Menu > Pathfinder. Now from the Pathfinder window click on either Divide or Trim options. Here we get the Highlight of the outer glass and metallic ring, delete the rest of the semi circle.

For the Background of the Digital Watch on the last layer, make a Square with the Rectangle Tool (M), and fill it with gradient. White to Black

Gradient fill type - Linear

Angle - 90.29

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

Stop settings and colors are as follows.

  • C = 0.78, M = 0.78, Y = 0.39, K = 0 Location at 65.93 %. this is the white one
  • C = 73.73, M = 67.45, Y = 65.88, K = 83.53 Location at 100% , this is the black one.

 

Step 45

Now that we have done with the Timer, we have to do the sides of the Watch and the buttons etc. So make a shape like the below one with the Pen tool (P) on a new layer with Fill color set to none.

 

Step 46

Go to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Chrome. Drag the Linear Gradient or type in the

Angle :   -134.79.

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

Stop settings and colors are as follows.

  • C = 0, M = 0, Y = 0, K = 20 Location at 0 %.
  • C = 0, M = 0, Y = 0, K = 0 Location at 15.93 % , this is the second white one.
  • C = 0, M = 0, Y = 0, K = 48 Location at 31.87 %.
  • C = 0, M = 0, Y = 0, K = 80 Location at 54.95 %.
  • C = 0, M = 0, Y = 0, K = 60 Location at 74.16 %.
  • C = 0, M = 0, Y = 0, K = 0 Location at 88.2 %, this is the second last white one.
  • C = 0, M = 0, Y = 0, K = 100 Location at 36 %.

The below image show you the same.

 

Step 47

For the back body panel of the watch again with the Pen Tool (P), make a shape on a new layer like the one in the below image. Then go to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Steel.

This will give our watch the 3d look.

 

Step 48

Angle :    22.76 degree.

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

Stop settings and colors are as follows.

  • C = 2.74, M = 4.11, Y = 5.48, K = 10.1 Location at 0 %.
  • C = 27, M = 11, Y = 14, K = 75.09 Location at 17.03% , this is the second grey one.
  • C = 4.15, M = 3.11, Y = 3.11, K = 7.27 Location at 45.6 %.
  • C = 15.32, M = 8.28, Y = 5.91, K = 41.18 Location at 87.64 %.
  • C = 0, M = 0, Y = 0, K = 40 Location at 100 %.

 

Step 49

For the side of the watch, with the Pen Tool (P), make a shape on a new layer like the one in the below image. Then go to Window Menu > Swatches > ( from the swatches drop down ) > Open Swatch Library > Gradients > Metals > Silver.

 

Step 50

Angle :    0 degree.

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

Stop settings and colors are as follows.

  • C = 0, M = 0, Y = 0, K = 20.1 Location at 0 %.
  • C = 0, M = 0, Y = 0, K = 0 Location at 15.93% , this is the second white one.
  • C = 0, M = 0, Y = 0, K = 48 Location at 24.72 %.
  • C = 0, M = 0, Y = 0, K = 80 Location at 64.61 %.
  • C = 0, M = 0, Y = 0, K = 60 Location at 74.16 %.
  • C = 0, M = 0, Y = 0, K = 0 Location at 88.2 %.
  • C = 0, M = 0, Y = 0, K = 36 Location at 100 %.

Please have a look at the below image.