Skip to main content

This is a release candidate of the next SmashingMag. Report a bug on GitHub or via email. Beware of cats.

The Sketch Handbook

by Christian Krammer

The Sketch Handbook

If you’re designing for the web today, you are probably using Sketch. We do, too, so we created “The Sketch Handbook”, filled with many practical examples and tutorials in 12 jam-packed chapters.

Hardcover

$ 34.90

Gorgeous, printed book. eBook is included. Now available.

eBook

$ 14.90

PDF, ePUB, Amazon Kindle.

“I have been using Sketch for a while but wanted this to understand the software at a more foundational level rather than just diving head first into it. The book is organized in a manner that it is simple at the beginning and gets more complex as you progress. The writing is crisp, clear and the author does well what he set out to do – impart his Sketch knowledge to folks who want to know more about it. I highly recommend it for people who want a great foundation and an effective bunch of lessons. ”

Justin Watts

Smashing Magazine reader

About the book

If you’re designing for the web today, you are probably using Sketch. We do, too, so we created The Sketch Handbook: our brand new Smashing book, filled with many practical examples and tutorials in 12 jam-packed chapters. This book will help you master all the tricky, advanced facets of Sketch, so that you’ll become more proficient and fast when using the app.

*The Sketch Handbook* will guide you through every aspect of Sketch: from smart guides and layer manipulation to responsive baseline grid, nested symbols and group resizing. Whether you are a beginner to design or just started to use graphic apps, it will teach you the techniques you need to start designing user interfaces in Sketch.

What’s in it for you? Well, you’ll get a valuable overview of many different topics and techniques that are bound to make your design workflow more efficient and future-proof. You’ll learn how to design an advanced multi-screen mobile app, a responsive article and a variety of icons, for example, and dive deep into organizing the artboard, optimizing for Retina screens and exporting your assets for iOS and Android. Icon and logo design and export are also covered along the way. Finally, you’ll learn about the most recommended plugins and a number of useful tips, tricks and best practices. Everything you wanted to learn about Sketch, in one place.

Who Is The Book For?

Whether you’re a beginner to design or just started to use graphic apps,The Sketch Handbook will teach you everything you’ll want to know about Sketch. Also, if you’ve used other apps like Photoshop or Illustrator before and want to try out something that’s more geared towards UI design, you should have a look at the book. Intermediate Sketch users will get valuable tips and tricks in the book they didn’t know of yet too, of course.

Table of Contents

You’ve probably guessed it — the book doesn’t deal with theoretical concepts but real-life examples. Follow them along and create your own version of the projects. A centerpiece of the book is workflow efficiency: you will learn how to perform actions as quickly and correctly as possible, mainly with the help of keyboard shortcuts and the clever use of the available features. Every essential part is described in the necessary detail.

Author
Chapter
An Introduction To Sketch
+

The first chapter gives you a compact overview of the most important features of the design app, as well as an introduction to the interface of Sketch. Mainly, you will get a short peek into its best features: Sketch is easy to learn, fast and lightweight, it has a clean, uncluttered UI, grids are built right in, it provides powerful export options, lets you easily adapt your design to different sizes, and most of all: Sketch is vector based. Everything you build is indefinitely scalable: a must with today’s vast array of devices.

Designing An App
+

The first screen we tackle is the details page. Everything starts here with the artboards which give your design a defined space. After you have added the first elements and text layers, you can read how to style them and change their properties. This includes an overview of the available shapes and fill types, as well as the usage of images. With the first layers appearing in the layers list, it’s also important to learn the best way to organize them. Lastly, you will employ an 8-px-grid, that gives the design some structure and avoids random placement of the elements.

The Power Of Iterations And Artboards
+

A design is never finished, so we will use artboards to evolve its elements and try out different ideas. You will learn about symbols and shared styles that allow you to reuse elements and keep them in sync. This chapter also comes with some advanced techniques, such as masks, shadows, gradients, and boolean operations. The latter are especially important, as they let you combine basic shapes to form complex objects. This is also the first touch point with plugins to enhance Sketch. To round things up, we will have a look at how easy it is to recreate an icon in the design app.

Creating A Logo For The App
+

In this chapter, you will not only learn how to create a logo but also how to generate ideas surrounding it. The logo creation process involves a great deal of vector manipulation. You’ll get an overview of the different point types and their specialties. Most of the time you don’t even need to create a vector from scratch, but you can manipulate a basic shape instead. Once the logo is done, we’ll also finish the details’ page.

