Following some conversation on Twitter about 2x assets, I thought I'd share a bit about what I do.
The topmost button shows a direct copy/paste layer style of the 1x asset. On a 2x device, this looks a bit sharp and thin.
The second example illustrates what happens when you "scale styles" in Photoshop if you upres a document. There's a 2px drop shadow, a 2px inner glow... all the styles are exactly doubled. Not the most attractive, though it will look "identical" against a 1x device. The only advantage is that the button corners got smoother (because of the additional pixels) but there's no additional detail given to the edges and in my opinion, it looks clumsy.
The third button is a revised style based on the original 1x but given additional pixels, you can use a 1.5 pixel shadow instead of a harsh 1 or 2 pixel stroke. For the drop shadow (white inset look), I've made the opacity slightly higher, but kept a 1px sharp line. (There's some nifty tricks in here if you've never used Spread, Range or Contours for Glows and Shadows. I recommend you check out some of the settings that I'm using in the Layer Style!)
The fourth exemplifies the third style with smoother corners which are a product of drawing with the marquee tool, four circles and two rectangles, to construct the same shape. Photoshop renders marquee selections smoother (with more levels of opacity) than the vector masks can. While tedious, it results with smoother UI elements. Probably best after you've settled on the design and are kicking out assets. @Philipp Antoni later in the comments shows a great example of the difference http://d.pr/i/bpEl
I hope this helps. It's a little boring, but it may be useful to some of you!
PSD attached, download here.
11 months ago
Great to see this in action. I didn't completely get it from Twitter earlier so this helps a lot to show your points.
That's awesome, dude. Thanks for the insights.
Boring? No way! This is über helpful! Much appreciate Louie.
This is a great lesson, Louie. Thanks for sharing!
Do we have any homework?
Wait, for one, how did you draw the roundrect marquee in the first place?
Been 2px'ing all my retina borders & subtle shadows. 1.5px shadows are new to me. Thank you for posting this.
iOS is going to double the text shadow automatically, though, if it's set to 1pt. Which can look weird against non-doubled styles.
(Not saying I'm for 200% styles because I'm not)
Now THIS is what I'm talking about! PSDs baby!
What does your workflow look like when you first start a design? Low res first then hi-res using this technique?
@CJ Melegrito To my knowing there's no round rectangle marquee. You need to draw a rectangle, then cross selections with the elliptical marquee (which is tedious like Louie mentioned). You can cross, remove or add selections using the modifiers keys on your computer (Command/Ctrl, with Shift and Alt).
@Ramy Majouji Untrue. Photoshop has a rounded rectangle vector shape tool. You can define the radius of the corners and then click-drag your shape.
@Ryan Ford I think you misunderstood, he asked for the round rectangle marquee. Not the Rounded rectangle vector shape tool.
@Ryan Ford @Mikkel Aggerbo @Ramy Majouji @CJ Melegrito That's a simple thing to do. You just select the area of the rounded rectangle vector mask (CMD + Click on the layer mask) giving you a marquee and then you can apply that marquee as a mask to any raster layer.
This is why I'm hesitant about apps like LayerCake. They're great, but I don't want all of my strokes and shadows to be doubled.
Interesting. I use the same approach but no longer use the marquee tool to create buttons. Didn't realise that anti-aliasing of a marquee cutout was better than that of a vector object. I'll have to investigate this further, cheers.
by Philipp Antoni
Another thing worth pointing out is that Photoshop normally renders 1px and 2px values for the "Size" of shadows, glows and bevels exactly identical. Therefore doubling a 1px shadow to 2px will always look too sharp because it won't actually change anything.
11 months ago
Is the 1.5px setting new to CS6? Because it won't let me do decimals in CS5... :(
@Ryan Ford @Andrew Lucas The point is that shapes (specifically circles) created with the marquee tool have smoother outlines than anything drawn with the vector tools, even after converting a vector shape into a raster mask.
Just tried to make rastered rounded rect with 4 elliptical marques and 2 rectangular - it's identical to the one made with Rounded Rectangle tool. What am I doing wrong?
Quick test page to open on your iOS retina device to preview those buttons at their original sizes.
@Louie Mantia You know I've always envied your designs because you take a scientific approach to the design rather than just a touchy feel that looks nice approach. Its always refreshing to see excellent explanations like these about the nuances of interface design.
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.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter