Uncovering secrets of mobile image editing with Pixelmator for iPad

17 December 2014

Author: Michał Szklanowski
Editor: Wojtek Papaj

When it comes to image editing, there is one gold industry standard, that all the professionals use: Photoshop. For the rest of us, who do not photoshop images for a living, a small company named Pixelmator Ltd created an editor that nicely fills the gap between the amateur photo tools usually found in the operating system and the professional tools like Photoshop.

Pixelmator earned well-deserved reputation in the Mac community and was repeatedly getting rave reviews since the first version was released back in 2007. Nonetheless everyone gasped in surprise, when on the 2014 Apple October event the Pixelmator team showed up on the stage and presented a brand new Pixelmator for iPad app utilizing the newest hardware and software capabilities available on iPad Air 2 running iOS 8.

This review will examine the new Pixelmator iPad app from the mobile photographer’s point of view. We will briefly mention other app features, which make it an ideal candidate for an artist, however we will focus on the features that allow you to effectively and painlessly post-process your mobile photos.

System requirements

Pixelmator is currently the iPad-only application. We can just hope that the company brings the iPhone version as well (I would personally prefer to do editing on my phone and not wait until I get home to pick the iPad). It supports iPad 2 and later models, however in order to get an optimum performance, iPad 4 or later is recommended. For this particular review iPad Air (1) was used, where application ran and felt very snappy (more on performance in the later section of the article). When Pixelmator 1.0 was released, some of the more advanced functionalities, eg. content-aware retouch brush were only working on iPad 4 or later, but 1.0.1 quickly fixed this inconvenience and now even owners of older iPad models can enjoy full functionality (albeit working slower due to intensive processing power needs).

The app supports Wacom Intuos Creative Stylus and Intuos Creative Stylus 2 for painting and editing (for those having these styli).

File formats supported

Pixelmator is able to read and write JPEG, PNG and PSD multi-layer (Photoshop) file formats as well as native Pixelmator (PXM) file (eg. from desktop version of the tool).

Main screen

IMG_0292Picture 1. Somewhat puristic welcome screen of the application.

The app, when launched, presents somewhat puristic welcome screen that contains the list of thumbnails representing active image projects. The first white tile with the big plus icon is used to add a new image. The Date/ Name switch allows to re-sort the images according to the last modification date or project name.

The remaining interface elements include a second instance of plus button visible on the to

toolbar (useful if we are deep down on the list and don’t any longer see the big white icon), the share icon (which only makes sense if you selected an image beforehand) and the Edit icon that makes all the image tiles wiggle and allows to remove or duplicate them. Duplication is actually pretty handy, it allows you to create different edits of the same image. By dragging one thumbnail onto another you can also create folders.

You don’t actually need to use Edit icon, it is enough to tap and hold on the image to select it and you can then execute any action on it. Edit button becomes useful when you want to target multiple images at the same time.

And the last but not least, question mark icon in the top right corner, which turns on-screen help overlays. This icon is active on every screen and proves to be immensely useful when you are doing the application tour for the first time.

At this stage I need to mention one thing: Pixelmator looks incredibly Apple-like. The Pixelmator team closely followed Apple Human Interface Guidelines and as a result we have the application that looks and feels like a lot of other Apple apps, such as  just-decommissioned iPhoto, Keynote or Pages. This is actually a good thing, as app uses the platform to its full extent and offers the interface that feels instantly familiar.

Adding an image

IMG_0301Picture 2. Pop-up menu which allows to either import or create image

The app allows either to create an image from scratch or to import the image from variety of sources: iCloud Drive, Photo Library (Camera Roll or one of the albums) or to immediately take a photo with a built-in camera.

IMG_0302Picture 3. New image creation dialog

If you decide to create a new image, Pixelmator will propose you a set of 3 templates: blank portrait, blank landscape and custom size blank page (you can specify its dimensions), or if you would like to get something working quickly, it offers 38 off-the-shelf templates, grouped into 6 categories:

  • Collage (shown on the screenshot) – offers 6 collage templates, where you just need to provide various images, which are blended into one photo.
  • Frame – offerts 7 templates with different types of frames surrounding the photo.
  • Card – offers 7 occasional templates which can be useful eg. for birthday wishes, greetings from holidays and so on.
  • Poster – offers 6 various poster templates.
  • Photography – offers 6 various templates, with special effects such as bokeh, light leaks, sunbeams etc.
  • Vintage – offers 6 different templates, styled as vintage photos.