Creating The Overview Page
+

Now that we have a detail page and an overview page, let’s introduce a new options bar that contains a couple of different icons. We’ll create those icons all by ourselves, as this is the perfect way to apply all the skills you have already learned, such as nested symbols and the usage of rotation. Furthermore, you will also learn how to create the list of places to visit a card view.

Exporting
+

This chapter is all about one of the strongest features of Sketch: exporting assets. When doing the setup right, all you need to do to export all your different assets is to press a button. We’ll walk you through a set of iOS and Android assets and you’ll learn how to preview your designs on real devices and how to make your design workflow more developer-friendly.

Design The Article Page
+

We’ll focus on how to work with grids and layouts, and how to lay out the content in an ordered manner. While dealing with lots of text and images, we’ll also look at how to sync paragraph and character styles.

Going Responsive
+

In this chapter, we look at a few different screen widths to figure out how any possible adaptation might look. Sketch will help us define how those elements react when they are being resized. With a little preparation, you just need to adapt the parent container and everything changes accordingly. Finally, this chapter will provide some important tips and tricks on how to best adapt the font sizes from one breakpoint to another.

The Final Breakpoint: Desktop Widescreen
+

After we’ve finished the first two breakpoints, we’ll look at how the available information can be arranged on a widescreen display. Therefore, we’ll adjust the grid and adapt most of the article elements to this new grid.

Designing The Category Icons
+

We’ll create four different icons to reuse them as often as possible and to combine them into complex shapes with boolean operations. We’ll use keyboard shortcuts whenever possible. Also, we’ll learn how to use these icons with a grid.

Export The Category Icons
+

The category icons are finished, but the work isn’t done yet. This chapter focuses on their optimization. These optimizations include adapting to borders wherever possible to keep the file size down when exporting these assets.

Mini Projects
+

In this course we will recap some of the topics we already have touched, but in a less formal way. Consider these as “design snacks” of sorts: fun projects that let you play around in Sketch. You will learn how to create a realistic clock, five different versions of pie charts, textured type, a round progress bar, and some logos. If you are already an intermediate user of Sketch, this is the chapter for you.

The Sketch Handbook

Technical Details

  • 378 pages
  • 17 × 24 cm (6.5 × 9.5 inches)
  • Quality hardcover with stitched binding and a ribbon page marker
  • Released November 2016
  • ISBN: 978-3-945749-47-0
  • Free worldwide airmail shipping from Germany

Frequently Asked Questions

If you have any questions, we are right here to answer them. We love our customers, and we’d love to help you in any way or just listen to your story. So please feel free to ask questions via Twitter @smashingmag — we’ll get back to you right away. Just in case: here are answers to some frequently asked questions.

How much does shipping cost to my country?
+

There’s no shipping costs for Smashing Book5 or all orders above $20 — wherever you are in the world! We ship everywhere worldwide. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay.

Delivery times to my country?
+
All books will be shipped via airmail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview. Shipping has started mid-July 2015.
Is the eBook included?
+
Yes, the eBook is included when you buy a printed book, so that you can download the eBook right away. For most of our books, we provide PDF, ePub and Amazon Kindle formats.
What payment methods are accepted?
+
We accept PayPal, VISA, MasterCard and American Express. Of course, we use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate. And no, we don’t store your credit card data on our servers.
Is there a money-back guarantee?
+
Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back with no ifs, ands, or buts!
I have a question that is not covered here.
+
Please leave a comment below, or get in touch with us via the contact form or via @SmashingSupport on Twitter. We would love to help you in any way we can — you know that!

That’s it, everyone! We sincerely appreciate your support and trust, and we’ll make sure to deliver the book to you as soon as possible. Cheers!

Hardcover

$ 34.90

Gorgeous, printed book. eBook is included. Now available.

eBook

$ 14.90

PDF, ePUB, Amazon Kindle.

About The Author

Christian used to be very active in the Sketch community once, and even wrote a book about the design app. Nowadays he works as an Evangelist for Gravit Designer, where he takes care about their users and helps to improve the application.

Christian is a proper nature-boy from Austria, where he lives with his wife and 10-years old son. When he’s not staring at his laptop for once, he loves to spend time with his family, go outside and do some sports or watch a good movie. His all-time favorite is Fight Club, but he’s more into a good series lately, because, you know, winter is coming.

More Books