DIY Photoshop Panels using Adobe Configurator

DIY Photoshop Panels using Adobe Configurator

Most users don’t realize that you can create your own custom panels for Photoshop CS4 and for the new CS5. You do this using a free download called Adobe Configurator. In this post, I’ll show you how to get started making your first Photoshop CS4 panel using Configurator 1.0.

Adobe Configurator.jpg

Step 1

To make your panel you need to make sure that you have AIR installed. If not, visit http://get.adobe.com/air/, download and install it.

Adobe Configurator-step1.jpg

Step 2

You then need to download the version of Configurator compatible with your operating system and your Photoshop version. Find your version at http://labs.adobe.com/downloads/configurator.html and install it.

Adobe Configurator-step2.jpg

Launch Configurator if it does not start automatically once installed.

Step 3

If you are using Windows Vista or Windows 7 you must run the program as administrator – if you do not do so, you will have difficulty saving your panels in the correct location. So, if you are using either of these operating systems, close Configurator, return to your Programs menu, locate Configurator, right click it and choose Run as Administrator. Of course, you’ll need to be using an administrator account to do this.

Adobe Configurator-step3.jpg

Step 4

Inside Configurator, choose File > New Panel to create your new panel. The panel doesn’t have a title and it is the default size. On the right of the screen, type a title for the panel and either type a new size or alter its size by dragging on the sizing marker in the bottom right corner of the panel.

Adobe Configurator-step4.jpg

Step 5

On the left are lists of tools and commands as well as action scripts and widgets that you can add to your panel.

For now go to the Tools list, and drag and drop the tools that you want to include on your panel onto it. For example, if you do a lot of collage work, you can add tools such as the Rectangular Marquee, Lasso Tool, Brush, Clone Stamp, Gradient Tool and all the other tools you regularly use. If you use both the Lasso Tool and the Magnetic Lasso Tool, drag both into your panel as each tool is separate and not stacked as a group as they appear on the regular tool panel.

Adobe Configurator-step5.jpg

To align them, click the Auto Layout button on the toolbar.

Step 6

You can also add menu items to the panel by selecting them from the Commands panel. Open up each menu name in turn to view the commands available. Drag and drop those you want access to onto your panel. Each of these installs as a button.

Adobe Configurator-step6.jpg

Change the size of the button by dragging on its sizing handles or adjust its height and width in the panel on the right. You can also change the button caption and tool tip.

Add those commands that make sense for the panel that you’re creating.

Step 7

For now, we’ll ignore Action/Scripts and all Widgets except Simple Text. Open the Widgets panel, select Simple Text and drag and drop it into your panel.

Adobe Configurator-step7.jpg

Use this control to add some descriptive text to your panel. To do this, click the pencil icon in the right hand panel to open the text editor and type your text into it.

Size and place the text in position. Arrange your panel items by clicking the Auto Layout button.

If you have two or more items selected you can use the other alignment tools on the toolbar to align their edges, centers and so on.

Step 8

When you are done, select Edit > Preferences > Export and make sure Generate MXI is selected. If you choose Generate CSXS Extension Manifest, you can create your panel as a file that you can share with others. For now, Generate MXI is all you need.

Adobe Configurator-step8.jpg

Step 9

Choose File > Save Panel as and save your panel layout as a .gpc file. You will need this if you want to come back later and edit your panel as you cannot edit the exported panel files.

Adobe Configurator-step9.jpg

To export your panel in a format that is compatible with Photoshop, choose File > Export Panel and select the your Adobe\Adobe Photoshop CS4\Plug-ins\Panels folder (or the equivalent folder on your Mac).

This is where you’ll strike problems if you are using Windows Vista or Windows 7 and if you do not have administrator privileges because you won’t be allowed to save the files in that folder.

Click Ok and your panel files will be saved to the Panels folder and you’ll see a message confirming this.

Step 10

Close Photoshop and then reopen it. You’ll find your panel by selecting Window > Extensions and your panel will be listed in the extensions list. Select the panel and it will open and appear as a Photoshop panel.

