Design a slot machine style number rotator in Photoshop

In this tutorial we’re going to be using Adobe Photoshop to create a slot machine style number rotator which you will be able to develop into a working user element for web or mobile.

Step 1

Open up Photoshop and create a new document. My document size measured 640 by 300 pixels. Select the Rectangle Tool and create a shape measuring 60 (height) by 40 (width) pixels. Duplicate the shape three times and position the shapes next to each other with a gap of exactly 3 pixels.

Step 2

Right-click on your original shape layer and select Blending Options. Select the Gradient Overlay tab and increase the opacity to 100%. Select reflected from the style drop-down menu, and change the angle of your gradient to 90 degrees. Click on your gradient editor/bar and pick a medium grey to a very dark grey (almost black).

Step 3

Now select the Stroke tab from the Layer Style window. Change the size of the stroke to 2 pixels, and the opacity to 100%. Select gradient from the stroke fill type, and apply a light/medium to dark grey (almost black) gradient. Make sure your light/medium grey is a little lighter than the grey we used in our main gradient. Click OK.

Step 4

With your layer styles now applied, right-click on your first shape layer and select the Copy Layer Style option.

Step 5

Select all of your shape layers at the same time (you can do this whilst clicking on the top one, holding down the Shift-key and then clicking on the bottom one). Right-click and select the Paste Layer Style option. This will apply the same styles we have just created (the gradient overlay and gradient filled stroke) to all of your shapes.

Step 6

Select the Type Tool and draw a text box over your first shape. Make sure it is well aligned to your shape, and then select the Text Align Centre option from your overhead task bar. Type a number, duplicate your type layer and reposition it over your second shape. Repeat this two more times until you have a number over each of your shapes.

Step 7

Right-click on your first type layer and select Blending Options to open up the Layer Styles window. Select the Gradient Overlay tab and use the same settings we used in our shapes gradient overlay (100%, reflected style at 90 degrees). Use white to very light grey.

Step 8

Now click on the Drop Shadow tab. We’re going to create a sharp (no blur) shadow for our type. Keep the standard multiply blend mode option applied set to 75% black. Change the angle to 135 degrees, the distance to 2px and everything else to 0px. Click the OK button to apply your style to the first letter.

Step 9

Copy the layer style for your first type layer in the same way we did previously with the shape layers. Now select all of your type layers, right-click and select Paste Layer Style to apply the same styles to all of your numbers. I change my numbers from ’0000′ to ’0752′ at this point in time.

Step 10

Select the Rectangle Tool and draw a shape like the red one below. My shape is 172px wide and 66px high. If you used the same measurements as me for your original shapes this size will work for you, too.

Step 11

Change your red layer to black. This shape is going to act as the backdrop for our rotating number wheel.

Step 12

Fill in your main white background layer with a dark grey. I used #333333. Go to Filter > Noise > Add Noise and change the amount of noise to 2% with the uniform and monochromatic options checked. Hit the OK button.

Step 13

Choose the Brush Tool and select a small soft (faded) brush. Select a pure white colour and draw a straight line (hold the Shift-key whilst painting to keep your line straight) on a new layer above your background layer but below all of your other layers, as seen below. Select the Rectangular Marquee Tool and make a selection similar to the one seen below, selecting the left and right sides of the brush stroke we just created that are overlapping the wheels backdrop shape.

Step 14

Select the Move Tool and using the Cursor-keys, nudge your brush layer up a few pixels so it looks similar to below.

Step 15

I increased the contrast and decreased the brightness of my overall design a little before finally getting to this final image.