Advertisement

Create a Retro Electronic Safe Lock Interface

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

Photoshop can be used to create interfaces for all sorts of applications in addition to websites. In today’s premium tutorial we will demonstrate how to create a retro style electronic safe lock interface using both Photoshop and Illustrator. Let's get started!

Tutorial Assets

The following assets were used during the production of this tutorial.


Step 1

Open the Metal Texture image provided with this tutorial’s download files in Adobe Photoshop. Press "Command/Ctrl + A" to select all. Go to the menu and click "Edit > Define Pattern." Name your pattern "metalBg" and click OK. Close the Metal Texture image. Create a new 768 (width) x 1024 (height) file. Press "U" to select the Rectangle Tool.

Create a rectangle shape with the same size as your document. Rename your rectangle shape to "Background" and double click on it to add the following Gradient Overlay and Pattern Overlay. Note that in the Pattern Overlay style we selected the "metalBg" pattern that we created before. Create a new Levels adjustment layer by pressing the "Create new fill or adjustment layer" at the bottom of the Layers window. Enter the values of the following image. Make a group out of your "Background" and your Levels layers. Rename the group to "Bg."



Step 2

With Adobe Photoshop, open the Leather Texture image provided with this tutorial. Press "Command/Ctrl + A" to select all. Go to the menu and click "Edit > Define Pattern." Name your pattern "leatherBg" and click OK. Close the Leather Texture image. Create a shape like the one shown in the following image. Rename the shape to Leather. Double click it to add a Drop Shadow, Bevel and Emboss and Pattern Overlay styles with the values of the following image. Note that in the Pattern Overlay style we selected the "leatherBg" pattern that we created before.



Step 3

Open Adobe Illustrator. Select the pen tool and create a shape like the one shown in the following image. Rename the shape to "Knob." Go to the menu and press Effect > 3D > Revolve and enter the values of the next image.



Step 4

Duplicate the Knob shape. Rename the duplicated to "Knob 2."Press Shift + F6 to open the Appearance window if it is not open. With the Knob 2 shape selected, click the 3D Revolve link in the Appearance window. Change the values to the ones in the following image.



Step 5

I found out when making this tutorial that the radial blur in Photoshop is not completely round, so we have to go through some extra steps here. Copy and paste Knob2 from Illustrator to Photoshop as a smart object. Position and resize it to match the following image. Rasterize the Vector smart object layer. Now select each circle of the knob with the circular mask tool, and press Command/Ctrl+ J to create a new layer from the selection. I painted the section different colors just for illustration purposes. You should end up with a layers window similar to the one shown in the following image.



Step 6

Select each part of the knob, and in the menu, go to Filter > Noise > Add Noise. Enter the values of the following image.



Step 7

Command/Ctrl + Click on the thumbnail of one of the parts to make a selection out of it. Apply a radial blur by going to Filter > Blur > Radial Blur. Enter the values of the following image. Repeat this step for the other three parts of the knob. You can press Command/Ctrl + F to apply the last filter you used.



Step 8

Merge the four layers by selecting them and pressing Command/Ctrl+ E. Rename the resulting layer to "knob."
You should end up with something like this.



Step 9

Go back to Illustrator, copy your Knob shape (the darker one) and paste it into your Photoshop file as a smart object. Resize it to match your "knob" layer. Command/Ctrl + click over the thumbnail of your Vector Smart Object layer to make a selection out of it. Click the "Create new fill or Adjustment Layer > Levels" button at the bottom of the layers window to add a Levels Adjustment Layer. Enter the values of the next image.



Step 10

Merge the "Level 2" layer and the "Vector Smart Object" layer. Change the blend mode of the resulting layer to Lighter Color and the Fill to 16%.



Step 11

Select the layer "knob" and "Levels 2" and press Command/Ctrl + E to merge the two layers. Duplicate the resulting layer and merge them again. Rename the layer to "knob" again. Duplicate the "knob" layer again and place the duplicated layer under "knob." Rename the duplicated layer to "Big Shadow". Add a Drop Shadow Style to the "Big Shadow" layer, following by the next image.



Step 12

Double click the "knob" layer to add a Bevel and Emboss style. Enter the values of the next image.



Step 13