Templates are downloaded from the Internet the first time they are used. It is worth to mention that the effects given by the templates can be achieved in many different ways using built-in app capabilities, however templates provide a convenient blueprint, which can save a lot of your time, especially if you are in a rush.

Main application screen

IMG_0303Picture 4. Main application screen, with layers sidebar activated.

The main application screen looks very similar to initial screen, with just a couple of more elements.

The layers sidebar, visible on the left, is by default hidden (for non-advanced users, who might not need to think about layers). To show it, swipe right from the left edge on the screen. To hide it again, do the reverse (more about layers management later).

The active image occupies the main part of the screen. As usual in image management apps, you can use your fingers to pinch in/out in order to to zoom in/out. Triple tap causes the image to fit entire screen (depending on ratio). Single tap shows 8 control points, using which you can resize the image according to your wish.

Left side of the top toolbar contains the Images link, which goes back to the initial screen with images list. Worth to mention is the fact that Pixelmator saves changes instantly, so there is no delay needed to save the project before you can go to the images list.

The next link is Undo button. Tap once to Undo. Tap and hold to be able to Redo if you have undone by mistake. Pixelmator supports up to 50 steps for Undo, which is quite impressive (for comparison, Photoshop Touch supports only 25 steps).

Right side of the toolbar contains, starting from the left:

  • Tools button (looks like brush). Available tools: Paint and Erase, Retouch, Adjust Colors, Add Effects, Select, Crop, Format (existing layer).
  • Add an Object button with the following options:new image layer, empty layer, layer from clipboard, layer filled with white or black, text or one of the available shapes.
  • Settings, which contains the following options: Image setup, Guides configuration, External stylus configuration and Help.
  • Shared button (allows to save image to iCloud Drive or Camera Roll, send a copy of image or open image in another app).
  • The already described Question mark button, which works the same way like on initial screen.

Layers

If you are thinking about more advanced photo editing, it’s hard not to use layers. Layers work as… well… layers. You can lay out many images on top of each other using different blending modes. This effectively allows you for more creativity in the image composition by using different parts from different images. There is even a name for images created using this technique: composites.

Layers support in Pixelmator doesn’t disappoint in general. It has all the features you would expect from the advance image editor. Note: using multiple layers is quite memory intensive. The number of layers Pixelmator is able to handle is maximum 18, but it largely depends on the resolution of the images forming layers. In some situations you might be limited to as few as 4 layers.

Pixelmator will spontaneously add new layers for certain kind of effect, eg. when you add a text to an image, it is always created on a new layer. However, you can use layers to your advantage, so that you can get more creative effects or perform global non-destructive edits.

IMG_0305Picture 5. Shortcut menu of the layer.

The layers adventure starts with layers list, available on the left side of the screen. Beware, it’s hidden by default, so just swipe right from the left ledge of the screen to activate it.

Touch and hold on the layer and then move it up or down to change the order of layers. Top layers are always shown on the top of bottom layers. The final result though depends on the blending mode used.

If you tap a layer, you will have the following options available:

  • Cut – cuts the layer to the clipboard (removing it from the list).
  • Copy – copies the layer to the clipboard.
  • Paste – pastes the layer from clipboard into the list.
  • Delete – removes currently selected layer. Use Undo to reverse the action.
  • Hide – hides the layer. Although possible via this option, hiding and showing layers is such a common operation that I would expect an easier way to do it. Many other images editors display a little dot on the left top corner of the layer, allowing to hide/show it with a single tap.
  • Duplicate – duplicates a layer. Very convenient shortcut, instead of using Copy/Paste.
  • Style – opens layer style window. Also available from Format option in the Tools menu (from top navigation bar).

If you drag a layer on top of another, you group them. After you have done this, another option appears in the shortcut menu, which is Merge. Merge allows to merge the grouped layers into one layer, making place for creating new layers.

On the screenshot below, the picture is a composite of a landscape photo and a moon photo with dark background. I used “Screen” blending mode to allow moon to seamlessly blend with the sky.

IMG_0306Picture 6. Layer style window

