A Design Workflow Comparison: Photoshop vs Illustrator vs Sketch

  •  8 Comments

The ever-expanding world of design can be tough to comprehend as a newcomer. With so many tools and techniques available it’s hard to know where to start.

Three of the most widely used design programs are Adobe Photoshop, Adobe Illustrator, and the newer Sketch by Bohemian Coding.

In this guide I want to compare these three titans of industry to see how they stack up for common design tasks. All three programs are incredible, but they each have their own strengths and weaknesses for certain creative tasks. One you know which tool best fits the task at hand you’ll have a much easier time learning and mastering digital design work.

UI Design

Interface design usually relates to websites and mobile apps, but can also include game UIs or any digital screen that takes user interaction.

For years Photoshop was the #1 choice for UI design. In PS you can build vector icons and textured backgrounds to mix into one common layout. But Photoshop was always intended to be a photo editing suite, and while Fireworks was better it has since been discontinued by Adobe.

This is where Sketch comes into play. The very first release of Sketch App was in late 2010. It has since grown massively with a large community fostering learning materials and entire websites dedicated to free Sketch resources.

Sketch

When it comes to UI design Sketch is currently the king. This program’s purpose was to be a UI design suite for web & mobile. Patterns, textures, and vectors all intermingle with each other much easier than in Photoshop.

The only downside is that Windows users cannot run Sketch because it’s OS X exclusive.

There are some people who prefer to use Illustrator for UI work, but to me it’s far too tedious. Illustrator wasn’t made to be a pixel-perfect design program and that’s exactly what’s needed for crafting interfaces.

Sketch actually blends vector and pixel work together into one interface. Shapes & vectors are easier to customize and layers can be manipulated much easier.

If you’re looking for the best UI design program Sketch is currently the best choice hands down. But if you’re on a Windows machine you won’t have this option, so Photoshop will be your best choice. It works just as well but the workflow in Sketch is much smoother for UI work.

Photoshop users thinking of switching should read this piece written by Sagi Shrieber explaining why he made the switch and what he likes most about Sketch. And if you want to get started practicing Sketch UI work you can grab the free trial and follow a few of these tutorials.

Icon Design

The vast majority of icon work revolves around vectors. Many designers will sketch their ideas on paper first and import them into a design program for tracing. My experience always leads me towards Illustrator because the AI pen tool is so much more intuitive.

I’ve used Photoshop’s pen tool many times and I am comfortable with it. This is great for tracing basic icons or even mapping a sketch if you paint in Photoshop. But vectors made in PS aren’t easy to edit in Illustrator and vice-versa.

But between the two I’ve always found the workflow easier moving from Illustrator into Photoshop. Icons can be carefully manipulated in Illustrator and the layers are so much easier to use than Photoshop’s paths palette.

Sketch also offers great tools for icon design. It actually mimics Illustrator and with enough patience you can learn the basics through online tutorials.

Sketch App

A vital feature of icon design in Sketch is the Union button for merging shapes. This mirrors the Pathfinder in Illustrator and it’s an essential tool for designing realistic icons.

In my personal opinion Illustrator is still the king of vector icon design. But Sketch is basically just as good and it genuinely deserves credit as a program you can rely on for icon design work.

If you want to delve further into icon design for Sketch check out some of these tutorials.

Photo Editing

Adobe Photoshop was built to do one thing really well: photo editing. Whether you’re photobashing a unique idea or retouching old photos, everything you need to do can be accomplished with Photoshop.

Photoshop comes bundled with tools made for reducing red eye, duplicating & patching certain areas, blending colors/textures, and exporting photos as optimized images.

Illustrator and Sketch simply cannot compete.

Granted there are Photoshop alternatives like Affinity and GIMP. But very few come close to the natural workflow you get with Photoshop.

Adobe Photoshop

For some tasks you’ll be able to switch between programs like doing icon work in Photoshop or an interface design in Illustrator. But when it comes to photo editing don’t even both opening Illustrator or Sketch.

