Originally published at: http://www.sitepoint.com/3-reasons-use-sketch-app/
Let me start by saying that I am a long-time Photoshop user. It’s a mighty tool that hasn’t quite managed to outgrow its focus on image editing, while still maintaining a firm stance as a multi-purpose design application.
But there are always drawbacks to taking such a broad approach. Generations of Photoshop users have noted its complex, sprawling user interface, and the demands it places on system performance.
Since Adobe’s announcement to discontinue Fireworks after CS6, many software developers have taken the opportunity to throw their hat into the ring. One of these software developers is Bohemian Coding.
In this article I’ll introduce you to Sketch App for Mac (yes, it's currently Mac only) and explore three areas that I think puts it a cut above the competition.
If this is your first interaction with Sketch, head on over to the Bohemian Coding website and download a trial.
1. Intuition
When you open any big, serious graphics app like Photoshop and create a new document, the first thing you're asked is to specify the canvas dimensions.
In many cases, you might not know this information right away, so we’re often left creating a large canvas that we’ll need to trim later on. Sketch solves this by having an infinite canvas, but also gives you the opportunity to work within a confined artboard. A range of templates are available as well.
Personally, I don’t like to be forced to make decisions before I’ve really even started a design. A blank canvas is an opportunity to explore your unlimited creativity and an infinite canvas is a splendid way to kickstart your mojo.
It’s tiny obstacles like this that add up to wasted time. When we create a layer we usually navigate to Layer → Layer Styles in the toolbar to apply styling (unless of course we’ve manually created a keyboard shortcut). Similar kinds of settings are available in the Options Toolbar as well.
On the other hand Sketch has a single styling pane called 'The Inspector' — the settings differ depending on the type of layer you’re focused on.
It’s called intuition. Sketch App’s Inspector houses options, settings and styles in a single sidebar on the right side of the application window, only ever showing the options that would be useful to the current layer or task at hand — a clean, minimal interface allows more room for descriptive labels and doesn’t induce decision paralysis.
Naturally Photoshop has added more features over time to expand the userbase of their flagship application. While these additions contribute to an already impressive feature list, it has also lead to many label-less icons and menus.
When using Photoshop, I often find that working full-screen is required to be able to see all menus at once, as opposed to toggling them on and off.
But with Sketch App, I’m mostly able to work in a 800 x 600px window; the size of a 2x Dribbble shot.
2. Snap-to alignments
While snap-to alignment certainly requires intuition, I think it deserves a separate mention regardless of the fact that Photoshop has improved significantly in this area. One specific issue that has always afflicted us Photoshop users, much to our frustration, is the trial-and-error approach to aligning anti-aliased edges.
Aligning to the Pixel Grid
Historically, it has always been tricky to align layers correctly, an issue which Photoshop CS6 has tackled with a setting called Snap Vector Tools and Transforms to Pixel Grid. But this is still somewhat finicky.
Prior to this we had to zoom-in and manually move layers by gentle amounts with keyboard taps. In fact, this is still the only infallible way of doing this, even with the Align Edges setting switched on.
Sketch App makes this work without having to search through the Preferences and Option Bar settings. We can align layers relative to other nearby layers either by their edges or horizontal/vertical centre with contentment that they will in fact be correctly aligned.
Pixel alignment hints when dragging
Photoshop and Sketch App both measure how far you’ve dragged a layer if you hold alt while doing it, and they will also leave a copy of the original layer for comparison.
I’ve always admired this feature from both applications, but Sketch App offers more information both numerically and visually — even going as far as remembering measurements so that we can apply consistent margins between various layers. Layers that we may not have even created yet. Compare the two images below.
I think Sketch App (top) explains the movement much more elegantly.
Sketch App’s alignment tools Photoshop’s object alignment facility
3. Granular Export
Sketch App natively supports a number of features that in the past were only obtainable in CS6 applications by installing extensions. But looking at the December 2014 update to the Creative Cloud, we can see that Photoshop is catching up.
One of those features is the ability to export individual layers with only a few simple clicks — this is one of Sketch App’s most critically acclaimed features. Sketch has both an export button and a keyboard shortcut (CMD + Shift + E) directly at hand.
If you select a layer (or multiple layers) and click the “Make Exportable” button in the bottom right corner of the application window, you’ll be offered the chance to choose a file format, a suffix for the filename and even the option to save in 1x, 2x and 3x resolution all at once.
After that, Sketch remembers these exports as “slices”, a concept probably familiar to Adobe Fireworks users. You’ll be able to use that keyboard shortcut I mentioned to reveal the active slices on the canvas and at which resolution you exported them to.
Selecting “Export” in the modal will initiate the operation again, saving you the trouble of selecting each exportable layer all over again, a concept that’s very useful for another designer or developer receiving the .sketch file for the first time.
Sketch App’s Export Facility
Photoshop's workflow isn't too different, but the common errors, warning dialogs and tricky keyboard shortcut (CMD + Opt + Shift + W) increases the time it takes to get from A to B.
Conclusion
It’s important to remember that Sketch App is designed solely for user interface and app designers; as good as it is, Photoshop certainly aims itself at a much wider market. Sketch will inevitably be more targeted at UI designers.
You could compare Sketch to Fireworks, or even Illustrator too, but Photoshop has become much more versatile than any other design tool, and we are able to use it for many, many things — designing user interfaces and even entire apps is one of them.
Continue reading this article on SitePoint