I have a viewcontroller with a toolbar with 2 bar button items. The image on one is a simple flat icon. The other is a complex image reduced to 28x28 pixels from a 256x256 image. The complex image shows up as a blob as shown below. The actual image is also show in the picture. It is not clear what I am doing wrong. The project code is available in the following link:
Project code
John Griffith on Apple Developer Forum provided this explanation which made a lot of sense. I need to redesign my icons if I want to proceed along this line:
Toolbar images are normally rendering mode "template" - only the alpha channel is used. Any non-transparent pixels are drawn in the bar's tint color. It may be possible to create a UIImage with rendering mode "always original" to preserve the look of your image, but then it won't respond to changes in tint color.
I have downloaded your project. The first thing you should do is to move your image files into the images.xcassets folder. Read here to understand why.
The image you are trying to display is actually just a red rectangle:
As you can see, opening in another program also just displays it as a red rectangle. Be sure to use the correct Image file. The problem lies not with your project but rather the image file you are using.
Related
Well, the title says most of it. I've tried with icon sets of 75/50/25 px and 72/48/24 px, as stated by different guides, but when I run the app in Xcode, the icons appear as (appropriately sized) blue squares. The icons are all black and white .png files, with negative images for the selected images. Any suggestions would be appreciated.
This might not fix your issue, and also may seem very obvious. But I'll put it here just in case it helps anyone.
First of all, I'm going to point out scenarios to check that can get you in this state that may or may not apply to everyone:
The asset's render type is set to Template Image
You are changing the tabBar.tintColor
If either of these are true and you are getting a solid colored square as your icon, the first thing I would check is the actual image you are using. It is probably an image/icon sitting on a white background or something like that rather than a transparent background.
If you are using a .png, .pdf, or .svg icon and want to tint the icon, you will need a transparent background. Transparency doesn't exist for .jpegs so they just won't work for tinting the icons.
This is because changing the tint will tint the whole image. If there isn't transparency, Xcode will have no idea what is icon and what is background. So a 40x40 icon just becomes a colored square.
Another benefit of using a transparent background will be now instead of having multiple images for selected/unselected states, you can just set the desired colors for .selected and .normal states and use one image.
Okay, the solution is NOT to set the image to render as image, but to use an alpha 0 background instead of a white background on the icon image.
Another tip. Don't name your image assets the same name as iOS System icons/glyphs. I had a download icon labeled download(.png). After renaming the issue disappeared. Very inconsistent behavior.
I have some colored images and same colored text on an iPhone App screen. The images show as expected, but when I use the same RGB color code on the text, it appears different on the finished app (mostly, a little darker). Why is xcode changing the color I tell it to use? How to get the text color to exactly match the color codes in the images.
Update: Here's a screenshot. I use the color picker from inside XCode, to pick the color from the image, so it shouldn't matter which color space I'm using (I'm using the same for both text and image), it still looks different.
It's very popular problem about different colors...
1) Try to use Digital color (native mac application)
2) Try to off text shadow, if you use it from your label.
3) And, all of its, is not a wright way to resolve this problem, if you want to color like on image you should correct them manually in you code or in interface builder.
I'm having a bit of trouble understanding and/or implementing images with a particular fill type into my project. The background is a UIImageView. Here is a screenshot of my app's "Profile" page
The image is pulled in from Facebook, using the Facebook graph. The image is a 720x720 square.
The image looks decent in the smaller circle, however the background version doesn't fill the way I would expect it to. Despite having tried all of the "ScaleAspect______" methods, the background looks as shown.
My understanding was that ScaleAspectFill would do what I want, which is the scale the image down until either X or Y is the size of the frame and then crop the remainder out. That's how it's shown on the Apple Docs.
I have added and removed clipsToBounds to the ImageView, neither of which made any changes.
The image I'm working with can be found here:
https://graph.facebook.com/10152976336695409/picture?width=640&height=640
downloaded
EDIT: Clarified that the background is a UIImageView type.
I am creating a button for my application that, when pressed shows an indention looking effect to make it appear that the user is clicking a real button. It is very simple, using only an image for the default state and the depressed one for the highlighted state. I'm having a few problems. The quality is terrible. I have uploaded the images to XCode in the exact pixels they will be presented in my application but when I export it from Illustrator it gets really pixelated. So I was wondering if there was a way for me to upload an image a few times bigger than my button and have it shrink to fit the button size. I've tried to do that but when I run my app it gets really messed up and weird looking. I would just put text inside the button but then it ruins the pressed effect. Any ideas?
If you export an image at the same aspect ratio as the button, the image will be re-scaled to fit within your button. Don't forget to use the Custom style so you don't get the button oval.
However generating an exact pixel version of your button should be possible, and look good - especially if you specify a 2x sized #2x version of the image for retina use. Are you sure your Illustrator export settings are correct? One thing to consider is that perhaps anti-aliasing needs to be enabled on export.
This page has a helpful quick checklist for how to save for the iPhone from Illustrator (Scroll down to the "How To Save Art For The iPhone In Illustrator" header)
http://www.vickiwenderlich.com/2011/11/faq-how-do-i-save-art-for-the-iphoneipad/
I've started using Fireworks to do prototypes, but now I need to code a prototype in HTML/CSS. I have all relevant image elements sliced, but the default behavior for Fireworks seems to be to export slides with any visible background elements embedded in the picture. E.g. When I export a logo I want the area around the logo to be transparent - I don't want the background behind the logo, which was located at a different layer.
Is it possible to export all elements with the transparency intact?
Copy your logo to a new document and export it. Lay it on top of your header graphics using CSS or maybe table if you are going that way. The point is if you see the background colors around the logo in your slice view, there is no way of exporting it transparently. The purpose of slicing is to export what you see in the sliced rectangle.
Make sure that there is no background in the image, either use the wand tool to delete the background or some other method and then make sure the images are exported as .png