Adobe Configurator-step10.jpg

Step 11

You can create multiple panels, each for a different purpose. For example, one panel may have all the tools you need for creating collages and another for making vector selections

Adobe Configurator-step11.jpg

In a future post, I’ll go into more detail about some of the other elements that you can add to custom Photoshop panels and how you can create panels that support typical workflows and that you can share with others as teaching tools. In the meantime, have fun creating your first panel.

Read more from our Post Production category

Helen Bradley is a Lifestyle journalist who divides her time between the real and digital worlds, picking the best from both. She writes and produces video instruction for Photoshop and digital photography for magazines and online providers world wide. She has also written four books on photo crafts and blogs at Projectwoman.com.

Some Older Comments

  • hebgb March 26, 2011 12:28 am

    Can anyone recommend a good book or resource to learn Photoshop CS5?

  • Kate Despain December 14, 2010 10:38 am

    I'll admit although I'm keen to learn about these things I am still a beginner and it appears the more I learn the discover the more confused I am. I hope you don't mind but I've copy+pasted some of this text - bless my netbook - goes everywhere with me :) and I can read it offline.

  • Helen Bradley October 19, 2010 10:13 pm

    @jim... there is no link because I overlooked doing this follow up post! Thanks for the heads up - I'll put it on the list and get to it shortly.

    Helen

  • Jim October 19, 2010 08:30 pm

    This is a great tutorial on configuyrator but I am looking to use actions and am having a difficult time getting those to work in configurator. This tutorial advises that you would get to actions and scrpts later...is there a link?
    Thanks.

  • Denver Photographer June 23, 2010 01:03 pm

    dude! how cool is this. I can't wait to create one of these for digital painting, and one for purely post production work. Here's where having 2 monitors makes everything so much easier.

  • Helen Bradley May 28, 2010 07:07 am

    Yes it is. Find the download here:

    http://labs.adobe.com/technologies/configurator/

    it totally rocks and lets you create tabbed panels and much more. If you're using CS5 you're going to love this.

  • steve murray May 28, 2010 06:37 am

    Latest version of Configurator 2, that works with CS5, is now available.

  • Jim Hancockk May 24, 2010 01:05 am

    Thanks, CS5 very useful resource!!

  • Mick-H May 9, 2010 10:52 pm

    Excelent bit of kit, Iv'e been wanting something like this for ages.
    Thanks Helen & DPS

  • Johan May 8, 2010 10:52 pm

    @ reznor

    Calm down. There's nothing against letting beginners know that this can be done in other products than Photoshop, is there? If dPS were an Adobe site I'd understand your reaction, but it isn't. It's called information.

  • Reznor May 8, 2010 08:13 pm

    @johan

    Stay with your Paint Shop then and stop posting in articles about Photoshop. Thanks.

  • Larry Lourcey May 8, 2010 10:25 am

    wow- had no idea this even existed. Can't wait to try it! Thanks.

  • Johan May 8, 2010 07:54 am

    Been making custom toolbars to suit my workflow and many other things in Paint Shop Pro for generations of the program. It's built in to the program, no download needed.

  • Terry A Nyman May 7, 2010 06:06 am

    Note: as of today, 6 May, 3:05 CDT, Configurator 1.0 does NOT work with CS 5; but Adobe promises that version 2.0 is coming out "soon" and will work with CS 5.

  • steve murray May 7, 2010 05:24 am

    Update, works on CS4 for me but not CS5 as yet

  • Wayne Prankard May 7, 2010 02:23 am

    great tips - thanks!

  • steve murray May 7, 2010 01:50 am

    Going to try this right away, looks like it could be really useful - thanks Helen !

  • Shawn May 7, 2010 12:35 am

    The Panels you create using Configurator 1.0 will not automatically work in Photoshop CS5. You have to convert them to the new style using Configurator 2.0 (which has tons of new features) and then export them out so that they will work with CS5. The only downside about Configurator 2.0 is that you can't save out panels for CS4 with it.

    [eimg url='www.shawnflanagan.com/configurator2.jpg' title='configurator2.jpg']