Create custom panel for Adobe Photoshop in Configurator

If you often retouch photos using Adobe Photoshop, you will most likely spend most of your time using the same tools and filters to achieve your final results. However, all of these different tools and commands are spread all over the program. And if you tend to process large amount of files, these mere second it takes you to look for different commands can turn into wasted minutes or even hours. Many Photoshop users are not aware that there is a tool available from Adobe which lets you create custom panels for your convenience and workflow optimization. This program is called Adobe Configurator 3, it is free and easy to use. Today, I am going to go over all the steps you need to know to make your own custom panel and optimize your workflow by doing so.

Adobe Configurator 3 can create custom panels for Adobe Photoshop CS6 and CS5/CS5.1, as well as Adobe InDesign CS6 and CS5/CS5.5. It is available free at Adobe Labs. There you will be able to choose and download a file for your specific operating system. In order for this utility to function properly, you also need to make sure that the latest version of Adobe AIR is installed on your system. Once you have the latest Adobe AIR and install Configurator 3, you are ready to start creating your custom panels. If you are running Windows Vista /7, you will need to make sure you are running Configurator as Administrator. To do so, you need to right-click on Configurator icon and select Run as Administrator from the drop down menu. Obviously, you would need to be using Administrator account to be able to do this. Without performing this step you run a risk of not being able to save or export your final project to specific folders.

Working in Configurator 3

Now let’s get started! When you open Adobe Configurator 3, you will be greeted with a welcome window briefly describing some of the steps you need to make to create and use custom panels. To start a new panel, press Create Panel button on the bottom of the screen, go to File>New panel on the top navigation panel or just hit [Ctrl]+[N] ([Cmd]+[N] for Mac users). A pop-up window will appear, asking you to name your new project and select a product for which you will be creating a panel. You can give any name to your project and select your product. In this tutorial I will be creating a panel to optimize photo post-processing in Photoshop CS6. Once you are done, hit OK.

An editing window will appear with your workspace. On the left-hand side you will see Objects panel with drop down menus for all the Tools, Commands, Action/Scripts, Widgets and Containers. These are the actual functions you can drag and drop into your panel to have them easily accessible in Photoshop. In tools you will find all the icons of tools available, including all the tools in the same category of Photoshop toolbox (which are harder to select with a shortcut). In this case custom panels are great for selecting tools from the same set. For example: let’s say I am using a Brush tool on my photo. A keyboard shortcut for this tool is [B]. But now I want to quickly switch to Replace Color tool. Keyboard shortcut for this tool is also [B]. So to manually choose this new tool, I would have to go the Tools panel, click on Brush tool, wait until a secondary menu appears, and then select Color Replacement tool. Then if I need to go back to the Brush tool, I would need to perform the same steps. These steps do not take a lot of time, but they can add up to a lot of wasted time if you have to repeat this process over and over again while editing. It is much better to have all of your most used tools laid out on one panel for easy access.

In commands section, you will find all the tools and calls available throughout all the various panels. In Action/Script section, you can create a button of a custom action or a script to run when clicked on. In widget section, you can select a number of interesting items to be available through your custom panel. For example: using HTML widget, you can have a specific webpage loaded in your panel. Or you can have a movie clip play in your panel, such as a tutorial for a specific editing technique; all this, accessible directly inside Photoshop. And finally, Containers section holds numerous features designed to ease access and navigation inside your custom panel. You can create several tabs included inside your panel, such as different tools for retouching landscape, people, and architecture. All of these containers can be customized in the Attributes section (described below).

The middle section of Configurator is the preview of your future custom panel. You can manually resize it to any size you wish. To add items, just drag and drop them from the left section to your panel. If the Snap option is selected in the Edit drop down menu, all your items will auto align and snap into place (it is usually checked by default). Once you start adding your preferred items, you will see how your panel shapes out and can edit its dimensions on the fly. You can select a group of objects and rearrange them. Personally I suggest not to overcrowd your panel, because then it will be too messy and hard to navigate through, which would defeat the whole purpose of simplifying your workflow. But if you’re going to create a custom panel for a different reason, such as a specific tutorial panel with tabs, images, videos and step-by-step navigations, feel free to experiment.

Now let’s get to the brain section of this utility. On the right-hand side panel you will find sections responsible for all the attributes. Basic Attributes are responsible for your entire panel. Here you can rename your panel, set different size and even preset a minimum and maximum allowable resize dimensions. These Min/Max dimensions will not affect your project in Configurator but will place restrictions on panel resizing in Photoshop.

Current Locale dropdown is responsible for different language selection. If you are making a panel to be used with multiple languages other than English, you will need to change this attribute accordingly. You can add or remove languages by selecting T icon next to this attribute. When Photoshop opens in different language your panel will be displayed in that language automatically (if you preset that specific language in Locale attribute). Remember that only Tools and Commands already available in Configurator will be translated automatically, any custom text or button you create will have to be manually translated by you. To do so, select desired Locale and edit the text on the central section.