Let's now create the numbers on the Knob.
Go back to Illustrator. Create a "ruler" like the one shown at the top of the following image.

For the numbers I used the Chunk Five Font. Open the Symbols window (Window > Symbols). Drag the ruler you just created to the Symbols window to create a symbol out of it. Now go to your Layers window and duplicate one of the knob shapes you already had. Rename the resulting layer to "Knob Numbers". Select the "Knob Numbers" shape and open the Appearance window (Shift + F6). Click the 3D Revolve link in the Appearance window. In the 3D Revolve Options window, click the "Map Art." button. In the Map Art window select surface 5 of 10. Select the symbol with the ruler you created before and click the "Scale to Fit" button. Make sure to check the Invisible Geometry box. Click OK and you should end up with something like the knob shown in the following image.



Step 14

Now let's create the lines on the knob. It's the same process as the one in the previous step. Create a sequence of white and black lines like the one shown at the top of the following image. Open the Symbols window (Window > Symbols). Drag the sequence of white and black lines you just created to the Symbols window to create a symbol out of it. Now go to your Layers window and duplicate one of the knob shapes you already had. Rename the resulting layer to "Knob Lines". Select the "Knob Lines" shape and open the Appearance window (Shift + F6). Click the 3D Revolve link in the Appearance window. In the 3D Revolve Options window, click the "Map Art" button. In the Map Art window select surface 6 of 10. Select the symbol with the sequence of lines you created before and click the "Scale to Fit" button. Make sure to check the Invisible Geometry box. Click OK and you should end up with something like the knob shown in the following image.



Step 15

Copy the "Knob Numbers" shape you created in Illustrator, and paste it into Photoshop as a smart object. Resize it as seen in the image below. Rename the smart object to "knobNumbers". Apply a Bebel and Emboss, and a Color Overlay style. Enter the values of the following image.



Step 16

Now mask the part of the "knobNumbers" that should be hidden. To do that, select the "knobNumbers" layer, press Command/Ctrl + G to make a group. Rename the group to "numbersGroup." With the circle mask tool, create a selection of the circle as shown in the next image. Everything outside of that circle will be hidden. With the "numbersGroup" group selected, press the "Add layer mask" button at the bottom of the layers window.



Step 17

Now, copy the "Knob Lines" shape from Illustrator into Photoshop as a smart object. Resize and place it in the right position. Change its blending mode to Multiply, and the fill to 8%. Rename the smart object to "lines".



Step 18

For this tutorial I also created a stamp in Illustrator. You can use the one I created, which is provided with this tutorial, or you can create your own. Copy the stamp from Illustrator to Photoshop as a Shape layer and rename it to "stamp." Apply a Bevel and Emboss style with the values of the following image. I rotated the stamp a little bit to make it look more natural.



Step 19

Duplicate the knob layer and move the duplicated one over all the other layers. Double click it to add a Gradient Overlay with the values of the next image. Change its Fill to 0%. Rename the layer to "shine."



Step 20

Now we will add some texture to the knob. Duplicate the "shine" layer and rename the duplicated layer to "texture." Remove the previous styles, and add a Pattern Overlay Style. Use the same scratched metal pattern we used at the beginning on the background. Now the knob is beginning to look more real but is still a little bit flat.



Step 21

Let's darken the outer ring of the knob. Make a selection of the outer ring. Press the "Create new fill or adjustment layer" button at the bottom of the Layers window and select Gradient Map.
Enter the values shown in the following image.



Step 22

With the mask tool make the selection shown in the following image.



Step 23

Now Press the "Create new fill or adjustment layer" button at the bottom of the Layers window and select "Hue/Saturation. Enter the values of the following image on the Adjustment window and change the blending of the layer to Multiply. Double click the adjustment layer to add an Inner Shadow with the settings of the following image.

With the adjustment layer selected press Command/Ctrl+ G to make a group with the layer inside. Rename the group to "mainKnobShadow." With "mainKnobShadow" selected press the "Add layer mask" button at the bottom of the layers window. With the layer mask of "mainKnobShadow" group selected, select the Gradient Tool and make a linear vertical gradient with white on the bottom and black on top.



Step 24