By using Style option from the context menu of a layer or alternatively Format option in the Tools menu, you can get to Style window. It allows to set various properties of currently selected layer:

  • Opacity – controls the transparency of the layer. 0% means completely transparent. 100% means completely opaque. Transparency proves very useful when retouching portraits. You can do all the retouch on the new layer, and then dial it down using transparency until you get the picture looking reasonably real.
  • Blending. Allows you to use one of many blending modes: normal, dissolve, darken, multiply, color burn, linear burn, darker color, lighten, screen, color dodge, linear dodge, lighter color, overlay, soft light, hard light, vivid light, pin light, hard mix, difference, exclusion, subtract, divide, hue, saturate, color, luminosity. That is a very comprehensive list, which pretty much covers all the modes Photoshop offers. More information about blending modes you will find on the Internet.
  • Fill, Stroke, Shadow, Reflection – effects impacting the layer, most useful on small items like text. Shadow is especially useful, allows text to be positioned “over” the background.

IMG_0307Picture 7. Layers arrange window

Second configuration window, allowing to change how layer is being positioned with relation to other layers, is available from Tools menu.

The top slider allows to move layer within the layer list (I personally prefer dragging them with my finger in the left hand side list).

The next section allows you to rotate or flip the layer. I didn’t find it very useful as it currently doesn’t allow me to freely rotate a layer by any amount of degrees, although this capability might be coming in the future version of an app.

Clicking on Size allows to adjust the size of the layer (keeping the ratio or violating it).

And last but not least, Lock causes the layer to be locked. Locked layer cannot be manipulated or removed until it’s unlocked.

One notable thing that I overlooked is the option to add a new layer – available via plus symbol on the navigation bar. More on adding elements to the image later.

Overall, layers support in Pixelmator is quite satisfactory, with one omission – layer masking. There are not too many tools that have it, but even having the possibility to fade a layer (Photoshop Touch has it) would add some ammunition to your creative arsenal. Let us hope the Pixelmator developers are reading this review and will consider adding layer masks in the next version.

Selections

Selections allow to constrain the area where the modifications are made to the image. They also allow to cut pieces of the image and put them into the new layer allowing for creative compositing of various images and their elements.

You start selection by choosing Select from Tools menu in the top bar.

IMG_0366Picture 8. Selecting a clock using Paint Selection tool

Pixelmator supports the following types of selection tools:

  • Free Selection – allows you to freely draw the closed loop to determine the selected area.
  • Elliptical selection – allows to select circular or otherwise rounded objects.
  • Rectangular selection – allows to select square or rectangular objects.
  • Magic Wand – allows to select similarly colored areas. Magic Wand is perfect for selecting large but similarly colored areas such as skies.
  • Paint Selection – allows you to paint with your finger in order to select the area. This selection mode is most smart as it tries to detect object edges and help you to define the selection without smearing with your finger everywhere inside it.

You can select the tool by tapping on the name on the right side of the top bar. You can also choose if you want to add to selection (select more parts of the images) or subtract from selection (remove some parts of selection) by tapping on Add To or Subtract From in the same place.

Use option Refine to smooth the edges of selection (very useful when selection would contain person’s hair or fair of the animal).

If you tap and hold inside selected area, you can Cut, Copy and Paste the selection. This is very useful eg. when you copy and then paste the selection into a new empty layer. You can additionally Delete, Duplicate or Deselect the area you have selected.

When selection is active, all tools such as Paint and Erase, Retouch, Adjust Color and Add Effects work only on the selected area.

Paint and Erase

As we are reviewing Pixelmator from the photographic point of view, we will not do a thorough review of Pixelmator painting options. They are available as Paint and Erase from Tools menu.

IMG_0368Picture 9. Brush selection screen

Pixelmator is actually very strong in painting. Their selection of brushes: 63 painting brushes + 9 erasing brushes makes it one of the top painting tools for the iPad. As well as choosing the brush type, you can choose its size (very small, small, medium, large, very large) and color (from full RGB range including eye-dropper tool to pick the color from the image itself). The brushes are overall very responsive and slick, which allows for very natural painting process.

If you want to explore the painting possibilities of Pixelmator, just try it out. All the changes can be rolled back using Undo button, so there is nothing to be afraid of.

Retouch

