New Color Editor – Antetype 1.3

Posted on December 16, 2013 by al

In Antetype 1.3 the Antetype Color Picker right is embedded directly within Antetype. Color Picking is done within the main Antetype window, without a floating panel, and color information is presented alongside other styling information in the Style Editors.

This post goes through our reasons for making the color picker inline and look at some of the benefits now we have done so.

The OS X Color Panel

The OS X Color Panel lets all apps provide a single consistent interface for selecting and editing colors in OS X. This brings a great benefit to user’s in that color picker techniques and workflows can be used across apps. For developers the work needed to add a consistent UI is minimal and so in general it seems that the OS X Color Panel is a win-win for developers and users.

Not only does the Color Panel work in any OS X app, it can also be extended and 3rd parties can develop alternate interfaces for picking colors. Using this feature we developed the free Antetype Color picker for OS X to add our own user interface to the OS X Color Panel and therefore users can pick colors the Antetype way in other apps.

The OS X Color Panel is configurable only as a floating panel. The floating panel is the same in look across applications and a single panel can be used for all aspects of color picking within an app depending on the selection.

In Antetype the OS X Color Panel is used with the Style Inspector with Borders, Background Color, Text Color and Shadows. Clicking wherever a there is an option to select a color results in either the OS X Color Panel becoming visible or becoming the key window. The changes made in the OS X Color Panel are then reflected in the Style Inspector and subsequently the document.

This approach has some downsides for the user.

The first is that when editing a color the user’s focus flows from the design canvas to the Style Inspector to the OS Color Panel and then back to the document to check the change. The Color Panel opens in the same place it was last closed and this can result in searching for the panel especially with a multi-screen setup.

When trying out various colors on a unique undo item is created for each color value that is tried.

Another problem is that switching between documents can result in the OS Color Panel not being paired with the correct color control, which can be frustrating and confusing.

Inline Antetype Color picker

One of our aims for Antetype 1.3 has been to increase the productivity of our users by enabling them to focus more on their content and not on the process of editing the content. We have written already about the new task focused Style Editors which have been designed to pop-up right next to the content to be styled when a designer needs them. It was clear with the Style Editors that having to set colors in the OS X Color Panel was going to be country to our aims so we decide to create an embedded version of the Antetype Color Picker.

The embedded Color Picker is now used in the following Style Editors:

Fill – Color

Fill – Gradient

Border

Shadow (Drop, Inner and Text)

The embedded Antetype Color Picker no longer creates a huge set of undo entries as the user plays with different colors, only a single entry is created when the relevant Style Editor is closed.

The embodied Antetype Color Picker also allows you to “scrub” through values using your scroll wheel or two fingers on track pad and has the same features as all Style Editor controls.

OS X Palette access

During the EAP we received a lot of positive feedback with regard to the new in-line Color Picker. The consistent negative feedback we received was that people would still need to use the OS X Color Panel because of the ability to store palettes.

So we have provided access to the OS X Palettes from the in-line color picker too.

Support for the OS X Palettes is only read-only so it is only possible to choose colors that have already been setup in an OS X Color Panel, we will write more about how to do this in a separate post.

Keyboard Shortcuts

The keyboard short cuts for all of the various color pickers are covered in the Style Editor post.

Using the OS X Color Picker

For those users who still need to access the OS X Color Panel this is still possible via the Style Inspector.