Photoshop has been around for over 25 years and it’s the premiere photo editing suite for good reason.

Graphic Design

The phrase “graphic design” can relate to so many different tasks. Icon design can fit into graphic design. So can identity design, logo work, and print design.

Photoshop is great at some of this stuff. Primarily anything to do with photo editing & manipulation. PS also has decent text editing tools, although in my opinion Illustrator offers much more for custom typography.

Sketch is definitely OK for graphic design. But since most people use Sketch for digital interfaces, the tutorials out there focus primarily on web & mobile work. This is the target audience for Sketch so outside of that bubble it’s really not the best tool for graphic design work.

Adobe Illustrator

Between all three options I think Illustrator is the most versatile program for graphic design. This can include posters, stickers, brochures, and even t-shirt designs. Graphics are always made to scale so they can fit any size for any project.

Granted there is still plenty of value in photo manipulation with Photoshop. Print advertising often employs photo manipulation for ad spots in magazines.

Photo Manipulation

If you want to learn about this you’ll find a lot of great photo manipulation tutorials on TutsPlus. All of them center around Photoshop.

But for everything else it’s hard to beat Illustrator. It’s been around even longer than Photoshop and I’ve yet to find a replacement that that can merge flawlessly when switching between PS and AI.

To be a skilled graphic designer you’ll probably need to learn both programs. They’ll both come in handy for different purposes and at different stages of a creative project. But either way this is one area that Sketch does not seem best suited for the task.

One other tool I recommend learning for print work is Adobe InDesign. Since it’s an Adobe product you can easily move files between PS, AI and ID without confusing import settings.

Digital Painting

When artists move from traditional to digital mediums they often have two questions: which tablet to buy and which program to use. Digital painting has many options like PaintTool SAI and Krita.

But the majority of people will prefer Photoshop for digital painting. And if we’re juggling between Illustrator or Sketch as the alternatives there’s absolutely no contest.

Photoshop has the best pixel-based paintbrush tool I’ve ever used. Custom settings allow for smooth flowing lines, pressure sensitivity, and compatibility with a wide array of drawing tablets. And with plugins like Coolorus it’s even easier to find a digital painting workflow in Photoshop.

Coolorus

The reason painting doesn’t fit well with Illustrator is because it’s a vector tool. Painting in vectors doesn’t really make sense when you need to get into the nitty-gritty details.

Photoshop’s focus on pixel design is best with the brush tool and it fits the bill perfectly for digital artwork.

If you want to learn more about painting in Photoshop here are some great websites to get you started.

Wrapping Up

All three of these programs could be useful to a designer based on the task at hand. It’s hard to generalize because each person’s workflow will be different. But I’d break down these three programs like so:

  • Adobe Photoshop: best for photo editing and digital painting
  • Adobe Illustrator: best for icons and most graphic design work
  • Sketch App: best for all UI/UX work and some icon design

Each of these programs dominate their respective niches and are lauded to excess by professionals. No single program is better than all the others, but they’re each better at individual tasks. Keep this in mind as you journey into the creative field or branch out into new areas of design work.

Newsletter

