Give your plug-ins a facelift...and skin 'em!

[Shan]

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:



To this:



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):



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:



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



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:



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++:





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:



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:



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:



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:



Here is a visual description of the parameters:



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:



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:





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:



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:



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:



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:



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:



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:



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



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



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

[Shan]

Reserved

[Shan]

Reserved.

[Shan]

Reserved..

[RussUK]

Originally Posted by Shan

Reserved..

Yes Shane, been playing with that for some days...

[Shan]

Originally Posted by RussUK

Yes Shane, been playing with that for some days...

Classic! Makes me wanna use SansAmp.

I just posted a link to my resource files for the above tutorial. Start postin' your themes gents.

Shane

[CME]

Originally Posted by Shan

The old BF-76 looks better than ever now.



...and it even sounds better with the new UI!

Shane

Wow!!!! You were able to get the anniversary edition. Those do sound much better!!!!!


Sent from my iPad using Tapatalk

[Shan]

I swear it sounds better now. Honest.



Shane

[25ghosts]

Nice....

Personally, I have skinned MDW5 many years ago... did not care much about pimping it but I DID care about the EQ Curve background which was driving me nuts. Just a logo (sorry George) and a few silly horizontal lines..

Here is my hack:



Vs Org






Currently I dont have any better way of displaying those images... Than Imageshack and that is about THE WORST source on the web.


ImageHack - We like for our clients to click more than they have to ;-)

[TOM@METRO]

That helps.