Why I Use Both Photoshop and Sketch

Since the release of Sketch from Bohemian Coding, there seems to have been a constant rivalry amongst designers on which platform to use for your work. I can see the real benefits of each application but when it comes down to it I can’t work without the other. It’s all about the context of the work I am doing on a given project. In this post, I’ll try to explain my reasoning and why I use both Photoshop and Sketch.

The Basics And The Web Today

Let's start with the basics. Adobe Photoshop, as you may know, is ideal for image optimization and editing. Its original purpose was to allow a user to edit how their images appear by using effects, filters, blurs, and more. Before the web took off in the ’90s, there was no ideal tool to design websites. Some designers sought out different ways to perform such a task, but a trend was formed when more and more people chose Photoshop as their tool of choice.

To be frank, you don’t need to design high fidelity mockups in a tool like Photoshop or Sketch but for my own process, It does wonder when trying to think outside of the box. Only a few years ago designers would set up Photoshop to a fixed-width document and design the website they intend to build exactly how it appears. Some, if not most, designers didn’t code at all. Their job was to handle only the design of the site. Once complete they were to hand off their PSDs to a developer to slice up and code.

These days a web designer may choose to use a tool like Photoshop or Sketch or just jump straight to code and design within their browser. With the spark of responsive web design came the need to not have fixed width websites but rather websites that adapted to any user's screen. This screen can be anything from a large retina monitor to an old first-generation iPhone.

Enter Sketch. After nearly a decade of using Photoshop, some web designers were in search of more from their tools. The makers of Sketch brought forth this very ideal when introducing the web design community to Sketch. Similar to Adobe’s Illustrator application, Sketch is a fully vector-based app that harnesses the things we love about Photoshop but expands upon them. The makers of Sketch looked at Photoshop and found numerous ways to improve old techniques.

Everything from file sizes to interfaces, to ridding of useless filters and image editing tools was put into consideration. User Interface designers quickly took note of the new application and began to change their ways once it was introduced. The buzz of the application allowed most designers of today a chance to see what it was all about. The sketch is now a huge contender to the Adobe Platform. As Adobe got word of the new application from Bohemian Coding they began to gear Photoshop more towards a web design tool. New features such as smart guides, vector shape editing, and corner radius control began to pop up within the interface.

Photoshop will forever be a raster image-based application and Sketch is geared towards full vector art. This is the main difference between the applications. User Interface designers need to know their designs can scale with all of the different screen sizes in today’s world. Sketch wins in this department by offering easy exporting of assets at different resolutions.

Why I Still Use Photoshop

I have always used Photoshop. I’ve used it for so long that Its second nature for me to operate. Key commands come on their own and I don’t have to think to perform an action which is ideal when trying to be creative.

Images

For my own work, I like to use a lot of images to create dynamic designs that mix styles from the “flat” world and texture world. Photoshop is king when it comes to images and image editing. I use layer masks more than any other feature in my work to get images and fades to meet perfectly. I think this is an organic approach to design that you can’t use vector for. Doing so would make things look cheesy and unrealistic. Say I have a dark background in gray with a black and white image on top as a hero image of a website. Adding a layer mask and then applying a gradient from transparent to black makes for a smooth transition. This adds a nice effect that makes the background and image tie together with ease.

Shapes

Photoshop has come quite far in response to the need for higher shape control within their application. After Sketch was released Adobe began to update its own application to use a lot of the same features by offering more control when drawing shapes. Users can apply rounded corners or edit specific points of shape to create their own inside the Properties panel. I tend to use the Info panel alongside the Properties panel a lot in Photoshop to get an idea of the size and positioning of any shapes I make. The shapes are often buttons or masks for images. Keeping things at consistent heights and widths allows for fewer headaches and less code down the road. Always thinking in terms of coding down the line helps me limit the overuse of different styles throughout a design. Doing this makes you think of how you will author the site when it comes time to take it from a static design to interactive design.

Typography

This is merely my own opinion but I think typography sucks in Photoshop. I wish it were easier to save typestyles and paragraph styles within the interface without having to open a multitude of panels. While the functionality is possible I find it cumbersome and not well thought out in terms of user experience. I probably have to click twice the amount of times to set typography in Photoshop than I do in Sketch.

Here’s an example process of me having to bold some text:

Find the layer within the layers panel
Double click the layer to be able to edit the paragraph of text
Find the text I want to bold within the paragraph of text
Highlight the text ever so carefully
Find the Character panel and select the bold weight of the font I’m working with
Go back to the Layers panel and click the layer again to end the editing process.

