Welcome back to the next part of the tutorial on creating audio plugins in JUCE!  Today I will show you how easy it is to add an image to your project and use it as the background for your plugin.

First of all we will need an image to use as our background.  You can create your own if you would like, or feel free to use the same one as me.

background image

(right click the image and choose “save as”)

The next thing to do is to load it into our JUCE project.  The Projucer has a way of loading storing the image’s data into a separate header file which I will show you.  Open the Projucer and make sure you have the Simple Saturator project open.


  1. Click on the “Files” tab to view all of the files in your project.
  2. Right-click “Source” folder
  3. Choose “Add New GUI Component…”

In the next prompt will be able to choose the name for the files that will be created.  I called mine Images so it is easier to keep track of.  Now you will have two new files called  “Images.cpp” and “Images.h”.  If you click on “Images.cpp” a new window will appear as well as more tabs to go with it.  Click on the “Resources” tab and choose “Add new resource…”.


This will open up a dialog for you to choose the image file to be added to your project.  Just navigate to the file, select it, and click open.  Any time you want to add a new image to be used in your projects this is how it should be done.  If you look at the code tab now you will see that there is a lot of data that has been added to represent the image.  One more thing you must remember is to click on the “File” tab at the very top left-hand corner and choose “Save all” so that our changes are written to the files.  Now we are ready to use the image.  Go to the “File” tab again and choose “Save Project and Open in IDE”.

Your project should open up in Visual Studio.  The only files we will be editing today are PluginEditor.h and PluginEditor.cpp.

First open PluginEditor.h and add an include statement for the Images.h file we just created.  Then we create a private member object that is of type JUCE::Image called backgroundImage as you see in the picture below.  That is all we need to do with this file.


Now open PluginEditor.cpp.  We only have to add two lines of code her as well.  In the constructor we need to get the data from our image from memory and then assign it to our backgroundImage object.  We can do this by calling getFromMemory which is a method of the ImageCache class.


Also change setSize(400, 300) to setSize(350, 200). I forgot to do this before I took the picture above.  We want to do this since these are the dimension of our background image.

The last thing we need to do is to set the background to our image in the paint() method.  We will do this by calling Graphics::drawImage().

g.drawImage(ImageToBeDrawn, x, y, width, height, sourceX, sourceY, sourceWidth, sourceHeight);


Now if you build it, everything should go smoothly and when loaded into the host you should have a background image!  My challenge to you is to change the setBounds() method on our slider so that it fits nicely under saturation on the plugin like you see below.

simple saturator with background

I hope you found this tutorial useful. As usual, if you have any questions or comments, post here, send me an email or post on the forums! Thanks for reading. Next time we will learn how to make custom sliders!

Also be sure to check out the free plug-ins, samples, and C++ libraries available for free

Modern Metal Production – Products

Sign up for our newsletter so you dont miss new deals and anouncements!

Please follow and like us:


Leave a Reply

Your email address will not be published. Required fields are marked *