Sunday, July 11, 2010

Wallpaper Editor: Color slidebar

OK, I could just put up a standard slide bar and let the user set RGB values, but that is not too great for general users, and even developers can have troubles visualizing the RGB color space.  Taking a look in interface builder, I see that IT's color selector is extremely nice.   Lets steal some of its design.  (All of its design would be too much, it packs a lot of functionality).

The sliders it has are very nice.  As you change the value of one slider, the other sliders change their gradient so that they show the possible values:

The iphone editor has 4 different types of sliders RGB, grey scale, CMYK, HSB.  In addition it has the ability to select from an image, to select 'crayons', to select a list of names, etc...

The opacity button allows the Alpha to be set.  I was originally going to call mine 'transparency', but Opacity works as well.     Either way using Alpha is something only computer geeks will use.  As the alpha is set, a combination of black and white is displayed behind color sample.

I plan to implement RGB sliders in a similar fashion and maybe a list of names for my initial cut.  If I do it right I should be able to support the other color spaces.   Right now I think giving too many color spaces might confuse people.  

The first implementation is to create a single slide bar that takes an object that helps set the color gradient for that slider.

My sliders will not have the ability to specify a full 256 values for color.  The iphone's UI doesn't really let this happen unless I force the sliders to be landscape, and get picky about colors.  However I should be able to support increments of 10, and to possibly have a 'zoom down' mode where you get to the general vicinity and then choose a specific number.  

If you collapse the Apple dialog then it will not allow you to choose every number.

Note that for my final version I might want to do HSV instead of RGB, it might be easier for the general user to find a color using that model.

No comments:

Post a Comment