Switching from Photoshop to Sketch: A Live Blog
Roughly a year ago, I started hearing increasingly more chatter on the internets regarding how great Sketch had become for designing user interface mockups.
As a fifteen to twenty year long Photoshop user, I hadn’t put much thought into the praise being spread. Why switch when Photoshop gets the job done, I thought. Photoshop, while not handling things extremely well in all areas, gets the job done for the most part. This old dog didn’t want to learn new tricks.
Lately though, that chatter has become increasingly louder. Again, I paid attention, but this time with more intrigue. Screw it! I’m jumping in…
I’ve decided to lock up Photoshop and go all-in with Sketch. I’ll be live blogging my thoughts, issues, love, hate, useful resources, and more over the course of the next 7 business days. Whenever I have something to say I’ll be publishing on the fly, so keep an eye on this page. The latest posts will appear on top. I’ll also be asking questions on Twitter with the hashtag #behoffdoessketch
TL;DR /
It only took 3 days, and I’m sold on Sketch being the best tool (at the moment) for designing websites, apps, and user interfaces. However, I’ll still continue to document my experiences, resources and personal findings from time to time on this post.
Day 5 through the end of time…
Jun 24, 2015 —
◍ The Sketch Preview plugin fills the void of Skala Preview’s integration with Photoshop.The plugin is not quite as cut and dry as direct integration is concerned, but it’ll do the trick for now. Love me some Skala Preview.
◍ The SketchSquares Plugin that easily allows you to fill shapes with Instagram images and Apple Watch GUI for Sketch have come in handy lately.
Day 4 / Tue, Jun 23
8:36a — Been using Sketch Mirror to preview one of the iOS apps I’m working on and it can be a little buggy at times. Mostly when it comes to refreshing the screen on my iPhone to preview the latest changes.
8:18a –Four days ago when I set out on this experiment, Stefan Hartwig said “give it 3 days and you won’t look back.” As I enter day 4, I say that’s about right. Yesterday (day 3), I felt extremely comfortable moving around the interface and felt the areas that I was still learning — which in turn was slowing me down — have risen as the power features that drastically improves and speeds up my workflow.
I’ll still follow through with documenting the next 3 days, however
I’m convinced that Sketch, at the moment, is the best tool for designing websites, user interfaces, and apps.
Photoshop certainly still has its place in my workflow, but it appears right now that its duty is solely on bitmap effects and doctoring.
Day 3 / Mon, Jun 22
4:42p — New plugin Sketch Data Populator lets you use JSON to automatically add real data to Sketch mockups (via @khoi)
2:57p — Not much to say besides, really enjoying my experience with Sketch and it’s only Day 3. I feel like I have a really firm grasp of things and fumbling less and less (hardy any today actually). The learning curve from Photoshop or intuitive. I feel like it takes more “unlearning” than learning.
10:58 — As a Droplr user (love Droplr btw), I can easily share screenshots with a quick keyboard shortcut in Photoshop, however Droplr’s integration is still in development. Bummer. However, if you click on an artboard and drag it’s preview, export thumbnail to Droplr in your Macs menubar it will create a link. Not as easy as a shortcut, but does the trick for now. Thanks for the tip, @paulozoom.
8:36a — A handy trick when masking an image in a shape and having it resize to fit the fill area:https://www.dropbox.com/s/5e7cssolsvxaspk/fill-pattern.mov?dl=0(via @filtred)
8:20a — It’s rare that I work on weekends unless I absolutely must. Mostly because I appreciate the time away from the screen as much as I do on it — not to mention the kids keep me quite busy. However, I found myself excited for Monday to dive back into Sketch. I’ll take that as a positive note. Sort of like that feeling of designing your first responsive site and learning the limitations, curves, and new medium. It feels exciting again. Let’s do this, day three!
Day 2 / Fri, Jun 19
5:12 — That wraps up day two. Will resume after the weekend. Quick thoughts: I can come to get use to this! :)
2:19p — Sketch definitely makes my workflow much more organized. Again, as a messy Photoshop layer person, this feels nice. Ahhh.
10:55a — Finding things here and there to be a little wonky. Such as, sometimes I can easily grab onto shapes and sometimes it grabs something else. Haven’t figured out what I’m doing wrong. Another thing, when I’m in a group and drag in a symbol it pastes it above the group. Would love for it to appear within the group that I’m already in.
9:09a — Love this instance where you “union” (combine) together two shapes and the scale and center beautifully as you make larger / smaller. See video.
8:31a — I must say, I’ve finished out Day 1 quite strong and much more comfortable than I thought I’d be. This morning I spent some time installing and poking around some third-party plugins after installing Sketch Toolbox.
Also did some late night reading last night and came across a few helpful tips and resources:
◍ Create an artboard around a selection (via @sketchtricks)
◍ A time saving plugin to lay out table rows with one click (via Cemre Gungor)
◍ An great article detailing what the heck the Scissor tool is.
◍ A straight to the point article on Working with Sketch
Day 1 / Thu, Jun 18
3:44p — Finally realizing what one of the commenters below meant when they said “cmd+2 and cmd+click are your friends.” Helps with grabbing onto layers and zooming into a specific spot. Thanks for the tip, Matt!
3:18p — Sketch’s Symbols, which relates close to PS Smart Objects (sort of), is a very powerful feature. Love that you can drag an instance of a symbol on an artboard and then detach it. An example of this would be having multiple follow buttons on a page, but then one of the buttons you want to show in a ‘followed’ state, you can detach just one instance of it, while the others stay “linked” to any set of changes you make.
3:14p — I did find myself jumping back into Photoshop once or twice to create graphics (less UI focused, more “artwork-based”). Maybe that’s not the strength of Sketch though.
3:10p — Definitely going at a slower pace, but expected that a bit. I find myself struggling to select the correct layer. Not sure if it’s buggy or I’m doing something wrong. Any tips?
12:31p — Had some difficulty finding a symbol (more or less smart objects in Photoshop) I created to reuse it. Thanks to Carlos for helping to customize my UI to find things easier.
Carlos Pro Tip: I edited the top bar to include this. Then you’ll find the object here: http://cl.ly/image/2q2t2y3u3x1W
12:01p — Started a Twitter list for accounts tweeting Sketch related resources, tips, and news. Will be adding to it continually.
11:56a — Looking for a way to have a shape fill up a percentage of the entire artboard width. Not sure if it’s possible and I’ve yet to find an answer, but would be a great feature. #featurerequest
⍰ Answer: There is a way.
11:42a — If you’re familiar with Apple software, in particular Keynote and iWeb (throwback!), you’ll be more familiar with how things work a bit. There’s something about those interfaces that feel familiar with Apple software.
11:27a — After 20 minutes of poking around, I immediately felt what all the fuss was about. It’s truly, better built for Web and UI design. For example, it removes all the clutter that doesn’t translate to the web and improves on the tools, features, and effects that do.
11:25a — I’m a 15–20 year old Photoshop junkie. Therefore, PS shortcuts are my second language. Many of the shortcuts are different, however, learning new ones and assigning familiar ones is quite easy. Spent some time creating Mac OS shortcuts that helped. For example, Cmd + ;, now turns off and on my Layout guides again.
11:24a — How the projects are organized is much different than Photoshop (even though PS recently introduced artboards). A much different that I can get behind though. With Photoshop, here’s how my workflow (pre-artboards) would look like. Create a folder in Finder with the project name. Let’s call the folder / client “BigTimeClient” for this example. Inside BigTimeClient I would then have multiple PSDs, typically one for every page or screen of the desktop version of the website, named something like bigtimeclientlandingv99desktop.psd. And then another file for v99mobile, etc. You get the point. With Sketch, ALL the pages of a website are created within one “document” and all breakpoints can be organized by artboards and groups. It’s nice to have all instances of every page available to see. I’m curious how it effects performance when there’s 50 pages “open” within one document though. Any comments on this?
11:21a — Clicking, dragging and grouping elements is crazy awesome! Not going to lie: I’m not the most organized Photoshop layer-guy in the world. Mostly because I’m too lazy and hate stopping to better group things. However, Photoshop doesn’t make it as easy as possible either. This (might) set me on a more organized layer path (layer path, get it?!).
11:20a — Figuring out most things only takes a matter of seconds. Sketch is damn intuitive. The seconds for various tasks is often gained back by its power though. Eventually, I’d imagine it will greatly improve speed of workflow overall when I’m no longer taking the time to figure things out or look up an article.
This article originally appeared on brianhoffdesign.com.
