Talk about sketch's handy, intimate features.

Editor's note: sketch has recently become a new favorite of UI designers, and students have said they have to let go of Photoshop and turn to Sketch's arms. So there is the question: This online only a year of software charm where? Today @ whistling through Charles Chat sketch those intimate use to fall in love with the magic of the manuscript function.

First of all, thank the original author Jean-marc Denis to write excellent articles. This article is only translated into Chinese, if there are any irregularities please criticize the advice. The following is the text of the translation:

When I last attended the Apple developer Conference in San Francisco (WWDC 2013), I had the pleasure of meeting with sketch designers.

I tried sketch (currently only on the Mac platform). Its release has been a year long. Some of its performance flaws and inconveniences prompted me to go back to Photoshop. However, the design circle is still passionate about it. So I decided to spend some time exploring it and self-study some basic functions. The idea is to assess whether sketch can replace Photoshop to some extent.

Today, 80% of my design work comes from sketch. It took me less than one months to get over to sketch. I have no regrets so far. The reason for me is one by one.

Why leave Photoshop?

Why is Photoshop not good enough? As I became more focused on quality, efficiency and teamwork, I felt more and more that I was using a tool that was dying.

　　Not designed for us.

Photoshop was originally designed for digital image processing. Bezier curve paths and vector tools only appear in the 2nd version. When you focus on version history and recent updates, it is clear that the user interface designer is not the target user of the software. We forget that we actually use Photoshop not for its original purpose, and to some extent we "broke the software". In fact, we need a simpler, more concise software. Photoshop is too powerful.

　　Can't adapt to the mobile field

If you need to output a variety of resolution files, then this would be a disaster. Even with the technology of God, you need to align all the elements with the grid and spend a lot of time. Most time-saving features come from Third-party Plug-ins: iOS screens, icon templates, grid layouts, and symbols.

　　The outdated engine

Because Photoshop is a decades-old image processing software, its engine requires a lot of resources. Although the Adobe Engineering team has completed an impressive optimization, the software is still slow to endure. Even a very basic function can be kicked around like a ball when communicating between different teams. We can't criticize them because their software needs cross-platform support.

　　Lianpo old.

Remember when the Retina screen was released, how long did we wait to wait until Photoshop software was updated? Dotted border? The examples are numerous. I have accepted it silently and no longer blame them. A large team is usually slow to act. The fact is that we still eagerly look forward to some key features that are not yet there: beautiful text rendering, multilayer blending options, practical smart guides, and more.

Why sketch become the protagonist?

　　Automatic save and version management

Ever thought about not having to click "⌘+s"? Yes, Sketch automatically saves you, even allowing you to revert to the version of the file.

"Browsing all versions ..." You will be presented with a time machine interface to display the files you have saved.

　　Vector Editing and Perfect pixel

The vector means that it can be scaled infinitely. This means that you will not waste time on a preset size or large or small. Sketch through the perfect pixel level to help you eliminate this annoyance. When you design icons or illustrations, it is useful to convert to pixels.

Click ^p to convert between pixel view and vector view.

　　Smart Guides

Do you love Xscope (Xscope for Mac is a powerful tool for measuring, calibrating, and checking graphics and layout-from the Internet)? Do you use the Marquee tool to get the size? The pain of the reference line? Smart guides will help you get the right alignment and margin elements in a simple way. It saves me a lot of time and energy. I think is one of the most useful features.

Select your shape or group, click ⌥ and drag the mouse to hover over other shapes or groups.

　　Free edit Elements

Can edit height, width fillet radius dynamically? Yes, I can. I used it a lot, and frankly I was relieved to have it when I switched to sketch. It is one of my favorite features to get the perfect shape size or fillet radius by entering numerical values in the input box. Now I have a clear feeling that I can't get out of it.

　　Shape joins (Boolean operation-Translator note)

You can combine shapes to get new shapes. It is easy to get merge, subtract, intersect and dissimilarity (take A and B parts, take a minus B part, take A and B section, take A and b disjoint parts-the translator note). This is not surprising, and it is exciting that the child shape can be edited freely. Also, because shapes are presented as lists, you can easily select them individually, layering them, and so on. There is no need to dwell on moving it back and forth. This will help you manage and create more complex shapes.

　　Single layer multiple blending mode selection

The flashy single layer Photoshop trend is gone. In sketch, you can play on a single layer. This means 4 monochrome or gradient fills and infinite borders, shadows, inner shadows, and so on.

Up to 4 fills, infinite borders, and shadows

　　Rounded to the nearest pixel edge

Rounded the shape or layer to the nearest pixel edge. If the shape's x edge is 5.3 pixels, it will be rounded up to 5 pixels. No longer have decimal pixels, dirty shapes, and transparency mixed pixels. I use shortcut keys to make sure the shape is in perfect pixel. This is much more efficient than the grille.

Click ⌥⌘x. I use one of the most features.

　　Link Style

If you are dealing with a wide variety of designs, linked style (link style) allows you to set special styles and apply them to any text. If you modify the link style, it will automatically adjust to all text that uses that style. It's great, right? It also applies to shapes oh.

You can quickly and easily modify all text that uses a link style

　　Excellent output

Chettu and output are usually one of the most painful processes, even with more Photoshop Chettu tools. Sketch as a considerate vector software, the output can only click once, and allows the output of different sizes and formats (PDF, EPS, SVG, PNG, JPG, TIFF). Of course this is not a plug-in or Third-party application, it is built in.

Click once to Output

　　Allocate spacing

When you identify beautiful styles for complex content (such as pictures), this feature will help you quickly test a variety of styles.

　　Grille

"The grille is a two-dimensional structure." The contents are structured using a series of intersecting lines of longitudinal and horizontal axes. Grille as a framework for designers to be more rational management of words and pictures, but also easy to accept. ”

Of course you can use the grille, which is a good tool.

Free Set Grille

　　Text rendering

Using its own advanced text rendering, sketch has done a good job displaying text and fonts. Get out of Photoshop's anti-aliasing quickly!

Elegant text rendering

　　CSS Styles

if (not me) you are engaged in some website development work or a website developer, this feature translates all the blending options into CSS code.

Simply paste the code anywhere (CSS file is an ideal choice)

Gradient borders are not currently supported

　　Rotate Copy

Another gadget that saves a lot of time and trouble.

　　Sketch Play (released this feature, now called the mirror-Translator Note)

The function is to display the design effect directly on the iOS device.

Feedback force is the key to success

Sketch is a small team and they grow fast. According to their update log statement, each update will bring new functionality to the platform.