We are getting to the tools which are essential for the photographer. Retouch tools offered by Pixelmator are found more often in desktop class applications, not in the mobiles ones.

IMG_0369Picture 10. Retouch tool in action – one of the clocks is being removed from the picture.

Pixelmator offers a range of selective adjustments that can be applied to the image, including:

  • Repair – removes unwanted elements from the image. Repair tools uses content-aware fill so that in many cases you are able to non-destructively remove an element from the image, while retaining the original background behind it.
  • Lighten – lightens the area of the image. Popular name in the Photoshop world: Dodge tool.
  • Darken – darkens the area of the image. Popular name in the Photoshop world: Burn tool.
  • Smudge – creates smeared paint under your finger. Unless you want to create painterly art out of your photo, not so useful.
  • Sharpen – sharpens part of the image. Ideal for sharpening some elements of the photo eg. models hair.
  • Soften – blurs and softens the focus. Can be used eg. to simulate shallow depth of field or doing some repairs to the skin full of blemishes.
  • Fix Red-Eye – removes red-eye effect.
  • Saturate – increases saturation in part of the photo. Very useful for landscape photos to boost up some colors.
  • Desaturate – decreases saturation in part of the photo. Very useful for creating eg. color splash effect.

All the tools, except Repair and Fix Red-Eye, contain additional option for setting tool’s strength (very soft, soft, normal, hard, very hard).

IMG_0370Picture 11. Retouch tool options

Of course remember to use zooming if you want to make more precise adjustments. The size of the stroke depends on the zoom level. Tap Done to exit particular tool.

Adjust colors

The name of the option is quite enigmatic, I must say. But under it you will find very powerful set of tools, which you can use to adjust your photo attributes.

IMG_0371Picture 12. Adjust Colors screen (part 1)

Hint: Flick down the screen to see the rest of the options.

First part of the screen shows a couple of presets that you can tap to quickly adjust photo to your needs: Vibrant, Rich, Warm, Rosy, Sepia, Bright, Mute and B&W. Presets are changing a couple of image parameters in a way to achieve a desired effect (eg. image with muted colors). I’m personally not a huge fan of presets, so I would jump directly to more detailed settings.

Next up, Levels, is a very powerful tool. Firstly, it shows you full image histogram, separated for three base colors: red, green, blue. But most importantly, you can drag black, gray and white dots to adjust shadows, midtones and highlights, correspondingly. With levels tool alone you can very precisely adjust the exposure of your photo.

If that would be not enough, you can use separate Brightness, Contrast and Saturation sliders to adjust these single parameters of the image.

IMG_0372Picture 13. Adjust Colors screen (part 2)

If you scroll down, you get access to another slew of options such as: Color Balance for three base colors separately, White Balance tool with eye-dropper allowing you to select color that should be neutral gray in order to amend the color cast of the photo. Temperature and Tint tools allow to correct the color cast of the image in the manual way and finally, the Curves tool (praised in Photoshop world), allows for advanced selective adjustments of brightness and contract over the whole spectrum of image brightness (from shadows to highlights).

Of course, if you have active selection, adjustments apply to selection only.

All the changes are visible real-time and rendered insanely fast, so working with the tool is purejoy. Honestly, Adjust Colors alone makes the app worth its price.

Add Effects

Add Effects option allows you to add some creative effects to the image.

IMG_0373Picture 14. Black and White effect screen.

Here they are:

  • Blur – allows to add blue to image. Use circular tool to adjust the intensity.
  • Sharpen – sharpens images. Be sure to use the Sharpen tool after you have adjusted all the other parameters.
  • Vignette – adds vignette to the image. Quite surprisingly, it is not possible to define the center for vignetting effect.
  • Noise – adds grain to the image (allows for simulating analog films look).
  • Hue & Saturation – to be honest, I haven’t quite figured out how it works.
  • Vintage – adds a vintage look to the image. Choose from 7 presets.
  • Black & White – makes image black and white. Choose from 7 presets.
  • Light Leak – adds light leak. Choose one of 7 pre-defined leaks, define the center and angle by dragging respective control points.
  • Bokeh – adds a bokeh to the image. Choose one of 7 bokeh types, define the center and angle using control points.
  • Miniaturize – allows to add tilt-and-shift effect to the picture. Use on-screen controls to adjust the position and area of the effect.
  • Focus – adds selective focus (blurs the rest of the image apart from central point).
  • Bump, Pinch, Kaleidoscope – more creative effects. Try them out to see how they work.

