Close

Photoshop Custom Tools panel Instructions.

Demo Video

Install Instructions

Download the zip file and unzip it.

OSX 

Copy the CC2015 extension folder to /Library/Application Support/Adobe/CEP/extensions/ 

Windows 

Copy the CC2015 extension folder to the appropriate directory. Windows 64: C:Program Files (x86)Common FilesAdobeCEPextensions Windows 32: C:Program FilesCommon FilesAdobeCEPextensions If the AdobeCEPextensions folder does not exist, you can create it. 

If you are not a Windows administrator you can copy the extension to: C:UsersyourusernameAppDataRoamingAdobeCEPextensions Restart Photoshop.

You’ll find the extension at Window > Extensions > Name of the Extension

Do not modify the extension folder. It will cause a  “The extension could not be loaded because it was not properly signed” error.


Where to find new tools

Here you can find some amazing scripts that inspired us to make this panel. If you make a really cool script or know about one that we are missing let us know; we will share it here and inside every panel.

Adding tools to your panel

scripts_toolbar_addButton

  1. Click the toolbar “+” button.
  2. Select one or more .js or .jsx script files.
  3. Click OK and a button will be added to your panel with the name of your script file.

If you already have icons, while adding your script files you can select the icon and the script file at the same time. The icons will be added to your buttons automatically. Just make sure that your icons have the same name as your .js or .jsx files .

Example

tool.js and tool.png
script.js and script.png

Assigning an icon to a tool

scripts_button_addIcon

  1. While you are in edit mode, click the “+” icon on the left of every script button.
    • If you are not in edit mode just click thegear gear button.
    • If you already have an icon assigned to your script button but want to change it, click on top of the previously assigned icon while you are in edit mode.
  2. Select a .png image of 60px x 60px to assign it to the script button.
  3. Click “Done” to return to the normal state of the panel.

You can use the icons that we provide or easily create your own icons by downloading our icon template from here.

If you already have icons, while adding your script files you can select the icon and the script file at the same time. The icons will be added to your buttons automatically. Just make sure that your icons have the same name as your .js or .jsx files .

Example

tool.js and tool.png
script.js and script.png

Deleting a script

scripts_button_delete

  1. While you are in edit mode click the “x” icon on the right of every script button.
    • If you are not on edit mode just click thegear gear button.
  2. Click “Done” to return to the normal state of the panel.

Organizing the Panel

  1. While you are in edit mode you can drag and reorganize the script buttons.
    • If you are not in edit mode just click thegear gear button.
  2. Click “Done” to return to the normal state of the panel.

Icon Only Mode

scripts_button_onlyIcons

scripts_toolbar_onlyIcon

You can optimize the space on your panel by clicking the “icon only” button on the toolbar.

scripts_toolbar_textAndIcon

To go back to normal mode press the “icons + text” icon on the toolbar.

Sharing your script

DO YOU WANT TO SHARE YOUR AWESOME SCRIPTS AND CONTRIBUTE TO THE DESIGN COMMUNITY?
Send us a link to your scripts to have them featured on this website and every user’s panel.

Compatible with? (required)