Table of Contents

Introduction
Who Should Read This?
How Does It Work?
Download(s)
System and Software Requirements
Adobe Photoshop Reserved Words

Tutorials
Overview
  1. Starting a Flex Project
  2. Hello World Panel
  3. Placing the CSXS Library

  4. Shortcut Buttons Panel
    1. JavaScript
    2. Design the Panel
    3. ActionScript
    4. Photoshop Persistent
    5. CSXS Logger AIR Debugger (Optional)

  5. Setting Up Script Listener

  6. Color Picker Panel
    1. JavaScript
    2. Design the Panel
    3. Find Character ID Code to Register Events
    4. ActionScript
    5. Create Custom Icons

  7. Flickr Search Panel
    1. Design the Panel
    2. Create a Flickr Service
    3. Design a Custom Module
    4. Modify Panel's Properties
    5. Connect on Preferences

  8. Per Layer Metadata Panel
    1. View Metadata
    2. JavaScript
    3. Find Character ID Code to Register Events
    4. Designing the Panel
    5. ActionScript
    6. Using Photomerge
Other Samples
Best Practices
Frequently Asked Questions
Acronyms and Definitions
Links
Adobe® Photoshop® Panel Developer's Guide

Color Picker Panel: Create Custom Icons

The fifth part of the Color Picker Panel is customizing the icons of the Adobe Photoshop Panel when it is minimized, closed, or hiding in Adobe Photoshop. This section of the Color Picker Panel tutorial will show how to use Portable Network Graphics (PNG) images as normal and rollover icons for the Adobe Photoshop Panel.

Instructions:

  1. To develop custom icons for the Color Picker Panel, images must be in Portable Network Graphics (PNG) format. Each image must have the name of the Panel followed by either (but not both) of the following keywords:
    • Normal - Used during normal or no-event state.
    • Rollover - Used during mouse rollover state.
    For this tutorial, the following PNG images will be used to demonstrate its use:
    • ColorPickerNormal.PNG
    • ColorPickerRollover.PNG
  2. Save ColorPickerNormal.PNG and ColorPickerRollover.PNG into the Panels folder under the Adobe Photoshop CS5\Plug-ins\ folder located under:
    • Applications for Macintosh
    • Program Files for Windows
  3. Copy ColorPickerNormal.PNG and ColorPickerRollover.PNG from the Panels folder into the bin-debug folder under the ColorPicker folder on the Desktop.
  4. Open Adobe Photoshop.
  5. If the Color Picker Panel is not already open, go to Windows > Extensions > ColorPicker. The Color Picker Panel opens as a panel like seen below:
  6. Click on the top-right corner of the Color Picker Panel. The Color Picker Panel minimizes and is like a panel as seen below:
  7. Place the mouse over the Color Picker Panel and now the panel changes to what is seen below:
  8. Click on the Color Picker Panel and now the panel changes to what is seen below:
  9. The Color Picker Panel now has two color pickers, two labels, and custom icons in which the user can change the background or foreground colors either on the Adobe Photoshop Panel or within the Adobe Photoshop tools palette.
  10. Close the Color Picker Panel.
  11. Close Adobe Photoshop.