Now to me, this is way too many interactions to perform such a simple task. By default Photoshop doesn’t even allow you to, auto-select the layer you need to edit by click on it directly. You have to check this option in order to get this functionality. Why wouldn’t I want to be able to click on what I want to edit from the start?

Now don’t get me wrong, I could go through and set up some character styles before doing any editing but that’s still more work and something that can get messed up quite easily in my experience. This is probably why I don’t use this feature in Photoshop but only in Sketch.

Deliverables

Photoshop is a cross-platform application. It works on both PC and Mac. This is huge when you need to hand off any designs or assets to developers who may be working on a different platform. These days a web designer is responsible for delivering assets ( doing all the slicing and dicing) but before this was the developer's job. Some still do things the older way and that’s not a bad thing. But chances are your developer will request .psd files and not .sketch files. The sketch is Mac-only at the moment and it may stay that way. You may consider that if you use it solely for your work. Make sure to communicate with your developers upfront so you don’t have to do twice the amount of work if you don’t have to.

The Reality

I’m way more comfortable in Photoshop than Sketch at this point in time. It may be a pain in the ass to use but I know it. When it comes to, image editing, you can be sure I’ll open Photoshop first. New updates are coming quite often to the application which is geared toward designers like myself who deal with user interface design and scalability of designs. I’m happy with what progress I have seen so far and will likely cease to use the application. I have used this application for years and consider myself proficient in the software. It has helped me win new projects and praise from both my peers and my clients. Photoshop I love you.

Why I Use Sketch

Sketch has made a huge impact on the design community. Currently, at version 3.3, Sketch gives designers of all types a breath of fresh air when it comes to creating designs for their applications, websites, and more.

It's Vector!

Everything besides the images you import is vector-based in Sketch. This means that any user interface elements or styles you make are fully scalable. This is crucial for users on high definition screens or lower resolution screens simply because there is no degrade in quality. Importing PDF, EPS, and SVG files is a breeze with Sketch.

If you design icons or elements for iOS or Android applications you will love the experience in Sketch. Tools are simplified and everything you need is easily accessible from the control panel. You might be asking why I don't just use Illustrator since it too is a vector? For me, it's a matter of the interface if Illustrator. There are so many panels and options that it gets overwhelming at times when trying to work at a decent pace. In Sketch everything has a home and there are no floating windows or panels to clutter up your view.

Artboards

One huge advantage Sketch has over Photoshop is the use of Artboards. Each artboard is editable and given a set of dimensions based on what you require for your design. You can see everything in front of you rather than having to have multiple files open like in Photoshop. The size of Sketch files remains lower than most Photoshop files so having multiple artboards within view is possible without sluggish performance. Even with one file open in Photoshop, I get highly sluggish performance but this is usually done to the massive amount of assets or layers I’m working with for a given project.

Each artboard is exportable and you can even have different pages of artboards which are a really cool feature. This makes the painstaking process of organization that much easier. Photoshop needs something like this!

Exporting Assets

Exporting is probably the best bang for your buck with Sketch. It easily makes it a winner over Photoshop in this department. Since everything is vector-based inside Sketch you can export specific assets at different resolutions in a single click. In Photoshop, this just isn’t possible unless you design at the highest resolution you need first and then scale down for each additional resolution you need. That’s so much extra work and why many designers have since switched to Sketch for all their work. This very thing is why I typically use Sketch for any UI work that may be on anything from a mobile device to a website.

Symbols

I can’t talk about Sketch and not mention Symbols. Symbols are a unique feature in the app that allows you to have predefined graphics or elements for reuse within your projects. Updating one symbol will cause any of the symbol to update. This is is very similar to Photoshop Smart Objects which are amazing and help save ample amounts of time when designing for the web or an app. Elements such as buttons tend to be reused in web design. This helps the user recognize what action can be performed across an entire website or application. Using symbols in sketch allows you to keep your designs consistent all while saving a ton of time not having to duplicate layer after layer and re-adjust the layer order.

Wrapping Up

I could explain every little feature of each app, but I think the real threat comes from trying both for yourself. If you’re reading this chances are you already use at least one of these applications. I invite you to give either a try. Photoshop for me will forever be my strength due to the endless capabilities I can do with it. Image editing, User interface design, realistic and abstract art, and more are why I love Photoshop. The sketch is fully scalable, easy to use, leaves a small footprint in terms of file size, and is geared towards present-day user interface and web designers like myself.

I will continue to use both applications to create designs that provide a mix of styles which are more suited towards my own style. You don’t have to use one or the other like many other blog posts try to convey. Use what works for you because, in the end, it’s not about the application but more about the design you create with it.