Going from PhotoShop to the Sketch App

photoshop to sketchapp

Personal Journey from the Photoshop to the Sketch app

In my many years of experience in interface design and development, I have tried a huge pile of different tools, ranging from the complete Adobe software package to little-known graphic editors. In the end, I settled on the most standard Adobe Photoshop and Adobe Illustrator. It’s pretty powerful tools, but not agile. Because it is a heavy program, it slows down sometimes, even on powerful computers.

When I was designing with the Photoshop, I did not create a lot of individual files. I put it all in a single document so that I could see the whole picture. In this approach, files weighed several gigabytes, and it was hard to open on a slower computer. This created a lot of problems, so in the end, I had to break the file into several pages for the designers.

I often attend various events related to the Web Design and development. This is where I first heard about the Sketch App. After arriving home from another conference, I invested sometimes in this new web design tool and my emotions and enthusiasm was boundless. At that time, Sketch was pretty raw, but it has already simplified the process of creating an interface. It was easy to learn, files weighed only a few megabytes, fitted itself for the 30 pages of unique design. Its symbols and text style gave the opportunity to quickly create a large number of designs for mobile application and website.

When I created my first design, Sketch was installed only on my computer, so I had to make a cutting of the layout for developers, which also was not difficult. So I felt very optimistic about this tool.

Sketchapp only works on Mac OS

Although Sketch app only works on Mac OS, it seems to me a massive plus point. Since Sketch uses the full power of the Mac OS operating system (auto-save, rendering, text render), this makes it very fast and modern editor.

It does not work with the Raster

The sketch app is intended to design interfaces, and rather than working with photos. Sketch – is a vector editing tool which is excellent at creating mobile and desktop applications design. It gives you the ability to export the source code in any size.

Small files

Sketch source files weigh less than Adobe AI or PSD files and the developers have achieved this through the use of Mac OS system resources.

Here is an example: btn.sketch file with just one button weighs 33k, this same btn.ai weighs 194KB file, the same btn.psd – 91KB. Although this is a small file, you can easily get the idea how small SketchApp file size can be.

small file size in sketch

File size in sketch

Simple interface

At first glance, you would think that the sketch interface has very few tools. But that is not true!  There’s a whole set of tools for creating a high-quality design. Its developers did not just copy a bunch of awkward panels from other editors rather than they tried to make simple yet powerful user interface. And its simple interface is really easy to use, and its is a huge plus point for this tool.

Sketch Editor interface

Sketch Editor interface

A bit of the interface

Its layers are on the left side which is unusual if you are used to the Photoshop. But you can adjust to it quickly. On top of this panel, you can see a list of pages. You can open different pages from this, which is useful.

sketch panel layers

Sketch panel layers

You can easily create custom toolbar which you can access at the top. Although most of those tools can be open by hotkeys, custom tool panel is really useful for the beginners.

sketch Custom Toolbar

Sketch Custom Toolbar

It has a right side contextual panel. It is very similar to the Photoshop, but it is only the horizontal. The panel changes depending on what you are doing on the canvas. It has three modes – for the folder, shape properties, and the text properties.

folder properties, shapes, text in sketch

Folder properties, shapes, text in the sketch

Pages and Canvas

Document in the Sketch is divided by single page. And pages, in turn, divided into canvases. For example, you can make the page “Contacts”, but within a few canvases with different states of “Contact” page.

Of course, you can already save a few artwork in a single document with Photoshop Illustrator, but it still lacks the additional level of nesting (i.e. pages).

Snap to pixels

We all are familiar with the situation, when our design misses the pixels, it shows half-pixel. Sketch App coped with this problem very well. We will no longer see the blurry edges in the design, and even if we see this (in rare cases), it’s really easy to fix.

sketch Snap to Pixel

Snap to Pixel

Styles

In SketchApp, there are different styles for graphics and text. When you update the object style somewhere ( like changing the stroke color, font), the style is automatically updated everywhere. There is no button for “Update style”.

 

[Working with Styles in Sketch]

[Working with Styles in Sketch]

Symbols

Sketch symbols are very similar to the symbols of Photoshop and Illustrator but with different colors.

sketch symbols

Sketch symbols

Easy export

Exporting elements in Sketch app is very simple and convenient. You can make any item exportable, just choose the right format and size of the final file. You can also export assets by using the cut option which quite similar to the Photoshop. There are 3 different ways to export assets in record time with sketchapp.

Easy export with sketch 3

Easy export with sketch 3

It’s very convenient to export files – just select several formats and sizes.

sketch Export Settings

Sketch Export Settings

Grid

The Sketch has a built-in, flexible Grid system. You do not need any third party plug-ins to mark the layout. All of the boxes can be configured at any time.

Sketch Grid Settings

Sketch Grid Settings

Live Preview

Because the Sketch uses Mac OS system resources to render the graphics and text, it looks exactly how it will look in the browser.

Different set of plugins for all occasions

Just like any other applications sketch app has many plugins to add its functionality. If you can’t do anything design related with Sketchapp, I am sure there’s a plugin for that.

To install a plugin, download (usually from GitHub) and double-click or drag in the Plugins folder. Open folder: Plugins- menu> Reveal Plugins Folder…

sketch plugins folder

Then in the Plugins menu, you will see the appropriate fresh plug-in item.

Here is a couple of sketchapp plugin:

  • Sketch Commands – A large collection of script command.
  • Rename It – For easy and rapid naming and renaming layers;

Small training period

Although first it might take some times to get used to this tool. Especially when we are used to work with the Photoshop. But sketchapp tool is pretty simple and easy to learn, so a couple of hours is good enough for understanding all the important details. There are some good SketchApp tutorials for the beginners.

What’s Next

Of course, Sketch app is not perfect. Although it lack of some functions (no bitmap) it can greatly facilitate and accelerate you design. And new improvements are coming every day.

Download the SketchApp, and design cool things with it.

Here are some useful articles about SketchApp:

Tanvir Hasan

I am a tireless seeker of knowledge, occasional purveyor of wisdom and also, coincidentally designer, illustrator and front-end developer with a love for all things whimsical and a thirst for learning. I love to drink, read and travel far away.

Follow me at twitter: @thetanvirhasan

You may also like...