A friend asked me if I could learn Sketch…. After thinking hard, FINALLY concluded the A.R.T.S four steps on the technique.
Review images
This is a quick start guide for students who don’t have time to explore the tools in detail. According to internal sources, the whole line of interaction & vision of A treasure UED has been heavily used in some products & development, and some teams have even developed relevant plug-ins. In order for more people to experience the effectiveness of Sketch, and to answer the question “Can you teach me how to use Sketch?” I’ve summarized the core steps of using Sketch into four A.R.T.S steps.
Can’t think of a faster way to get started =)
1. Prepare tools
- A Mac: HOPE PC students see this do not silently press close… Apple’s new season is just around the corner. Think about it?
- Sketch: Although there are trial versions and cracked versions, the price of 699RMB is not very high. A bag for a designer job. The software is less than 39M in size, runs fast, and startup and wait times are negligible. If you really don’t want to spend money and want to try it first… Chinese Baidu you get the idea
- Magic Mouse (optional) : It’s hard to use at first, but it’s nice to move the canvas in all directions once you get used to it. Highly recommended for imacs without a trackpad.
2. ARTS Tutorial, just four steps
“ARTS” is actually the four shortcut keys of Sketch, as well as the four important steps in the process of using Sketch, which respectively correspond to Artboard “Create a drawing board”, Rectangle “Create a Rectangle”, Text “create a Text” and Slice “create a Slice”. All four actions can be found in the Insert New menu in the upper left, but memorizing these four common shortcuts can greatly speed up the design process.
Review images
The concept of “sketchpad” is one of the most important elements of Sketch that sets it apart from other tools and is my favorite feature as an interaction. To put it simply, you can design an app with multiple interfaces on separate artboards, and then put all of those artboards on one interface at a time, allowing you to more effectively view the logic between interfaces when designing. Multi-artboard Design is a trend in Design software, and it can be seen in the new versions of Adobe Photoshop CC 2015 and Adobe Experience Design.
Review images
So enter the interface for the first time, do not be confused by the white background color, please first press the A key, create A new palette. For example, if you want to design an Iphone6 interface, press A and select the Iphone6 on the right. Don’t worry about the default size divided by 2 in the artboard, this is vector drawing, you can output any size you want in the following cutout.
If you don’t have the desired size, you can create an artboard of any size by dragging the mouse around the screen after pressing A and then moving it around. The size, position, and background color of all artboards can be accurately adjusted in the properties bar on the right side of the artboard. You can select an artboard by clicking its name, or by clicking on it in the layers bar on the left.
After completing multiple artboards, you can create a new large artboard under all the artboards, place all the smaller artboards, and draw the corresponding flow arrows and instructions on it. All artboards can be individually output as a picture by selecting the Artboard. In the right attribute bar, click the plus sign on the right of Export, select the desired size multiplier and picture format, and click Export Artboard in the lower right corner.
Review images
All complex interfaces are made up of simple basic elements, and the most common initial element for interaction is undoubtedly the rectangle.
Review images
After clicking R and dragging the mouse, you will get a rectangle for the base element. After selecting the rectangle, you can change its position, size, radius, transparency, color and so on in the property bar on the right. Starting with a simple rectangle, it can become part of an important element (such as a “buy” button involving hundreds of billions of streams), or it can take on any shape you can imagine.
Double-click the rectangle to enter the familiar Bezier curve Edit mode. Select the existing point to edit the properties of the point, click the edge of the rectangle to add editing points. To move multiple edit points when selected and combined, hold down Shift or drag.
If you want to create a base element of another shape (such as a circle for your avatar), you can also press O and drag to create a new Oval, or L to insert a Line. Multiple shapes can be quickly combined into new shapes using Boolean operations, including “combination”, “subtraction”, “intersection” and “dissimilarity”. These four buttons are in the upper toolbar, which will be used more often by visual students.
Tips: If you want to see how close an element is to other nearby elements, you can select it and press Alt. This helps the designer fine-tune the layout.
Review images
Text is an essential element in a design, and the right font, size and alignment can take a designer tons of time.
Review images
Click T and drag the mouse to create a text. The usual properties of the text can be adjusted on the right. In particular, the Width property, you can select Auto to adjust the Width to adjust the height, or Fixed to fix the text Width and height. Note that under Fixed, text may be clipped (especially after increasing font size).
Note: There are occasional bugs in the rendering of Chinese fonts in Sketch, and the text disappears during editing. In most cases, switching between two states of the width will refresh and solve this problem. The following new version is expected to solve the problem.
After you have created a rectangle and written a text, you may want to edit them into a Group (for example, to design a button). You can hold down Shift while selecting the elements to Group, then press Command + G to Group them (or right-click Group Seletion). When you click on them later, this group is selected by default. Double-click the group to select internal elements within the group. You can also see that in the layers bar on the left, they are placed in a folder and can be dragged to change the order in which they are displayed.
- Tips: You can quickly select the deepest content in a group by holding down Command and clicking the left mouse button. This is useful when checking elements across groups.
- Tips2: Hold Alt and drag the element to copy the content to the specified location. This works for individual elements, groups of elements, and even artboards. This is also a common method of copying in PHOTOSHOP and AI.
Review images
The slicing tool comes in handy when you want to cut out a part of a drawing board instead of the entire drawing board. Unlike photoshop’s cumbersome cut-out tool, Sketch’s cut-out tool is very simple and intuitive. Just press S and drag out a rectangle — the simple dashed rectangle is an exported slice.
Review images
Like all other elements, a slice has its own layer and can change its properties on the right. The only difference is that you can export the contents of the slice on the bottom right. The exported image is named after the layer name of the slice by default.
What if you’ve already made a bunch of slices and you want to change what’s underneath? Simply click on the lower left corner to select the interaction switch for slice or normal layers (both are interactive by default). After turning off the interactive slicing switch, you can change the ordinary layer without affecting the slicing. You can turn on the switch only when you need to slice.
Another feature of slicing that gets a lot of praise is its free output size. Click slice and change the value of x times in Size in the property bar on the right, you can output pictures with any multiplier. You can even add multiple sizes and output 1x, 2x, 3X, 0.9x or even 10x images to a folder at once. You can also change the Suffix to pre-name the exported graph, such as [email protected], and drag into Xcode to automatically recognize the image, eliminating the tedious naming process of ios development.
In addition, Sketch is a rare lightweight drawing software that can easily export SVG. These small details add up to a quick and easy Sketch output.
- Tips: Export preview images of slices and artboards can be dragged out and added to the document without having to export them.
3. Advanced function book
Here are some more advanced tips for making your job more enjoyable =)
3.1 Version Management
Versioning is an important way to organize your interactions. This can be done through Pages. Click the small square icon in the upper left corner to the right of the current page to expand the Pages Management panel. A Page Page can be understood as the space where Artboard is stored. For each iteration of the minor version, a Page can be directly copied here and renamed with the version number, and the internal Artboard will be copied. Interactive students should be familiar – this version management approach is similar to Axure; Visual students can also avoid creating multiple files to manage versions
3.2 Rulers, grids and guides
Review images
A ruler is a necessary tool for fine design. Press CTRL + R to quickly show Ruler or click View in the upper right corner to directly set show/hide Ruler or Grid. Go to Settings for more details. The guide can be pulled by clicking on the ruler, and the guide can only be moved on the ruler. If you pull the guide out of the window, the guide is deleted, which is different from Axure.
3.3 mask
Review images
Masks can make a lot of interesting designs. To use the upper layer as a Mask to show the lower content, simply select the two overlapping elements and click on the Mask at the top. They will be merged into a folder, and the upper element will become a Mask, marked with small dots. You can always drag a new element into the bottom of the folder to hide it, or right-click the layer and select “Use as Mask” to mask the new layer.
3.4 sign
Many common elements can be batch adjusted by “symbols”. Select a reusable group element (buttons, input fields, menu bars, etc.) and click on the upper left to create a Create Symbol. This creates a generic group element and changes the color of the folder in the layers bar on the left to purple. Later in the design, you can always insert this group of elements by using the upper left corner “Insert” -> “Insert symbol”. Any adjustments to this group element are immediately synchronized to all symbols.
3.5 Sync to mobile Phone
Designers often import designs into the phone to see what the real thing looks like. You can also purchase the Sketch Mirror app for a small fee and seamlessly sync your sketches to your phone by clicking the Mirror button in the upper right corner. You can also use Principle and other apps like me to directly design prototypes or motion effects and transfer them to your phone. Of course, given the light-hearted cutting of Sketch, it’s not too much of a hassle to export images and send them to your phone via wechat or RTX.
3.6 plug-in
Sketch is known for its simplicity and efficiency, listing only the features that designers need most and use most often. However, if there are more advanced requirements, designers can choose various Sketch plug-ins to meet the requirements of customization, such as automatic Android image cutting, automatic generation.9 image, automatic filling, etc. There are all kinds of plug-in recommendations on Zhihu and Youshi, and only Craft and Marketch are recommended here
– Craft, to save the most time
There are actually four widgets and collections that can “copy group content by row”, “fill local or online images with one click”, “standard generation and management” and “default text by category”, even saving designers time to find sample images from the Internet and think of default text. In addition, Craft acquired SilverFlow, which I had been thinking about for a long time, so Soon Craft 2.0 could even make interactive prototypes. Please see the video for details (English)
Craft home page and download address: labs.invisionapp.com/craft
– Marketch, the ultimate bifurcation terminal for design and development
Convert the design draft into a front-end website (local files that can be transmitted) for direct reference by front-end students. Had previously used zeplin airships to do the same thing online. However, it was later abandoned due to concerns about registration costs and cloud file security. Marketch solves this problem better: you don’t need to register to browse, and you can save expensive files (at the expense of developers not commercializing, of course… God Bless Programmers).
Review images
Demo address (generated) : tudou527. Making. IO/marketch /
Github download: github.com/tudou527/ma…
4. Supporting software set
Here are a few more companion tools to make interaction with Sketch happier, many of which support Photoshop.
View picture 4.1 RightFont
– Font management expert on Mac (charge, trial version available)
Review images
Font manager for Mac, you can filter fonts, preview fonts, tap to Apply fonts to Sketch, or favorites commonly used fonts. I tried searching for free versions of similar apps, but none came close. The latest version even comes with multiple icon libraries, from which you can search for SVG ICONS and drag them into Sketch. You can change the color and double click to edit the shape! After using this feature, I paid to become a RMB player.
www.uisdc.com/font-manage…
Domestic partner zhuanlan.zhihu.com/pinapps/204…
4.2 IconFont
– Vector icon Search tool (free)
Review images
SVG Vector ICONS online collection. I don’t want to advertise for a treasure, but it’s really easy to find flat ICONS on this site. Interaction can save a lot of time looking for ICONS, but also can find inspiration for lightweight icon making.
Website: www.iconfont.cn
4.3 IconJar
– Professional Icon Butler (for a fee, cracked version)
Review images
If you’re in the habit of collecting and using ICONS, it’s the best software I’ve ever used to manage icon material on a MAC. ICONS can be easily grouped and packed away.
Introduction link www.uisdc.com/icon-manage…
4.4 Principle
– 1 minute for dynamic effect (charge, trial version available)
Review images
An efficient tool for creating page dynamics with a smooth learning curve. The idea is that once the initial and final frames are drawn, the software automatically calculates and generates a tween animation (the two frames must have the same element between them). Output can be synchronized to the real machine demo, or exported to GIF or MOV transmission. Principle supports dragging layers or folders directly into Principle, eliminating the need to cut images. In the follow-up plan, I will write an introduction to Principle (manual digging).
4.5 Silverflow (coming soon)
– Prototype of design draft (Craft luxury lunch bag has been added)
An in-development plugin that allows designers to create interactive prototypes directly within Sketch. As mentioned above, it has been acquired by the well-known Invision team and added to Invision’s Craft plugin collection. After the design draft, can be directly output into interactive Demo and imported to the mobile phone for others to try, do not need another prototype tool… Think about what a “like” word is.
Want to know more, can view the translated articles introduce Silverflow http://www.ui.cn/detail/81033.html before
Experience Design (XD) also supports prototype creation and synchronization. However, details such as image cutting and layers are not yet complete. Expect more good features in prototyping!
5. The last nagging
As a drawing tool, Sketch is incredibly intuitive, with many features guaranteed to be instantly usable. I can’t believe I spent so many words introducing him. In fact, the real challenge is not getting started, but starting to draw the first interface with it. Again: the tool is just the tool, what matters more is your idea. Having said that, how about starting now, A sketchpad, combined with A work project and giving it A try – it’ll be easier than you think.
As for whether or not to replace Axure or Photoshop, I don’t think there’s any conflict between them. You can try both out and choose what works best for you as your production tool. For me, Sketch is a combination of “fast” and “fine”. And “the world martial arts, only fast can not break”.
With your mutual encouragement, I wish wuyun Changlong = D
2016-03-23