8 Comments
  1. Armin Oct 28, 9:51 am

    For UI Design I still use Fireworks. Even though it hasn’t been updated in years its still working fine and you cant beat a fast workflow you’re used to. I guess I’ll try the jump to Sketch soon, but for many things Fireworks will always be a part of my arsenal – you simply cant beat the ease with which you can combine pixel- and vector based stuff in it – it still easily beats Illustrator and Photoshop in that department.

    • Big B Oct 31, 12:41 pm

      I completely and utterly agree with you Armin. I still to this day do not understand why they discontinued updating Fireworks. It is by far the most intuitive and dependable package I have ever used. It has everything that I need to do my job effectively and especially efficiently. I work in an extremely fast paced environment and I would be totally lost without it as the business needs fast prototyping, eshot templates, banners etc and photoshop just doesn’t cut it. I jump between Fireworks and Illustrator throughout my day seamlessly and I believe I may do the same as yourself and look towards Sketch now as its frustrating that Adobe are only listening now to designers as the competition is becoming more fierce. I genuinely wish they were this attentive when they considering discontinuing updates to Fireworks. I wont let go of Fireworks until I can find as a robust alternative that can allow designers like me to work at a fast pace.

  2. pixelioo Oct 28, 11:38 pm

    What about Adobe XD?

  3. Karelle Oct 30, 3:41 am

    Funny you only picked the subscription model programs. Personally I’m moving to Affinity Designer…

  4. TM Nov 1, 5:27 pm

    Coming from a print and brand background. I’m stuck in PS and AI. Though for UX/UI work I almost solely rely on AI. I just think and iterate much faster in AI, plus the file sizes are way smaller and PS files. The lack of pixel perfect quality of illustrator is fine as you should be perfecting your layout in code, not flat design files. Illustrator allows me to both quickly wireframe and create “higher” fidelity mock ups before coding. I think the key is to find a tool that allows you to draw as fast as you think and you’ll be set. Whichever tool that may be. I love sketch, but have to work in a windows environment for my dev work. So I’m giving sketch a trial in my personal projects.

  5. Aleksandar Nov 7, 6:53 pm

    I think all of this from next year is going to be “old thinking” thanks to Adobe Xd. Simply because you will have all in one solution, and you can use Ps for some light photo editing and cuts. I just love it and can’t wait to start using it on a daily basis!

  6. Monirom Nov 8, 6:34 pm

    While Adobe XD is late to the game it is Adobe’s best effort to date to stop the number of users it’s losing to Sketch. What this article is missing is the fact that Sketch has matured, and it’s innovating faster than Adobe.

    The Sketch community has a bootstrap approach to plugins and Sketch’s architecture allows for this. An ecosystem of plugins and assets exists that allow users to address anything not native within Sketch. More troubling for Adobe is that fact that most all these plugins are user supported and thus free. (When was the last time you were able to get something for Adobe products for free?)

    To add to Adobe’s burden, many of these plugins are now plugin suites that allow you to do everything from working with dynamic data or repurposed assets i.e. symbols. And document wide edits are a snap when you use symbols and smart resizing (where the container can be resized but the symbols/elements within the container do not resize and keep their relative spacing from other UI elements). This is a boon if you’re designing something responsive.

    Furthermore Sketch seems to be the platform of choice if you’re using products/services like InVision for prototyping. Sketch was also the platform of choice for Zeplin which makes documentation faster/easier and collaboration with your developers much smoother.

    And we haven’t even scratched the surface about the efficiencies of Sketch when it comes to the production work of exporting assets in multiple resolutions and file formats from a single file.

    Last there’s also device mirroring which allows you to preview your designs on your mobile device in real time.

    Sketch has a very niche focus – and thy shouldn’t be held against it. Especially since it’s only $100. Sketch also is not a subscription model application. You buy it, you own it.

    It’s unfortunate that Sketch is Mac only but, that may change if they ever grow/get acquired.

    This doesn’t mean I’m abandoning Adobe. I’ve got too many legacy projects and legacy files to do that. Plus you really can’t use Sketch for print design. It all comes down to the right tools for the project you’re currently working on. There is no magic or silver bullet solution. I have just augmented my arsenal of Adobe products with Sketch.

  7. Allison Nov 28, 11:37 pm

    I’ve been trying Sketch, but the problem for me is that it offers the same functionality for new users as it does for advanced users. In Illustrator and InDesign, once you learn the keyboard shortcuts, you can really be a speed demon. Sketch, and other UI/UX wireframing tools like OmniGraffle, tend to rely on the mouse too much. I end up with repetitive stress injuries. As someone mentioned in another comment, a tool that allows you to work quickly is so helpful and efficient.

    Also, maybe I don’t understand what the article means by “pixel perfect”, but Illustrator is a vector program. By definition, it’s a pixel-perfect program.

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!