For a mobile website project I encountered a problem that (only on android browser), the gradient to transparency (smooth outer glow) does not look clean. Instead you can see clear edges around it. Strangely though it seems to disappear for as long as I scroll the page.
http://i.stack.imgur.com/qGmXj.png
The problem does not occur on any Desktop Browser or on iOS Devices.
Thanks for your help!
UPDATE:
I found out, that the problem is called PNG Banding and only occurs with PNG-24 (24 bit) on the 16bit displays. As I cannot go with an 8-Bit Image (which would render fine) because of the quality loss, I still did not find a solution for the problem
I have also not found a solution to this problem.
In my case, I had a PNG with a white-to-transparent gradient that I would overlay on top of elements with solid background colours to give them a "shine" up top. No matter what I tried, there would always be banding on the Android browser (and no other browsers at all).
Before I even tried the PNG gradient, I tried doing so with CSS3, but that suffered from the same issue.
In the end, I was forced to create opaque PNGs with the white-to-transparent gradient layer merged with the colour layer. This meant I had to do the Photoshop equivalent of "hard-coding" each possible shine/shadow with whatever colour it would be on top of. Not the best solution, but it displays fine on Android browser without any banding and I needed do something, so yeah. :|
In photoshop, Save For Web. Choose PNG-8 bit. Dither Option: choose pattern or noise. This will smooth out the gradient banding.
Related
So my tablet recently updated to Android 7.1.1, and I noticed that my app's icon looked like hot garbage with the new adaptive icon scheme. I updated things via Android Studio's Image Asset Studio, and it's better, but I'm noticing the edges of the squared circle look kind of ragged/jagged/rough. Here's how it looks compared to Twitter and Firefox. Any suggestions as to how I can get the edges of mine to look as smooth as those?
EDIT: For what it's worth I still see the same rough edges if I use an image or plain color as the background, and they even show up with the stock ic_launcher icon.
You Change the Shape here in Image Assest
So it turns out that the image asset tool in Android Studio is creating the problem - it leaves transparent edges around the generated icons. And then when it's rendered on the device, Android rescales things as a result, which leads to the indistinct edges on the icons. What worked for me was to go back in and fill in the transparent areas by hand so that the background extends all the way out to the edges of the .png files.
I am developing a card game in HTML, JS and CSS using the Meteor platform. I am using ♥ for the hearts suit and ♦ for the dimonds suit. The color is set to red using color: #FF0000; in CSS. The font-family is set with font-family: 'Times', serif;. On a desktop PC, Mac or iPhone these show up as red icons, but on an Android using Chrome they show up as black. However, the rank is still displayed as red which leads me to believe this is specific to the icons themselves.
Before displaying the suit string I run the code through the SafeString function in Spacebar.
suitString: function(suit) {
var suits = {'H': '♥', 'S':'♠', 'D':'♦', 'C':'♣'}
return Spacebars.SafeString(suits[suit]);
}
I imagine it has something to do with the font that is used to render the icons on Android, but I have been unable to figure out exactly why this is happening. Or it could be something specific to the SafeString function.
Can anyone enlighten me and is there a way to ensure the color on all devices without using images for the suits?
Thanks!
I think this is an Android 5.0.x font rendering bug. It happens on web pages and within applications. So far I've only seen it on Android 5.0.1
I can't reproduce it on android 5.1.0 and 4.2.x
I really drove me mad. At first I though html tables wouldn't accept color.
Here is my test page: http://ibob.github.io/tests/html/
If you open it on an Android 5.0.1 device, the solid red suits won't be colored.
The empty suits look bad, so I guess going with images is the only sensible solution.
EDIT:
Actually after more digging, this seems to be a TouchWiz issue (ie Samsung only).
In their TouchWiz updates after 5.0.1, Samsung changed the font rendering of solid suit colors to something like emoji - immune to coloring. Apparently, it can't be reproduced on non-Samsung devices but it's reproducible on every one with an Android version bigger than 5.0.0.
Note that HTC have done a similar thing, but kept the colors of solid suit colors. However with modern HTC devices you can't draw spades or clubs with a color other than black, and hearts and diamonds with a color other than red.
Other device brands with their custom android mods may have similar issues.
I have the same problem when using ♥ (black heart suit, as described in http://www.w3schools.com/charsets/ref_utf_symbols.asp)
In PC, you can change the color with the css color attribute. However, in android, it shows in black regardless the color you specify.
I suspect that is a problem of the android browser rendering that black heart suit with that black icon.
I used ♡ instead (white empty heart) which takes css color attribute not only for PC but also for android browser.
Alternatively, an image with the desired color or an svg built in the code could use any css color.
The problem is following - on mobile Chrome (Google Nexus 5) my box-shadows have an ugly visible border, instead of a seamless transition into background underneath. Is there any way to correct that? It's not visible on any of the desktop browsers. Even Chrome Device Emulator displays it properly.
Any ideas? Prefixing does not help... I though about substituting the shadows with linear-gradient background, but it requires additional, non-semantic markup and is hella tricky in comparison to comma-separated shadows.
http://i.stack.imgur.com/FRc3C.png
EDIT: as mentioned in comments (thanks, #vlrprbttst) - it's not an inset shadow.
I have a fixed header and footer, which need to drop shadow on the background. The problem is, I can't really change the layout, I need to modernize it. Previous designer used pngs as backgrounds, I figured that it's gonna be better if I replace all images with CSS3 to reduce the amount of HTTP requests. Now I get complaints that it's ugly - justified ones.
I am creating images in Photoshop with a transparent background. I am calling them into flash dynamically with actionscript 3 but the transparency has a white ghostly look to them. I can see the boxes move around on my ANDROID devices.
I found this tutorial and it helps: http://kb2.adobe.com/cps/128/tn_12804.html#main_Known_issues_with_transparent_bitmaps
HOWEVER I want to import the images dynamically and not have to bring each image in to flash and fix it. Any ideas on what settings will work when exporting from photoshop?
I found a "WORK AROUND" solution.
I created a transparent PNG TO COVER THE ENTIRE SCREEN. I loaded it in the second level
above the background image. There may be a ever so faint "ghosting" look but I can't tell by looking. One thing for sure it removed the boxes around the other transparent PNG files I am loading in. So that's great!
Please let me know if this helped you. Thanks
-Ed Vizenor
I used a linear gradient image for a background and in Photoshop (and everything else) it looks nice and smooth but when I displayed it in the emulator is was banded! What's worse, it's banded on my actual phone - a Droid Incredible. I'm running 2.2 both in emulation and on the phone.
Here's a sample - original on the left, Android'ed version on the right: http://pnart.com/temp/AndroidMach.jpg
This has the appearance of Android imposing some bit-depth limitation. What's going on and how do I fix it?
Thanks in advance!
I had the same problem and did some searching on Google. One of the sites I found suggested I put the gradient image in res/raw/ and load the image when needed. I tried this and it worked.
From what little I understand, any image you place under "drawable" will be processed by AAPT and it isn't guaranteed the final images will be the same as the ones you are putting into it. In this case, it decided to shrink the PNG gradient image to a smaller palette to shrink the size of the final APK. If someone else has a better (or more correct) explanation, I'd love to hear.
-Dan
just try this: get down the width and height to the screen resolution of the device (eg: for moto droid: w:320px and h:480px and in photoshop keep the resolution to 200 dpi or above)
Regards,
Mistry Hardik
If there isn't any special reason for using an image to get a gradient I highly recommend looking up the Shape Drawable as it supports gradients which should (I haven't tried it but I assume) allow lossless scaling.
First of all, the color depth of phone's screen is much worse than that of your PC. On your PC you have 8-8-8 bits depth for R-G-B but for phones it's typical to have 5-6-5 depth. It means that any fine gradients/shades that look good on PC will be distorted when displayed on the device because its color depth is just not enough, physically.
Therefore, designer's rule №1: avoid fine shades and fine gradients in your designs.
But if you have to then, of course, you may try the following, but you've been warned!
1) For runtime-generated gradients: use dithering, like this:
setContentView(R.layout.screen_dashboard);
findViewById(R.id.layout).getBackground().setDither(true);
2) For graphics assets: always apply a 5-6-5 filter before saving png. Here is a good article with examples. Applying 5-6-5 filter ensures that color depth of your png is within device capabilities, and decreases png size too.
Seems like it might be because it's scaling the image to fit the screen. When non-vector gradients are scaled they often get that "banded" look. Try making a gradient that's the same size as the screen you're targeting, or try changing the ImageView (or whatever) that is displaying the image to make sure it's not stretching or scaling the image.
EDIT
In my opinion the best solution would be to create your gradient for your background at runtime have a look at GradientDrawable