Persistent attribute is responsible for how often your custom panel is reloaded in Photoshop. If Yes is selected, the panel will only be reloaded from file when during Photoshop launch. If No is selected, the panel will be refreshed each time you hide and reopen it in Photoshop. If you are editing and testing your panel in Photoshop, you can choose No in Persistent attribute. However, this will use some computer resources so when you are ready to export for the final version it is better to set this attribute to Yes.

CS Extension Attributes are very straight forward. Here, you can rename your panel, set development versions, place author’s name and description of your panel. Most of these attributes are going to be useful if you plan on sharing your panels with others. In Open Script section you can write a script which will activate when the panel is open. This is intended for more advanced users and is beyond the scope of this tutorial.

Panel Icons section lets you place custom icons for your panels. Typically, Photoshop will display a genetic icon for custom panels but if you have a unique icon you would like to use, this is the section that will let you do it. It is especially useful when you have a large number of custom panels, unique icons will visually simplify navigation. Since Adobe Photoshop now has several visual styles, such as classic grey and new dark look, Configurator will let you include two icons (classic and dark) and Photoshop will automatically display the most suited one.

Described above are all the attributes responsible for the overall project. However, there are specific attributes available for each specific object. When you select and object in your panel editor, additional attributes will become available in the inspector right-hand section. Depending on the object, these parameters can include custom labels, scripts, sizes, icons, link, visibility and position

And finally, the outline view on the right-hand side will list all of the objects currently present in your project.

Saving and Exporting Configurator panel

Now, that your custom panel is complete and you are ready to put it into practice it’s time to save it and export for Photoshop. But before we do that, let’s make sure that everything looks the way you want it to. To do this, go to File>Preview Panel or hit [Ctrl]+[P] ([Cmd]+[P] for Mac users). This will generate a preview of exactly how your panel will look when it is opened in Photoshop. There, you can also test how it will look with different color themes. Once you are satisfied with the result you can save your project. Just go to File>Save Panel in the top navigation menu or hit [Ctrl]+[S] ([Cmd]+[S] for Mac). This will save a .GPC file with additional assets folder. This file can be opened by Adobe Configurator for further editing but not by Adobe Photoshop. To make your project ready for Photoshop you will need to export it. To do this just go to File>Export Panel in the top navigation panel or hit [Ctrl]+[E] ([Cmd]+[E] for Mac). Typically, during Export, Configurator will automatically open the necessary folder to save the final project. But it doesn’t always happen. You need to export your project to Panels folder, which is inside the Plug-ins folder, which is inside the main Photoshop folder. So if it’s a Windows machine, full path might look something like this – C:/Program Files/Adobe/Adobe Photoshop CS6/Plug-ins/Panels. As I have mentioned previously, some people might experience difficulties exporting projects to the folders on Windows machines if Configurator utility was not opened through “Run as Administrator” option.

Once you export your project, open Photoshop. Remember, if your Photoshop was previously open, you need to close it and re-open it again. Then navigate to Window>Extensions in the top most navigation panel and choose your custom panel from the drop down menu. That’s it; you should now see your new custom panel open in Photoshop.

Remember, if you make further changes to your panel in Configurator and export it, you will need to restart Photoshop to see the changes. Unless persistent was set to No in the Inspector panel, in which case you just need to close and re-open the panel itself. I encourage you to play around and experiment with this useful little utility. If you wish to try out and load a panel in Photoshop without trying out Configurator first, you can do so using one of our Post-Processing panels which you can download from the link below(save unzipped folder into Panel folder, inside Photoshop’s Plug-ins folder).

You must be a registered member to view or download this content.

This entry was posted by Alex Gumerov.
 

Leave a Reply

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

  1. Just wondering if you know how to create an input field that accepts a password or product key or registration number before the user can work with the custom panel?

  2. Hi, I have a question, I’m testing Adobe Configurator 4 I want to do a panel but I can not make it work the buttons to perform an action in Photoshop c6, can, please tell me I’m doing wrong?
    Thank you very much!

    • I am not sure what you are doing exactly but all you have to do to make the action work is to drag the Action button to your panel from Action/Script section on the left. Then in the Object Basic Attributes on the right give action name EXACTLY as it appears in Photoshop and then specify the name of the Action Set EXACTLY as it appears in Photoshop.

      Remember, the action has to exist already in Photoshop in order to use it with your new panel. I hope this helps.

  3. Thanks a lot.
    I was having trouble exporting the Panel,
    Then read your comment about “Make sure you open the program as Run in Administrator”

    helped 🙂
    Thank you !