A beginner’s guide to sketch

A beginner’s guide to sketch

Sketch is a vector design tool entirely focused on user interface design. It’s easy to pick up and learn. Because of its simplicity, anyone with little to no training can learn Sketch. It uses a single unit, styles only pertinent to UI design, a built-in iPhone previewing tool called Mirror and Artboards, the most efficient way to design multiple screens.

A beginner’s guide to sketch

Source: Envato

Introduction: What is Sketch?

It is an ultimate tool for iOS, Android, and Web design. It barely weighs 41 MB in disk space, compared to its higher competitor Photoshop’s which is around 1.6 GB. Just like native OS X apps, you have a familiar user interface with a Toolbar, Navigator, and Inspector. As a result, newbies will find Sketch friendlier.

Artboards in Sketch

A beginner’s guide to sketch

Source:Studio Wolf

Artboards are the Screens of your app. Each Artboard signifies a screen or an interaction within a screen. Having an effective workflow is essential to a modern designer.

You can easily reorder duplicate ((command) ⌘ D) or export them. Press A to create a new Artboard, then you’ll find a list of templates (iOS, Android, Web or Print) to start from.

With Artboards and Pages, you no longer have to follow that path, since you can just put all your screens next to each other. It is suggested to show all your layers so that you can easily preview everything on your iPhone.

Working with colors

A beginner’s guide to sketch

Source: Sketch Tricks

A lot of people struggle with colors and color schemes, that’s why it’s important to have a good beginning palette. Sketch’s Color tool lets one store colors universally or for a specific document. Use the Eyedropper tool to pick any color inside or outside of Sketch. With this technique, one can quickly start their own palette.

Working with Text is easy in Sketch

A beginner’s guide to sketch

Source: youtube

If you’re new to typography, you can check out our article on tips and tricks of typography. The fonts that are good can be used are: San Francisco, Avenir Next, Open Sans, and Roboto. If you have a subscription to Typekit, download Museo and Proxima Nova.

To create a new text layer, press T. In the inspector, you can choose the font and edit the styles. What’s more, you can use Text Styles to re-use the same style across multiple text layers. It works similarly to CSS, which allows you to have a global style for h1, h2, h3, etc.

Sketch has a Magic Mirror

A beginner’s guide to sketch

Source: The Next Web

Apple is famous for presenting beautiful photography and mockups in 3D. With Magic Mirror, you can achieve the same results in Sketch as in Photoshop. Magic Mirror is like a nice icon, it shows the care that the app has.

Sketch exports quickly to Multiple Resolutions

A beginner’s guide to sketch

Source: Webdesign Tutsplus

The newest feature in Sketch is its ability to easily export at multiple screen resolutions. By using Make Exportable in the bottom right of the screen, you can export at any scale (1x, 2x, 3x) and 6 file formats (JPG, PNG, SVG, PDF, TIFF, and EPS). PDF, in particular, is useful for iOS assets, and SVG is a fantastic format for the Web.

Click Make Exportable to set up your projects and slices. By default, it’ll set the scale at 1x, but click again and you’ll quickly get 2x, then 3x. You can also set the scale to a width (w) or height (h). For instance, if you wish your asset to export at maximum 800 px wide, set 800w.

Migrating from Photoshop and Illustrator

As a UI designer, the things you’ll be missing are your hard-earned libraries of icons and logos. There’s a solution for that. As long as you know how to export them to SVG, the process of migrating to Sketch is painless.

Essential Plugins

Almost on a weekly basis, there is a new community-made plugin that solves a big problem in user interface design. As designers, there is a long list of problems that we face, so it pleasures the designer every time there is something new.

Keyboard Shortcuts of Sketch

This is a list of the most vital shortcuts to learning in Sketch because these actions are used many times a day. The usual shortcuts are Copy (Command-C), Paste (Command-V), Zoom (Command +/-) and Save (Command-S).

Shortcuts

Shortcut for

Enter Edit Text or Vector
R Rectangle
O Oval
T Text
Alt Show Distance
⌘ G Group Layers
⌘ Shift G Ungroup
Ctrl P Show/Hide Pixels
Ctrl-C Color Picker
⌘ D Duplicate
⌘ Shift L Lock/Unlock Layer
⌘ Shift H Hide/Show Layer
Switch Windows
⌘ 2 Focus on Layer
⌘ Shift V Paste in Place

 

There are over 100 keyboard shortcuts in Sketch. If you’d like to learn all of them, visit the Keyboard Shortcuts section.

Sketch website: https://www.sketchapp.com/

Leave a Comment