Getting to Grips with Basic Image Editing in Sketch App 3

I've been talking a lot about Sketch App lately. I never forget to mention that it’s an excellent tool for mobile application and user interface designers.

I've also said that I think comparing Sketch to Photoshop is silly considering it’s a photo-editing tool.

But the fact is, Photoshop has become so versatile that we compare it to almost every other design tool — Sketch 3 is no exception.

In reality Sketch more closely resembles Adobe Fireworks more than anything, which is fortunate for the developers (Bohemian Coding) because Fireworks is no longer in development. Lucky timing, intuitive business strategy; whatever you want to call it, Sketch App is filling a void and it’s filling it well.

If you've been living on Mars for the last two years, here’s some backstory on the matter. Sketch App is currently sitting on version 3.2 (stable) and you can buy it from Bohemian Coding for a one-time fee of $99.

Despite the fact that it’s only available for Mac OS X, it’s taken the design industry by storm.

So we can’t edit images with Sketch?

Ehhh, sort of.

Actually… you can, but don’t expect complex image adjustments, filters and actions. Instead, you should expect the simplest form of bitmap image editing imaginable, for example these features:

• Saturation
• Brightness
• Contrast
• Gaussian Blur
• Blending Modes
• Cropping
• Magic Wand

Even the Magic Wand tool I feel is too much. In the case of user interface design, I’ve never understood the reason for it being there.

Many of the other features, however, allow us to design for current trends. Photography and “big images” are all the rage at the moment, whether we’re using high-contrast, impactful imagery or blurred backgrounds. Blending big images into a solid or “super gradient” background is also a major trend.

But that’s for web design, and even then it can be an instinctive habit to accomplish such things in Photoshop and copy the final bitmap over to Sketch.

Of course if you want manipulate your dogs head and create a dog/frog hybrid with laser eyes, then Photoshop is definitely your best bet, but if you can stick to using a singular application, your workflow will output better, non-destructive results in a timely manner. If you’re keen to learn more about designing non-destructively, you should totally watch Creating an Illustration in Sketch and Exporting it as an SVG (below), which is part of our Design a User Interface with Sketch course.

Let’s start with colour adjustments.

Colour adjustments

Begin by copying a bitmap image onto your canvas — a range of custom options will immediately appear on the right-hand side; Sketch App calls this area “The Inspector” and it’s where we adjust and style our layers.

First, check the box that says “Color Adjust”. It’s here that we’ll be able to make adjustments to the brightness, saturation and contrast of an image, but for the sake of this mini-tutorial we’ll only reduce the saturation to zero.

Blending modes

Press “R” to initiate a Rectangle shape and draw it directly on top of the image. Sketch’s snap-to automatic alignments should make this a breeze, but you can double-check the dimensions in The Inspector. While you’re there, uncheck the Borders and select a Fill → Linear Gradient, then use the keyboard shortcut Cmd + Alt + Down to reorder your two layers.

Switch back to the image (which should now be on top), change the Opacity to “25%” and the Blending Mode to “Soft Light” — this is how we use Blending Modes to create colourful but subtle website backgrounds.

Tip: blending modes actually work with all kinds of layers, not just images.

Gaussian blur

Churn the Opacity back up to “100%”. Instead we’ll make the background blurred, a common trend in modern web design that allows a more optimal focus on typography with websites that have big image splash screens. Check the “Gaussian Blur” box and turn it up t0 50px.

You should notice almost instantly that the blur exceeds the dimensions of our box — we can fix this by applying a mask. Right-click on the rectangle in the layers sidebar (on the left) and click “Use as Mask”.

Notice that all of these changes are non-destructive; we can rapid test multiple ideas (colours, blurs, intensity, et cetera) and those variations are never final.

Cropping (the best way)

Now select the rectangle and attempt to resize it, or alternatively you can use The Inspector to declare new dimensions. Since the image is masked, it never exceeds the boundaries of our rectangle and this is by far the best way to accomplish cropping, because not only can we declare specific dimensions, but we’ve not done any destructive damage to our image.

Cropping (the supposed way)

It might be useful at this stage to roll back to the very beginning by using CMD + Z and undoing everything we’ve done so far; all you should be left with on the canvas is your original image. If you double-click on the image you’ll access a range of more destructive actions such as Crop and Invert.

You first need to make a selection, which you can accomplish with either Selection or Magic Wand. Magic Wand works as expected, but it doesn’t have the same tolerance control as Photoshop and the basic Selection doesn’t offer snap-to features or ruling of any kind — you have to completely rely on your own intuition and mouse control. Aside from Crop and Invert, you’ll also have the option to Fill or Vectorize the selection that you’ve made.

Conclusion

My final conclusion is that we should still be using Photoshop for complex or destructive image editing tasks.

Sketch App simply doesn’t offer us enough flexibility to be able to use these tools effectively. However we did learn a few simple tricks that can save us from having to open up Photoshop whenever a bitmap image is involved, something that can quickly become a habit for those of us who’ve been using Photoshop for several years.

Becoming a master at image editing in Sketch App 3 is easy when you understand what it’s used for, and it’s limitations.

The features that I mentioned at the beginning of the article, Brightness, Gaussian Blur and Blending Modes (to name a few), can now even be achieved in modern web design with CSS filters. This is likely why these image editing features work flawlessly, while some others perform less efficiently.