3D Blue LCD Alarm Clock – Illustrator Tutorial

A 3D neon blue digital lcd clock created in Illustrator with a final step in Photoshop. This tutorial covers the Illustrator portion. Some skills to learn here are how to create perspective, blending, and adding gloss.

Start out by drawing a rounded rectangle (which I’ll be calling the clock base):
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.
Add some text. Whatever floats your boat. I chose RationalInteger, 48pt. You can download this font for free here: 1001 Fonts.
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.
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.
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.

This resulting object will be used to make gloss. Fill it with a black to white linear gradient, using the gradient tool as shown:
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.
Now select your text and go to ‘Type > Create Outlines.’ This will turn your text in to paths which makes it easier to modify.
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:
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.
Make the duplicated clock base a little smaller.
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.
With the objects still selected, go to ‘Object > Blend > Make’ (or hit ‘alt+ctrl+b’).
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.
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.
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: