Originally published at: http://www.sitepoint.com/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.
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.
Continue reading this article on SitePoint