July 29, 2016
|
July 29, 2016
The Basics Of: Sketch
What it is, how to use it and why it’s good.
by
Matthew John
Senior Designer
About 18 months ago I was using Photoshop to design most things – websites, mobile designs and even saving out icons.
It wasn’t until our CTO and all-round tech guru, Mike Ebinum, suggested we (meaning me) should try this program Sketch.
Thinking it would take a long time to learn a new program, I resisted for a few weeks, then finally thought I’d give give it a go.
I started watching some tutorials and guides (linked below) and set out on my Sketch journey.
Coming from Photoshop, Sketch probably took only a few days to master and an hour or two to get the lay-of-the-land.
After a few weeks, I was hooked.
In this guide, we’ll run through a bit of an overview of what Sketch is, how to use it and why we love it here at SEED.
Sketch is a vector based design program used to create user interfaces, icons, prototyping, wireframes, web and mobile apps.
Multiple Artboards & Pages
In one document, Sketch allows you to have multiple artboards with no limit, which is very helpful for things like mobile design, showing you all the screens in one view.
You can also have multiple pages in the same doc. This allows you to section out, design screens, icons, or whatever you desire.
Exporting
Sketch gives you the power to export your work in several ways.
Slice (single) layer
Exporting single elements like images, icons or logos is super easy.
You don’t need to save out an entire artboard, just select the element you want to save and head to the export options at the bottom right of the screen to save.
Group layer slice
Need to export several layers together in one image? No problem. Group them together (Cmd + G) and export by choosing your export options as above.
Export artboard
Select an artboard an export the whole thing as an image.
Export all slices
File > Export to export all slice, or tick/untick what you want.
Export options
Export @1x, @2x and @3x (with extensions) for high res screens in one hit. File types include, .jpg, .png, .svg, .tiff, .eps, .pdf
Symbols
‘Symbols’ are groups of elements (shapes, text, icons etc.) you can use throughout your design. If you change and element one, the rest of the symbols will follow.
Text Styles
You can set a font, weight and colour to use through your design.
Layer Styles
Pretty much the same thing as text styles but for layers. This lets you sync borders, fills, shadows and other styles across multiple layers.
The Grid….
Customised grids allow you to design pixel perfect layouts.
Integrations
Invision
If you haven’t heard of Invision, it’s a web based platform for uploading, prototyping and sharing design screens. No more emailing clients with massive .jpeg attachments!
Invision also integrates with Sketch in an awesome way.
Download Invision Sync, save the Sketch file in the Invision assets folder on your desktop, and all of your artboards will sync and appear on Invision.
Craft (created by Invision) will soon be releasing a cool prototyping version with animations.
Marvel
To be honest, I haven’t used Marvel, but if you want a highly interactive prototype, and don't want to wait for Invision's Craft (more about Craft below) updates, this looks good.
Whether you’ve used Photoshop or Illustrator before or not, sketch is a pretty easy program to use.
Let’s start with the basics:
Layout
The layout is similar, but more user friendly than most programs. Sketch has layers (for objects and elements) on the left, ‘Inspector’ (text, colour, dimension, blending mode etc.) on the right, toolbar (customisable) up top and canvas in the middle.
Resources to get started
Level Up Tutorials
Learn Sketch
Although this is a pro-Sketch-how-to post, we aren’t trying to start shouting war on whether one program is better than the other, but rather point out the strengths and best purposes for each.
Plugins
Plugins make Sketch an amazing tool. Opening the software up to the people has allowed Sketch to grow quicker and become more useful than PS for screen design.
Here’s some of the most useful plugins for sketch:
Sketch Toolbox
This tool lets you browse popular plugins for Sketch, download and automatically install your selected plugin. It also keeps those plugins up to date!
Craft
Craft came out as a rapid data tool to use in design work, but is also set to release native protoyping within Sketch! Craft is also available for PS.
Font Awesome
Sketch’s Font Awesome plugin gives you vector icons that can be easily customised. Don’t forget to install the font!
Generate GIF
Need to create a simple animated gif? Easy. Setup multiple artboards and you’re ready to go.
Prism
Prism creates an artboard with all the colours in your 'Document Colours' with its respective label in a variety of formats.
There are plenty more amazing plugins for Sketch. Here's a list of them.
Web Rendering
Sketch renders content much closer to the screen compared to PS. That is all.
Exporting
Export options as we’ve explained above makes Sketch far more superior than PS in this regard. Sketch gives you the ability to export to save @1x, @2x or @3x, and does not need to be on an artboard.
Price
Sketch is a one-off purchase of US$99 (about AU$130-$150), whereas PS alone is AU$11.99/month, then AU$22.99/month if you want Illustrator as well, then AU$57.99 for the entire suite.
The PS subscription isn’t outrages – just annoying. As a comparison, past one year of use, you’ll still be paying for PS/Adobe.
Less Training
Firstly, if you’ve been using PS, transitioning to Sketch will be pretty easy. However, if you’ve never used any program like this, it will be much quicker to pick up than PS.
Some resources are ^above^ in this post to help you get started.
Sketch is Made For Screens
Sketch is made for prototyping, wireframing, web and mobile design. Photoshop was made for editing and enhancing photos.
Although PS is slowly being repurposed to also do screen-based work to compete with the likes of Sketch (PS now does multiple artboards in one file), it still has the behemoth-sized feel and overwhelming interface for new users.
App Size
Photoshop is a pretty big app and therefore needs quite a bit of space on your hard drive.
PS CC takes up nearly 900MB whereas Sketch is very lightweight and only requires about 45MB.
Photo Editing
This is a pretty obvious one, but PS is better for editing images compared to Sketch.
PS is a huge program based around image editing and has far, far, far more options to create imagery.
However, you can still do the basic with with images in Sketch like cropping, blending, overlays, opacity, filters, even applying transparent gradients.
If you want more image editing capabilities, you may still need PS…or do you?
We have been using Affinity Photo which is new-ish photo editing software, and it’s awesome… We plan to do another whitepaper like this one on Affinity in the near future.
Mac Only, No Windows Allowed!
Another snobby Mac-only piece of software, I know…
Printing
Obviously Sketch is a web/screen based software. However, if you need to print out an app screen of a client (God forbid) you can print out via .jpeg or even a .pdf file. And yes, clients will still ask for printouts every now and then.
Sketch App Resources
This is probably the biggest collection of free and premium design resources for Sketch. Browse and search through a variety of UI kits, icons wireframes, iOS, material design and mockups.
Official Facebook Group & Twitter
The people at Sketch are very active on social media. The Facebook group helps each other out by sharing tutorials, resources, solving and reporting bugs.
It’s also a good place to find out about the latest release, blog and guides.
Following them on Twitter and you'll be the first to know of any updates and get helpful advice.
Sketch on Medium
Lot’s of guides and how-tos here.
Freebiesbug
Much like Sketch App Resources, this is a collection of mockups, icons and UI elements to download for free.
Keyboard Shortcuts
If you’re a shortcut junkie, this will satisfy. All the basics are there – CMD + C = Copy and so on.
Sketch is good!
It does everything you want in a design/prototyping program. It’s quick, lightweight, easy to use and made for the screen.
Let us know your thoughts on Sketch and how you've found it.
Want some help on building your startup, growing your business and creating products/services that your customers will love? Contact SEED to make an inquiry.
