Avid Pro Audio Community - Give your plug-ins a facelift...and skin 'em!

One thing that get's me pretty excited about the new AXX plug-in format is the ability to skin a plug-in and give it a whole new look. Though most look fantastic already, a custom look can go a long way with providing a good user experience, and not to mention we all have very different tastes in GUI design.

I've been reskinning AXX plug-ins since PT 10 came out, so I thought I'd share a brief starter overview for those who are interested.

We'll start simple using the Normalize AudioSuite plug-in and move to more advanced features and functions later on. For now, we'll go from this:

http://img821.imageshack.us/img821/1...izeavidgui.png

To this:

http://img837.imageshack.us/img837/8...lizenewgui.png

To finally, a fully functional plug-in GUI that you can use in Pro Tools(the limited color depth of the animated GIF botched the colors, but you get the idea):

http://img854.imageshack.us/img854/1...ecustomgui.gif

The first step is to create your new plug-in GUI and all the elements, such as knobs, sliders, buttons, backgrounds etc. We wont venture into this step quite yet, as it's beyond the scope of this basic overview. I'll provide a download link at the bottom with all the GUI elements I used in this example to get you started. These I created in Photoshop.

Next, you'll need a good source code editor to edit the XML file that lays out the graphic elements and functions. I use Notepad++.

Navigate to Program Files (x86) > Common Files > Avid > Plug-Ins. Locate the Normalize-Gain.aaxplugin folder and zip it so you have a backup of the original that you can restore later:

http://img72.imageshack.us/img72/424...dzipped.th.png

The image elements will be in Program Files (x86) > Common Files > Avid > Plug-Ins > Normalize-Gain.aacplugin > Contents > Resources > Images.

http://img687.imageshack.us/img687/2...sfolder.th.png

The images you'll want to customize for the Normalize plug-in are the following:

normalize_bg
slidercap_horizontal
normalize_btn_rms_on
normalize_btn_peak_on

You can pretty much change these to any design, shape, and size you want, as the parameter values for these such as location, function etc, will be determined by the XML file for the GUI layout. Replace the original GUI images with your own custom images. You'll have to use the exact file names, as these will be referenced to in the XML file which does the layout and functions:

http://img195.imageshack.us/img195/1...mimages.th.png

To layout the GUI images, text, fucntions etc, of the plug-in, we're going to edit some XML code in the NormalizeGUI XML file. Navigate to Program Files (x86) > Common Files > Avid > Plug-Ins > Normalize-Gain.aacplugin > Contents > Resources and open the NormalizeGUI XML file using Notepad++:

http://img443.imageshack.us/img443/6203/xmlq.th.png

http://img39.imageshack.us/img39/292...notepad.th.png

From here, we'll make some edits to layout our new GUI images and change a few functions. The XML syntax used for AAX is pretty straight forward once grasped. I'll explain each line I changed as we proceed. At this point, you can launch Pro Tools and open the Normalize AudioSuite plug-in. As you edit the XML code, simply close the plug-in and reopen it to refresh all your changes. As you can tell, since we've made no XML changes yet, it's a bit of a mess:

http://img18.imageshack.us/img18/985...rexmledits.png

Let's start from the top. You'll notice that there are blocks of code. In simple terms, each block will define various parameters for things such as image location, size, functions of images, text entry fields, text color, typeface etc in the plug-in:

http://img861.imageshack.us/img861/8...eblocks.th.png

The first edit will be line 3. Here we'll change the width and height values to match our new custom normalize_bg background image. These values are in pixels. Since our new image is 453 x 331, these will be the new values you'll enter:

http://img820.imageshack.us/img820/2...dheight.th.png

Next we'll edit line 8. This defines our X/Y coordinates and width/height of our two buttons. All these values are in pixels:

http://img825.imageshack.us/img825/2...ameters.th.png

Here is a visual description of the <bounds> parameters:

http://img685.imageshack.us/img685/8...arameters2.png

Hit Ctrl+S in Notepad++ to save the XML edits and open the plugin in Pro Tools to see the new changes. You'll notice the RMS and Peak buttons are now displayed in the proper location in the GUI, along with their proper sizes:

http://img534.imageshack.us/img534/1743/buttonsqi.png

You'll also notice the old behaviour that enables the RMS and Peak buttons wont suit our new vertical buttons. To change this behaviour, we'll need to edit line 13. In the original GUI, the two buttons were displayed horizontal. Since we've made them vertical in the new GUI, this line will have to change. To keep things simple, we'll make this a toggle. To do this, we'll completely change the line to this:

<toggles value="true"/>

http://img404.imageshack.us/img404/7...gletrue.th.png

Save your XML file, open the Normalization plug-in, and test out the new toggle behaviour.

Now we'll move on to the slider. Line 17 will define it's X/Y coordinates and width/height parameters in pixels:

http://img210.imageshack.us/img210/3208/sliderv.th.png

Save the XML file and open the plug-in. You'll now notice the slider is in it's proper location and also working vertically:

http://img801.imageshack.us/img801/503/slideredit.png

We'll now move on to the percentage value field. This also doubles as a text entry field so one can enter a value manually. These parameters are in line 24. Again, these are X/Y coordinates and width/height parameters measured in pixels. Here are the new values to enter:

http://img526.imageshack.us/img526/2...entageo.th.png

We'll also change the color of the text to better suit the aesthetic of the UI. The text color is in line 26. Here are the values to change it to green:

http://img804.imageshack.us/img804/3...xtcolor.th.png

Save your changes in Notepadd++ and open the plug-in. Move the slider to see the percentage value update. Also click on the percentage field and enter a value manually. We're getting closer:

http://img72.imageshack.us/img72/448...ntagefield.png

The last few edits are in the volume field under the slider, which is measured in db. The parameters for this are in line 31. Just like the percentage value field above, these are X/Y coordinates and width/height parameters. Here are the new values:

http://img856.imageshack.us/img856/9...ameters.th.png

We'll also change the color of the text from white to green. This is done in line 34:

http://img221.imageshack.us/img221/3505/dbcolor.th.png

That's it! Save your XML changes, open the plug-in and enjoy your newly skinned Normalization plug-in!

http://img546.imageshack.us/img546/2841/donel.png

If there's interest, I might post some more advanced stuff down the line, so start posting your custom themed plug-ins.

A new Revibe II skin would be quite the artistic venture. :-) On this topic, I really like some of the new UI's for our classic Pro Tools plug-ins done by the Avid team themselves.

XML & Image files used in this tutorial.

Shane