Speed up your workflow with the power of custom panels in Photoshop. In today’s tutorial, we will turn multi-stepped commands and tasks into one-click solutions. No programming skills needed. Let’s get started!
Step 1
First go to the Adobe Configurator download page and under the section Configurator 2.0 Installer click the link Download Configurator 2.0. Save the file on your machine. Because Adobe Configurator 2.0 is an AIR application make sure you have Adobe AIR 1.5/2.0 installed on your computer before running the Configurator installer. Then double-click the file to execute the installer. Click Install on the first screen and Continue on the second keeping the default settings. After the installation the program will run automatically.
Step 2
To start, click the big Create Panel button on the Welcome page or choose File > New Panel from the menu on the upper left corner. In the Create Panel dialog box make sure Adobe Photoshop CS5 is selected and click OK. A new empty panel will show up on the center of the Panel Editor. Now we have to fill in some attributes in the Inspector palette on the right side. First, set the name of the panel. This will be the name appearing in the Window > Extensions submenu in Photoshop. Then set the Width and Height to 330 and 510. Also set the minimum and maximum parameters to the same values. This will keep the panel from being resized. Now go to File > Save Panel, make new folder on your desktop with the same name as the panel and save it in. Also put the icons needed for the tutorial in the sub folder called Rapid Workflow.assets which is automatically created by the Adobe Configurator. We will use them later on.
Step 3
In the Object palette on the left side click Containers to expand it and drag and drop Accordion container onto the panel. Set the Position (Horizontal) and Position (Vertical) attributes for the object to 0. Click on the Accordion Pane 1 and change the Label property to "Select & Transform". Create new pane by clicking on the plus sign above the Select & Transform pane. In the Insert Pane dialog box type "Draw & Paint" for Label and leave the Container to Canvas. Click OK. Create two more panes in the same way with labels "Filters" and "Feature Search".
Step 4
Go to Widgets and add Simple Text to the panel. Click the pencil icon in the Inspector palette and type "Selections" with capital letters and space between them. Set the Height to 16 and adjust the Width to fit the text. Click OK. Then go back to Widgets and add HRule. Set the Width to 214. Grab the text widget and align it to the line - you have to see blue guide lines at the bottom and the left side.
Step 5
Click on Tools to expand it and add the following tools: Rectangular Marquee Tool, Elliptical Marquee Tool, Magic Wand Tool, Quick Selection Tool, Path Selection Tool and Direct Selection Tool. Arrange and align them in a row. Select all added tools and align them to the text and line widgets. Then select all objects and drag them to the top center of the pane until you see the crossing blue line guides. Release the mouse. Now the objects are successfully aligned to the center of the pane.
Step 6
Go to Commands > Main > Select and add the following menu items: Color Range, Refine Edge, Grow, Similar and Transform Selection. Select them and set the Width to 110. Now align them one by one to the left side of the other objects on the panel. Go to Commands > Main > Select > Modify and add all menu items. Select them and set the Width to 70. Align them to the right side of the other objects.
Step 7
In this step we just repeat the same process. Create "Transformation" caption with the text and line widgets and arrange the buttons in the same way. See the image for the buttons you have to add. At the end all object have to be centered and aligned.
Step 8
Select the second pane "Draw & Paint" and add all the tools you see on the image. Then arrange them in three logical groups and add lines between them. Use the blue guides to align them properly.
Step 9
Add four "SWF or Image Loader" objects from the Widgets. Set the Width and Height for all of them to 16. Select just one and clear the text for Tooltip attribute. Then click the folder icon to specify the location of the image. In the Select a File dialog box navigate to the Rapid Workflow assets folder and select one of the icons. Click Open. Now the icon will appear on the panel. Do the same for the rest three icons. Go to Commands > Main > Edit and add Define Custom Shape, Define Brush Preset, Define Pattern. Go to Commands > Script > Utility and add Color Picker. Set the Width and Height for them to 125 and 26. Put the cursor at the beginning of Label value and hit the spacebar six times to free space for the icons. Finally align the buttons with the tools and add the icons.
Step 10
First make the captions for the filter categories. You already know how. Set the Width of the lines as follows: 83 for Special, Sharpen, Noise and Render captions; 99 for Stylize caption; 100 for Distort caption and 176 for Blur caption. Now go to Commands > Main > Filter and add all the filters you see on the image. Set the Width for all Special, Sharpen, Blur, Noise and Render filters buttons to 85. For the Stylize filters and the Polar Coordinates from the Distort filters - 101, for the rest of Distort filters - 50. Align and arrange them as you see them on the image. Finally put the captions on top of the filter categories.
Step 11
Select the last pane and add Feature Search Widget. Set the Distance From Top to 100 and Horizontal Center to 0. Clear the text for the Tooltip attribute.
Step 12
Save the panel and go to File > Preview Panel. In the Preview panel you can see how your panel will look inside Photoshop.
Step 13
When you are sure that everything is fine go to File > Export Panel and navigate to Photoshop CS5 Plug-ins Panels folder. The path is C:\Program Files\Adobe\Adobe Photoshop CS5\Plug-ins\Panels for Windows and /Applications/Adobe Photoshop CS5/Plug-ins/Panels/ for Mac users. When you click OK a message will pop up confirming that the panel is successfully exported. Just click OK.
Step 14
Open Photoshop and go to Window > Extensions > Rapid Workflow. Try out your new cool panel by applying some filters to see the difference.
Step 15
One more thing before we close up. Here is how to use the Feature Search Widget: simply type a keyword and all the related commands will be listed. In order to apply a command just click it.
Conclusion
Now you have all the power of Photoshop on your fingertip. Enjoy it! Here is the final image of the panel:
