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.
113,387,122,663 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
41 Responses (page 1 of 2)
Pro
Louie Mantia
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
Pro
Kyle Adams
Great to see this in action. I didn't completely get it from Twitter earlier so this helps a lot to show your points.
11 months ago
Pro
Robin Raszka
Nice
11 months ago
Pro
David Silva
That's awesome, dude. Thanks for the insights.
11 months ago
Boring? No way! This is über helpful! Much appreciate Louie.
11 months ago
This is a great lesson, Louie. Thanks for sharing!
11 months ago
Do we have any homework?
11 months ago
Pro
CJ Melegrito
Wait, for one, how did you draw the roundrect marquee in the first place?
11 months ago
Been 2px'ing all my retina borders & subtle shadows. 1.5px shadows are new to me. Thank you for posting this.
11 months ago
Pro
Matt McDaniel
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)
11 months ago
Pro
David Anspaugh
Now THIS is what I'm talking about! PSDs baby!
11 months ago
What does your workflow look like when you first start a design? Low res first then hi-res using this technique?
11 months ago
Pro
Ramy Majouji
@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).
11 months ago
Pro
Derek Clark
Good show!
11 months ago
Pro
Ryan Ford
@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.
11 months ago
Pro
Mikkel Aggerbo
@Ryan Ford I think you misunderstood, he asked for the round rectangle marquee. Not the Rounded rectangle vector shape tool.
11 months ago
Pro
Andrew Lucas
@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.
11 months ago
Pro
Christopher Downer
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.
11 months ago
Pro
Trevor May
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.
11 months ago
Rebound
Scaling Layer Styles
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
Pro
Kristy Marcinová
Is the 1.5px setting new to CS6? Because it won't let me do decimals in CS5... :(
11 months ago
Pro
Philipp Antoni
@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.
11 months ago
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?
Photoshop CS5.
11 months ago
Pro
Benjamin De Cock
Quick test page to open on your iOS retina device to preview those buttons at their original sizes.
11 months ago
Pro
Ryan Poolos
@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.
11 months ago