IMG_0379Picture 15. Adding bokeh effect to an image.

Crop

Needless to say, Crop tool allows to crop the image. It conveniently displays Rule of Thirds grid and allows to lock aspect ratio of the crop (square, 3×2, 3×5, 4×3, 4×6, 5×7, 8×10, 16×9). During the manipulation of the cropped area Pixelmator will also display the currently selected area size in pixels, in case you would need to know it. If you tap the screen with two fingers and rotate them you will find you that Crop tool is also able to straighten the images, also manipulating the straighten with two finger is hard a convenient user interface (if you need to do this precisely).

IMG_0380Picture 16. Cropping tool.

Adding elements

Under the + button you will find possibility to add various elements to the picture. Most of them are added as new layers, which allows non-destructive and separate further manipulation of them.

IMG_0381Picture 17. Add elements dialog

Firstly, Pixelmator allows to add photos as a new layer. You can either choose a photo from Camera Roll or take one with built-in iPad camera. Yes, you heard it well. It is actually a very interesting option. You can use built-in camera to create custom texture for the portrait backgrounds. Of course use the respective blending mode so the your front layer blends smoothly with the background from the camera.

Secondly, you can add an empty layer. Either completely empty, or optionally white or black layer. Completely white or black layers play a major role in creative compositing. Eg. black layer with appropriate blending mode darkens the whole image. Then you can paint with gray brush on it to selectively lighten up certain elements.

Third section in Add menu allows you to add text to the image. This is where layer options described in the chapter above start to make sense. You can choose from 18 predefined text styles, type your text and use the Layer options menu to add reflection or shade to your text. If you want to further customize your text, you can choose from over 70 fonts, customize font and line spacing and so on.

IMG_0382Picture 18. Adding geometrical figure to the image.

Fourth and the last section allows to add various geometrical figures to the picture: squares, rounded squares, rectangles, circles, triangles, rhombs, pentagons, stars etc. Those elements can be used eg. as semi-translucent panels on which the text is presented (if you want to create eg. a billboard).

Options

Options dialog, available under the gear icon, reveals a couple of options you can set in the application:

  • Image Setup – allows to resize the active image and rotate it. The size can be adjusted in a very flexible way, with or without preserving aspect ratio. Rotate option allows to rotate or flip horizontally or vertically.
  • Guides – allows to enable/disable various guides, helpful when positioning new elements with relation to existing ones: Center Guides, Edge Guides, Spacing Guides and Ruler.
  • Devices – allows to connect touch-sensitive devices like stylus.
  • Help – already described help option.

Exporting pictures

Under the standard Share icon known in iOS we will find a host of options allowing to export and/or share the image (you are able to choose the format in which the image is shared: PNG, JPG, PSD, Pixelmator format):

  • Send a Copy – sends a copy via a registered app eg. Messages or Mail.
  • Open in Another App – new option available in iOS8 allows to directly pass the image to another app without saving it in Camera Roll first.
  • Save to iCloud Drive – saves image on the online Apple drive.
  • Save to Photo Library – saves image in Camera Roll.

Pixelmator does not have any options allowing to directly share the image on social networks, although many of them will appear on the list when using Send a Copy or Open in Another App options.

iOS8 integration

As Pixelmator is a new recent app, it has been from ground up designed to work in the iOS 8 ecosystem:

  • you can use it from the Photos app as a photo extension
  • you can read and save image to iCloud Drive
  • if you happen to own Pixelmator for Mac, you can use Handoff feature to continue work on the image on your Mac, uninterrupted
  • because of the full iOS 8 document picker support you can easily edit the image in more than one app

Final word

Pixelmator is certainly an amazing product. Especially if you see what it offers in version 1.0. It’s positioned somewhere in between the good photographer’s tool (eg. Snapseed) and a good artist tool (eg. Art Studio). The available tools work remarkably well and are blazingly fast (due to the fact the app uses optimized OpenGL and the newest hardware features of A7 and A8 processors).

