Pixelmator vs. Photoshop for Web Design

Update: When this post was originally written, I was testing Pixelmator 1.5. Version 2.0 is out now and almost every issue I had with Pixelmator appears to have been upgraded or fixed. That said, I’ll be updating this post to give a more accurate measurement of it’s usefulness for web design.

Photoshop. It’s a pretty important program when it comes to creating graphics for web design. It has yet to really receive any competition when it comes to reputation and features. It can do pretty much anything and still offer fine-tuned control of every aspect along the way.

Meanwhile, an image editing application for Mac has built quite a following called Pixelmator. After reading so much positive feedback regarding the program I decided to download the trial to test it out.



I still have OSX Leopard (1.5.X) running on my Macbook Pro so I had to download a slightly older version of  Pixelmator (coincidentally also version 1.5.X). The latest releases of Pixelmator (1.6.x) require Snow Leopard which I don’t have yet so they may have added some of the features I mention are missing.

Good News

Pixelmator is excellent! The interface is smooth - similar to Photoshop yet filled with subtle differences and in several cases improvements to interface details. Most of the basic filters and image manipulations are built-in and done well. Getting started I felt good using it.

Memory usage is nice and low. Pixelmator appears to use half the memory of Photoshop (when in idle with no images opened!). Granted I was working on smaller graphics.

I definitely recommend it as an alternative to Photoshop for the average Joe (no pun intended). Basic image changes, test additions, etc etc… it’s great!

So What’s Missing?

To be up front, I only created a couple different images using Pixelmator so I haven’t spent a great deal of time going over every tool and setting but I’ve dug in deep enough to make this post with confidence.

Layer Masks - I’m used to the little “mask” button on the Layers Pallette in Photoshop. I had to go up to “Layer>Add Layer Mask” to do the same. Not a biggie but…

Working with text - Making web page mockups require lots of text work. This was the first place I felt Pixelmator fell behind Photoshop. I wanted to change the line height - couldn’t find it. I confess their default line height looks pretty good and would work out of the box for most people. Letter spacing and other fine adjustments were no where to be found either.

Drop Shadows - I thought it’d be nice to take that test and make it look inset to it’s background. It’s a click in Photoshop (pretty much) where I was going to have to manually create the shadow by hand in Pixelmator. Not too difficult but very cumbersome for most people as it’d involve creating duplicate layers, blurring etc.

Layer Effects - I love using Layer effects in Photoshop. Not available in Pixelmator (yet).

Truthfully, that’s about it! I felt I’d be able to pull off anything I needed to otherwise. I could do the manual versions of the effects mentioned above but it was the text control that I felt bothered me the most.

So, at this moment if I have to give both Photoshop and Pixelmator a rating of 1-10 (10 being my ideal dream) for web design, I’d say:

Photoshop: 8/10 | Pixelmator: 6/10 (as of writing)

About Joseph R. B. Taylor

Joseph R. B. Taylor is a humble designer/developer who makes stuff for screens of all shapes and sizes. He is currently the lead UI/UX Architect at MScience, LLC, where he works to create simple experiences on top of large rich datasets for their customers and clients.