Sketch – A Contender for Photoshop and Illustrator

Sketch






Sketch

Tools of the trade for a digital designer are Adobe Photoshop and Illustrator. Photoshop is an image editing program and Illustrator is a vector graphics editor. In digital design, the two are used in conjunction with each other; however, this can bring a lot of frustration and slow down the designing process.

As a frequenter of Dribbble, a community for designers to showcase their work, the application Sketch is frequently mentioned in projects and in comments. Not wanting to be left out on the latest technology, I downloaded a free trial of the application to see what it was all about.

After a day of trialling Sketch, I’m officially converted and I’m ready for Sketch to be an industry standard. It’s clear that Sketch has been tailored for designers, bridging the gap between Photoshop and Illustrator. It’s a powerful application; the tools make sense and make for a better intuitive workflow. Designers out there might think that it will be hard to pick up a new program but if you’re proficient in Photoshop and Illustrator, you will be an old pro in Sketch in a matter of days.

Now lets explore some of the features that Sketch has to offer.

*Many of these features do exist in Photoshop/Illustrator CC however I’m writing as a user who doesn’t have CC nor have used it. 

Pages and Artboards

Artboard Setup

Pages allow multiple pages in the one document. This is great for large projects that have lots of designs. It allows each design to be separate but kept within the one document, saving the headache of naming and organising numerous separate PSD files.

Similar to Illustrator, Sketch also has artboards which sit on pages. Sketch has a selection of artboard pre-sets one might use such as iPad and Responsive Web. So no need to memorise or google those dimension anymore.

Pro Tip: By clicking on the group heading of the artboards, this will create all of the artboards side-by-side, which is great for presenting responsive design across different devices or in portrait/landscape view. Users can also save their own custom artboard dimensions for quicker access later on.

Layout

Layout Guides

Setting up layout guides in Photoshop and Illustrator are a pain. Sketch automates the process similar to the ‘Create Guides’ tool in InDesign. Sketch offers a couple more options, such as the ability to set the total width of the overlay and setting a gutter or column width.

Auto Save & Versions

Revert to

No more incessant Command + S. As Sketch is a native Mac app, it has adopted Auto Save and Versions, features introduced with OS X (10.7) Lion that works with other native apps such as Preview and iWork.

Auto Save will save during pauses or after 5 mins when working continuously, whilst Versions index a new version of your document every time you open it and every hour while you are working it. Version allows users to review earlier versions with the ability to restore or copy from previous versions.
Learn more here: OS X Lion – About Auto Save and Versions

Background Blur

Blurring Backgrounds

This is one of my favourite tools. With the release of IOS 7, blurring content behind transparent layers in UI design has become a bit of a hot trend. Sketch has made it super easy to achieve with only a few simple clicks.

Rounded Corners

Rounded Corners

For those who haven’t made the switch to Photoshop CC yet will share my rage with how tedious editing rounded rectangles are in either Photoshop or Illustrator. Want to change the radius or change the width or height of a rounded rectangle? Redraw the rectangle.

Sketch allows for adjustments on radiuses along the way, but wait for it – different corners can have different sized radiuses. Any shapes with a corner can be rounded, not just rectangles. Put a radius on it!

Multiple Styles 

Multiple Fill Styles

Ever wanted to fill a shape and then add multiple gradients or colour overlays to it? Sketch lets shapes and text have infinite fills/borders/shadows in the one object.  Super handy.

Shared Styles

A great feature that has been borrowed from InDesign is the ability to save styles. Not only can you create text styles but object styles too. It’s a terrific time saver as any edits to the style will be automatically updated to objects with the same style applied. Perfect tool for elements such as buttons.

Symbols

Symbols are the equivalent to Smart Objects in Photoshop. Group layers that you want to be a symbol, which then can be duplicated across artboards and pages. Any changes made to a symbol will automatically update across the duplicated symbols.

CSS Code Export

CSS Code Export

Symbols are the equivalent to Smart Objects in Photoshop. Group layers that you want to be a symbol, which then can be duplicated across artboards and pages. Any changes made to symbol will automatically update across the duplicated symbols.

Slicing

Slicing in Sketch has been made simple. Slicing can be done a couple ways. Users can draw slice boxes around elements much like Photoshop.  Another way is Insert > Slice and clicking on the object/group and Sketch will automatically set the boundary box to the object. Users can set multiple sizes, pick different file formats, and add a name suffix, great for exporting assets for iPhone/Android.

Pro Tip: layers and groups can be dragged from the layers panel and dropped to the desktop or any folder to generate assets.

Mirroring

Sketch Mirror

Sketch Mirror is an app that allows Sketch to sync to iOS devices for a live preview of designs over wifi.  Sketch Mirror also gives the ability to swipe through artboards and designs which are then viewable on multiple devices simultaneously. A great tool for presenting to clients.

Here are some minor features that are lifesavers and are worth a mention 

Colour Panel

The colour palette panel displays the last 8 colours that were used and saved colours.

Distance

Holding the Alt key will show the distance between objects and the artboard, similar to AutoCAD.

No Calculator Needed

Not so quick at maths? That’s okay because Sketch lends a helping hand. Users can type an equation and Sketch will work out the answer for you. This works for most inputs ­ – position, size, stroke, opacity, with the exclusion of text sizes.
Pro Tip: Add (+) Minus (-) Multiply (*) Divide (/)

Object Selection

Sketch highlights objects as you hover over them but also indicates the layer in the layer panel. No more clicking the wrong layer.

Layers

Often a design could end up with hundreds of layers, which often makes it hard to find a certain layer. Sketch has applied a search function with the layers panel.
Pro Tip: it pays to be diligent with organising and naming layers/groups in Sketch, it will be beneficial and save headaches later down the track.

Customizable Toolbar

Customisable Toolbar

Users can arrange the toolbar exactly as they want by selecting the tools they use often and displaying them in the exact order as they want.

The downside for Sketch at the moment is that it doesn’t support .psd or .ai files, Sketch has its own for file format (.sketch). This is a bit of an obstacle for design agencies that want to migrate to Sketch as their primary digital design tool, PSDs being the current industry standard. In an agency scenario, Sketch could be used as a secondary tool for initial prototyping or small projects that don’t require PSDs being sent off to clients or external development. But who knows, Sketch may introduce PSD/Ai integration in its next release, which would really shake things up.

Sketch, a native application to Mac is available to purchase from the Mac App Store for a low price of $99.99. A bargain when compared to Adobe’s Creative Cloud plan, which sets individuals back $49.99 per month.

If you’re ready to give Sketch a go, a 14-day free trial can be downloaded here.

Sketch Resources

Sketch App Resources – Great website filled with tutorials &  resources to download.

Sketch Shortcuts




Leave a Reply