Best Image Editors for OS X

4. PaintCode

Price: $99.99
Pros: Can generate Core Graphics code to generate your graphic resources dynamically; good for generating the numerous sizes and resolutions of icons and code to draw custom controls.
Cons: Not a full featured drawing tool.

Getting PaintCode

You can buy PaintCode from the Mac App Store, or you can purchase the app from the PaintCode website. To download a trial version, enter your email address on the site and you’ll receive an email with a link to download the trial version.

Building the Image in PaintCode

PaintCode is not like the other tools on this list. Generally you wouldn’t use PaintCode to make rasterized images like the example we’ve been working with in this tutorial, so it doesn’t really make sense to run through that example here.

Instead, you would use PaintCode to develop vector graphics that you want to be able to dynamically resize, move, color, or modify in your apps. It’s great for making app icons, custom controls, or anywhere you need Core Graphics code in your apps.

For a better example of when you might want to use PaintCode in your apps, check out these tutorials:

• PaintCode for Designers Tutorial
• PaintCode for Developers Tutorial

Why Use PaintCode?

PaintCode is the most specialized tool on this list. It does come with good vector image editing ability, but it’s not the best tool for creating or manipulating graphics. It’s best for working with bitmap graphics created in other tools, but it still has two important features for developers: the ability to create icons and generate code for drawing graphics in your app.

While the features of the vector drawing tools are limited compared to other tools on this list, they do work to build app icons. In PaintCode, you build a high-resolution version of the icon on a single canvas, then use that canvas as a symbol for other canvases to match the icon sizes you need for your app.

PaintCode includes built-in templates for several common icon sizes; changes made to the original icon will automatically update the other icon canvases.You can then export all the various sizes and resolutions of the icon for your app in one step; my PaintCode review from November describes this in more detail.

Icon generation is a nice additional feature, but I use PaintCode primarily for code generation. I can take a control that I’ve either built myself or received from a designer, bring it into PaintCode and generate the CoreGraphics code to replicate the image.

Support for variables and simple calculations let you build complex controls with automatic code generation for use in your apps. As mentioned earlier, check out the tutorials PaintCode for Designers and PaintCode for Developers for more information.

Developers building custom controls with Core Graphics or building dynamic graphics will find a lot of value in this tool. If you’re looking for a raster-based tool, or have no need of custom controls, other tools might better fit your needs.

3. Pixelmator

Price: $29.99
Pros: Good raster image editor; cheaper and easier to learn than Photoshop.
Cons: Less powerful than Photoshop; workflow is different than Photoshop; fewer third-party add-ons than Photoshop.

Getting Pixelmator

Pixelmator is available from the Mac App Store; you can also download a 30-day trial from the company’s site without providing contact information. Once you download the trial, unzip the downloaded file and drag the Pixelmator.app file to your Applications folder to install it.

Building the Image in Pixelmator

From the welcome window, click Open existing image…. You can also select File\Open from the menu and choose the Twitter_card_overlay.png image to load it:

Select File\Open… again and open the Twitter_card_bg_image.png background image.

To resize this image to match your overlay, select Image\Image Size… to bring up the Image Size dialog. Note the Fit Into dropdown has several convenient sizes such as iPhone, iPad, and iPad Air desktop, but keep the default of Custom in this case.

Pixelmator maintains the aspect ratio by default when you change the image’s size. Set the width to 640 to match the width of our overlay image, and the height will automatically change to 400. Click OK to resize the image:

Select Edit\Copy or press Command-C to copy the resized image to the clipboard. Change back to the window with the overlay and paste the image with Edit\Paste or by pressing Command-V. This places the background image on top of the overlay. To fix this, drag the layer containing the overlay above the layer containing the background image:

To add text in Pixelmator, select the Type Tool. Use the text settings toolbar at the top of the window to set the text attributes: change the dropdown for the font to Open Sans, and set the font size to 26. By default, Pixelmator centers text within the rectangle. You’d like it to left-align instead, so click the left align button.

Drag out a text area at the bottom of the overlay; clear the default text and enter Such Tutorials Much Wow:

Now for the white outer stroke. Right-click on the text layer in the Layers window, then select Show Styles to bring up the Styles window for this layer.

Change the Stroke setting from None to Color, then click the color icon and change the color from black to white by dragging the brightness slider all the way to the left. You can close the color window at this point.

To change the width of the stroke, drag the slider or type the value 3 in the field. Change the Style to Outside, since you want an outer stroke, not an inner stroke:

You can close the Styles window at this point. The layers window now shows a small fx next to the text layer; this indicates the text carries a style effect.

Your final image should look like the following:

Why Use Pixelmator?

Pixelmator does what you’d expect of a raster image editor, and does it well. It comes with support for resizing, cropping, painting, retouching, color correction and transforms. It also supports more advanced editing with layers, masks, and photo effects including blurring, sharpening and distortion. Pixelmator is a solid choice for just about any designer; it provides a lot of the power and functionality of Adobe Photoshop at a fraction of the price.

To me, Pixelmator feels like a tool that was born from the attitude “Let’s make a tool that does 80% of what people use Photoshop for, and get rid of the more complicated stuff most people don’t use.” That ease of use, coupled with powerful features, is why Pixelmator is a favorite with many members of the raywenderlich.com team.

Pixelmator is easy to learn, and you’ll likely find that for every task you perform in Photoshop, that same task is a little easier in Pixelmator. For developers who occasionally need an image editing tool, it’s probably the best choice given the balance of cost and functionality.

So why is it listed behind Photoshop, in spite of being a better choice for many? Read on to find out! :]