Learn app design from scratch sketch

Sketch Design Classroom! Learn app design from scratch sketch

First we open this beautiful gem. The main interface is as follows, and we see that the top is the toolbar, a bunch of buttons. The bottom of the default is three columns, the left is the page, layer and so on operations. The middle is a blank workspace (canvas), the right side is the property bar, we can adjust the various properties of the element in this interface.

This time someone might ask, my toolbar is not like this, empty! How did you do that? OK, to have a comfortable work flow, first of all, we have to make our own work area comfortably, a variety of tools readily picked.

First step: Define the Sketch toolbar

Click on the "Customize Toolbar" button in the pop-up menu, and we'll see a lot of tools in the popup dialog box. If your English is not good, but the relationship is not big, let's recognize it. Pen tool, pencil tool, Text tool, Image tool, slice, artboard (this later speaking), line tool, arrow tool, graphics library, rectangle, rounded rectangle, circle, triangle, polygon, star, symbol, formatted text, combination, ungroup, combine path, The next three are two vector images to be combined, knockout and so on, the next forward,backward-this is the layer on the upper layer, the next layer of operation, tools (tool), deformation, flatness, scissors, graphic arrangement, edit path, rotation, character format, stroke, zoom, mask, View (tools with ruler display and so on), display ruler, display grid, display layout, display pixel, export, create symbol, mirror (a tool similar to Psplay on Phone preview, charge), zoom, make grid, color, font, blank, Separate space (in fact, a line is displayed on the toolbar. ）

Well, after the translation above, I believe you can already find some similar software in your own mind shadow. Now, select your favorite tool, drag it to the box below, or drag it directly onto the toolbar. That's OK!

Step two: Use artboard to draw

After customizing the toolbar, we are ready to start a small trial sledgehammer. So the bottom of this empty area is the "canvas" we can draw. Someone will ask, I can't customize the size of the canvas? Well, just at the beginning of static electricity also have such doubts, but tried just the icon column under the artboard, you are so this operation is superfluous. OK, we choose artboard or INSERT, choose Insert a artboard. This time the mouse becomes a 10 font, we can drag the mouse to draw a "canvas", and then select the right side of the property area, the precise definition of "canvas" size and position. By the way, in sketch, we'd better not call this thing "the canvas", it's artboard (art board). We can create multiple artboard in the same interface, which is very convenient, as shown in. Artboard's name appears on the left, and we can modify artboard's name by double-clicking on the layer name.

Then, draw it on the artboard. Choose rectangles, prototypes, triangles or stars to scribble. Of course, you can also draw something outside the artboard. As a comment. At this point, the layers on the left will have something extra, you can drag them to adjust the layer position, or choose to lock or hide some layers. On the right side of the properties panel, after selecting an element, you can modify the properties of some elements, such as strokes, font color, size, and so on. and commonly used PS and other software is basically similar.

Step three: Sketch features-Experience powerful alignment

We draw some elements on the artboard, and this time we may need to align them, or center, or right. This time we will find sketch powerful alignment function, drag an element, the auxiliary line will be displayed, but compared to PS intelligent too much, this function, only the experience of their own hands to feel.

Fourth step: Use rotate copies to create magical graphics

Select the star you just drew, select Rotate copies, and then select the number of steps you want to copy. I'm here to choose 30. Make sure to see what the magic is going on. If you can't find the rotate copies, take a look at the first step and drag the icon from the Library to the toolbar.

Fifth step: Using bitmaps and creating masks

Sometimes we need to import some bitmaps into our work project, although sketch is a vector tool, but the basic processing of bitmaps is also very good. First select the Image tool, and in the pop-up window, select a picture you want to import. Static electricity here import two cute kitten image, similarly, the right side of the Properties window can adjust the bitmap of some properties, coordinates, size, transparency, border, projection, blur and so on, you see, in fact, his bitmap function is pretty good ha.

Next, we're going to add this kitten to a rounded corner. We use the rounded rectangle tool to draw a rounded rectangle, adjust the radius and position of the rounded rectangle, place the rounded rectangle above the bitmap, select the two graphics, and then select Mask in the toolbar (if you can't find the Mask tool, take a look at step one, drag the Mask tool in, In fact, we should remember some shortcut keys, because the location of the toolbar is very limited), the mask formed, we see the bitmap into a rounded corner. Very simple, huh?

OK, here we are already familiar with a large part of the operation, it can be said that most of the software operation is very easy to get started. Everyone follow the steps of static electricity, step by step experiment, believe this for everyone is extremely simple. Again, as to speak English is not good, or no mac such reason, that is not a reason good, first, static electricity suggested that everyone in the use of software, try to choose English version, the beginning may be some difficulty, but after the habit, you will find that most of the words in every software will appear, Like what pencil ah, rotate (flip) or something. Really do not understand, that simply use, you know this icon or text represents the function, anyway is toss it, we press a key, casually drag, the computer will not explode. It's a big deal to start from the beginning.

Hmm, huh. As for Mac, electrostatic is recommended to install a virtual machine trial, or buy a Macmini (why?). Very cheap performance and good wood? First contact with the Mac system classmate recommended. In addition to the virtual machine, we can install the Apple system on the PC, but it is very time-consuming and not official support, the initial exposure of static electricity to Apple from the "Black Apple" began, this is at your discretion.

Finally, thanks to friends Rongfei and Rongrong in sketch on my help, Rongfei provide a discount code let me at a more favorable price to buy a genuine Sketch,rongrong is also surrounded by sketch, the initial contact, has been pestering her all kinds of questions, It's hard work. In short, we learn from each other and communicate, and hope to have more use of sketch designers appear.

Learn app design from scratch sketch