This is the first part of a two part tutorial on how to create a simple Flash audio mixer. This week we will be using Adobe Photoshop to design the GUI (graphical user interface). Next week we will learn how to export graphics from Photoshop into Flash where we will convert the graphics into symbols and use actionscript to create the functionality that makes it work.

I use Mac, for those who use PC replace Cmd with Ctrl. Also, I’m using a custom font for the typeface. The font I am using is called ‘SF Distant Galaxy’ which you can download here.

Step 1: Create a New Document

Open Photoshop and make a new document at 360×290 pixels. Since this is not being designed for print, we will use the standard color mode and resolution for monitors, RGB at 72 ppi. Set the Background contents to Transparent and press OK.

Step 2: Getting Prepared

Before we start making graphics there’s a few things we should do. Make sure you have ’snapping’ enabled by checking Snap in the View drop-down menu at the top of the screen. While you’re at it, make sure Snap To All and Rulers are both checked. You’re gonna need those..

Place 4 guides on each side of the canvas by clicking and dragging them off the rulers. Remember, you can always hide/show the guides by pressing Cmd+; to toggle their visibility.

Step 3: Create the Body of the Mixer

With the guides drawn and and the ’snapping’ on, we are now ready to create the body of the mixer. Select the Rounded Rectangle tool from the tool panel and set the radius to 12px in the top toolbar.

We need to set the foreground color to black. To do this, double-click the top square at the bottom of the toolbar to open the Color Picker.

With the Color Picker open, type 000000 to set the foreground color to black then press OK.

With the Rounded Rectangle tool selected, click and drag from one corner of the document to the opposite to draw a rectangle. It should snap to the guides you placed earlier.

Lock the background layer by clicking on the lock icon in the
top of the layers panel.

Step 4: Place the Guides

Now we will place guides for the faders. The document is 360px wide. We want about 20px between the faders and 40px on each side. There will be 4 faders; so that is 20+20+20+40+40=140px subtracted from 360px=220px divided by 4 (faders) leaves us 55px for each fader.

With this information we are ready to place the guides. Press F8 to toggle the Info panel or select it in the Window drop-down menu.

Using the Info panel will allow you to accurately position your guides. As you drag your guides, the info panel will reflect the guide’s location on the X/Y axis. Place 8 vertical guides at 40, 95, 115, 170, 190, 245, 265, 320 of the X axis by clicking on the left ruler and dragging out from it. Drag 2 more horizontal guides from the top ruler at 100 and 260 of the Y axis.

Step 5: Create the Fader Pots

With our guides in place we are ready to create the faders. We’ll start with the fader pots. Select the Rounded Rectangle Tool and set the foreground color to a grayish color by double-clicking on the top square in the toolbar, I used #665d5a. With the Rounded Rectangle tool selected, make sure you still have the radius set to 12px in the top toolbar. Create one rectangle as seen below, it should snap to the guides.

With the Info Panel in view. Drag a guide to 67 on the X axis. That is the center of the rectangle. You will use this guide to place the groove for the sliding fader.

