Making of a clock icon in Sophistique style

Nearly every human being has perceived that time flows cyclically. Day and night, childhood and old age, joy and sorrow, life and death (of course you already know!) everything seems to repeat endlessly. Well, here it is a clock made in Sophistique style. It looks very clean and calm and if you can get a copy of any version of Adobe Flash (former macromedia Flash versions will work too) you may find its unique beauty through repeating shapes again and again. From flat circles you’ll be creating an object with volume and good style. 1. Press O (Oval Tool), and drag your mouse while holding Shift and Alt pressed to draw a circle from its center. Click the circle to select it. 2. Press K (Paint Bucket), then Shift+F9 to bring up the Color Panel. Select the circle you just created and select radial gradient on the Colors Panel. The exact hexadecimal color codes used in here are: ACACAC – E1E1E1 – F5F5F5 – DDDDDD. 3. Duplicate the circle: Ctrl +C (Copy), Shift+Crtl+V (Paste in Place). Do not deselect the circle or it will erase the first one, but immediately press Q (Free Transform Tool, while holding Shift + Alt), rescale it to a smaller size AND edit the gradient handles to make a new fill. Color values now go from CCCCCC to F6F7F7 4. Now duplicate again, resize to a smaller dimension and change the gradient values. In this example I made the circle in another layer, just to avoid too much confusion. Color values are: B0B5B5 – 9FA5A8 - E0E4E7 – C7C9C9. Note that Alpha for each slider has been reduced to 20%. 5. Repeat step no. 4 some 3 times, each time adding 20% of alpha until reach 80% opacity. 6. Ctrl+A to select all and Crtl+G to group. This is the first part. Now let’s make the face of the clock. 7. The following procedures are pretty much the same as the previous ones. Copy - Paste in Place the last circle we made and change gradient to the one shown in the picture. Color codes for this are: 62676B – 8B9096 – BCC5CA – 878C8F. 8. Copy – Paste in Place again this circle. Now apply a new gradient as shown. Color are in between FFFFFF and A2A6A6 9. Once again, Copy, Paste in Place last circle. This is going to be the face of your clock. See the gradient, its values are from F3FDFE to 71A3BE. 10. Now, the hands of the clock. In case you want to follow the original shape, press R (Rectangle Primitive Tool) and draw a small square. Press V (Selection Tool) and adjust corners handles to make it a bit round. Now press Ctrl+B (Modify – Break Apart), press Q (Free Transform Tool) and rotate it 45º. Press A (Subselection Tool) and do a teak as shown in the picture. To add the bevel: select the bullet shape, press S (Ink Bottle Tool) and apply a convenient stroke. You can modify the stroke at the Properties Panel (Crtl+F2). Select then both stroke and shape, go to Modify – Shape – Convert Lines to Fills). Select the inner fill and Group (Ctrl-G). Select the stroke (now converted to a shape) change gradient and Group. This way we will make the numbers later, on step 12. 11. To make the minute hand, simply Paste in Place the hour hand, make it a bit taller , move the reference point to the bottom and rotate as desired. 12. Use the rectangle Primitive Tool to draw the second hand. Here use the same procedures as with the hour hand. 13. Applying a stroke bold enough to a rectangle you can create the set of numbers pretty quick and easy. Flash makes easy to select and to work with portions of the frame. Use again the “stroke back” technique to get the final look. For darkest gradient the color values are: 46494A and BCC5CA. The white gradient only changes color opacity in one handle. 14. Repeating circles or using a stroke you can draw the hour marks. In this gradient the last color is almost white and 30% opacity. If you’re doing such a detailed clock, the gray values are: 969897 - C0C2C2 - D3D6D6 - F5F5F5. - Group every object as done with the hands and numbers. We will prepare the final details to give more spatiality to this clock. 15. Here’s a big bright zone to work as a shine, which is another circle in top of all others. The gradient is completely white but the opacity changes from 100% to 0%. 16. Several concentric circles, with different opacity percentages make the shadow of the clock in the background. Basically this is the same done in step 4. Finally the clock is completed. Changing gradients would be a quick way to get new interesting variations of this theme. Don’t you think so?

Time is an illusion. Lunchtime doubly so.

Douglas Adams