4/40 pngs dont show up? - ios

I have two buttons that the user can select the colour for. The left button has 20 png to choose from, the user can select the colour from a picker and then that colour is displayed in an example button in the view, all 20 work fine. Now the right button has another 20 BUT only 16 of them work? 4 of the pngs wont show up in the example button or in the actual button they are set to on another view. The pngs are the same size as the others, the same in every way except colour. Does anyone have any ideas as to why this would happen?
I do get this error when building onto the device : ImageIO: PNG invalid PNG file: iDOT doesn't point to valid IDAT chunk

Looks like a compatibility issue similar to this one
I had used PS to make all the images but when I open them and resave in PaintBoard then they seem to get picked up now?
Upon further inspection it looks like the size has reduced greatly as well now as PS was saving a whole heap of other information with each image. I will go through them all now and resave them just to make the program more economical.

Related

Toolbar button image suppressed

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.

App icon displays a black square.

I am having my app icon be displayed as a black square instead of the intended image.
I have placed all of my AppIcons into the folder, Im wondering what could be causing this.
Your image needs to be an opaque PNG. No transparency or anything, as well as being the correct size.
If it already is that, try opening it in Preview and re-saving it as a PNG. That way OS X 'generated' it and it should be compatible. If that helps fix the issue, then your image editing program is saving in the wrong format...see info below.
Apple has this to say on generating PNGs:
For all images and icons, the PNG format is recommended. You should avoid using interlaced PNGs.
The standard bit depth for icons and images is 24 bits—that is, 8 bits each for red, green, and blue—plus an 8-bit alpha channel.
I have had this happen when the app is listed as a .png file, but the system is recognizing it as a .jpg or some other type ... find your icon in "finder" and open it with preview, go to the file menu select "export as" and make sure you choose PNG as the save format. Delete the old version in the application, delete the derived data, clean your project, and rebuild the application.

How to save a photoshop image after changing color channel visibility

I was messing around with the RGB channels in photoshop and found what I wanted when I removed visibility of the red channel, and kept blue and green. When I went to save my image it saved it in complete RGB. How do I temporarily remove the red channel from the image for saving? I have attached a pic for help. Thanks,
Before,
How I want it saved,
By definition if you are working with typical RGB images you have 3 channels of colors. You cannot erase one channel, keep the rest two channels and still have a valid image (in the strict RGB sense).
If you need to eliminate the information in one channel you just have to turn it to black. In your case, if you need to eliminate channel Red, then just select the Red channel and fill it completely with black color (ex. use the bucket fill with 255 tolerance). You will still end up with a 3-channel (or 4-channel if you have transparency) image but without any information from the Red channel.
i think you probably have the answer by this time but for the others.
after hide the unwanted channels click on image select all with CTRL+A then copy with CTRL+C and create a new layer paste it with CTRL+V and you're done!
I have a solution but it's not recommended:
Goto Adobe: View/Screen Mode/Full screen mode.
On the keyboard press Print Screen.
In Adobe open new file or press Ctrl+N and make settings as you want.
Tip: For high resolution, change Resolution to higher than 300 and press Ctrl+V and you are done.
Crop or Resize your picture and save it.
Tip: Press Shift while resizing to keep the picture in its original condition!

How do you fit a large png image into a smaller custom Round Rect Button on XCode without losing image quality?

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/

Automate Saving for iPhone images in Photoshop

I have a dream script I'm looking for and wondering if anyone here as stumbled across one
Problem: Creating #2x and regular PNG files for iOS software
Edit: no need to worry about file type. iOS images should ALWAYS be 24bit PNG
In my workflow, I'll get my image all set then go through this same exact ritual every time:
Save for Web & Devices
Press Save and choose a filename, like "myimage#2x.png"
Save for Web & Devices again
Reduce image size by 50%
Press Save and choose a similar filename like "myimage.png"
My dream photoshop script would
1. Ask for a filename & location: i.e. present a typical save dialog
2. I'd enter a name "myimage"
3. it would save the current document as "myimage#2x" in that location, and then save a 50% reduced image named "myimage" also in that location
Any ideas? I've poked around the photoshop scripting reference but its a bit overwhelming.
Thanks!!
You could use photoshop Actions for that. You can found dozens of how-tos for that in google.
But i rather prefer to save all images just in retina with #2x and then load them all in the little and smart app called unretiner (Appstore link) to generate the lowers images.
Here is an action set I created (JLRetinaPNGExport.atn) which you can find here. This action set comes with 3 actions:
current layer export as .png at 100% then 50%
current layer, trim transparent pixels, then export as .png at 100% then 50%
merge visible and export as .png at 100% then 50%
This action set was modified from this action set. Hope this helps!

Resources