Sketch is Blowing Up. Here Are 12 Reasons to Switch from Photoshop.

By on May 2, 2016 in How To
Sketch is Blowing Up. Here Are 12 Reasons to Switch from Photoshop.

Designers were talking about Sketch App by Bohemian Coding since its release in late 2010. Almost five years later, the program is becoming more and more ubiquitous amongst designers and developers, both in offices and amongst freelancers, due in part to the rise of seemingly endless screen sizes combined with multiple pixel densities. Sketch has unparalleled agility in handling pixel-friendly, vector-based files. Its multiple export options allow designers to quickly create assets and mockups at every stage of the design process.

These are only a few of the benefits to Sketch App. If you're still using Photoshop and you aren't sure if you want to switch to Sketch, here are 12 compelling reasons to make the jump.

1. Sketch is 100% Vector-Based

Sketch is 100% Vector BasedPin It

Everything you create in Sketch is 100% vector-based. This means your artwork can be 5px square or 5000px square or anywhere in between, and your work won't lose quality. In Photoshop, if you create something small like an icon and you're not using Smart Objects, the object will be horrible looking when scaled up. Having to consciously make shapes as Smart Objects in Photoshop is one extra step to take. Because Photoshop isn't built specifically for vector graphics, the experience is a little clunky and can be frustrating.

In Sketch, the vector-based drawing allows you to create anything at any size and scale it up or down to any size you need. Plus, you'll always be viewing crisp lines and clean shapes no matter how far zoomed-in you are. This includes text shapes alike – no more pixelated text when you're zoomed in!

2. Draw Once, Export At As Many Resolutions as Needed

Because a lot of screens now have a high pixel-density, it can be frustrating to create a 1x and 2x version of a website in Photoshop. How many times have you created a website in Photoshop at a regular resolution, then realized you needed to go back and make your design look good in a 2x environment, or even a 3x one? If you just scale-up your work in Photoshop, you're left with jagged edges and ugly pixelated raster graphics.

In Sketch, you draw your design once, then export it into as many resolutions as you need.

Need a logo exported at 10px wide, 500px wide, or even 1000px wide? Simply draw your logo once and create multiple export sizes in Sketch. You don't even need to draw your logo at one of the desired export sizes! Draw now and figure out your necessary export dimensions later.

3. Pixel Snapping and Alignment

Smart alignment snaps to pixels and is intuitivePin It

Photoshop and Illustrator recently added Smart Guides, which show you when you're lined up with another object or at the edge of the canvas. But it can be messy and confusing. For example, in order to center something in the middle of the canvas, you have to pull in a guide and then move your objects to snap to the center. But it doesn't always work; sometimes you end up 1 or 2px off-center!

Sketch will allow you to align any object to the center of an Artboard, horizontally or vertically. The snapping works similarly to Photoshop and Illustrator but feels significantly less buggy. Plus because Sketch was created for web and UI design, it's geared towards pixel units. While you can end up with partial-pixel dimensions, you can easily fix them in the inspector panel.

4. Multiple Pages

Much like artboards, Pages exist in Sketch so you can organize your work the way you want. Let's say you're working on that responsive blog design project. If you wanted to, you could create each design on one Page so it's organized a little more. On your first page, you could have all of the mobile and desktop versions of the homepage. Then on the second page, you could have all of your responsive versions of the blog index page. Basically, you can organize your files and artboards the way you want, and it's as simple as dragging things around.

A great use for multiple pages is to have exportable assets on one page (or, "Slices" in Sketch). By having these all isolated on a separate page, you can easily see and organize the slices for your project.

Finally, it helps to have your Style Guide on a separate page so you can create all of your text styles, colors, and other styles in one place.

5. Text Styles and Other Styles

What? You want to have repeatable text styles within your software so you can create one type of body copy, use it multiple places, and only update it in one place if you need to make a change? Oh right. Sketch can do that for you.

Or, want to have a repeating button with a certain fill color, border, shadow etc? Do this easily by drawing your shape and then adding a Shared Style to it. The next time you need to apply this style, just draw any old shape and then apply a Shared Style to it, and it will magically morph into your Shared Style.

6. Sharing Your Work

Sharing your work and progress is simple in Sketch. Let's say you're working on a billboard design in Photoshop and you need to keep sending JPEGs to the client to get it approved. Because this is such a large format file, you will need to work in a slow and laggy file. When you save it to share progress of your work, you need to down-sample the size manually or save for web every time. And every time, Photoshop will work hard to compress your file.

In Sketch, you can work at any size, and then export into multiple sizes. If you have a 4000px wide artboard and want to share it as 500px wide in emails so you don't break peoples' inboxes, you can easily add a Slice to the artboard, set it to export as "500w" and "JPG" and your file will export at that size and format without a problem. Then when you're ready to export the final, switch the slice back to 4000px wide. Easy peasy.

