Display Art Property/Layout Extension for Photoshop and Illustrator

Designed and developed a flex/html panel in Adobe Illustrator and Photoshop which should open from Window > Extensions > Specctr Pro.

Following were some of the standards that were required of the Panel User Interface:

– There should be a login window at the time of initialization of panel

– There will be four tabs in the panel which consist some buttons, checkboxes, textboxes and other UI component in both flex and html panel

– There will be dropdown for buttons which consist some cells to be selected by user

– There will be a setting page through which user can alter the setting like font name, font family, size, color etc. of specs (details of art object)

Following are some of the Features Supported By Extension:

• Panel login details and settings have to store in preferences and will be loaded to panel for separate sessions

• Buttons are used to fetch the required properties of the selected art objects on the canvas/artboards. Following are the brief description of buttons:

– Properties: Fetch properties of selected art objects and show it on canvas

– Add Note: Create an empty text box which will link to the selected art object via line or number system.

– Width/Height: Fetch dimension of selected art objects with or without stroke.

– Spacing: Fetch distance between two selected art object or a single art object from canvas edges.

– Coordinates: Fetch all four corner coordinates of the selected art object.

– Expand: Expand the canvas according to user input in px.

– Export CSS: Export css data to server. • All the communication of extension with the server is in json format.

• Extension have support to choose set different options for showing specs on canvas. User can also calculate distance in various units and in percentage respective to any base value.

Following are some extension support options:

– RGB/HEX/HSB/HSL/CMYK

– Specs style (font and color)

– Line weights

– Units set in global preferences

– Different color for spec Types

– Different modes of calculating measurements

– Scaling specs (x2, x3, /2, /3 etc.) – iOS option: RGB in %

– Fraction/Decimal values

– Number system is used for Shape/Text property specs

– Spacing, Dimension and Coordinate specs can be created on user’s selected position