To remove a little of the sharpness of the shadow, select the mask of the adjustment layer that is inside the "mainKnobShadow" group. Go to the menu and select Filter > Blur > Gaussian Blur . Enter the values of the following image and click OK.



Step 25

With the Ellipse Tool create a circle like the one in the following image. The color does not matter.



Step 26

Rename the shape to "innerCircle". With the "innerCircle" layer selected press Command/Ctrl+ G to make a group. Rename the group to "highlight."

Change the Fill of the "innerCircle" to 0%. Double click it to add an Inner Shadow and an Outer Glow style to the "innerCircle" layer. Enter the values of the following image. Select the "highlight" group and press the "Add layer mask" button at the bottom of the layers window. Make sure the layer mask you just created is selected, and with the gradient tool create a vertical gradient with white at the top and black at the bottom.



Step 27

Command/Ctrl + Click on the vector mask thumbnail of the "innerCircle" layer to make a selection of the lighter part of the knob. Now Press the "Create new fill or adjustment layer" button at the bottom of the Layers window and select "Levels". Enter the values of the following image in the adjustment window. Press the shift key to select all the layers of the knob and press Command/Ctrl+ G to make a group out of them. Rename the group to "KNOB".



Step 28

Now lets fix the pixelated border at the bottom. Create a circle shape layer that is exactly the size of the lighter part of the knob on top of all the other knob layers, inside the "KNOB" group. Rename the shape layer to "fix". Add a Drop Shadow style and enter the values of the following image. Change the Fill to 0%.



Step 29

With the pen tool create a small triangle at the top of the knob, over the "fix" layer. Change the blending mode to Overlay and the Fill to 50%. Rename the layer to "triangle."



Step 30

Let's now create the keypad. We will create one button, repeat it, and then add some texture and light. Create a Rounded rectangle shape, with a corner radius of 3 px. Add a Drop Shadow and Bevel and Emboss style. Enter the values of the following image. Rename the shape layer to "a". With the "a" layer selected, press Command/Ctrl+ G to make a group. Rename the group to "1."



Step 31

Duplicate the "a" layer and rename the duplicated shape layer to "b". Add the following Drop Shadow, Inner Shadow, Bevel and Emboss, and Color Overlay styles to the "b" layer shape.



Step 32

With the rectangle shape tool create a rectangle a little bit smaller then the rounded rectangle. Move it a few pixels to the top and add a Drop Shadow style with the values of the following image. Rename the rectangle to "c".



Step 33

Duplicate the "c" shape layer and rename the duplicated layer to "d". Change its color to 5f5f5f. Add the following styles: Drop Shadow, Inner Shadow, Inner Glow, Bevel and Emboss, and Gradient Overlay. Enter the values of the following image.



Step 34

Create a circle shape centered inside the smaller rectangle. Rename the circle to "e." Follow the next image to add a Drop Shadow, Outer Glow, Inner Glow, and Gradient Overlay. Make sure the Fill is set to 0%.



Step 35

Duplicate the "d" shape layer, place the duplicated layer on top of the "e" layer and rename it to "f." Add an Inner Shadow and a Gradient Overlay style. Enter the values of the following image. Make sure that the Fill of the layer is set to 0%.



Step 36

Select the text tool and write the number 1 over the "f" layer; double click it to add a Bevel and Emboss, and a Color Overlay style as shown in the following image. Change the Fill to 0%. And we have finished the first key.



Step 37

You're right, we don't have to do all those steps to make the other keys. Lets duplicate the "1" folder, rename the folders and change the texts. Select all the number groups and press Command/Ctrl + G to make a group out of them. Rename it to "Keypad."



Step 38

Let's now add some texture to the keys. Select the "Keypad" group and drag it to the "Create new layer" button at the bottom of the layers window to duplicate it. Press Command/Ctrl+ E to merge the duplicated group. Rename the resulting layer to "texture" and place it inside the "Keypad" group on top of all the other layers. Apply a Pattern Overlay style following by the image below.



Step 39

Let's begin with the display. Create a rounded black rectangle with a corner radius of 3 px. Rename it to "displayBg". Apply the following Drop Shadow, Outer Glow and Bevel and Emboss. Enter the values of the following image.



Step 40