As a consequence of being initial version, Pixelmator lacks certain convenience tools that are important in photographer’s life such as before/after preview, layers masking and so on. But Having seen how much effort has been put in the initial version we can be certain that Pixelmator team will not let the steam go, but quickly develop and release missing functionalities in one of the next releases.

The good:

  • extremely fast and all adjustments and effects work in real-time
  • very comprehensive adjustment panel
  • very good quality selective adjustment tools
  • support for multi-layer PSD files both in reading and writing
  • solid range of selection tools
  • support for multiple layers with blending modes

The bad:

  • selecting big image areas with Paint Tool can be painfully slow
  • lack of layer masking
  • inconvenient hiding/showing of a layer
  • not possible to select center for vignetting effect
  • black and white tool lacks color filters
  • no display of picture metadata
  • missing before/after preview button in almost all tools
  • straighten tool doesn’t allow for very precise adjustments

To sum it up, Pixelmator in its initial release is a very good start, and the app is certainly worth the money. We can only praise the fact the the developer does not use the in-app purchase to get the money for additional functionalities, but rather offers a really sophisticated and complete tool for very competitive price  ($10 paid once), available in 10 major languages. We are looking forward to further developments of Pixelmator.

Bonus

Pixelmator team kindly offered us a redeem code allowing for one free download of their app. To participate, add a comment below and explain how you would use Pixelmator if you would have gotten the redeem code. Best description will be awarded with a redeem code sent to the person’s email. Deadline for entering comments: Friday 19th December, 8:00am CET.

From last minute: Pixelmator 1.0.2 released yesterday

After finalizing the article, we learnt that a brand new version of Pixelmator was just released, so we decided to add this last chapter explaining the improvements in the new version (bolded ones are addressing shortcomings found in the review). Here we go:

  • Way easier to rotate objects on the canvas.
  • You can rotate even more precisely with the new Rotate slider in Format > Arrange.
  • A new Opacity slider to adjust brush tip opacity.
  • A new Brush Size slider to adjust the Retouch tool tip size.
  • Remastered brushes to work better with styluses.
  • A slew of fixes to preserve EXIF metadata:
    • Image metadata is preserved when using Pixelmator Photo Editing Extension;
    • Image metadata is preserved when opening and exporting images to Photo Library;
    • Image metadata is preserved if image is opened from iCloud Drive.
  • A bunch of fixes to improve Photo Editing Extension:
    • Remastered Blur effect to work better;
    • Minimized the extension app executable file size to lower memory footprint;
    • Removed all unnecessary resources so the extension package is even smaller.
  • The selection drawing performance is way better now.
  • Sharpen effect performance is greatly improved.
  • Sharpen/Soften retouching tools’ intensity is improved.
  • Selection animation now restores correctly when switching between apps.
  • Removed irrelevant warning about color profiles when exporting PNG or JPG files to Pixelmator iCloud Drive.
  • Fixed several minor memory leaks.
  • Improved app launch stability. Please upgrade to iOS 8.1.2 to benefit of it.
  • Improved compatibility with Pixelmator for Mac shapes.
  • Improved the Paint Selection tool performance.
  • Fixed possible crashing issue related to the Paint Selection tool.
  • Added Traditional Chinese localization.

 

 

 

Komentarzy: 6

  1. Any word on resolution and image sized limitations?

    • Michał Szklanowski says:

      The largest supported canvas size is 4096×4096 pixels. The vendor doesn’t state any limitation related to file size.

  2. Max says:

    If I got the redeem code, I would use the app to test painting features, combine these with photo editing too!
    Thanks :)
    Max

  3. If I had a redeem code I would use Pixelmator to help me with composites. Thank you, Georges

  4. Denise says:

    I’d love to receive a code for Pixelmator to help my creativity with editing pictures. It’s fun to see the outcome of a picture that has been processed through an app that can do amazing things, and Pixelmator certainly looks to be amazing!

  5. Michał Szklanowski says:

    Thanks for all the submissions. The most creative comment came from Is3, below the the Polish version of the article: http://grupamobilni.pl/2014/12/odkrywanie-sekretow-edycji-obrazu-w-pixelmatorze-dla-ipada/

    Łukasz, who was the winner, received the redeem code allowing to download Pixelmator for free!

    Please visit our website and check for new tutorials and reviews!

Leave a Comment

MENU: