Disclaimer: This is a Photoshop blog so even though I am trying to be as un-biased as possible, I can’t get away from my bias towards Photoshop.
Updated July 5, 2015 to account for updates on Photoshop
I noticed a lot of my fellow designers starting to use Sketch, and frankly, I was puzzled. At least on the surface, Sketch seemed to be missing so many features that are crucial to my workflow. So, I decided to dig deeper and find out the pros and cons of each app, and whether my preference for Photoshop was still warranted. Could the pros of Sketch outweigh the cons?
Below is the complete Google Sheets feature comparison list I came up with. I also included a few features that are available on both. Those were features that some people may not realize are on Photoshop or Sketch since earlier versions of the apps didn’t include them.
I’ll try to update it as new features come in and correct it if I find I got anything wrong.
View Google Sheet: Photoshop vs Sketch
Note: The cells with the black top right corner have more information if you hover on them, and some cells contain links to blog posts that explain those features in more detail.
This Google Sheet is a long list with lots of little features. Features that alone would not be a reason to switch to or away from either app. So I would like to focus on a few bigger differences that really matter to me as Graphic Designer.
Photoshop Layer Comps vs Sketch Artboards
Update July 5, 2015 - Photoshop 2015 now has Artboards!
I am convinced that whoever doesn’t use Layer Comps just doesn’t know what they are missing out on. Especially since the 2014 Photoshop update that makes it easier to copy settings from one Layer Comp into the others.
However, it doesn’t surprise me that more people don’t use it because there IS a learning curve to it, and it can be a bit of a brain f!#% at the start.
So how do Layer Comps differ from Artboards?
Artboards are great if you’re designing independent layouts that share little or nothing with each other. You can also zoom out and view your whole canvas with all your screens (though there’s a simple solution for that too involving Layer Comps, Linked Smart Objects and Smart Object States, which is shown down below in my examples)
Artboards are easy to understand and set up, but if you are working on an app flow, with lots of shared elements between your screens and with lots different states (color/position/visibility) - Artboards become a pain to iterate on. Layer Comps are harder to set up but a lot more powerful and easier to manage as your design evolves.
With Layer Comps if there’s a layer that appears in several screens, you only need one instance of that layer, you just toggle its visibility, position and styling between screens. That means that if you change that layer, it changes it in all your screens. Yes, you can do that with Symbols in Sketch, but with symbols you can’t change the position of a symbol across all your artboards, nor can you edit the style of a symbol to have it blue in one screen and white on the other. With Layer Comps you can.
If you want to learn about Layer Comps check out this video tutorial:
http://photoshopsecrets.tumblr.com/post/89408902871/layercomps
And Marc Edward’s post goes into a lot of detail:
http://bjango.com/articles/photoshopcc2014smartobjects/
Multiple Zoom Level Views
When you’re designing an icon or any small illustration, you want to see both the details (zoomed in) and how the icon looks when at 100%. On Sketch, this means zooming in and out as you work on the icon - zoom in to edit it, zoom out to see what it looks like. On Photoshop you can have 2 windows for the same file side by side, one at 1600% and the other at 100% - thus getting the best of both worlds!
To see it in action, open a document then click Window > Arrange > New Window for [doc name]
Photoshop Smart Objects vs Sketch Symbols
Before digging deeper I thought to myself “Oh, Sketch has Symbols, they must be just like Smart Objects!” But then I found out that on Sketch you can’t edit the style of a Symbol without altering all symbols - I mean if you do so outside the Symbol rather than editing the Symbol itself. So if in one of my screens my icon is blue and on the other screen it’s white, on Sketch that means I need 2 Symbols - defeating part of the purpose of a symbol. If your app has a lot of icons and you are asked to update those icons, it’ll be a pain to update them all in 2 places.
Symbols on Sketch also can’t change sizes. If you resize one Symbol, all Symbols are resized. With Smart Objects I can have 1 large Smart Object that can also be shown as an avatar in a different screen. I update 1 Smart Object and all my images, big or small, are updated.
Symbols on Sketch are also hard to nest into each other. Apparently there is a way but it’s certainly not as simple as dragging it into each other because I couldn’t figure it out.
Smart Object States and Linked Smart Objects
These are very new features that have become a crucial part of my workflow. With Smart Object States each Smart Object can have as many variations of it as you want. This works with the power of Layer Comps, each showing as a State on the Property Panel on your Smart Object.
As an example, I have a PSD with lots of dummy avatars. It’s a single PSD but it includes several avatars. So if ever I need an avatar, I place this PSD as a Linked Smart Object and change the states to see all those avatars. If ever I want to change a picture from that collection of avatars, I change it in one place and all my documents are updated.
You can use it to create a library of widgets, avatars or create different button states. And if you use Layer Comps for your screen designs, you can even mimic one of the advantages of an Artboard by creating a new document with a Linked Smart Object to your screens, that uses States to show all your design states in a single canvas.
I’m sure I lost some of you here. Like I said, it’s hard to grasp, but extremely powerful when you do.
If you want to learn more about Linked Smart Objects and Smart Object states check out this post by Bradee Evans, the lead UI designer for Photoshop at Adobe:
https://medium.com/@bradee/layer-comps-and-place-linked-smart-objects-6feb574963ef
Once again, Marc Edward’s Post goes deep into it:
http://bjango.com/articles/photoshopcc2014smartobjects/
David Stubbs thoroughly explains the power of this Smart Object States and Linked Smart Objects in this post:
https://medium.com/by-heist/dismantling-the-photoshop-design-process-6d7b6891970a
Shortcuts
If something can be done on Photoshop, you can almost certainly bet there’s a shortcut for it. It may be that Sketch has shortcuts that I don’t know about, but on the surface there are a lot of shortcuts that I use that I couldn’t find on Sketch and that would really slow me down!
If you want to become a Photoshop shortcut master, check out these posts:
http://photoshopsecrets.tumblr.com/tagged/shortcut
Libraries
This is the brand new feature which is totally killer. You can create a Library for each app, OS, product, etc. The Library can include a Color Scheme, Smart Objects, Layers, Layer Styles and Text Styles.
These Libraries are available from any document you’re working on and even across multiple computers since they are synced through the Cloud.
Adobe also told me that sharing Libraries with teammates will be available in the next point release. And that will be super powerful for design-teams working on the same project.
Update July 5, 2015
Shared Libraries are here! You can now share and sync Smart Objects with colleagues!
As far as I could see, Sketch doesn’t really have anything that compares.
To learn more about Libraries check out this post:
http://photoshopsecrets.tumblr.com/post/99320444200/whats-new-in-photoshop-cc-2014-v2
Quality Assurance
Sketch is full of very basic rendering bugs that would never make past Adobe’s QA testing.
Photoshop isn’t perfect of course, but these days it’s a lot more solid application and produces more predictable results.
I have a list of dozens of these rendering and re-draw issues, many of which are getting fixed with each update - so I don’t want to bash on this point too much. My only comment is that at the time of writing, Sketch doesn’t seem ready for prime-time as a professional tool for me.
Sketch excels on some rather simple but super useful features, and I hope they all come to Photoshop soon!
Artboards
Update July 5, 2015 - Photoshop 2015 now has Artboards!
To me the only advantage Artboards give me over Layer Comps is in the ability to see all your screens in one place. But as mentioned above, Layer Comps give me a lot of advantages that artboards alone can’t match. Though as you’ll see on the Photoshop file linked below, there’s a quick solution to mimic that advantage.
Ideally, Photoshop would have a way to visualize all Layer Comps in one screen by default - that way you get the best of both worlds.
Blur Adjustment Layer
With iOS 7, blurring content became a design trend and Sketch makes it easy to do so. You just draw a square over what you want to blur and use the Blur Background feature - like an Adjustment Layer in After Effects if ever you used that.
On Photoshop the only way yo achieve this is if you put all your objects inside a Smart Object and then blur the Smart Object. Or worse, rasterize a copy of your objects and blur them. Not ideal.
Multiple Styles per Layer
Update July 5, 2015 - Photoshop 2015 now has Multiple Styles per Layer
As of the update of June 2015 Photoshop allows up to 10 of the same Style per Layer. Only the styles with the + button next to them can be duplicated.
The current solution on Photoshop is to put your layer inside a Group and then add a Layer Style on the Group, but that ain’t pretty and doesn’t always work as you want, so then your only option is to dupe the Layer, set its fill to 0% and then style it.
Shared Styles
This is a wonderful feature too. Say you have this Drop Shadow that’s used in 15 different places in your app, and then you decide to adjust it. Without Shared Styles you have to copy paste styles to 15 different layers.
Copy/Paste Layers
Yeah, seriously, this isn’t possible on Photoshop, no, really, it isn’t. You can duplicate a layer but that’s not the same as copying/pasting. I sometimes work on files that have 300 layers and I want to copy a layer from the bottom to the top and I need to drag the thing all the way up. #killme
Clean, Focused UI
Using Photoshop sometimes feels like flying an airplane. It’s got 1000 little buttons and knobs all over the place, most of which you rarely touch.
Sketch on the other hand, is an extremely focused app. When I opened it the first time I needed little to no guidance to start using it. It’s like a Zen Garden in comparison.
However, Adobe recently announced “Project Recess” at Adobe Max, which aims to solve this problem. I got to play with it and It’s still in early stages but it looks very promising! You have the full power of Photoshop, but with a more focused and cleaner UI.
On Photoshop 2015 released in June, you can access the new interface by going to Preferences > Technology Preview and checking “Design Space (Preview). Click OK and you’ll see it.
You can watch the demo they gave at Adobe Max on YouTube:
https://www.youtube.com/watch?v=r3bkOUhJ8tw
COMPARING PHOTOSHOP AND SKETCH FILES
The best way to see the differences in workflow between the two apps is to create the same design on both Photoshop and Sketch. For this I designed a basic messaging application and my good friend and Sketch user Jake Desaulniers redesigned it in Sketch.
On the Photoshop version I used Layer Comps, Smart Object States and Linked Smart Objects heavily to make it easy to iterate on.
When selecting a Smart Object Layer, make sure you open the Properties Panel so you see its states.
I also created a separate PSD called “Messages Artboard.psd” where I used Smart Object States to preview all my Layer Comps. Since it’s a Linked Smart Object, that file updates automatically as I save my main file “Messages.psd”.
Here are some advantages Photoshop is giving me
Layer Comps mean I only have 1 instance of each layer, rather than 1 layer per Artboard - this means if I change anything about that Layer (position, visibility, style or content) the changes can easily be applied to all other Screens.
If I update the main Profile Pic, both the big image and the avatar get updated on all screens.
Smart Object States and Linked Smart Objects make it easy to manage and make changes to the different contact cells and avatars - as well as re-use them in other PSDs if I so choose.
Sketch (by Jake Desauliniers)
On the Sketch version Jake took advantage of Share Object Styles and Shared Text Styles to make it easy to update bits and pieces on the fly across all the artboards.
Here are some of the advantages he feels that Sketch gives him:
Shared Object Styles, while not used heavily in this example allows him to update colors, shadows and other effects on multiple objects all at once.
Symbols are not as robust as they are in Photoshop, but they can still be used in some cases where objects don’t change as frequently.
It was easy to duplicate Artboards to explore different design options
Using the companion iOS app you can flip through artboards and pages with a flick of the thumb, which is great for sharing on device in presentations
Creating the blur effect on the last artboard is made really easy with the Background Blur effect. Just place a layer on top of everything and all layers under it will get blurred.
What I found through my quick research is that for a graphic designer both apps can achieve similar quality final results. Where they differ most is in the workflow, render reliability and how easy it is to iterate on designs.
If all you are doing is copying a design and intend to make NO changes to it, you can do that just as quickly on either app.
But because of Layer Comps, Smart Objects (Linked and States), Libraries and Actions, I can make changes to my designs very easily and have them updated across all my screens and even across documents within seconds. Sketch’s Shared Layer Styles are great, they just aren’t enough for me.
And this is where I found I differ from my fellow designers - I am clearly a lot less patient and deeply dependent on those features and on shortcuts to iterate quickly on my designs. If I ever need to perform repetitive tasks and update things manually I get very irritable - so Sketch would not be a good tool for me at this point.
It really just depends on what matters most to you.
To read other views which are more focused on Sketch you can check out these two posts:
http://danielmall.com/articles/sketchlive/
http://blog.mengto.com/sketch-vs-photoshop/
They include some wrong and dated statements regarding Photoshop features or lack thereof - but it’s likely this very post also includes wrong statements about Sketch too.
If comments come in with anything I got wrong about Sketch, or things that might be possible by using plugins, I’ll make sure I update the post and the Google Sheet.
