Tips for creating skins

This is where you can share and download open skins for Smart Keyboard!
Post Reply
zen
Posts: 50
Joined: Mon Sep 20, 2010 2:36 am

Tips for creating skins

Post by zen »

Hello,

I thought I might share with you some of my experiences, in case you want to go ahead and create your own skins. These are just simple tips, not at all meant as laws. :D

AMOLED screens

Due to the way it's designed, AMOLED can be very difficult to work with. With just 2 full subpixel units per RGB block (each G is shared with its neighboring blocks,) symmetric colors (same level per channel) can look different than on your desktop display. I mostly try to avoid grayscale all together, because physically, AMOLED is not able to display true grayscale. If you really must have grayscale, adding a little blue tint can help avoid that pinkish colors you see often on AMOLED.

Furthermore, black (#000000) also presents an extra problem. Since there is no real grayscale, tones very close to black simply get shifted to blacks, hence some ugly color-banding or cutoffs. My Dutch friend, who designed the UI for DoubleTwist, got really frustrated with this. ;) You could try adjusting the gamma with help from your imaging program (GIMP or Photoshop.) If you must have grayscale gradients, adding a little gaussian noise can help (1-2% density should be enough.) If possible, avoid using blacks other than for drop shadows.

HTC screens

HTC has a (in my opinion) bad habit of making their devices produce warmer colors by shifting the system color profile to lower/reddish temperatures. Photographs of people may look great, but if what you need is some kind of accuracy, it can be a bit frustrating. I always apply a cooling filter to counteract this. Applying a cooling filter number 80 with 4% density helps a lot.

Nine Patch

To some extent, Android is able to stretch gradients in 9patch up to twice its original size without breaking or showing ugly dithering and color-banding. Provided that there's not much information (not too many colors) in the png file, has the same Hue, and the gradient range is well far apart.

I've found out that by making my gradients translucent, and let it blend with the underlying background, I can get much smoother gradients. How Android compress buffers and apply dithering may have something to do with this. If what you need is just some illusion of lighting, then translucency is a good way to achieve it.

If you do need a more complex gradients or lighting effect, setting your ninepatch to stretch the lighter tones (instead of the darker ones) is recommended.

To avoid unwanted clipping or stray pixels, make sure to check areas near the 9patch cutoff. The magnify and eyedropper tools in your imaging program are your friends. I've found out that draw9patch included in the Android SDK couldn't help me much because the preview stretches don't represent actual SKP key sizes.

Default shadows

For symbols such as return, backspace, shift, the default Android style for drop shadow is 75% opaque with 3px radius and no XY offset.

Reference size

The image dimensions that come with the example skin are set to landscape view. What this means is, for example, a 75 pixels height (excluding the 9patch strips) will be the height of the key when in landscape mode. In portrait mode, this height will be stretched. The width though, is almost always stretched in landscape, and contracted in portrait mode. With that in mind, you'd design the keys to first look right in portrait (because it's the trickiest and probably the most often used position,) after which decide to optimize further for landscape if needed.

That's it!

Good luck and have fun designing your own custom themes. I look forward to enjoying your works :D
User avatar
cyril
Developer
Posts: 2079
Joined: Tue Feb 02, 2010 4:02 pm
Phone: Nexus One 2.3
Location: Nice, France

Re: Tips for creating skins

Post by cyril »

Thanks Zen for the tips! Obviously you are much more a specialist than me in this domain, well that's what this Open Skins project is all about: giving the power to the people who know ;)
Cyril
zen
Posts: 50
Joined: Mon Sep 20, 2010 2:36 am

Re: Tips for creating skins

Post by zen »

Thanks Cyril. I hope it can help others. :)

If things happen to go smoothly in the core functionalities, and there aren't too many important bugs you must fix, I look forward to seeing some more additions to the xml spec. :D Such as shadow radius and offset for the text, more states for the shift symbol (active, locked, normal)

Custom font (that can be loaded by the android.graphics.Typeface class) would also be great. I've profiled my own app, turned out it's not at all expensive to load a typeface at runtime. It gets cached by Dalvik and subsequent loading will go even faster. Just an idea. ;) Although of course, there's the problem of licensing when redistributing typefaces, and some special glyphs may not be included. It's up to the skin designer to judge what's right I suppose. But, there are also plenty of legit, open, free typefaces on the web, including ones distributed by Google, Gnome foundation, etc.
dsf
Posts: 15
Joined: Sat Oct 09, 2010 1:12 pm

Re: Tips for creating skins

Post by dsf »

Hi zen :), I have a HTC desire, and I think the screen looks good compared to my other family lcd android phones. My HTC desire has an AMOLED display, and it's obviously HTC phone :), does this mean that I'm screwed? :) Furthermore, from what you said it sounds like AMOLED screens are bad, but I thought they were supposed to be exceptionally good though. :)
zen
Posts: 50
Joined: Mon Sep 20, 2010 2:36 am

Re: Tips for creating skins

Post by zen »

dsf wrote:Hi zen :), I have a HTC desire, and I think the screen looks good compared to my other family lcd android phones. My HTC desire has an AMOLED display, and it's obviously HTC phone :), does this mean that I'm screwed? :)
No, certainly not. :) There's plenty to love about the Desire. It's a great phone. And AMOLED certainly has many advantages, such as deep, beautiful blacks, fast refresh rate, lovely contrast, favorable power consumption.
dsf wrote:Furthermore, from what you said it sounds like AMOLED screens are bad, but I thought they were supposed to be exceptionally good though. :)
Depends on the definiton of bad. There are many technical aspects to consider. But, in terms of viewing pleasure, AMOLED is certainly more than acceptable for most consumers. However, for correct color reproduction, I tend to prefer different types of screen, such as an IPS panel with LED :)
dsf
Posts: 15
Joined: Sat Oct 09, 2010 1:12 pm

Re: Tips for creating skins

Post by dsf »

zen wrote:
dsf wrote:Hi zen :), I have a HTC desire, and I think the screen looks good compared to my other family lcd android phones. My HTC desire has an AMOLED display, and it's obviously HTC phone :), does this mean that I'm screwed? :)
No, certainly not. :) There's plenty to love about the Desire. It's a great phone. And AMOLED certainly has many advantages, such as deep, beautiful blacks, fast refresh rate, lovely contrast, favorable power consumption.
dsf wrote:Furthermore, from what you said it sounds like AMOLED screens are bad, but I thought they were supposed to be exceptionally good though. :)
Depends on the definiton of bad. There are many technical aspects to consider. But, in terms of viewing pleasure, AMOLED is certainly more than acceptable for most consumers. However, for correct color reproduction, I tend to prefer different types of screen, such as an IPS panel with LED :)
Thanks, that's reassuring :). Thanks for the help :) Also, I don't suppose you could help me, on my screen there seems to be one black pixel all the time, this has only happened recently, I don't suppose you know what may have caused it, like is it something I could have done to it by accident? Thanks :)
zen
Posts: 50
Joined: Mon Sep 20, 2010 2:36 am

Re: Tips for creating skins

Post by zen »

I may have misunderstood the reason why HTC modify the color profiles on their devices.

It has to do with how device manufacturers choose to handle color reproduction on OLED screens in order to compensate for quality degradation over time. Some HTC products were tweaked, others not. The Nexus One's color profile, for example, is actually shifted towards blue, in the hope that, as the OLED degrades, it will gradually show more natural colors. :)

More info if you're interested: http://en.wikipedia.org/wiki/Organic_LED#Disadvantages

I think this is getting too technical, :D so in the next discussions, I will focus on more practical aspects of making skins and help you along those lines instead.
Post Reply