I should probably be asking this on some art website, but in my iPhone app I am trying to make a center button on my tab like the one Daily booth has, but mine is coming out fuzzy. Does anyone know how to make then clean and crisp? I used illustrator to create and save the icon as a png.
Try setting the image size to 30x30 and remember to only use black and transparency. You can make this bigger for the retina display.
Also, are you saving the image as grayscale?
If you're struggling to make them yourself, why not try glyphish.com?
I really like Paint.NET on Windows for image editing, mostly because it is free.
I noticed somebody had created an Effect for Paint.NET to create tab bar icons. I haven't tried it myself, so can't vouch for it in any way:
http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Plugins/iPhone-TabbarIcon-Maker-Alpha-from-RGB-Intensity.shtml
Related
I'm experiencing issue when trying to set png image for tab bar item icon for my iOS application. If I'm creating png image (with transparent background) and setting it, everything works as expected, but when I'm using another png file (created by another person, or downloaded from web) it not works. Actually in my case I'm making png file from .pdf file and it's absolutely not clear for me why this not works. For more information please see screen captures below (top image represents not working one).
Thanks in advance.
Those specific icons/buttons work funky in terms of PNG and transparency for those images. You have to have look at the png's you download in image preview, make sure transparency exists for the white space. If there is whitespace it'll come through and show in your iOS app. Any other nonwhitepsace transparency will show up dark. It threw me off the first time I encountered this, A lot of graphics and PNG's you download from the internet doesn't have transparency built in or they have it very subtle. THose will show up as a blob for your ViewController Tabs.
Here is a good resource and guideline I found: http://steveweller.com/articles/toolbar-icons/
I have a 57x57 png icon image which I use as my app's main icon. How do I programatically use the iOS's rendering system to produce a glossy effect in the same way the icon is rendered in the home screen? I would preferbably like to use a Uimage passing it with the raw image.
There doesn't seem to be a class called UIPrerenderedIcon to accomplish this, although there is a property in that settings?
It's kind of a weird hack, but why not just go to your home screen on the simulator, take a screen shot, and cut it out from there via PhotoShop, InkScape, or something similar? It might be the quickest way to accomplish this.
I thought I had my ios app icon all settled. I designed in Photoshop and tested in the prescribed sizes and it looks great (resizing in photoshop and saving to .png). I also tested via the "add to home screen" to see how it would look and looks nice and crisp (via a cool little webpage that lets you upload icon and bookmark on your device).
However, when I upload it as the large 1024 x 1024 icon (png) you do via iTunes Connect my shapes look all jagged. At least in the preview you get when initially getting ready to submit a new application.
Wondering what causes this and what I need to take into account as it pertains to how Apple resizes icons for delivery. Any help in pointing me in the right direction would be great.
What resolution did you design it in? If you designed it in Photoshop, it is a raster image and I would suggest you design in illustrator as a vector, but at the very minimum make sure your designed resolution is higher than the proportions required for the icon by Itunes.
I'm using the Default.png method to create a splashscreen. I'm using the same file for my background and the Default.png (except default.png has the 20 pixel status bar at the top).
However, the iphone isn't displaying them in them the same. The Default.png is being displayed darker than the background, so it's painfully obvious when the app is loaded.
As a visual example of what I mean, please see below:
The image on left is the Default.png whereas the image on the right is when the app has loaded. The difference looks subtle here but when the whole image changes, it looks quite drastic.
Is this an issue with the colour-formatting of the pngs? Or is this an iOS feature whereby the Default.png appears slightly darker anyway?
It's probably not worth mentioning but I'm using Monotouch to develop my app, I doubt that would have anything to do with this.
I had a problem like this after editing a screenshot with OSX's Preview to cut out the status bar (as needed for iPad splashes). Preview sticked a color profile, and splash screen appears darker than the real thing in device.
If you open the image with GIMP, it shows a dialog offering to convert the color profile to SRGB. Take it (press "Convert") and save the image. This fixes the color difference.
Solved the problem. The designer sent me new versions of the backgrounds and the Default.png is now displaying the correct colour.
I have a feeling I had saved the previous version with a different colour profile to the background, hence why it was being displayed differently.
I'm developing an iPhone app. A simple image is the background of the main view.
I've set an UIImageView in the background and set an image in, using IB.
the image is a 160dpi PNG image. It appears like CRAP in IB. When running in the simulator it is ok, crisp.
How am I supposed to work and place my controls precisely on a such poor resolution image ?
Is this a bug ?
Thanks for you help!
IB is not a tool for designing a UI, it is a tool for implementing one. It is designed to perform well rather than display well (this is more important in complex desktop UI design than mobile but the tool is the same for both). The best advice is perhaps to take a cue from the publishing world (where this is a common practice for applications that display large amounts of high resolution graphics such as Adobe InDesign) and keep track of exact measurements for controls - the x,y coordinate positions and height/width. Then you can use the inspector to precisely position controls.
Actually, the DPI is not irrelevant at all.
Change the DPI to 72 and the image will display in IB/Xcode fine.
I don't see anything like this when I work with images in IB. Maybe there's something special about your PNG file? You say that it's 160 dpi, which is fairly irrelevant. More important are what its pixel diomensions are, and how they compare to the screen size.
Maybe the UIImageView is having trouble rendering your PNG, and is for some reason using the preview icon instead? Try a different image, or try resizing your image to 480x320, with 32-bit color.
I am wondering about this as well. I don't think the DPI of the image is what is doing this, because I have a project where everything looks fine in IB on one machine, then on my laptop, it displays the way the OP is describing.
The image dimensions are the same as the iPhone screen and the view dimensions (320x480), but the image displays all tiny instead of filling up the whole dimeal nsions of the UIImageView. If I scale to fill, then the image gets all blurry, at 320x480, even though I can confirm that those are the actual dimensions of the image... It's acting as if the image itself is 320x480 of empty space with a small version of my image centered inside it... this is very strange. As I said- this is the same project that looks completely fine in IB on another machine (and when they build, they both look normal in the simulator). This also happens on my friends's macbook.
Is there some setting in IB that might be the difference?
EDIT:
Guess I spoke too soon- I went back to my other machine and noticed the same problem this time, and it indeed was the dpi. This must have been a change in one of the recent updates to xcode/IB, because I originally never saw this issue, and the image files are exactly the same... strange.