5 Reasons Why I Left Photoshop for Sketch
I’ve been working in Adobe Photoshop for over 10 years as a designer. At Digital Surgeons, all we’ve ever used is Photoshop for web-based or app projects. Given how fast my workflow had become using Photoshop, I thought there was no way I could move through another program that efficiently.
That’s changed.
I’ve designed my last three projects (2 websites and an app) primarily with Sketch. The times I found my cursor looking for Ps, it was only for what Photoshop is great for — modifying photos.
I still love Photoshop, but sketch has become my main squeeze. If you’re like me and think you could never make the switch, maybe my top 5 reasons will convince you.
1. Vector Perfect Clarity.
Everything is retina now! The first time I opened up a design I did on my new 5K iMac, I cried a little bit. The display was beautiful, my design on the other hand, not so much.
Today, the iPhone 7 resolution is 326 DPI and the 7 plus is 401 DPI and Android phones are the same, if not better. Photoshop can create designs at these bigger resolutions, but the problem then becomes that you have a home page psd that’s almost a gig in file size.
One of the first things that stood out to me with Sketch was just how damn nice my designs looked when presenting them. We use Invision when presenting any web or app-based work, and I noticed right away when I loaded up a design on my phone that it was so damn clear. No slight pixelation from jpg compression, everything was on point. I even compared it side by side with the last responsive mobile design I did in Photoshop, and even though it wasn’t the same project, the difference in clarity was obvious
This was the last project I started in Photoshop before switching to Sketch. I started the homepage comp in Photoshop, but eventually transitioned and completed the project in Sketch, including doing the homepage over again.
On the left side is the Sketch file zoomed in to 400%, on the right is Photoshop zoomed to 400%. Don’t ask me why it’s bigger in Sketch, I couldn’t tell you.
2. Intuitive Shortcuts
One of the biggest deterrents that keeps people from switching platforms is having to learn new key commands and shortcuts.
The first time you try working in Sketch, you can feel really lost. Coming from Photoshop where you’re used to using cmd+ shortcut keys, the ctrl+ shortcuts of Sketch can get a bit frustrating. But after a day or so, the shortcuts really start to make sense. Here’s a list of my top 5 most valuable shortcuts…Oh what’s that? A top 5 list inside a top 5 list? Queue the Inception soundtrack.
Alt+Hover: Measure Distance
With any layer currently selected, alt+hover will measure the distance of that layer to anything you hover over. This is extremely helpful when laying out objects and trying to follow a system. I’ve also found it’s far more accurate than Photoshop’s smart guides.
Cmd+R: Rename Layer or Group
I feel like there are only 2 types of designers: those with extreme OCD and those with slightly less than extreme OCD. It may not seem like a big deal, but being able to do a quick command to rename a layer or group makes it seem stupid if you don’t do it. Cmd+r makes the name of whatever layer/group you have selected in the layer palette editable so you can quickly rename it. What’s great too is that you can hit TAB to go the the next layer below it and it becomes editable for you to rename. Also, whatever layer you have selected in the layer palette is highlighted with a light blue outline in your canvas so you know exactly what you’re renaming.
Cmd+Scroll: Zoom In/Out
When I have to work on something in Sketch, cmd+scroll is one of the shortcuts I tend to use the most. It’s also the one I miss the most when I have to work on something in Photoshop. If you have an Apple Magic Mouse, this shortcut is amazing.
Cmd+Click: Select Layer
Photoshop has this shortcut as well, but it’s far more accurate in Sketch.
In Photoshop, a scenario often happens to me where I make a selection of a layer on the canvas with cmd+click (and drag) and somehow I’ve also selected a layer that isn’t visible, usually due to it being masked. I move the layer I want around, or move its position in the layer palette, and I’ve unintentionally moved another layer, which I might not notice right away, so it quickly gets messy.
CMD+Shift+R: Round to Nearest Pixel (Custom Shortcut)
The reason that everything is so crystal clear in Sketch is because it’s vector-based like Illustrator, but often times in Illustrator your shapes and their positions don’t fall on an exact pixel. This is why, when you bring icons from Illustrator to Photoshop, they can appear a little feathered around the edges.
Sketch does a great job at making sure shape sizes and positions are on exact pixels, but sometimes they miss one. You can usually tell from the inspector window when selecting a shape. The size will be 35x34.68 when it should be 35x35. The shape looks fine but it can mess with your spacing between elements. Rounding to the nearest pixel is a vital shortcut for me.
Sketchshortcuts.com will show you how to quickly make your own shortcuts in sketch.
3. File Size
I don’t know how Sketch does it, but the file size is so damn small, it’s amazing. When making the transition to Sketch, I had already started a web design project in Photoshop. All I had done was the home page:
Photoshop homepage file size: 582 MB
Sketch entire project including same home page: 98 MB
4. Symbols
My god symbols are awesome. I can’t possibly capture their kickass-ness in 1 section, but I’ll try, and then probably write a follow up article.
At first glance, you would think symbols are basically smart objects in Photoshop, but they’re much more advanced than that. A good way to look at symbols is to think of them like they’re your character in Fallout 4. You can change any feature you want in a specific instance of yourself, and at the core your character is still the same. You’re just tweaking traits and characteristics when needed.
These two UI cards are the same symbol. I can easily change the section title, articles title, author name, and read time. I can even change the image of the articles. My symbol is just made up of the core characteristics of the UI card which are: article image, headline, author name, and author name. Changing these characteristics is extremely fast and easy. Symbols are far superior to smart objects in Photoshop.
5. Lightning Fast Exporting Assets
The amount of time I save exporting assets out of Sketch in comparison to Photoshop is unequivocal. It’s literally two clicks. If I want to export icons In Photoshop, I have to open up the smart object from Photoshop to Illustrator, make sure It’s the correct size and that I didn’t resize it in Photoshop, and if I happen to create UI element with Photoshop vector shapes, I would most likely need to recreate them in Illustrator.
Something new, exciting, and a bit scary, at first
Not only has Sketch supercharged my excitement for a better workflow while I’m designing, but it’s also made me believe that that we can in fact break old habits, learn new tools and platforms, and start designing for the where future is going.
At first it can be a little scary because Sketch has what feels like far less tools than Photoshop, but I’ve found that it really lets me concentrate on the design and the purpose of that design more.
As a designer you have to constantly evolve your skillset and learn new tools. Sketch is something you will be able to leverage in your workflow for a very long time.
Originally published at digitalsurgeons.com
