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!
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
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.
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.
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:
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.
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.
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! :]
Price: $9.99 per month for Adobe Photoshop and Lightroom as part of the Creative Cloud Photography plan.
Pros: The most powerful and most-used raster graphics editor; easy to find tutorials and guides online.
Cons Steep learning curve; resource hog; recurring cost as long as you want to keep it around.
It’s unlikely you’ll ever see Adobe’s products in the Mac App Store; you can only purchase Adobe Photoshop through a subscription. Adobe’s least expensive plan that includes Photoshop is the $9.99 per month Creative Cloud Photography plan. Other plans are available, ranging up to the All Apps plan that includes all Adobe apps for $49.99 per month.
However, there is a trial version of Photoshop availble for download as well.
Building the Image in Photoshop
Start Photoshop, then select File\Open and choose Twitter_card_bg_image.png. Next, select File\Open and choose Twitter_card_overlay.png image.
You’ll need to adjust the background image to fit your final image size. Select Image\Image Size…; ensure the small link icon is selected and light gray lines run from it to the two size parameters. This is your indicator that Photoshop will preserve your image ratio.
Enter a Width of 640 pixels to match your desired final image width and the height will automatically adjust o 400. Click OK to resize the image.
Copy the entire resized background image to the clipboard: select Select\All or press Command-A, then select Edit\Copy or press Command-C. Next, select the window containing your overlay image and paste the background image from the clipboard as a new layer by selecting Edit\Paste or pressing Command-V.
The overlay layer is currently hidden underneath your background layer. Drag the overlay layer above the background layer in the Layers list, like so:
Photoshop placed the new layer aligned with the top of the image, so you’ll need to align the images at their centers. You can use Photoshop’s Smart Guides to easily align the image.
Go to View\Show and ensure Smart Guides is checked. Select the pasted layer and select the Move Tool. Hold down Shift to contrain your movements to right angles and 45-degree angles, then click on the image and drag it upward.
When the image is centered, you’ll see the purple Smart Guides appear, as shown below:
Now for the text. Click on the Horizontal Text Tool. In the toolbar, change the Font to Open Sans Regular and enter 26 for the text size. Click near the bottom-left corner of the overlay and enter Such Tutorials Much Wow.
Use the Move Tool to adjust the position of the text to your liking:
To add the outer stroke to the text, double-click on an empty section of the text layer to open the Layer Style window. Check the Stroke option, set the Size to 3 px and the Position to Outside.
Click the black default color and drag the brightness slider all the way up upward to change the color to white. Click OK to save and apply these changes. Your finished image should look like the following:
Why Use Photoshop?
Photoshop has a long history with the Mac and is one of the reasons Macs found a home with designers and artists. Adobe long ago set the standard for graphics and design tools. New tools compare themselves to Adobe and even handle Adobe file formats. When I work with a designer, the results often arrive as Photoshop PSD file.
So then why is Photoshop number two on this list? It’s by far the most powerful tool for working with raster images. If an experienced Photoshop user can’t do something in Photoshop, you probably can’t do it in any editor. And If you don’t know how to do something in Photoshop, it’s easy to find multiple tutorials or videos online to help you out.
You shouldn’t use Photoshop just because it’s been around a long time, however. A tool should work for you — not just because everyone uses it.
I’ve used Photoshop for nineteen years, so I’ve learned how to quickly take care of my tasks in the app. The UI carries a lot of baggage and isn’t intuitive for new users. When I need to do something that’s not part of my standard workflow, looking it a solution online is usually faster than trying to figure it out on my own.
Learning Photoshop takes dedication and time, and in truth, I think Photoshop is so complex that you’d be hard-pressed to find a single person who fully understands everything it can do.
A designer will need a lot of the features in Photoshop, but for light editing, resizing, and cropping tasks, it’s probably more power than you need and you’d be just as happy with a less expensive tool such as Pixelmator.
Even if you don’t need all the features of Photoshop, it might still have a place in your toolbox. There’s a steep investment in learning Photoshop, but that investment will pay you back over years to come. I’ve tried other tools, and I still come back to Photoshop for most of my needs.
And the number one choice as picked by the raywenderlich.com team is…
Pros: Best tool for UI/UX design; good mockup and prototyping tool; extendable.
Cons: No longer in App Store; not the best tool for image manipulation.
Sketch recently left the Mac App Store; the only way to get the app is from the company’s web site.
You can download a trial version from their site, unzip the package and drag the Sketch.app file to your Applications folder to install.
Building the Image in Sketch
Select File\Open and open Twitter_card_bg_image.png. Your first task is to resize the image to match your desired final image size. The small lock between the width and height fields shows that Sketch will preserve your aspect ration. Change the width to 640 and the height will adjust to 400 to match:
Now to load the overlay image. Select Insert\Image… and choose Twitter_card_overlay.png. Sketch adds the new image as a new layer above the background image. Drag the overlay layer to center the overlay above the background image, like so:
Next you’ll need to use a mask to clip the background image to match the overlay.
Select the background layer with the background image and click the Mask button in the toolbar. This creates a new group consisting of the image on this layer and the new mask. By default, the mask matches the height of your overlay but cuts off more of the sides of our background image than you want.
Click on the small white square on the left edge of the mask and drag it all the way to the left side of the overlay. A red line will appear to highlight when you’ve reached the left edge. Next, drag the small white square on the right side of the mask to the right of the overlay:
Now you can add some text. Click the Insert button in the toolbar and select Text from the dropdown menu. Click in the bottom left corner of the frame and enter Such Tutorials Much Wow.
With the text layer still selected, change the Typeface to Open Sans. Note that Sketch provides a search menu for fonts, which is useful for those developers with tons of installed fonts — you know who you are! :] Finally, enter 26 for the text size:
Adding an outside stroke to text isn’t a simple operation in Sketch; you can’t use an Outside border on a text layer, which makes it difficult to add the outer stroke. You could convert the text to a shape layer and apply an Outside border, but that effect doesn’t quite match what you’re looking for, so you’ll skip that step.
Your finished image should look like the following:
Why Use Sketch?
Sketch earned the top spot on this list because it feels like a natural tool for UI and UX design. I’ve never found another tool that let you create and manipulate complex designs with such ease. The magic of good app design comes from building great UI and UX, and Sketch does that better than any other app for developers working on the Apple platform.
Sketch is a vector based tool; you’ll find it greatly eases building layouts and designs. The built-in UI templates make designing apps and iOS or Mac icons a breeze. It’s easy to iterate and evolve my designs, and when I have what I want, Sketch can assemble and export those assets at 1x, 2x, and 3x resolutions. There’s also a rich plugin infrastructure that adds additional functionality without cluttering the main app.
While Sketch works wonderfully with vector drawing, it’s not the only tool you’ll ever need. For working with raster images, you’re better off with Photoshop or Pixelmator. It’s also a bit more unstable and buggy than I’d expect for such a powerful tool.
Sketch’s popularity means you’ll find a lot of resources to help you learn Sketch. The Sketch web site provides several tutorial videos and also maintains a list of off-site courses and articles. I’d recommend our recent Sketch tutorial by Robert Chen for a good, in-depth introduction to Sketch.
Which Editor Is the Right One for Me?
Each image editor in this list has its own strengths and weaknesses, and depending on your needs, you might find you need more than one tool to get the job done.
Here’s a good guideline to help you choose the right tool for your needs:
- If you’re looking for a tool for UI or UX design or app prototyping, you can’t beat Sketch. It’s a favorite on the raywenderlich.com team and among many other developers.
- If Sketch looks appealing, but you’d like something less expensive, you’ll find Affinity Designer a good choice. Affinity Designer also makes a good general design tool or a replacement for Adobe Illustrator.
- If you need to work with custom controls and dynamic graphics, the code generation feature of PaintCode will make an excellent addition to your workflow.
- If you are doing raster image editing and need a tool you’ll use a few times a month, Pixelmator will suit your needs just fine. It’s an amazingly powerful app for the price, and can handle most of what you’ll likely ask it to do.
- If you want the gold standard, then Photoshop may be for you. Photoshop is a complex tool, but that complexity comes from its sheer power. The recurring subscription costs add up over time, but when you’re managing complex images and you use a tool every day for hours at a time, Paintshop is your best choice. Combining it with Sketch gives you the best combination of vector and raster tools possible for developers.
Hopefully this list of image editors helps you out in your quest to find the perfect tool to fit your needs. Do you have any experiences to share in your own work with these tools? Join the discussion below and share your thoughts with the community!