Create a folder over the "displayBg" layer and name it "OPEN Group." The name of the font we will be using in the display is Digital Dream Narrow. Select the text tool. Make sure your text is aligned to the left, and write 888888 with size a of 25 px and color 1e1e1e. Set the blend mode to Luminosity. Duplicate the layer and change the 8s to Xs. Duplicate the "XXXXXX" layer and write "OPEN." Change the color of the text to 73854d. Set the blend mode to Normal. Add an Outer Glow and Inner Glow style to the "OPEN" layer with the values of the following image.



Step 41

Duplicate the "OPEN Group" group. Move the new group to the right and rename it to "CLOSED Group". Open the "CLOSED Group" and change the "OPEN" text to "CLOSED." Hide the "OPEN" text inside the "OPEN Group."



Step 42

Duplicate the "CLOSED Group" group. Move the new group to the top and rename it to "Numbers." Change the size of the three texts to 46 px. Add four more Xs to the "XXXXXX" layer. Add four more 8s to the "888888" layer. Change the "CLOSED" text to any number.



Step 43

Duplicate the "displayBg" layer. Rename the duplicated layer to "green" and double click it to add a Gradient Overlay style. Enter the values of the following image. With the "green" layer selected press Command/Ctrl + G to make a group. Rename the group to " Green Group." With the " Green Group" selected press the "Add Layer Mask" button at the bottom of the layers window. Create a linear diagonal gradient on the layer mask of the " Green Group", white on top - right and black on bottom - left.



Step 44

Duplicate the "Green" layer. Rename the duplicated layer to "Bevel" and move it over the "Numbers" group. Delete the previous styles of the layer. Apply the Inner Shadow, Inner Glow, Bevel and Emboss, and Color Overlay styles shown in the following image. And we have finished with the display.



Step 45

We will now make the lights. Let's start by making a Group named "ledGreen" over the "Display" group. Make another group named "metalRing" inside the "ledGreen" group. Create a circular shape layer inside the "metalRing" group and add the Drop Shadow and Gradient Overlay styles as shown in the following image.



Step 46

Duplicate the layer inside the "metalRing" group. Remove its previous styles and apply the Gradient Overlay style shown in the following image.



Step 47

Now make a new group named "light" over the "metalRing" group. Inside the "light" group create a circular shape smaller than the metal ring. Add an Inner Shadow, Inner Glow, Color Overlay, Gradient Overlay and Stroke styles following the image bellow. Rename the shape layer to "gradient."



Step 48

Let's now create a pattern for the glass of the light. Create a 4 by 4 px document with a white background. Paint the 4 top - left pixels and the 4 bottom right pixels with black, like a checkers board. Go to the menu and press "Edit / Define pattern," give a name to the pattern and press OK . You can now close this document; you don't need to save it.



Step 49

Go back to your safe box interface document. Duplicate your "gradient" layer and rename the duplicated layer to "light". Add an Inner Shadow, Color Overlay, Gradient Overlay, and Pattern Overlay style as shown in the following image.



Step 50

Duplicate the "ledGreen" group. Move it to the right and rename it to "ledRed".
Open the "light" that is inside the "ledRed" group, and hide the "light" shape layer for a moment.

Remove all the styles of the "gradient" shape layer except the Inner Shadow and the Gradient Overlay. To remove the styles just drag them to the trashcan at the bottom of the Layers window. Double click over the Gradient Overlay and drag the Opacity slider to 100%.



Step 51

Reveal the "light" shape layer again, and remove the Color Overlay style. Double click it and add a Drop Shadow and an Outer Glow style. Enter the values of the following image. We have now finished with the lights.



Step 52

And lastly, we will make a speaker so that your safe box can make a weird sound if you enter the wrong code :-). Open the meshPattern. jpg image privided with this tutorial. Go to the menu and click Edit > Define Pattern. Close the meshPattern.jpg and go back to your interface.



Step 53

Make a circle shape at the right side of the red light, and apply the following styles following the image below. Drop Shadow, InnerShadow, Outer Glow, Inner Glow, Bevel and Emboss, and Pattern Overlay. Rename the layer to "Speaker".
Move the "Speaker" under the "ledRed" group.



Final Image


Advertisement