Create a Futuristic Music Player Interface in Photoshop

When I first saw the Encide Battlebay, I was astounded at the amazing detail and creativity that was put into each piece. That was the moment I decided to learn how to create futuristic interfaces. It took a lot of trial and error, but I created something worthwhile. This tutorial requires extensive knowledge of shading and lighting, as well as a lot of time. If there’s one thing I learned, it’s that lighting is the most critical aspect of these types of pieces. In today’s tutorial I will show you how to create a futuristic non-functional interface.

Step 1 – Setting up the Workspace

Create a document approximately 1000px by 800px, you can adjust this at any time later. I used a dark gray background.

Step 2 – Orb

On most interfaces, you’ll find beautiful orbs as the centerpieces. I like to create orbs by starting with the elliptical marquee tool and creating a gradient, then filling it with an inner glow to add depth.

Step 3 – Shading

Add some more depth by creating a layer mask (Cmd/Ctrl + Alt + G) and set the layer to Overlay. Now use a 60px soft brush to add some shading to the lower parts of the orb. To create a lighting effect I also used a dark-blue brush and brushed in 3 points of the bottom lower part. The effect is subtle but very important.

Step 4 – Lighting

Now add some lighting. Remember to keep using layer masks. Add three white 60px soft brushes on top of the 3 dark blue spots from the last step. Set them to overlay. Next just add a low-opacity white grunge/spatter brush of your choice for detail.

Step 5 – Orb Ring

Select the original orb. Go to Select > Expand 4px. Now do it again. Select > Expand 8px. You should have the smaller circle on top of the larger one. Now make layer masks and shade both of them in, creating a metallic texture with a 50px soft brush, using only black and white.

Step 6 – Low-Opacity Circles

Go back to the orb and add 1, 2, 3 px circles. They are for gloss and detail.

Step 7 – Highlight

Get a 60px brush and highlight the light parts of the rings, to enhance the lighting effects. Set them to overlay.

Step 8 – Doodad

Great! We’ve finished our super cool orb. Now add whatever doodads you want to it.

Step 9 – Orb Plate

Now it’s time to create the foundations of our interface elements. Create a circle behind the orb. Now make a layer mask and decorate it with whatever lighting effects you desire. Just be sure to use 60px soft brush.

Step 10 – Orb Plate Details

Duplicate the circle you just made and set another layer mask on it. Make this color slightly lighter, and then add a 10px white circle shape on top of it. Then for more lighting create another layer and brush where you want lighting. Set it to overlay. Then add shading to it so it looks like the orb is on top if it.

Step 11 – Orb Plate Base

For more depth, use the technique from the last step to create a more neutral plate.

Step 12 – “Wing” Base

Make a basic shape for our left "wing." Use the pen tool to get as close as possible to the shape below.

Step 13 – Lighting, Shading, Glass

Now use layer masks again to add lighting and shading to the piece. It should be lighter on the top with a bit of highlight on the bottom. Always use soft brushes when you do shading. Then use the pen tool to add two "glass" streaks. Use a soft brush to smooth out the edges.

Step 14 – Indent Lines

Add an indent line in preparation for our side orb. Indent lines are easy, just make a path with the pen tool, stroke it with a 2px white soft brush, move the path to the right 1px (use arrow keys) and stroke it with a 2px black soft brush. Delete the path, then use the transform tool and make the lines skinnier to 1px. This is how I achieve the illusion of .5px indent lines.

Step 15 – Side Orb

Don’t be afraid to do your own experimenting with the side orbs – just make sure they look good.

Step 16 – Top Wing

Now let’s work on enhancing the wing. To give it a more 3D appearance use the pen tool and select a portion of the top. Fill it in with the paint bucket tool and create a layer mask.

Step 17 – Top Wing shading

Now shade the top portion of it to make it appear more 3D.

Step 18 – Bottom Plating

Before we move on to the top make sure to clean up the bottom section of the interface as well. Add another shape similar to the shape of the wing and shade it.

Step 19 – Vents

There are many ways to make vents. In this tutorial I used the pen tool and filled the selected area. Next I used metal brush pack for texture. Use these settings for your vent.

Step 20 – Flames

You can’t have any vents without sick flames. Here I used two effect brushes and combined them.

Step 21 – Duplicate

Great job, now we’re finished with one half. Duplicate it and flip it horizontally. Make sure the wings are Symmetrically spaced.

Step 22 – Crack

First create any random black shape.

Step 23 – Crack

Set the shape to overlay. Add a layer mask and white brush from the inside to look like a light source is leaking out.

Step 24 – Crack Lines

Use the pen tool to create little jagged lines. Stroke it using a 1px black soft brush. Duplicate it, nudge it to the left and add white color overlay to it.

Step 25 – Shards

For this I just added random shapes and put a gradient overlay that matched the color of the glass.

Step 26 – Indent Lines

Let’s add some sophistication. Use the methods mentioned above to create indention lines along your interface.

Step 27 – Playback Buttons

Create the base of our play button, and then add a simple gradient to it.

Step 28 – Playback Buttons Continued

Duplicate the shape, change the gradient to a much darker color, and then add a 1px inner white stroke. Duplicate that shape again and make it slightly smaller. Add a blue gradient to it. Put some brushes and lighting as layer masks. Set them to overlay. Then add a 5% opacity gloss. Finally add the play icon.

Step 29 – Buttons

Now duplicate it twice and make them approximately 20% smaller. Move them to the back to add some depth.

Step 30 – Wiring

Create a wire base by using the pen tool and stroking the path with a 20px hard brush. Copy this shape. Open up a new layer and set it to layer mask. Add lighting to give it a more 3D appearance. Now get the first copy of the wire shape, and overlay it with the color white, set it over the base layer, reducing the opacity to 10%. Using the same “indent” methods above, add the signature lines to the wiring. When you’ve finished with one wire, recreate it 3 more times, placing it behind your buttons to appear as if they’re holding them up.

Step 31 – Drop Shadow

Open a new layer under your interface and brush around with a 40px black soft brush to add depth and separation from the background.

Step 32 – Shading

Now open a new layer. Get a 20px black soft brush and set the layer to overlay. Brush your interface to give it depth. Again, this is where understanding of lighting & perspective comes into play.

Step 33 – Lighting

Much like the step before, use a 20px white soft brush and set it to overlay. Brush the interface to give it depth.

Step 34 – Finishing Touches

Add gradient overlays to give it the desired color compositions, be sure to make them light or low opacity as to not change the overall color scheme of our piece. Congratulations! If you’ve stuck with me this far, pat yourself on the back. This is an advanced piece which requires a lot of patience and practice.