SEARCH
 
Join our free newsletter for useful tips and valuable resources in web design industry.
It doesn't look like an e-mail address
  Tutorials Vector Graphics Adobe Illustrator 3D Blue LCD Alarm Clock

3D Blue LCD Alarm Clock

1. Start out by drawing a rounded rectangle (which I'll be calling the clock base):

image 1

2. Duplicate the clock base and paste the duplicated object on top of the original (press 'ctrl+c' to copy then 'ctrl+f' to "paste in front") and reduce the size. Add a medium blue to light blue 90 degree linear gradient using the colors shown. This new object will be called the clock face.

image 2

3. Add some text. Whatever floats your boat. I chose RationalInteger, 48pt. You can download this font for free here: 1001 Fonts.

image 3

4. Now draw an ellipse with the ellipse tool like the one below. The idea is to get the ellipse to intersect the lower left and upper right corners of the clock face.

image 4

5. Duplicate the clock face and move the duplicated clock face to the top of all objects (this is done by dragging it in the Layers window). Now select both the duplicated object and the ellipse. To select multiple objects, either shift click both objects, or shift click the circles next to each object in the Layers window.

image 5

6. With both objects selected, open the pathfinder window (under 'windows > pathfinder') and 'ctrl+click' on the 'Minus Back' pathfinder. Holding control will create a new object that is a combination of the two previous objects.

image 6

This resulting object will be used to make gloss. Fill it with a black to white linear gradient, using the gradient tool as shown:

image 7

7. Change the transparency mode to 'screen.' Screen is very useful for glossy effects. Experiment with it a little if you never have before. See how changing the direction and size of the gradient affects the object. Or don't.

image 8

8. Now select your text and go to 'Type > Create Outlines.' This will turn your text in to paths which makes it easier to modify.

image 9

9. Select all objects with the 'selection tool' (just drag it around all objects), then use the 'free transform tool' to add some perspective. Grab the lower left corner, hold 'ctrl+shift', and drag the corner point down a little bit. Control lets you skew the object, while shift constrains so you can't move it all over the place (in this case, you just want to move it straight down). See the image for how far I dragged it down:

image 10

10. Duplicate the original clock base, send it below all other objects, and move it to the left. The quickest way to do this is to select it, copy it, then press 'ctrl+b' to "paste in back." Then use the arrow keys to move it left. Fill the duplicated clock base with #5C5D5E.

image 11

11. Make the duplicated clock base a little smaller.

image 12

12. Select the old clock base and the duplicated clock base. Now you will blend the 2 objects together, giving the 3D look. First, go to 'Object > Blend > Blend Options' Make sure 'Smooth Color' is selected.

image 13

13. With the objects still selected, go to 'Object > Blend > Make' (or hit 'alt+ctrl+b').

image 14

14. Just a couple of finishing touches left. First, click the arrow next to the 'blend' object in the Layers window. This should show the 2 objects that make up the blend: the orginal clock base and the duplicated clock base. Select the original clock base, and "copy" ('ctrl+c') then "paste in front" ('ctrl+f'). Give the new object a black to white gradient. Use the gradient tool if you need to make adjustments. In mine, it's just the default gradient.

image 15

15. As a final touch, to give the front of the clock a little bevel, select the gloss object and move it just one pixel right and one pixel down.

image 16

16. And you have yourself a clock. Just for an idea of what to do with it, here is a little scene I threw together in Photoshop:

3D Blue LCD Alarm Clock

   

ABOUT THE AUTHOR

SlickTutorials offers clear and detailed tutorials for Photoshop and Illustrator.

subscribe to newsletter