The white background in my apple touch icon turns black?? My white background isn't transparent. The icon has a white triangle, red circle and black text. The only thing I can make out is the white triangle and red circle. Any idea whats causing this and how to make the icon keep its white background?
Much appreciated.
I'm not sure exactly what it was, but I may have narrowed it down.
The first time I uploaded the images they may have had the transparent background.
The second time I uploaded them I added the white background, but the png save for devices setting still had transparency checked.
The third time I uploaded them I saved them without the transparency checked but still got the black background.
All along I think the iOS Safari browser had the first set of images stored in cache. After clearing the cache the new image showed up with no problem.
Edit: Its the transparent background that turns it black.
As gstricklind found, if your png has alpha channel transparency, iOS will unfortunately ignore any "precomposed" directive and apply all its usual effects, in adddition to giving your icon a black background (white didn't seem like a better choice??).
The solution is, of course, to precompile the icons with no transparency. This makes it pretty difficult to utilize Android's support of alpha channels while offering itouch icons as well if a black background does not work for you. I found this tool useful when composing: http://www.gieson.com/Library/projects/utilities/icon_slayer
Same issue seen here: How to get iOS to properly respect the "apple-touch-icon-precomposed" link attribute for a "web app"
Transparent Apple Touch Icons are indeed possible. What you need to do is strip all excess information from the PNG using ImageOptim for Mac https://imageoptim.com/mac or a similar program on windows. I did extensive research and stumbled on the answer by looking at the apple touch icon used by the Virtual DJ site. This icon keeps it's transparent background on iOS and MacOS Sierra. I looked at the file size and realized how small it was compared to the custom apple touch icons with transparency that I made for my favorites in Safari. Next I looked at the file information using the inspector in Mac's Preview app. All of my custom apple touch icons had four tabs in the inspector section named General, exif, PNG and TIFF. The virtual DJ icon only had two tabs named PNG and General. Once I ran my custom images through ImageOptim the file sizes plummeted by over 90% and the extra TIFF and exif tabs disappeared from the inspector in Preview. Sure enough once I reloaded my custom images and launched Safari all of my Favorites tabs have transparent backgrounds!!!! Please see attached image for proof. Transparent Apple-Touch-Icons
Related
I'd like to have a background image in the NSSavePanel which I need to satisfy macOS Sandbox file export requirements. Such background image would be reflective of the overall imagery I use in the other application window and sheets. Apple's default NSSavePanel image style is okay for an app that cares little about its style, but my app is directed to video editors who can appreciate an artistic rather than mechanical atmosphere.
I've been able to use the panel's accessoryView property but it only appears as a differentiated section in the panel separate from the panel's overall style.
A simple background image for the panel overall capability would completely suffice, but it doesn't seem possible according to all the Apple Developer documentation. Maybe there's a practical HACK?
I'm developing a screensaver for OS X using Xcode's screensaver template. By inspecting the package contents of system screensavers, I've found that the thumbnails used in the System Preferences list of screensavers are derived from two files in the screensaver bundle:
thumbnail.png (90x58)
thumbnail#2x.png (180x116)
I have created two images of these sizes and placed them in my screensaver bundle. However, the System Preferences panel on my retina screen appears to load the non-retina asset. Here is a screenshot of the System Preferences panel next to a QuickLook preview of the thumbnail#2x.png image:
I'm out of ideas. Anyone know what could be causing this and how I can stop it? Things I have tried:
Using tiffs instead of PNGs. -- Same result.
Naming the retina-sized asset thumbnail.png -- Same result.
Turned off "combine high-resolution artwork" in Xcode's build configuration. -- Same result.
Deleting the thumbnail assets altogether. Interestingly, the System Preferences panel does not go back to drawing a default thumbnail icon. Instead, it draws an empty white rectangle. This led me to believe there might be caching going on, so I spent some time trying to find where that would be. Cleared preferences, etc.
Oddities
If you inspect a system screensaver's package bundle, you'll find that the two thumbnail files don't report dimensions in the Finder. And if you open them with Sketch, they BOTH appear as 90x58 to that app. (Although Photoshop shows the #2x asset as 180x116). The thumbnails from the system screensavers have the gloss effect already applied, whereas my thumbnail gets that effect automatically even though the image asset does not contain it.
I'm starting to think there's something fishy about the way the panel loads/draws these images. Maybe somebody knows something I don't?
I'm developing a iOS app that is using custom UIButtons with round shape. I wanted to add Image to these buttons and would like to know if I use IB to select an image from my project, do I have to also worry about 2x retina images for retina display?. What should be the image size for both non-retina and retina devices (all iPhones (including iphone 5) and iPad including mini) when I embedded them from IB?
Is there a best resource available on the Internet to get these pngs files for buttons?
Yes you should use all the images. you should just add the images with proper names to the resources folder. And just select the non-retina image rest the compiler will take care of.
http://www.idev101.com/code/User_Interface/sizes.html
The above link will help you with the images sizes
It is easy. Goto interface builder and on the right hand panel you will see this -
All you need to do is first configure your button as custom then include a image file in your project through xcode and then you can select that image in the dropdown in background or image property.
Note that all this is possible to do through code also, its just that IB makes it interactive. Hope this helps.
I am about to launch a new app and would lik eto increase quality of the graphics. In my case the graphics is the logo and the custom buttons. I do not know if this impact Core Plot but that is also part of the package.
There is quite a few posts about this but there are still things i do not fully understand.
I am reading this quote from "amattn":
It's trivial:
1.Only include #2x images in your project.
2.Make sure those images have the #2x suffix.
The system will automatically downscale for non-retina devices.
The only exception is if you are doing manual, low level Core Graphics drawing.
You need to adjust the scale if so. 99.9% though, you don't have to worry about this.
From this post: Automatic resizing for 'non-retina' image versions
My question in regards to this is:
1. Should i do the testing on retina simulator only, as if i place a #2 grapic on
non-retina it will be too big? ...or is there an other way of doing it?
2. Should i always use a ImageView or is it OK to drag the image on the screen,
this is the logo i am talking about?
3. What about custom made buttons with images, how should i do with those?
4. What is the normal process to manage the different screen sizes, do people
add images for all displays or using this type of process?
Should i do the testing on retina simulator only, as if i place a #2 grapic on non-retina it will be too big? ...or is there an other
way of doing it?
It doesn't really matter which simulator you test on because as long as your non-retina and retina graphics are named correctly (image and image#2x) the correct image will be displayed automatically.
Should i always use a ImageView or is it OK to drag the image on the screen, this is the logo i am talking about?
When you drag and image from the project directly onto a view in interface builder you don't really see it happen but it has automatically created and image view which is containing the image your dropped in.
What about custom made buttons with images, how should i do with those?
[myButton setImage:[UIImage imageNamed:#"myFileName"]];
As shown in the above code you should always use the non-retina fle name when you reference the image a UI element should use. That was if iOS detects the device is retina it can automatically use the #2x version in its place.
What is the normal process to manage the different screen sizes, do people add images for all displays or using this type of process?
Yes, including multiple image resolutions common practice and is required for iPhone apps (not sure about iPad) to include both retina and non-retina images. But regardless of the requirements, you should definitely support both device resolutions to keep your customers happy!
I have around 100 PNGs (that I created) that I want to create an animation out of. I however created the animation in a vector graphics editor, therefore each PNG has a white background. How do I make Xcode not show the white background and instead just the image itself? I will be displaying the animation in a transparent window, so a background completely ruins the effect.
Note I'm using Xcode 3.2.6 on Snow Leopard. I'm specifically asking about a Mac application not an iOS one.
I recommend exporting your images again with a transparent background. That would save you a lot of trouble. If that's not an option, have a look at Quartz 2D Masks.