When adding a PDF resource to an asset catalogue, selecting "vectors", and configuring the slicing, this slicing does not behave as expected. The image gets stretched in Interface Builder and on the device weird results can be seen. However I don't seem to find any confirmation about the fact that slicing doesn't work on vectorial assets.
Can anyone shed a light on this?
Xcode 6, iOS8.
Thanks!
I have been trying to get this to work today. Seems that Xcode will slice a 2x PDF image as if it were a 1x. That means if you set an inset of 15points, Xcode will set the inset at 15 pixels, not 15 points, so it ends up being half of what you wanted. Can't seem to find any way around this. Have to do it in code instead of Interface Builder. Thanks, Xcode.
I think the conclusion (at this point in time) is:
It's broken
Related
I am having an issue where the images are rendered with a strange glowing effect around them, pictured here:
It is tough to see from this close but is extremely noticeable when viewing the app. Also, taking these screenshots into a design program and using the color dropper will prove that there is a glow around these images. Each of these images are PDF files, rendered as a template image so that I can change the tintColor instead of adding more images to my assets folder for each color.
I have read some other articles and questions that says there isn't full support for vector graphics yet (here). However, that is outdated as it specifies iOS 7 as the latest version at the time of writing. Now in iOS 13, I assume there have been changes. Another article I read said to never use vector graphics as they can get messed up when Xcode generates PNGs from the PDFs (here).
Information about the assets in my Images.xcassets:
Render as: Template Image
Resizing: Preserve Vector Data
Scales: Single Scale
I also tried to implement 3 PNGs at different sizes (#1x, #2x, #3x) for each image but got the same effect.
Creating new images with a smaller border size got rid of the glow but obviously, that doesn't fit the design style style that I want in an app. I designed these Icons in Sketch and used a border size of 3, then exported as PDF.
So, as I was writing this question I seemed to have found an answer.
It turns out it had nothing to do with anything in Xcode. The problem lies with Sketch. I redesigned each element in Adobe Illustrator, exported them as PDFs, set the same settings in the assets folder like so:
Render as: Template Image
Resizing: Preserve Vector Data
Scales: Single Scale
Here are the updated screenshots:
I am using:
Sketch (Version 52.5)
Adobe Illustrator (Version 24.2.1)
I don't know why this is an issue, but I hope it can help someone who has this issue down the road. If anyone has any more information on this, please write a comment :).
I'm making an app using Swift in Xcode. I have a few buttons and images on one of my View Controllers. I am using high resolution images, but I noticed that they pixelate to the point where it is visible to the naked eye. There are some questions that I have found pertaining to the resizing of images, but none regarding immediate pixelization. I was hoping someone could help. Below are two images. The first is an image (a screenshot) from my app and the second is an image (also a screenshot) from another app that is not mine. The icon on the other app is smaller, but despite this is less pixelated.
have you tried using svg instead of jpg (lossy) or png(lossless)? It would seem that this would be the way to go, since you can expand to perfect definition on all resizing screens. svg uses code instead of an image format that can be lossy and given the examples you have posted would solve your issue.
you can use paint code for more easy worked , with paint code you can export svg
I figured it out. I just had to increase the dpi
Im programming an app in xcode and something has recently come to my attention when designing app icons. Here is the current setup that I have in my project:
Right now I have a 87x87pixel image for the "29pt" option (far left of the image), I also have a 120x120 for the 40pt option(middle) and I have a 180x180 pixel png for the 60pt option(far right). This seems highly inefficient, not only this but I need to supply #2 resolution images too? Surely there is a better way of doing this?
There are a couple of approaches I've taken in the past. One way is to create your icons, etc. in GIMP, Photoshop, etc. If you need to resize them, there's a command line utility called ImageMagick which I find to be a lot easier for resizing images than setting sizes in an image editor. The command you would use for resizing is called mogrify.
Option two is to get your hands on an app called Asset Catalog Generator. You just dump your images in and it spits out the correct file sizes and naming conventions. It's probably the best $4.99 I've spent in a long time.
Update
It appears someone has written a script to create the icons, too. I haven't used it myself, so you might want to poke around and look for others.
Create your app icon (once) at a decent resolution say 1024x1024. Drop the file into MakeAppIcon (a free service) and out pops all your icons in a zip file properly sized, enhanced as necessary, and rendered. Just drop them into images.xcassets and you're done. This avoids having to tweak any icons that may be off by a pixel or two and avoids those annoying Xcode warning messages.This vendor also offer a service for bulk uploading your iTunes screenshots, but I haven't tried that yet. Luv it!
You can use the vector-based images from a PDF. Session 411 from WWDC “What’s New in Interface Builder” discussed—albeit very briefly—Xcode’s support for creating your PNG files at build time from a vectorised PDF.
There is good article on this, you can refer that as well. http://martiancraft.com/blog/2014/09/vector-images-xcode6/
(Note that this does NOT cover PDFs for icons, just for images)
I would suggest you try SquareIcon, which I believe makes creating Xcode app icon sets very easy. Just to let you know, this is my own app.
The app allows you to drop in a generic image file (like a JPG or PNG) and convert it to a .appiconset file which you can put into your project's asset catalog. This takes care of all the naming and resizing that you might have to do manually.
UPDATE 2: I might've misunderstood you. When I wrote this answer, I thought that by 'inefficiency' you meant memory consumption and the resulting app size. If you meant, that making an icon for all the sizes is a lot of work, and you're looking for a better way to do it, consider looking at Adrian B's answer instead.
First of all, no, there is no more efficient way of doing it (unfortunately). Xcode supports vector images, but they are only supported on OS X, AFAIK. On iOS it just generates all necessary images at compile time.
Second, the app icon is small. You won't save a lot of space by optimizing app icon size. If you need to decrease the app size, try finding something that really takes much space. The icon doesn't.
UPDATE: Luckily, Apple realizes, that forcing everybody to download resources that they don't need is no good. So they introduced App Thinning along with iOS 9. I haven't looked into it thoroughly yet, but the general idea is that you upload a binary containing all the resources as usual, but when your users download the app from the AppStore, they get a version containing only resources that they need.
I've recently been implementing a new project on Swift, targeting iOS 8+. The UI mixes storyboards and XIBs, using autolayout for everything.
I recently took a look at the application using the "color misaligned images" debug feature in the iOS simulator. All my images are fine but for some reason almost every label and textview I have is showing up as magenta, meaning they are supposedly misaligned. All of these views are aligned using autolayout, which is supposed to be very good at avoiding misalignment. Any thoughts on what is going on here?
EDIT:
Nevermind, turns out it was just another Stupid User Error. I forgot I had a scaling function for forcing downscaling on some fonts based on screensize. This was returning fractions which was causing the misalignment.
maybe this will help?
http://blog.xebia.com/2013/07/19/ios-pixel-misalignment-why-its-bad-how-to-fix-it/
"How To Fix Pixel Misalignment?
Once you have found your culprit. It’s a good idea to start looking through your code to determine how the actual frame of the misaligned screen item is calculated. Some debugging will help you here. I’d look in any layoutSubviews or loadView calls for any divisions being performed on view frames. Also using Font metrics in your calculations is a common cause for misaligned images.
Most likely you will have found your culprit pretty soon. How to fix this? There are two ways to go about this. Either use a floorf or ceilf on the exact value causing the misalignment. Or pass the CGRect for the views frame through a CGRectIntegral call.
When it concerns an image on a retina device, make sure the retina version of that image is actually exactly twice the dimensions of the non retina image. Faulty dimensions on retina image resources is a common cause as well for pixel misalignment. So get check those image resources if they show up magenta."
My problem is that my application's icon seems to be resized to fit the rounded-corner mask applied when displayed on the home screen.
EDIT: Here's the image:
My image follows the guidelines in these locations (mainly that it is 120x120, and doesn't have pre-rounded corners):
https://developer.apple.com/library/ios/qa/qa1686/_index.html
https://developer.apple.com/library/ios/documentation/iphone/conceptual/iphoneosprogrammingguide/App-RelatedResources/App-RelatedResources.html#//apple_ref/doc/uid/TP40007072-CH6-SW4
I've tried:
1) Using an image catalog
2) Searching for the issue on this site. I looked through the first 5 paginations sorted by newest and can't find anyone who's had the issue...
3) Making sure that the image is specified in the info.plist
4) Checking the troubleshooting app icon issues on the apple developer site.
The icon always ends up drawn with the black edges.
Is there a way to programmatically make sure the mask is applied correctly?
Has someone else encountered the same issue?
It sounds like you might have the wrong DPI set in the icon PNG—if it’s something other than 72 (the screen’s nominal DPI in points), the system may be trying to scale it to match.
It looks like the DPI was correct. The problem was that there was a transparent background layer, wider than the image that Android Studio seemed to have added when it was run through that deployment process. The layer went unnoticed in preview because it doesn't highlight the transparency. Noticed it when I opened it in GIMP.
So it was a silly oversight on my part.