From scratch Learn sketch--advanced article-B

Learn sketch--from the beginning of the zero-step article

Sketch is a vector drawing application, and vector drawing is undoubtedly the best way to make Web pages, icons, and interface designs today.

With the initial knowledge of sketch's interface layout and basic tools, we can begin to get into the higher-order sketch tool-based learning. This article will focus on the sketch template, the use of plug-ins, and sketch in the specific use of the process of sharing some tips.

If you have been exposed to PS, AI, axure and other software, then the next content you should not be unfamiliar, because all the design software learning paths are similar, are from the understanding of the basic function framework to the integration of external resources, and ultimately form a process of personal style.

Sketch template sketch comes with a template

Sketch comes with a template that is sketch under the File menu bar.

Enter template

In the process of use, we just need to copy the required template to our artboard. It is important to note that you need a fixed long scale when resizing.

Sketch Custom templates

In the Sketchappsources Web site, there are many sketch templates that can be downloaded, and we can import these controls into sketch.

Or at work, the team often uses some fixed components, and to avoid duplication of effort, we can dump them into templates. This multiplexing mindset is the same as the custom master in Axure.

The specific steps are as follows:

• Step 1
  Download or build a sketch document that contains the templates you need to import;
• Step 2
  Click "Save as Template" under file;

All sketch files can be directly save as template

• Step 3
  Give your custom template a name;
• Step 4
  When you click on the Template menu bar directory, you will see a template that you have customized.

To use a good template, in addition to the usual accumulation of material, but also need to pay attention to the template and template independent of the unity of the specifications, such as the width of the iphone top signal bar such details.

Sketch Plug-in

Plug-in is the software necessary to design the artifact, both PS and AI have a powerful plug-in library, of course, sketch is the same.

How to install plug-ins

Sketch's plug-ins are mostly written by technical Daniel, and there are three ways to get it:

• Method one: Download sketch Toolbox This tool, download the plugin library you need in between, and then click Plugins on the sketch toolbar to see the plugin library you downloaded;

Sketch Toolbox

• Method Two: Search for the plugin name you need on GitHub, and then just pack and download it.

• Method Three: Click Manage plugins under Sketch's plugin menu and click "Get Plugins" in the Pop-up dialog box.

Click Get Plugins, will jump to sketch's official website plug-in library recommended a few cool plugins

For plugins, it is recommended that you do not install too much at the beginning. The following plug-in libraries are recommended to meet your daily needs:

• Content Generator: Can automatically fill type picture, name, contact information and so on, to avoid the inconvenience caused by manual input;

Auto-populate user picture. gif

• Rename it:
  The purpose of this plugin is to modify the graphics name in bulk.
  For example, the above motion diagram, we can select all the rectangles, and then click on the rename it plugin, named "%N", you can get a series of reverse order of the rectangle named.
  The main rules are:

  • Enter "%N" to number the object;
  • Enter "+" and "button" To change all the selected object names to the end of the button named;
  • When you enter a new layer name, use the "" sign instead of the original layer name. such as: Big button, said to retain the original name, and at the end of the addition of big and button;
  • Enter "%w" or "%h" to add the length and width of the layer.

• Sketch Measure Plugin:
  This plugin can add dimensions, distances, colors, and text attributes, and automatically group notes to make it easier for you to modify and manage.

Long-width callouts for graphs

The use of sketch measure plug-in can be used in team work, it is more convenient to deliver the design manuscript to the relevant colleagues.

• Sketch Notebook:
  Add comments and comments to an object to make it more free to annotate and describe the design.

• Sketch Color Swatches:
  This plugin makes it easy for us to refer to some other site basics at the beginning of the design.

With SIP this color-taking tool, we can directly get the color of the website we want. Take Pinterest as an example:

• First of all, the main color of the 5 simplified book official website;

• Then, enter the color value number in the Swatch plug-in to get the color swatch.

Color swatches: Enter a color value to get the swatches

• Export as Flinto document: This plugin can convert our designs to the Flinto file format in order to complete the dynamic interaction design Flinto This software, because sketch does not provide dynamic interaction capabilities.
  Of course, now also more and more popular sketch+keynote of the combination, White is the sketch in the design of the frame screen and components dragged into the keynote, and then using keynote construction prototype. This is also a good choice Oh!

Sketch Mirror

The important thing to say about sketch's stand-off is that it satisfies the real-time view of the mobile phone, which Axure does not have.

Download the sketch mirror app on your phone and then click Sketch Mirror in the Mac side toolbar, as long as two devices in the same WiFi environment can be viewed simultaneously.

Shortcut keys for using sketch
Shortcut key list, thanks to the picture Kang Ming Learning Combat: Make picture sharing app-personal Display page
Use templates and plugins to create photo-sharing apps Personal Display page

The following steps are made:

• Canvas Settings and layout: Select iphone 5 as the artboard, the canvas is divided into two parts, separated by a rectangle, the elements are grouped;
• Open template, select the iOS design UI template, charge the head signal Bar (white) to the top of the canvas, and resize;
• The picture display part is divided with 20 small squares, and the content generator plugin fills the scenery picture which is defined as "views" and sets the avatar and cover photo;
• Enter text to adjust the details.

The advanced article about sketch is introduced here. Everyone in peacetime life can think more about the excellent app page if you do, your ideas are how, and then to practice, use, encountered do not understand the place on the forum to ask; At the same time, to form a copy of each work of the production process habits, think of which places can be optimized, even small details to improve, Can bring a lot of efficiency improvements.

Wen/Xiao-Miao (Jane book author)
Original link: http://www.jianshu.com/p/ff70b5f35c8f
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

From scratch Learn sketch--advanced article-B