Best Image Editors for OS X

As an app developer, it isn’t long before you have a need for some type of image editor. But searching for image editor in the Mac App Store returns more than 400 results!

This makes it extremely difficult to find the right tool for your needs. Raster or vector? And what file formats does each tool support? You’re a busy developer and you don’t have time to review them all.

To that end, we’ve compiled a list of the five best image editors for OS X, based on the tools most used (and most loved) by the raywenderlich.com team. We asked people what they liked about their favorite image editor, what they didn’t like, and why they chose this tool over others.

As a bonus, we’ll give you a quick tour of each tool as we create a simple image. If you’d like, you could follow along with this to see the workflow for each tool, which may help you pick your personal favorite.

Ready to push some pixels? Time to get started!

Getting Started

Start by downloading the starter files for this tutorial, and unzip the file.

As mentioned, for each tool we cover in this article, we’ll show you how to create a simple image. Specifically, you’ll start with the following background image:

…add an overlay image:

…and finally add the text Such Tutorials Much Wow in Open Sans 26pt with a white outer stroke to create the following image:

This image could be used to promote a blog post on this site. The process of creating it shows some typical operations developers need to perform – resizing images, combining images, adding text, and so on.

Without further ado, let’s get into our picks for the top 5 OS X image editors!

5. Affinity Designer

Price: $49.99
Pros: A powerful design app at a good price; has better bitmap editing abilities than most vector-based tools; good replacement for Adobe Illustrator.
Cons: Built for designers, not developers.

Getting Affinity Designer

You can download Affinity Designer frpm the Mac App Store. You can request a ten-day trial by entering your contact information on the Affinity web site; they’ll email you a download link to the trial DMG.

To install the trial, open the DMG and drag the Affinity Designer Trial.app file onto the Applications shortcut in the window.

Building the Image in Affinity Designer

Run Affinity Designer, select File\Open… and choose Twitter_card_overlay.png:

Now to load your background image. Select the Place Image Tool from your Tools panel and choose the Twitter_card_bg_image.png file. Click near the center of the overlay image to add the background image as a new layer above the overlay image:

The background image appears in front of the overlay. Fix this by dragging the layer with the overlay above the background layer:

Make sure to drag it above the background layer and not onto the background layer, or you’ll create a layer mask instead of moving the layer to the front.

You can use Transform options to resize the background layer to the same width as the overlay layer.

Select the Twitter_card_bg_image layer, then click on the small link icon next to the length and width settings to lock the aspect ratio:

This tells Affinity Designer that changing the width of the image should change the height of the image in a proportional manner — or vice versa.

Change the width of the card layer to 640 to match the size of the overlay layer; the height will automatically change to 400.

Now to center the background. In the small grid of squares to the left of the X and Y settings, select the middle square; this tells Affinity Designer position values you enter will be relative to the center of the overall image. As the overlay is 640 x 320 pixels wide, set X to 320 and Y to 160 to center within the image.

Your image should now look like the following:

To add text to the image, click on the Text Tool. Change the font to Open Sans and enter 26 for the font size. Click on the image near the bottom left of the overlay and enter Such Tutorials Much Wow:

If the text isn’t exactly where you wanted it, use the Move Tool to adjust the position of the text layer.

You can add the white outer stroke as an effect on the text layer. Select the text layer and click the Effects tab next to the Layer tab. Scroll through the list of effects and check Outline which displays several options:

Click the box next to Colour; leave the opacity at 100% and change the radius to 3 px. Your final image should look like the screenshot below:

Why Use Affinity Designer?

Serif’s Affinity Designer is a full-featured, vector-based graphic design software that works well in the OS X environment and takes advantage of key OS X features. In fact, it does this so well that it received an Apple Design Award at the June 2015 WWDC!

Although it’s a vector-based tool, Affinity Designer also provides a solid set of tools to work with raster images. Its bitmap editing abilities don’t match a dedicated tool like Pixelmator or Adobe Photoshop, but they’re still a notch above most editing apps.

Affinity Designer is true tool for graphics designers; while it can create the graphics for your next app, you could easily use to design anything from your business card up to to a full-color marketing brochure for your company. If you’re experienced with Illustrator, you’ll adjust quickly adjust to this app.

While Affinity Designer is primarily for graphics designers, features such as the ability to automatically export standard and retina versions of images in a single step are a great benefit to app developers as well.

Affinity Designer is half the price of Sketch, and I think it handles some things better than Sketch, such as working with 3D elements. While Affinity Designer is a powerful tool, it’s probably not going to be your first choice — unless you’re a designer and a developer who spends a lot of time in tools such as Adobe Illustrator.

For developers that don’t have a great need for a design tool, there might be a few better (read: simpler) choices in this list.