LockFocus

Why Opacity?

I few months ago I released Opacity, a new graphics editor. With all of the other graphics editors available on Mac OS X, I want to write a little about why I thought it was necessary to create Opacity.

Design

While working on my first program (Lexicon), I needed many graphics. Creating all of these, from icons to toolbar images, was a pain. At the time, Photoshop and Illustrator were the main tools for graphic editing, but they’re essentially jack of all trade editors. These programs are good for everything from photo editing to print graphics but aren’t designed specifically for editing screen graphics. It seemed to me that an application focused on just making screen graphics could do a much better job for users when they’re not editing photos or print graphics.

This made my goal for Opacity clear: Create a graphics editor for the screen, optimized for making images for icons, applications and the web.

Workflow

The part of creating screen images that I thought was the most painful was the workflow, so I focused a lot of attention to how to improve it. Before Opacity, the steps to create an application icon (for example), were as follows:

  • Create a vector graphic in a vector editor (like Illustrator)
  • Import and rasterize the vector graphic with a pixel editor (like Photoshop)
  • Export the image at the necessary resolutions
  • Mess around with differences in things like premultiplied colors and color spaces
  • Use Icon Composer to piece the images back together and save as a .icns file
  • Put the .icns file into an application to see how it will actually look

This workflow is already no picnic, but as you’re editing an icon you have to repeat this every time you make changes! For application and web graphics, you have to go through similar but slightly different workflows (see here for details). So not only do you need to buy and learn all of these different applications, you also have to learn all of the different workflows.

In Opacity, these steps and workflows are all unified into one application. You can design your graphics with vectors and see them at any different resolutions you want. And, of course, Opacity natively supports all of the formats you would need for the screen (including SVG as of Opacity 1.1).

Opacity also uses Factories to improve your workflow. A factory exports your image to a specified format and path. This removes all of the repetitive “Save As” or “Export” steps you’d normally have to go through, in addition to saving the export settings you’ve specified.

The Future

Since I started Opacity, there’ve been several new graphics editors released, but they all seem to follow Photoshop’s Swiss Army knife approach. When I designed Opacity, I focused on what the user wanted to do, instead of on using specific technologies. I think this approach works out well for users, in Opacity and in other programs like Aperture and Lightroom. I hope to see more new applications for the Mac that are designed this way in the future.

As resolution independence approaches, there’ll be even more need for a dedicated screen graphics editor like Opacity. I also have many features I plan to add to make it even easier for designers to make and implement great looking images.