Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Turn Up the Volume With a Moody PSD Interface

by
Languages:

Let's build ourselves a moody UI Element. We'll use Photoshop to explore subtle textures and pull together a great-looking volume dial. Let's go!


Step 1: The Background

Open a new RGB document 800x600px in size, and 72dpi resolution.

Volume Control UI Design

Select a moody dark blue color for the background (in this case the color code is #1b1c20) and then use the paint bucket tool to fill the background.

Volume Control UI Design

Apply some noise to the background, to give it a soft texture (1% Gaussian noise and monochromatic).

Volume Control UI Design

Now check the source download - you'll find a pattern file in there which you'll have to double-click to install in Photoshop. Apply the pattern to a new layer, and fill the whole layer with the pattern.

Volume Control UI Design

Turn the pattern overlay opacity to 15-20% depending on your liking, to end up with something like this:

Volume Control UI Design

Step 2: The Button Base

Make a new group with the name "button" and add a circle shape (do this by selecting the elliptical shape tool and holding down shift to make it perfectly circular). Give it a vivid color so you can see the layer clearly further down the line...

Volume Control UI Design

Change the fill opacity of the layer down to 0% and apply a drop shadow with the following properties:

Volume Control UI Design

Then apply a slight inner shadow to make it look indented.

Volume Control UI Design

After that apply an inner glow to make the base look full.

Volume Control UI Design

Step 3: The Button

For the next step, make another circle and give it a white color, this will be our UI element's basic shape, and it will serve for a couple more detail layers, so make a size you are really happy with! Name it "button_base" or something similar.

Volume Control UI Design

Apply an angled gradient overlay to it, start with white and add two stops of a light gray color. Use the two white stops in the middle to play with the sharpness of the button, and as you work keep previewing the element to see how it looks.

Volume Control UI Design

Apply a bevel and emboss to the base, to make it look a bit 3d-ish.

Volume Control UI Design

Step 4: The Detailing

Now for the detailing. Make a copy of the base layer, and put it under the button base. Now turn the fill to 0% to see only the filters you apply to that layer, and not the content. Create a drop shadow with the following settings:

Volume Control UI Design

In order to make the button pop out a bit more, copy the button base again, placing it under the button base and above the shading. Give it a dark color overlay to make it look awesome.

Volume Control UI Design

Now make another copy of the button base layer, but transform it to a bigger size. Put it on top of the button base layer, and rasterize it!

Volume Control UI Design

With that done, go to the filters panel and give it a maximum noise filter (so you think you are looking at a broken TV).

Volume Control UI Design

Then, apply a Radial Blur filter, and set it to the maximum value to get a nice effect.

Volume Control UI Design

You should turn down the opacity of this layer to around 20-40%, and then center the middle with the button. When you have it in the center, select the button layer and go to select > inverse. Then select the scratching layer and press delete. You should be left with a nice scratched effect on the button.

Volume Control UI Design

Step 5: The Story so Far

To check we are doing everything ok, you should have something similar to this:

Volume Control UI Design

Step 6: The Notch

Make a small circle for the notch (or indicator) on the button.

Volume Control UI Design

Give it a white drop shadow to give it an embossed appearance.

Volume Control UI Design

Give the notch a small inner shadow.

Volume Control UI Design

And finally bring it to life with a color of your choosing.

Volume Control UI Design

Step 6: Milestone

You should have something like this:

Volume Control UI Design

Step 1: The Dial Labels

Now let's get stuck into the final little details! Make a little rectangle for the notches in the base of the button.

Volume Control UI Design

Turn the fill down to 0% again, and give it a white drop shadow.

Volume Control UI Design

It needs a bit of shading on the inside too, so give it a tiny inner shadow.

Volume Control UI Design

Now copy and flip it to the other side.

Volume Control UI Design

Step 7: Text

Put your textual content in there, using a font of your choice (I opted for Myriad Pro).

Volume Control UI Design

Apply a drop shadow to the text, to make it look indented.

Volume Control UI Design

Then apply a slight inner shadow.

Volume Control UI Design

Step 8: Milestone

This should be what you are seeing in your file:

Volume Control UI Design

And this is our final UI element, a simple volume dial for pumping up the music!

Volume Control UI Design

Conclusion

I hope you liked this tutorial, it will be the first of many, so feel free to follow me on twitter or subscribe to my site's newsletter. Happy designing and stay cool!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.