As a primarily raster-based solution, Photoshop has a number of different ways that it can handle vector shapes. In this video, learn how to make sure that your shapes stay perfectly snapped to the pixel grid to avoid fuzzy edges and partial pixels.
- [Instructor] At some point,…your design may need to get upgraded to a pixel perfect…mock up that can be used as a reference…as engineers work to build your application.…But before we start replacing our wire frame…with final assets, we need to have a talk about pixels,…and specifically, all the ways…they can misbehave in Photoshop.…What we're looking at here are five rectangles…that are 40 by 37 pixels in size.…Now, these look a little different, what's going on here?…Well, to investigate pixels a little more closely,…for Photoshop, under preferences, come to units and rulers,…and change your rulers to pixels if it's not there already.…
It'll make it a lot easier to show you what's going on.…Using the zoom tool,…I'm going to zoom in on our first rectangle.…Now, I'm seeing white lines,…which are called the pixel grid.…It shows me exactly where my pixel divisions are.…If you're not seeing that, come to the view menu,…and under show, make sure that pixel grid is enabled.…To understand what's happening with this Smart Shape,…
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.
Q: This course was updated on 07/10/2018. What changed?
A: We added one video, "Mobile preview on Adobe XD."