Today we will learn how to create vintage looking radio buttons, like the ones you could find on very old radios. This tutorial is easy and short while still results in quite realistic looking buttons that could be used for your GUI design, your website or whatever you would think suitable.
Technically, we will start constructing a button with a base layer that has a few layer styles that define its color, add a few 3D effects and create a shadow for it. We will move on to work on a few additional layers that will add some of the effects that make the button look more shiny and real. After one button is created we will just duplicate it as required. We will finish the tutorial by altering one of the buttons to give it a “pushed” look.
After you got the buttons ready, you could easily experiment with the file – change colors, add some more effects you find suitable and generally take it to whatever place best suits your needs.
Hope you will find this tutorial useful!
Step 1: Creating New File
Create a new file sized 525 x 117 px with a resolution of 72 ppi and a white background.
Color the Background layer with #646464.
Step 2: Creating Button Base
We will begin by creating the base for one button.
We’ll create a Rounded rectangle and add a few layer styles to it for shadows, color and a simple 3D look. Then we’ll move on to add a simple black rectangle beneath it to serve as the depression hole the button “sits” in.
Use the Rounded rectangle tool, with a Radius set to 7 px, to create a 88 x 28 px rectangle.
Name the Shape layer BG.
Tip: it is recommended to create the paths when zoom is 100% so the paths will correspond to the file’s pixel grid.
In the Layers window, double-click on BG layer to open the Layer Style window.
Choose Color Overlay and set the color to #d2bc99 (RGB – 210, 188,153), as seen below.
This will color the Base with the desired “old and yellowish” color.
Don’t hit OK quite yet, we still need to add a few more Layer styles.
Move on to choose Bevel and Emboss and set the following settings – Reduce the Highlight Mode’s Opacity to 0% and Shadow Mode’s Opacity to 48%.
This style will contribute to the 3D look of the button.
Choose Inner Shadow and set it as shown in the image below – Set Opacity to 60%, Distance to 0 px and Size to 24 px.
This will also contribute to the button’s 3D feel.
Now we’ll move on to the last Layer Style.
Choose Drop Shadow and set the following parameters – Opacity to 42%, Angle to 90 degrees and Distance to 8 px.
This will create the shadow that the button drops.
Hit OK to implement the 4 layer styles you defined.
Under layer BG create a new layer and name it Hole.
Use the Rectangular Marquee Tool to create a 92 x 33 px rectangle.
Fill the selection with Black (#000000) and position it as shown in the following image.
The following image is presented in a 200% zoom.
Step 3: Creating Bright Shines
We’ll now add a few bright shines to the button. This will make it look as if it’s created from a shiny plastic material, just like in old buttons of this sort. It will also add to its 3 dimensional feel.
Create a new layer above layer BG, set its opacity to 70% and name it TopShine.
Use the Reflected Gradient Tool, set to White to Transparent, as shown in the next image (notice the small red arrow on the image that shows how the gradient was dragged).
The following image is presented in a 400% zoom.
Duplicate layer TopShine and name it BottomShine.
Move the layer 21 px down and set its opacity to 20%.
Your file should look like the image below.
Duplicate layer BottomShine and name the duplication LeftShine.
Set its opacity to 50%.
Go to Edit -> Transform -> Rotate 90 Deg CW (Counter Clock Wise will do just as well).
Move the layer to the left and position it as shown in the next image.
The following image is presented in a 300% zoom.
Duplicate layer LeftShine, set its opacity to 30% and name it RightShine.
Move the layer 81 px to the right.
Your file should look like this.
We finished creating our 4 bright shines. We now only need to clip them to achieve the desired look we need for the button.
Shift-Click to multi-select the 4 shines layers we created.
Click Ctrl+G to group the 4 layers together and name the new group BrightShines.
In the Layers Window, Ctrl+Click the vector mask thumbnail of layer BG (see where the cursor is positioned in the next image – that is the vector mask thumbnail) to make a selection from it.
Go to Select -> Modify -> Contract, set Contract By to 2 px and hit OK.
At the bottom of Layers Window click Add Layer Mask (make sure group BrightShines is activated while you do this).
The shines are now clipped. We’ll now smooth the clipping borders by blurring the mask.
While the newly created mask is still activated go to Fiter -> Blur -> Gaussian Blur, set the Radius to 0.5 px and hit OK.
Step 4: Adding Specular Shines
To add to the shiny feel of the button’s material we’ll quickly add 2 specular shines to it.
Create a new layer above the group and name it Specular01.
Use the Radial Gradient Tool, set to White to Transparent and apply as shown in the image below.
The following image is presented in a 300% zoom.
Move the layer and position the Specular Shine as shown below.
The following image is presented in a 200% zoom.
Duplicate layer Specular01 and name it Specular02.
Move it to the right (about 77 px to the right) and position as presented below.
The following image is presented in a 200% zoom.
Step 5: Duplicating the button
We have finished creating one button. We will now continue to duplicate and move the buttons to create a row of buttons, a bit like in an old radio.
Use Shift+Click to multi select all the layers in your file except for Background layer.
Group them together by clicking Ctrl+G and name the new group Button01.
Move the button to the left of the image.
Duplicate the group and name it Button02.
Move it 90 px to the right.
Repeat the steps 3 more times to achieve a 5 button row.
Step 6: Creating a Pushed State for One Button
The last step in this tutorial would be to create a pushed state for one of the buttons (the 4th button in our example).
Expand group Button04 to reveal its layers.
Ctrl+Click the Vector Mask Thumbnail of layer BG in the Layers window. This will create a selection in the desired shape.
Create a Hue/Saturation Adjustment layer at the top of all the layers in the group.
Set Saturation to -25 and Lightness to -25 to make the button darker and grayer.
Expanded under layer BG you can see the 4 Layer Styles connected to it.
Double Click the Drop Shadow layer style to open its setting in a window.
Set the Distance to 4 px.
This will result in a shorter shadow that will make the button seem pushed.
That’s it. We now completed the row of vintage radio buttons. Congratulations!
You can add texts or icons on it as you wish.
In our example I used Arial Black font, size 12, colored with Black (#000000) with an opacity of 70% for the 4 idle buttons. The same font was used for the pushed button with a 80% opacity and I moved it by 1 px down to add to its pushed look.