We need to create a black line. We’ll start by changing the foreground color to black (#000000). Select the line tool and set the stroke weight to 3px in the top toolbar. Draw a black line along the guide you just placed as seen below.

In the layers panel, select the 2 shapes you just created by Cmd/clicking on them. With both shapes selected, right-click on either one and select Merge Layers. That will combine the two shapes into one.

Hold down the Alt key and click/drag out 3 more copies off of that shape into their respective spots. You should now have 4 identical shapes, evenly spaced as shown below.

Now you have a total of 5 layers; the background layer and 4 shape layers. Name the layers Fader 1, Fader 2, Fader 3, and Fader 4, then hide the guides (Cmd+;).

Step 6: Add Depth to the Fader Pots

Lets add a stroke and an inner shadow to the shape to create some depth. Select Fader 1 by clicking on it in the Layers panel. Under the ‘fx’ icon at the bottom of the Layers panel, select Stroketo open the Layer Style window.

By default, the stroke is red. I’m going to change the stroke color to orange (#e4652e) and leave the rest of the stroke settings at their defaults. Before closing the Layer Style window check the button next to Inner Shadow to turn that on. The default settings for the Inner Shadow are fine so press OK to close the window.

In the Layer Panel, you’ll now notice an ‘fx’ symbol on the layer you just modified indicating that it has layer effects applied to it. Right-click the ‘fx’ symbol and select ‘Copy Layer Style’ from the pop-up menu, this will allow you to add the same effect to the other three faders.

Select the other 3 layers by clicking on the bottom one then shift-clicking on the top one (or by Cmd-clicking each one).

With the 3 layers selected, right click and ‘Paste Layer Style.’ Now we have 4 identical fader pots.

Step 7: Make The Fader Knobs

The next step is to create the fader knobs. Show your guides again by pressing Cmd+; on your keyboard. Select the Rounded Rectangle tool and change the foreground color to the same orange used for the fader pots (#e4652e). Make sure the corner radius
is still set to 12px in the toolbar at the top of the screen. Draw a horizontal rectangle the size of the fader guides in the first fader pot as shown below.

Hold down the Alt key and click/drag out 3 more copies off of that shape into their respective spots. You should now have 4 identical knob shapes as shown below.

Now you have a total of 9 layers; the background layer, the four fader pots, and the 4 knobs. Name the knob layers Knob 1, Knob 2, Knob 3, and Knob 4.

Step 8: Add Depth To The Fader Knobs

Now lets add some depth to the fader knobs. Select Knob 1 in the Layers Panel, then click the ‘fx’ icon at he bottom of the the panel. In the pop-up window select Bevel and Emboss, which automatically opens the Layers Style
window.

The default settings are fine, so press OK to apply the bevel.

In the Layer Panel, you will now notice an ‘fx’ symbol on the layer you just modified indicating that it has layer effects applied to it. Right-click the ‘fx’ symbol and select ‘Copy Layer Style’ from the pop-up menu. Select the other 3 knobs layers by Cmd+clicking on them. With the 3 layers selected, right click and ‘Paste Layer Style.’ We now have 4 identical fader knobs. Lock the knob layers and hide the guides to get a better look at the mixer.. We’re almost done.

Step 9: Add Depth To The Mixer

In the Layer Panel, select the background layer and un-lock it then click the ‘fx’ icon at he bottom of the the panel. In the pop-up window select Bevel and Emboss, which automatically opens the Layers Style window. Set the size to 15px and leave the rest of the settings at their defaults as shown below. Press OK to apply the layer style, then lock the layer.

Your mixer should now look like this.

Step 10: Add The Name

The final step is to give this thing a name. You can name it what ever you want. I’m gonna name this one ‘Baramix Jr’ because my name is Steve Barakat and the loops that this mixer plays are mine. It’s a stripped down version of a more sophisticated audio mixer that I will be doing in the future called ‘Baramix Pro.’ When we add the functionality next week, you can use your own loops. So call it whatever you want. You can also use a different font for the typeface, I am not using a common font. The font I am using is called ‘SF Distant Galaxy’ which you can download here. You will need to install the font and re-start Photoshop to use it. If you are using a different name or font, the font sizes that I am using obviously will not be accurate.

From the top toolbar, select the type tool and choose SF Distant Galaxy, Regular, 55pt, align center as your type settings.

With the type selected, tool drag out a textbox that spans the entire width of the document just below the top bevel curve. Then type ‘baramix’ in lowercase. It should center perfectly.

Deselect the type tool by clicking on any other tool in the toolbar. This will apply the type you just created. The layer will automatically be named ‘baramix.’ Lock this layer! Select the type tool again and change the font size to 29pt. Draw out a textbox just below the ‘MIX’ part of BARAMIX and type the word ‘junior’ in lowercase. You might have to draw from the bottom up to avoid the
textbox above.

At this point we’re done with the design but if you want to add an extra touch to the name as seen below, follow these steps.. Un-lock the layer called ‘baramix’ and open the Layer Style window by double-clicking on the layer. Copy the settings as they are set in the 3 photos below to add an outer glow, a bevel and stroke to the type.

After that reduce the type’s fill opacity to 0%in the Layers Panel. The type should now look as it does below.

That’s it for this week. Next week, on to Flash for the fun stuff!