As a designer, it's vital to have good clean lines in our designs. In this video, Renata explores the difference between raster and vector, what to look for in Sketch, and how to fix your lines.
- [Instructor] Sketch is a vector based program, which means that everything is based on infinitely scalable math, not raster pixels. Photoshop, and other similar programs, though, are based on pixels. So, let's dig into that a bit deeper. If we go to our toolbar here and right-click on customize toolbar, and then pull our show pixels into the toolbar, and the tool for round to pixel, into our toolbar, and click done, we can go ahead and take a closer look at these elements that I've brought into this file for you.
So, go ahead and select show pixels, and you'll note that our bottom image, here, has a point 55 pixel height, as you can see right here in our height, but if we scroll down, we notice the image below does not have that little pixelated line at the bottom, because it's at 51, so this has a perfect pixel, i.e, it's 51, there's no point anything, but here, the image is trying to show that point 55, or that 55 percent of a pixel in this gray line here at the bottom.
So, in order to get rid of that, and make sure to clean up our image, because despite the fact that pixelated design is coming back, at least in the gaming world, in UI, anything that we're doing, we want it to be clean and crisp. We want it to look nice, and if it's pixelated, it won't look nice and clean and crisp. So, what we can do is, with this image selected, we can click round to pixel, and see that goes ahead and makes it a nice clear line, rounding it up to 51.
Now, of course, if you want 50, you can always change it here, too, but this is really something to pay really close attention to in Sketch, because you can end up making really ugly pixelated design if you're not making sure that everything is on the pixel, as opposed to slightly off, and it's a point or a percentage of something. Also, if for some reason, your image is point 55 off in position, you notice we're still getting that pixelated look up here, as well, well, we can still use the the round to pixel, so it works in both position and size, so that you can go ahead and make sure that you have these nice crisp, clean look, and that's raster versus pixel.
- Getting organized in Sketch
- Managing symbols in Sketch
- Drawing shapes in Sketch
- Boolean operations
- Building and sharing your own library
- Designing gestures and interactions
- Building game assets
- Advanced tips for workflow management
- Building prototypes
- Creating and sharing libraries
Skill Level Advanced
Q: This course was updated on 05/22/2018. What changed?
A: We added new videos on prototyping and building and sharing libraries in Sketch.