Search Unity

How big should the slider button be?

Discussion in 'Immediate Mode GUI (IMGUI)' started by DaveyJJ, Dec 18, 2007.

  1. DaveyJJ

    DaveyJJ

    Joined:
    Mar 24, 2005
    Posts:
    1,558
    In a custom GUI I'm replacing the buttons on the horizontal slider with a new image. I've prepared 16x16 pixel images but they seem incredibly small. How big should the replacement images be to be larger than the vertical height of the slider itself?
     
  2. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    I've found 18px for the Thumb and 22-26 for the Bar are pretty usable.
    Here's a screenshot below using those values - it's pretty easy for users to find IMO :)

    Cheers
    Shaun
     

    Attached Files:

  3. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    Sorry - I just realized I never answered your original question (was a bit busy that day) :)

    For Slider Thumbs, abt 24x24 seems reasonable. Heres a shot to give a feel for the scale.
     

    Attached Files:

  4. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Nice GUI design Shaun!
     
  5. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    Thanks Big Kahuna - and thanks to Apple for the background ;)
     
  6. DaveyJJ

    DaveyJJ

    Joined:
    Mar 24, 2005
    Posts:
    1,558
    For the slider image, a PNG file or Photoshop with alpha channel?
     
  7. NicholasFrancis

    NicholasFrancis

    Joined:
    Apr 8, 2005
    Posts:
    1,587
    What I've done when doing skins is to have a photoshop file with all the images in it, then sliced it up and used PS's Save For Web to export all the bits at once as pngs
     
  8. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    Nicholas I don't know if you've heard of this, but Save for Web has some machiavellian machinations going on the background :)

    I've just spend a good hour trying to remove the color profiles that Photoshop puts in the PNGs.
    I thought I'd be tricky and use lots of small PSD's for each GUISkin element, but that didn't work either - for some strange reason, PShop makes the default matte color white, which is giving me glow instead of shadows on transparent areas. PNG's can have black as their default matte background, which solves that problem.

    I've still not fully solved the problem, but here is a bit more info on it. I don't know if it affects CS2 - but its an arse in CS3 and very confusing.

    For those of you making skins here are the correct config's for Pshop and Illustrator. (The Get infos - Left is a good PNG, Right is a bad one - note the More Info sections).

    Hope this helps - If anyone knows the solution to the PShop white matte problem, I'd love to know.
    Posted to this thread: http://forum.unity3d.com/viewtopic.php?p=59427#59427
    Thanks.
     

    Attached Files:

  9. NicholasFrancis

    NicholasFrancis

    Joined:
    Apr 8, 2005
    Posts:
    1,587
    Mostly, I just work with "proof colors" on - CMD-Y in photoshop. Then I get what I see - both in browsers and Unity...