Getting to Grips with Basic Image Editing in Sketch App 3

Sketch App 3's image editing function: simple rather than universal

Sketch App 3, while not as comprehensive as Photoshop, offers a simple bitmap image editing method, including features such as saturation, brightness, contrast, Gaussian blur, blend mode, cropping and magic wand tools. However, it is not suitable for complex image adjustments, filtering, and operations.

The non-destructive image editing of the Sketch App is one of its biggest advantages, allowing for rapid testing of multiple ideas and variants. Key features such as brightness, Gaussian blur and blend mode can be effectively used to create modern web designs without opening Photoshop.

Although Sketch App 3 has limitations, it is very easy to master its image editing capabilities once it understands its purpose. For more advanced photo editing, dedicated photo editing software may still be required.

I have been talking about the Sketch App lately. I always mention it as an excellent mobile app and user interface designer tool.

I also said that I think comparing Sketch with Photoshop is stupid because it is a photoediting tool.

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

In fact, Sketch is more similar to Adobe Fireworks, which is lucky for developers (Bohemian Coding), because Fireworks is no longer developed. Lucky timing, intuitive business strategy; whatever you call it, Sketch App fills a gap, and it does a great job.

If you have lived on Mars for the last two years, here are some backstory about this. The Sketch App is currently in version 3.2 (stable version) and you can purchase it from Bohemian Coding for a single paid $99.

Although it only works on Mac OS X, it has swept the design industry.

So can't we use Sketch to edit images?

Uh, it's almost the same.

Actually... you can, but don't expect complicated image adjustments, filters, and operations. Instead, what you should expect is the simplest form of bitmap image editing you can imagine, such as these features:

Saturation
Brightness
Contrast
Gaussian Blur
Mixed Mode
Crop
Magic wand

Even the

Magic wand tool, I think it is too complicated. In the case of user interface design, I never understood why it exists.

However, many other features allow us to design for current trends. Photography and “big images” are the most popular at the moment, whether we are using high contrast, influential images or blurred backgrounds. Mixing large images into solid colors or “super gradient” backgrounds is also a major trend.

But this works for web design, and even then, it can be an instinctive habit to complete these things in Photoshop and copy the final bitmap into Sketch.

Of course, if you want to manipulate your dog's head and create a dog/frog hybrid with laser eyes, Photoshop is definitely the best choice for you, but if you stick to a single app, your job is The process will output better, non-destructive results in a timely manner. If you are keen to learn more about non-destructive design, you should watch Create illustrations in Sketch and export them as SVG (below), part of our Sketch user interface design course.

Load the player…Let's start with color adjustment.

Color adjustment

First copy the bitmap image to the canvas - a series of customization options will appear immediately on the right; Sketch App calls this area the "Inspector", where we adjust and style the layer.

First, select the box marked "Color Adjustment". Here we will be able to adjust the brightness, saturation, and contrast of the image, but for this short tutorial we will reduce the saturation to zero.

Mixed Mode

Press the "R" key to start the Rectangle shape and draw it directly on the top of the image. Sketch's automatic alignment adsorption feature should make this a breeze, but you can double-check the size in the Inspector. There, uncheck the border and select Fill → Linear Gradient and rearrange your two layers using the keyboard shortcut Cmd Alt Down.

Switch back to the image (which should now be on top), change Opacity to "25%" and Mix Mode to "Soft Light" - This is what we How to use blending mode to create a brightly colored but subtle website background.

Tip: Blending mode is actually suitable for various layers, not just images .

Gaussian Blur

Restore Opacity to "100%". Instead, we will blur the background, a common trend in modern web design, which allows better attention to typography on websites with large image launch screens. Select the Gaussian Blur box and turn it up to 50 pixels.

You should notice almost immediately that the blur is beyond the size of our box – we can solve this problem by applying a mask. Right-click the rectangle in the left layer sidebar and click Use as mask.

Note that all these changes are non-destructive; we can quickly test multiple ideas (color, blur, intensity, etc.) and these changes will never be final.

Crop (best way)

Now select the rectangle and try to resize it, or you can use the Inspector to declare the new dimension. Since the image is masked, it never exceeds the boundary of our rectangle, which is the best way to do cropping so far, because not only can we declare a specific size, but we also do not cause any destructive damage to the image.

Crop (so-called method)

At this stage, it may be useful to undo everything we have done so far with CMD Z; only your original image is left on your canvas. If you double-click the image, you will have access to a series of more destructive operations such as crop and invert.

You need to make the choice first, you can use to select or Magic wand to complete it. The magic wand works as expected, but it doesn't have the same tolerance control as Photoshop, and the basic choice does not offer any adsorption functionality or ruler-you have to rely entirely on your own intuition and mouse control. In addition to clipping and inversion, you can also choose Fill or vectorization the choice you make.

Conclusion

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

Sketch App simply does not provide enough flexibility to use these tools effectively. However, we did learn some simple tricks to avoid having to turn on Photoshop when it comes to bitmap images, which will quickly become a habit for those who have used Photoshop for years.

It is easy to be an image editing master in Sketch App 3 when you understand the uses and limitations of Sketch App 3.

The features I mentioned at the beginning of the article, Brightness, Gaussian Blur and Mixed Mode (to name only a few), can now even be filtered with CSS Mirrors are implemented in modern web design. This may be why these image editing features work perfectly, while some others run less efficiently.

Sketch App Image Editing FAQ

(The FAQ part in the original text is omitted here because the content of this part does not match the pseudo-original requirements of the image and is longer. If necessary, a pseudo-original request for the FAQ part can be made separately.)

The above is the detailed content of Getting to Grips with Basic Image Editing in Sketch App 3. For more information, please follow other related articles on the PHP Chinese website!