Photoshop Tip: Snap Shapes to Pixels
- Date
- 03.02.09
- Comments
- 12
I love Shape layers in Photoshop. They make editing and changing design comps a breeze. Resizing, re-coloring, everything—they help us be more efficient. But, when it comes to slicing the file up for the web, there is one thing that I hate: when people don't use “Snap to Pixels” with their shapes. Let me help you not make me really annoyed.
Why is snapping to pixels with shape layers important?
For website design, snapping to pixels is imperative. The web is still a pixel-based medium, and will be for years. Because of this, it's not possible to define images, shapes, layers, or text at a non-whole-number pixel measurement. Not only that, but we can't even save images with a width or height that are not whole numbers. So, precision in your design mockups is just as important as precision in your site.
Bad
Good
How to Turn Snapping On
Select the Shape tool from the tools palette. Your top menu bar will now have a bunch of shape options. Select the rectangle or rounded rectangle shape. Click the drop-down arrow to the right of the shape selector buttons. In the bottom-right of this pane, check the box that says “Snap to Pixels”
Use this and I will heart you forever.
12 Comments
I learned using it quite late. I did an early design (warning: ugliness!) without using "Snap to Pixels" and I could not figure out why corners looked as sexy as I saw elsewhere not to mention that the whole thing was hell to markup. When I saw the company's designer using it I never looked back.
I think the whole idea about posting quick Photoshop tips is brilliant, It'd be fun to read more of these around here.
Ali B.: I actually have a ton of these little tricks up my sleeve, but I always forget how useful they are until I notice someone else not using them. I'll have to watch out for them and be sure to keep posting them.
Why not? You'd be amazed how many simple things many might be missing. Besides, they are fun to read and takes little time to skim over. And the latter is probably the only thing most of us do these days (I can has time?!).
So, this is totally awesome! Only 2 complaints for Adobe, and maybe you have more of a solution?
1) Why isn't there the same option for the line tool?
2) When you go to resize the shape, it still splits pixels.
RoyCreative: There are many, many more complaints for Adobe, but as for your specific questions:
1) Unfortunately, there isn't.
2) If you're resizing with the Direct Selection Tool (white arrow), select the points that you want to move and either zoom out 100% and use your arrow keys, or hold down Shift while you drag them with your mouse.
Gold. Pure gold.
I don't understand why this option is hidden in the toolbar. It logically lives under the View->Snap To menu options. Oh well. At least it exists! Thanks.
Awesome... I feel kind of silly for not finding this on my own. I've been working for years without this tip, having to redraw my stupid rounded rectangles. Thanks for freeing me from my dumbness :)
I have been looking for this for aaaaaaagees. Thanks!
You've just saved me about 5 hours correcting half-pixels for EVERY single design that I do! I feel like I owe you money now or something :) Thanks so much
I thought there should be an option for this but was looking in all of the wrong places.
Thanks very much for this - often it's much quicker and easier just to Google this stuff than it is to search through the manual...
OH. MY. GOSH. Thank you.