Uibuttons

1 Attachment

41 Responses (page 1 of 2)

  1. Louie Mantia 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.

    likes

    almost 2 years ago

  2. Kyle Adams 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.

    almost 2 years ago

  3. Robin Raszka Robin Raszka

    Nice

    almost 2 years ago

  4. David Silva David Silva

    That's awesome, dude. Thanks for the insights.

    almost 2 years ago

  5. Craig 'iPhaze' Philips Craig 'iPhaze' Philips

    Boring? No way! This is über helpful! Much appreciate Louie.

    likes

    almost 2 years ago

  6. Ronan Rooney Ronan Rooney

    This is a great lesson, Louie. Thanks for sharing!

    likes

    almost 2 years ago

  7. Gerardo Diaz Gerardo Diaz

    Do we have any homework?

    likes

    almost 2 years ago

  8. CJ Melegrito CJ Melegrito

    Wait, for one, how did you draw the roundrect marquee in the first place?

    almost 2 years ago

  9. Wayne Dahlberg Wayne Dahlberg

    Been 2px'ing all my retina borders & subtle shadows. 1.5px shadows are new to me. Thank you for posting this.

    likes

    almost 2 years ago

  10. Matt McDaniel 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)

    almost 2 years ago

  11. David Anspaugh David Anspaugh

    Now THIS is what I'm talking about! PSDs baby!

    almost 2 years ago

  12. Henry Moran Henry Moran

    What does your workflow look like when you first start a design? Low res first then hi-res using this technique?

    almost 2 years ago

  13. Ramy Majouji 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).

    almost 2 years ago

  14. Derek Clark Derek Clark

    Good show!

    almost 2 years ago

  15. Ryan Ford 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.

    likes

    almost 2 years ago

  16. Mikkel Aggerbo Mikkel Aggerbo

    @Ryan Ford I think you misunderstood, he asked for the round rectangle marquee. Not the Rounded rectangle vector shape tool.

    almost 2 years ago

  17. Andrew Lucas 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.

    likes

    almost 2 years ago

  18. Christopher Downer 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.

    almost 2 years ago

  19. Trevor May 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.

    likes

    almost 2 years ago

  20. 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.

    almost 2 years ago

  21. Kristy Marcinová Kristy Marcinová

    Is the 1.5px setting new to CS6? Because it won't let me do decimals in CS5... :(

    likes

    almost 2 years ago

  22. Philipp Antoni 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.

    likes

    almost 2 years ago

  23. Max Daunarovich Max Daunarovich

    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.

    almost 2 years ago

  24. Benjamin De Cock Benjamin De Cock

    Quick test page to open on your iOS retina device to preview those buttons at their original sizes.

    likes

    almost 2 years ago

  25. Ryan Poolos 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.

    almost 2 years ago

keyboard shortcuts: previous shot next shot L or F like