Skala View toolbar icons and popover

24 Responses

1. Pro Marc Edwards ✎ Bjango

   A new popover style and a new icon for brightness in Skala View 1.1, the companion app to Skala Preview. The update was submitted a while ago, so it should be out soon.

   We chose to use custom popovers so the UI could be consistent across iPhone and iPad, which wouldn't have been possible if we used the stock popovers.

   12 months ago

2. Pro Thom

   impressive! I dig the subtle lighting on the bottom of that knob!! *claps hands* well done sir! :)

   12 months ago

3. Pro Marc Edwards ✎ Bjango

   Thanks.

   (Unimportant fact: The knob needed two layers to get the desired effect.)

   4likes

   12 months ago

4. Pro Thom

   the one-layer-master used two layers to create a knob!? O_o haha, sorry it's still impressive! :P

   2likes

   12 months ago

5. Pro Marc Edwards ✎ Bjango

   Maybe I wasn't trying hard enough.

   4likes

   12 months ago

6. Pro Nathan Walker

   You know, I don't really care how many layers you use because it's one of the most worthwhile pieces of software since Photoshop.

   3likes

   12 months ago

7. Pro Afraz

   Crisp and Clear. Nice Work

   1likes

   12 months ago

8. Pro Marc Edwards ✎ Bjango

   @Nathan Walker ✎✎✎ Thank you. It's so good to hear you say that.

   3likes

   12 months ago

9. Pranav

   Beautiful work! My only critique would be about the glasses, It looks a bit skewed to me and I think I created the knob in a single layer ;) : http://cl.ly/0p07342b1a1M0J2L2y3W

   2likes

   12 months ago

10. Pro Alex Solonsky

    @Marc + @Pranav The knob is easily archievable as a one-layer (at least at this size). I believe the problem appears when @2x-ing. Here's my take on this http://cl.ly/29450m3V2p1r2X470S2D

    12 months ago

11. Pro Jonno Riekwel

    You should have more shadow inside the bar. You have a very strong highlight at the bottom, but not inside the bar itself. Which gives it a super weird perspective.

    2likes

    12 months ago

12. Pro Marc Edwards ✎ Bjango

    @Pranav Pramod What don't you like about the glasses?

    @Pranav Pramod & @Alex Solonsky Yeah, the knob could definitely have been done in a single layer.

    12 months ago

13. Pro Paul Ungureanu

    Hey look, a hexagonal hole in the gear. Haven't seen that before :)

    1likes

    12 months ago

14. Pro Marc Edwards ✎ Bjango

    @Paul Ungureanu It'd probably be easier to work with if it was a real life cog than a round hole. That's my rationale, anyway.

    12 months ago

15. Noe Ruiz

    Sweet, looking forward to the update. The custom popovers I designed in Promtr was a PITA to slice out (ie. making them stretch and scale correctly) Could you share with us how you sliced it out for dev?

    12 months ago

16. Andrey S. Rodrigues ☝

    really need some changes, but still is great

    12 months ago

17. Pro Paul Ungureanu

    @Bjango ✎ Marc Edwards I like it! :)

    12 months ago

18. Pro Jared Sinclair, RN

    Implementation question: the Apple docs say to *not* include pre-rendered drop shadows in images used to subclass UIPopoverBackgroundView, but in my experience this was absolutely necessary. The default UIKit shadows never appeared. What was your experience?

    12 months ago

19. Hossein Yektapour

    niceeeeee

    12 months ago

20. Pro krishnachaitanya

    nice work

    12 months ago

21. Pro Charles Riccardi

    Always impressed, Marc. Great stuff.

    12 months ago

22. Pro Ramy Majouji

    So, you make a chainsaw in a single layer but can't figure out how to make a know in one layer? One star. ;)

    12 months ago

23. Stephanie Lucas

    Gorgeous. I like the style of the glasses, looks different than ones I've seen before.

    12 months ago

24. Pro Marc Edwards ✎ Bjango

    @Jared Sinclair, RN We're not using Apple's UIPopover class at all, and yep, the shadow is baked into the image.

    @Noe Ruiz What would you like to know? I think we're using resizableImageWithCapInsets (iOS 5+). The centre, repeating area is about 20px high, to allow for the dithering to do its thing (if the repeating area was 1px, the result would have visible banding). The arrow is separate and can be moved anywhere along the bottom. The setup for that isn't too hard, but requires some slightly sneaky masking in Photoshop to get it all perfect while remaining scalable for the @2x size.

    1likes

    12 months ago