keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
121,605,021,405 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
9 Responses
PSD scales per-pixel between standard resolution and Apple's hidpi. Use freely.
Download PSD
8 months ago
nice
8 months ago
Hey Wil, I have a few questions. First, I wonder what the benefit of using raster masks on folders and shapes is over using vector masks that come with shapes? Is this similar to @Louie Mantia's advice that circles are smoothest when they're made with the marquee tool?
Another thing I wondered is in the following screenshot of your folder for the progress bar stripes: http://cl.ly/image/340b2a2l170P. The raster mask on folder [Group 4] is the same as raster mask on the progress bar layer within, seemingly redundant; is this intentional?
Lastly, when you mention per-pixel scaling, are you saying that this has been designed a particular way to maintain quality? What unique approach is necessary to make something per-pixel scalable? I've just never seen the term "per-pixel" used in this context is all, usually I see it in terms of something rendering per-pixel, like each pixel of a photo being rendered on a hidpi screen.
It's always helpful to learn people's process. Thanks.
8 months ago
@Eli Schiff, the rasters are laziness on my part, except for when they're in addition to vector masks.
The group and content masks - The group's mask keeps it within solid borders. There is no feather on that mask. The vector shape layer inside of the group has a 1px feather, and then to create a slight fade at the roundrect's edges, the raster mask on the shape layer has a 1px blur. If not for the group mask, the feathered raster mask on the shape layer would show outside of the roundrect.
Group w/ Group mask (mask A) > Vector Shape B (1px feather) w/ raster mask (mask A w/ 1px feather).
"Per-pixel" scaling is my way of inventing words. Means that if you use Photoshop's bilinear scaling method, you get sharp elements at 50% the current size.
8 months ago
nice.
8 months ago
@Wil Nichols Thanks! That was very informative.
Just as a side question, if you weren't 'lazy' what would you have done instead?
i see the soft edges now that you mention due to feathering, so the mask on top makes sense. This could also be done with a smart objected shape layer, but the pixel/raster mask is probably easier.
I'll have to experiment with working at 2X and then scaling to 50% (as you have coined "per-pixel scaling.') Generally I have always worked at 1X and then scaled to 2X and refined from there.
8 months ago
If I hadn't been lazy, I'd have copied the vector mask. As for the smart object—Dunno if this happens to other people—If I reach a certain filesize or amount of smart objects, all layer masks corrupt and I have to recreate each. Only on smart objects. I avoid them like the plague.
The Bilinear scaling has the same effect as zooming to 50%, if you're drawing correctly. Just make everything at 50%. Resize the final image, even raster, using Photoshop's bilinear scale.
8 months ago
@Wil Nichols You say you use the vector mask in conjunction with a raster mask. Why? Why not just use a single vector mask?
8 months ago
@Louie Mantia I could, but then I'd have to use a different vector mask in each place it's used. Rather I keep the same vector mask so that any edits are easier to implement with all of that mask. Made sense when I had more than two of that layer.
8 months ago