1.2 The Switch
Changing the UI design app you’ve been using for a long time can be a daunting prospect. So is it necessary? And if you do want to change, what can you expect from Sketch? This lesson will answer all of these questions.
1.2 The Switch
[MUSIC] Here's what you need to know before switching from Photoshop to Sketch. First of all, Sketch was created specifically for web and UI design, while Photoshop is mainly a photo editor. That means Photoshop has tools that will not really help you with UI design, such as filters and effects you would normally apply to photos. The biggest thing you need to get accustomed to is the fact that Sketch is vector based. That means you can basically enlarge or shrink the image you're creating without losing detail, regardless of the scale. Photoshop, on the other hand, works Arrastra images, so pixels instead of shapes. So when you're going to resize an object that's not a shape you will get a pixellated result. Now, something you will definitely notice when switching to Sketch is the sheer speed. Sketch is really fast, even on slower computers, while Photoshop can be a really laggy, even on more powerful computers. On top of this, the Sketch file size is really small, compared to the one on the PSD files. A downside we can mention here is the fact that Sketch is Mac only, while Photoshop works on Mac OS and Windows. So, if you're currently using a PC, you will either need to build a Hackintosh, which is a PC that can run Mac OS, or buy a Mac. And that takes us to the next point in our discussion, the price. Sketch is priced at $99. Not incredibly expensive but not cheap either. The cool thing is you can apply for an educational license and get it at half the price. Photoshop, on the other hand, is part of the Creative Cloud Suite, which means you need to pay a monthly or a yearly fee. If you just want Photoshop, you can get the photography option at $9.99 a month. That's the cheapest option. And here's the thing, in the long run, you will pay more for Photoshop because Sketch is a one-time purchase. On the other hand, Macs are pretty expensive. So if you decide to go Sketch, and buy a Mac, you will end up paying a lot in the beginning. Now, let's assume you're okay with the price and with the change of platform. How will it be to actually get work done in Sketch compared to Photoshop? Well, first of all, you can organize your files much better in Sketch. You can use art boards. And these are basically canvases where you can work. They can be any size and you can have as many as you want. Creating them is really easy as well. You just press A, then click and drag to the desired size. You can also choose a size from the available presets on the right side panel. Then, you can further organize those art boards into pages. Now, Photoshop also has art boards, but the thing is, they're harder to work with. And in fact, art boards are a relatively new feature. It was introduced in the CC2015.1 release. So if you are using an older version of Photoshop, you won't have these. Moving on, let's have a look at grids. And nowadays, grids are essential for creating proper layouts. Sketch has built-in, customizable grids. You simply go to View > Show Layout, and Sketch will overlay this grid on top of your document. You can also customize it by going to View > Layout Settings. You can choose between a vertical grid with Columns or a horizontal one, perfect for creating a baseline grid. Photoshop, on the other hand, does not have a built-in grid. You can create one yourself by using a layer positioned on top of everything else, or use a plugin and generate the grid by using the rulers in the Photoshop document. Another feature that I'm sure you're going to absolutely love about Sketch is the measuring and alignment system. Let's say you have two objects that you want to align to the left and also position them at 100 pixels from one another. Well, when you drag an object, Sketch will automatically measure the distance and show it to you, along with smart guides that will indicate when the edges or centers of two objects are aligned. You can also use this feature to align objects inside the art board. You can also get the distance from a selected object to the objects around it by holding Alt and positioning the cursor above the object you want to use for reference. I cannot stress enough just how awesome and powerful these features are. They're so easy to work with and they save you so much time. Photoshop also has something similar, but not nearly as powerful and much harder to work with. Now, let's talk about Photoshop's Smart Objects. These are objects that can have multiple copies of themselves, each copy, of course, preserving the characteristics of the original. For example, I can make a smart object from this box and then create two additional copies. And I can resize or rotate each copy to my liking. Then, if I go back and add in the original, all the copies are updated as well. Pretty cool. Sketch has something similar called Symbols. So let's say I create one of these symbols from this shape. I can then create as many copies as I want, and editing one of these will update the rest. Unfortunately, this includes the actual size. So, unlike Photoshop, you cannot use the same symbol in multiple dimensions. A bonus for Sketch here is that you can actually exclude text values from a symbol copy. This means that, for example, if you have a button as a symbol, you can create multiple copies of that symbol but with different text. And this is actually awesome for creating a set of buttons. Sketch has something called text styles and shared styles. These allow you to save the properties of an element or a piece of text and reuse them. Moving on, let's talk about the color picker. The one are to use than the one in Photoshop. You just press Ctrl+C and you get this big loop that will zoom in nicely and also give you an RGB and hex value of whatever color you're hovering on. In contrast, the one in Photoshop doesn't show a zoom and doesn't give you any kind of value for the color you want. Now, a feature that you may or may not have used in Photoshop is called Creative Cloud Libraries, and it was introduced in the June 2015 update. This feature allows you to have asset libraries stored in the Cloud and accessible from any device that has the Creative Cloud installed. These assets can include images, character and layer styles, and even color swatches. And this is great if you are using multiple Adobe apps or working on different computers. You can easily sync these assets. You can even use the Adobe stock service to grab stock images and use in your projects. Now, Sketch, doesn't have that, so if you're using Adobe CC apps, like Adobe Premier Pro or In-Design, then you will need to export your assets from Sketch first and then import them. If you're just using Sketch, then it's no big deal. Speaking of exporting files, this is something where Sketch shines. The export feature here is just so much better than the one in Photoshop. You can export single objects, single art boards or entire pages. You can even export your entire document as a PDF. You can do multiple exports of the same item in different sizes and formats. You can export items one at a time or everything at once. And you can export as PNG and JPEG, but also in vector formats, such as EPS and SVG. Finally, let's take a minute and and talk about Sketch and the web, because mainly you'll be using Sketch for web design, so whatever you design, will get coded at some point. Sketch is fantastic in this regard. It has a built-in code extraction tool. If you select an object and go to Edit > Copy CSS Attributes, you will get the relevant CSS information for that object. Photoshop, on the other hand, does not have a built-in feature like this. You either need to use Is a plugin like CSS Hat or use the Adobe Brackets Editor with a plugin called Extract. There's something else you need to know. Sketch is code friendly. That means that any property that you can apply to an object can be replicated in CSS. Photoshop, on the other hand, being a photo editor allows you to add some crazy layer effects that can just not be replicated in CSS. And that's it for this short course. Please join me in the next lesson for the conclusion.