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
Now go ahead and duplicate this LIGHT text by pressing and holding down the Alt key on the keyboard, and dragging it to a new location, use transform and rotate to change this duplicated text to DATE/TM. Then select both the text LIGHT AND DATE/TM by the selection tool (V), duplicate them and go to Object Menu > Transform > Reflect > Vertical again, go to go to Object Menu > Transform > Reflect > Horizontal. Edit the text and change them to "TIMER" and "LOCATION".
Type all these text one one single layer.
After we have done the text part, we have to make the weather display design. Use the Pen Tool (P), and make a Cloud shape, like the shape below. Then go to Window Menu > Graphic Styles > ( from the graphic style drop down ) > Open Graphic Style Library > Neon Effects > Thin Aqua Neon.
Fill the cloud color from the color pallet, Color code is # 69CCE8
Make a small circle with the Ellipse Tool (E) for the Sun behind the cloud, go to Window Menu > Graphic Styles > ( from the graphic style drop down ) > Open Graphic Style Library > Neon Effects > Thin Yellow Neon.
Fill the Sun color from the color pallet, Color code is # FFD85A
Duplicate the Cloud with the Alt key on the keyboard by dragging it to a new location, and Window Menu > Graphic Styles > ( from the graphic style drop down ) > Open Graphic Style Library > Neon Effects > Thin Green Neon.
In the Transparency panel, change the blending mode to "Multiply".
With the Pen Tool (P), make lighting shapes like the shape below. Make one and duplicate the other two, place them above the new Cloud.
Fill the Lightning color from the color pallet, Color code is # B2E1EC
Change the opacity of the lighting layer to 65%.
For the center Sun is simple, just make a small circle with the help of Ellipse Tool (E), and use the pen too to make the rays. Duplicate the rays, transform and align them. Select the sun and it rays then go to Window Menu > Graphic Styles > ( from the graphic style drop down ) > Open Graphic Style Library > Neon Effects > Thin Green Neon.
Change the blending Mode to "Multiply".