7. Exporting to SVG is Simple

Exporting to SVG from Photoshop or Illustrator is nearly impossible. It doesn't even work correctly sometimes. I was working with an icon font in Illustrator and the files would repeatedly show up blank. As soon as I moved the project into Sketch, all of the issues were fixed, and exporting to SVG was as simple as exporting to any other type of file.

Sketch is set up to be future-friendly, and SVG's are the way to go for responsive and high resolution web.

8. Sketch Knows CSS

Sketch is a web designer and front-end developer's best friend. Make anything in Sketch (and I mean anything) and you'll be able to grab the CSS for it. And it's not hard to do so. Just right-click on your thing (text, shape, gradient, whatever), and click Copy CSS Attributes. Paste it in your text editor. Boom. This is especially helpful for complicated gradients or other CSS that you can't remember.

9. Pull Color From Anywhere

Use Sketch's Eyedropper tool anywhere on your screenPin It

Eyedropper tools exist in Photoshop and Illustrator, but you're limited to what's already open in the program. With Sketch, you can choose the eyedropper, and point anywhere on your screen to choose a color. Easily pull in colors from an existing webpage. Pop open an image in Preview and sample colors from it.

Being able to pick colors from anywhere on your screen is powerful and extremely useful.

10. Mirror Your Designs onto Mobile Devices and Tablets

Use Sketch's Mirror app to view your designs live on your phone or tabletPin It

The Sketch Mirror app is an add-on purchase that's worth the money (it's only $5 after all). Sketch Mirror allows you to send an artboard to a device that has Sketch Mirror installed, including your iPhone and iPad. Being able to see a mobile site on your phone is powerful for you as the designer, but also helps with presentations so a client can visualize what the design is going to look like on a mobile device.

11. More Intuitive Slicing

Slicing in Photoshop is antiquated. It's based off of when websites would be fully designed in Photoshop, then literally sliced into grids so a designer could upload the pieces and then reassemble them in tables (yuck). Slicing in Photoshop is complicated and bloated.

In comes Sketch. You can easily slice any asset from an icon to a logo to an entire artboard. To create a slice in Sketch, you select the Slice tool (S) and draw a box around your object or asset. If you need to slice an entire artboard, the slice tool will snap beautifully to the edges, leaving you with a clean export. For smaller assets, you can choose to include the background color or leave it out.

And let's not forget that since Sketch is entirely vector-based, you can export your slices in any size desired without losing quality. You no longer have to create an icon at 1x, 2x and 3x; simply create it at 1x and then set multiple slices to export. You can even choose your suffix so the file will be exported and marked to your liking. Vector-based intuitive slicing is an awesome, time-saving feature of Sketch.

12. Speed Up Your Workflow

Because Sketch is a niche app that was created specifically for UI, UX and web design, you can create designs a whole lot faster than in Photoshop. Designers also argue that Sketch's interface is much more intuitive and easier to learn than Photoshop, some even saying they mastered the program within 2 days of working with it!


Not sold yet? The best reason to try Sketch is it's much more affordable than Creative Cloud. You even get a free 30 day trial. There's really no reason NOT to try it. Make the switch, dive into your free trial by spending a couple of days following along with tutorials, and you'll be hooked.

Have you or your coworkers switched to Sketch? What are your favorite features?


Jenn Coyle is a Philadelphia-based Designer and illustrator who loves to create fonts and resources on Creative Market. She also shares tutorials and inspiration for designers and creative entrepreneurs at Hello Brio Studio. Take her Skillshare class to learn how to make your own hand drawn font.

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

57 Comments

  1. problem is a lot of us dont have OS X. Im on windows so i have to stick with Photoshop :) and the best program its that one you know how to use it :)

  2. As long as it is limited to OSX I am not even going to care that much :D Sorry but I prefer to chose my own poison, thank you ^^

    • Staff

    Thanks for this compelling review, Jenn! The more I hear, the more I want to try Sketch out :) This would be well worth considering for those who don't have the budget for a CC payment every month.

  3. Yup, I wanna see those Mac users create Skeuomorphic UIs in Sketch. Especially if one day (we never know), Skeuomorphic UIs will be in again, and Bohemian Coding and their "Apple-only" Sketch can close shop! Snobs!

  4. The reason the SVG's showed up blank was because you expanded your font without unboxing the option "fill". The finished artwork will be a shape and a (non-existing) filling that will render the file blank. It'll be too much for the SVG-format to handle.

    Don't bash without knowledge! :)

    Otherwise, nice article.

  5. Virtually everything mentioned in this article is already available in Photoshop. There may be one or two points where there are differences, but Photoshop does everything in this list already. I'm not saying PS is better in every single way. Sketch is a specific tool for specific purposes, and Photoshop is built to do everything. But this is a terrible list.

    And as long as Sketch is Mac-only, I'll never even take a look at it. Modern design apps should be cross platform. Not everyone designs on Mac(and there are no benefits to doing one or the other anyways).

    But back to the list, this list is extremely outdated and sounds like a Sketch fanboy wrote it without actually KNOWING how to use Photoshop. Just like the dozens of articles where people beat their chest about "leaving" Adobe to use tools like Sketch, and pretending it is because Adobe products can't do the same things. It's a "trend" to trash Adobe and promote Sketch. Doesn't make the articles accurate though.

  6. Sketch is a handy tool for sure but it by no means a panacea. However, it is very competitively priced and any good designer should be able to get a lot out of it. I have certainly found it very useful for certain aspects of what I do as a designer, and it will remain part of my (Mac) toolkit.

  7. Like Henk Said: every single point mentioned is available in Photoshop CC 2015, And if you have photoshop there is a big chance that you have illustrator... And Brent made a huge point, nothing else to say with those two comments.

  8. So there is so much to love about sketch, but the one thing that kills me is the tool switching and keyboard shortcuts. I just cant find a workflow that is fast like I have in photoshop.

  9. Adobe has caught up with most of the things Sketch 3 can do (I guess they figured Sketch was doing something right). I actually wrote an article over a year ago when I made the switch, it's a bit out of date now because of these updates http://www.graphicjunkies.com/web-design-without-adobe-photoshop/ . Even though PS has caught up I still use Sketch for UI design if I have the choice. That being said, I still love PS and wouldn't have any issue returning to it If I didn't have Sketch (how's that for sitting on the fence?)

  10. It's not only about what it does, but *how* it does it. I've noticed that most of the negative comments here are from those that even don't own a Mac, let alone have used Sketch. If you haven't tried it, don't bash it. I use Photoshop and Sketch and I've written nice things about both of them over the last few years, even though I lean more towards Sketch.

    For those complaining about it only being on Mac, it's because Sketch relies on technology only available to Mac OS X and that's why it works splendidly well.

    I'd also like to mention while I'm here, that despite the fact that you can design websites in Photoshop, it's not designed for that. Clue: it's called *Photo*shop, and I think its limitations are clear when designing interfaces.

  11. I'm not understanding precisely why Sketch is being compared to Photoshop as a vector-based program. I use Illustrator for my vector needs and Photoshop for manipulating/fixing up/general editing of photos and digitally drawing/painting. I like the way Photoshop is a jack-of-all-trades and can flex and bend to try to include everything and I think the whole point is that its not specifically vector-based; that's where Illustrator comes in.

    However, I do know that pain of snapping something into place only to zoom in and see it off by several pixels. That's why they upped the zoom capabilities to get in there and fix the nitty-gritties.

  12. Daniel, nobody is bashing Sketch. Our issue is with this article claiming that Sketch can do these things and Photoshop can't. But the points made in this article aren't accurate. It doesn't matter if you use Sketch or not. Photoshop already does the things in this article, and it does them in the same way that the author claims Sketch does them.

    And the whole "Sketch uses technology only available to Mac OSX" is just silly. It is programmed using Apple's proprietary interface languages, but there is nothing in those languages that isn't available for Windows. There is no secret or exclusive technology that restricts a program from working the same on Windows, and if you believe there is, you're wrong.

    Photoshop wasn't designed originally for interfaces, you're right. But it DOES have all the features listed in this article. And it even has in recent updates started re-exploring the UI creation tools. Nobody is claiming that it does everything better than every other program. It just isn't missing the features listed in this article, which is irresponsible fanboyism at its worst.

  13. ".. there are no benefits to doing one or the other anyways.."
    Have these Mac bashers ever tried a Mac? I doubt it. You are pretty narrow minded to avoid a big part of the world because of your frustration.
    Cheer up guys, give it a try, albeit on a Mac.

  14. Ummm... Is there a reason that you're comparing a vector based app to a raster app? I think the better comparison would be Illustrator, no? (and photoshop, as already mentioned, can do most of what is listed here anyway.)

  15. Sketch is by far the best program for designing for screens. I worked in Adobe suite for the last 15 years, I used Sketch for a day and the advantages were so vast there is not going back. I still use PS for adjusting photos, and Illustrator for logo/icon work.

  16. Ok, so the title of the post is 12 reasons to switch from Photoshop… But as I already have Illustrator (and you mention Illustrator in the text) is there a clear reason why I should spend another £80 on Sketch? I can only see ONE in the post.

    1. Illustrator is also 100% Vector based
    2. Yep. See above. Its 1a really.
    3. Illustrator has this too… never found it "buggy"
    4. Yep. Artboards.
    5. Yep. Illustrator doesn't do text styles as such but you can sample text and apply with the eyedropper. Proper Paragaph / Character styles would be nice though…
    6. Another tick for Illustrator…
    7. NEVER had a problem exporting an Illustrator file as an SVG. Rarely had a problem importing one.
    8. This might be the killer point. Sketch WINS HERE.
    9. Not true. You can sample from anywhere. Just select the eyedropper tool click IN your document, and without releasing the mouse drag out of the document over the image / webpage you want to sample. Works in Photoshop too. Has done for years.
    10. Adobe Device Central allows you to preview how a design will look on a variety of devices…
    11. Haven't tested slicing head to head, but it's pretty easy in Illustrator…
    12. Possibly.

    I'm not an apologist for Adobe, and there's certain things in Illustrator that I find incredibly frustrating, but other than point 8, I think illustrator matches Sketch in point for point, with a ton of other features. If you don't own a copy of Illustrator (or have a CC subscription), and you currently use Photoshop for your web graphics, AND you're on a Mac, Sketch is probably worth a shot.

  17. Great!! Only one thing... you can color grab from anywhere on the screen with PS too. Just click and hold it down while in PS, then drag it to wherever you want the color from and let go. Voila. Color grabbed.

  18. The whole Sketch movement feels like hipsters. It's called Sketch, you've probably never heard about it, and it's so much better than the mainstream Photoshop.
    Except, I've tried it - it's not. For my work at least.

    @Andrew Cameron Photshop has No.8 as well. Right click - copy CSS

  19. @Andrew Cameron 8. csshat https://csshat.com
    Anyone used Affinity designer? Could use some feedback. I do find that photoshop is rather slow and lacks functionality. I'm using a ton load of plugins but again, slows the program and seems to me as most of them should be included from the start. 'Guide guide' for a start...

  20. Look at all this mac hate....I've used and built windows machines for years but I do the majority of my design and photo work on a mac now and you know what? it's great. They make the best laptops by far, there is no contest there. OSX has been so far ahead of the metro nightmare for a while now and the latest iteration is by far better than Windows 10 currently. But this is not a discussion about mac vs windows regardless of the fact that the app is mac only. It is a shame it is not also on windows and Adobe will keep their hold until more companies realize this problem.

    This looks like a great app and one of these days, I will try it out. Would love to get out of the Adobe model. Those of you saying 'but's it's in Adobe CC', yeah if you want to subscribe to the rented software model, sure it is, but many of us don't. I won't be giving them a dime for this greedy garbage and will stick with CS6 as long as I can or move to other tools. Adobe hasn't given a crap about you, the consumer, for a long time but go ahead and keep forking your hard earned money to them.

    To the users claiming you can color pic from anywhere on the screen in photoshop or illustrator, do explain to me how as I've been using the these apps for years and I don't see how this is possible.

  21. Why would you ditch photoshop for this program? It doesn't have nearly the same features as photoshop does, those 12 reasons mean almost nothing when i'm trying to edit an actual picture. When i want to create a vector, I use Illustrator. It's that simple.
    Create more programs that can actually compete with Adobe and then i'll consider switching.

  22. Photoshop still reigns for bitmap manipulation but as a non-Mac user I couldn't live without Xara Designer Pro. A great App that I use daily as my go to package for designing web layouts and gif animation.

    I also try to keep my hand in with Illustrator just for the flexibility in case there is a workflow issue requiring it to be used.

  23. "OSX has been so far ahead of the metro nightmare for a while now and the latest iteration is by far better than Windows 10 currently."

    There is a reason they're called opinions :D. Everyone has a way that they prefer to work, and because of that, everyone can choose what option that they think works best for them.

    With Photoshop's new Design Space in beta, Sketch is going to find themselves in a pretty rough spot. No doubt Adobe is aiming to crush them, so Sketch is going to have to be agile and adapt to that. Part of that adapting is not ignoring the PC market...which is a massive massive mistake. The argument of "PC is better for designers, Mac is better for designers" is so old and quite frankly inaccurate at this point that it needs to stop. It's personal preference over which platform you prefer. The actual work experience between using one or another is nearly identical. Use what you prefer, don't bash the other one because it isn't your preference.

    Design Space for reference - you can preview it currently in Photoshop if you have the right specs (note it isn't a complete product yet) http://adobe-photoshop.github.io/

Next

Showing 1 - 30 of 57

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →