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!
Related
I am aware xcode has introduced an option to provide a vector image(.pdf) so that we don't have to give a image for each dimension such as 1x,2x,3x
This saves lots of time and its really a good feature
But how to go about making an vector image in .pdf format.
As far as I know any png image can be saved as .pdf image does it mean it has been vectorized ?
or else we have to do it in the harder way .. by installing adobe illustrator and making an vector image through that
or else it there any web app that does it for us
basically I want to do the right way so the when image is displayed in 3x devices also there is no image distortion
This is a supplement to the excellent answer by #Senseful.
How to make vector images in .pdf format
I will tell how to do this in Inkscape since it is free and open source but other programs should be similar.
In Inkscape:
Create a new project.
Go to File > Document Properties and set the custom page size to whatever your #1x size is (44x44, 100x100, etc) with the units in px.
Make your artwork.
Go to File > Save As... > Printable Document Format (*.pdf) > Save > OK. (Alternatively, you could go to Print > Print to File > Output format: PDF > Print but there are not as many options.)
Notes:
As is mentioned in the accepted answer, you cannot resize your image because Xcode still produces the rasterized images at build time. If you need to resize your image you should make a new .pdf file with a different size.
If you already have an .svg image that is the wrong page size, do the following:
Change the page size (Inkscape > File > Document Properties)
Select all objects (Ctrl+A) on the work space and resize them to fit in the new page size. (Hold down Ctrl to keep aspect size.)
To convert an .svg file into a .pdf you can also find online utilities to do the job for you. Here is one example from this answer. This has the benefit of allowing you to set the .pdf size easily.
Further reading
Using Vector Images in Xcode 6
Original answer
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.
Icons Are Pretty Right?
I'm working on an UI update in an iOS app, and trying to make things look a bit better with some new icons- but I seem to be incapable of determining how to save an image correctly so that it looks good in the interface!
As you can see from this image, if I include a white background with the image it looks great. If I take those same images and use an alpha background they look terrible! It appears that either the images aren't using the #2x correctly, or something else is going horribly wrong.
These images are either saved with GIMP as a png with alpha, or exported from inkscape, the originals are vector graphics. We get the same results from both avenues. I am using both a base imageName.png and imageName#2x.png for scaling.
Somehow, magically, I changed the a single image to greyscale in gimp, and changed the base size to 25px and it showed up with alpha correctly blended. Stock images from apple are also functioning correctly, so it absolutely seems to be something that I'm doing incorrectly when I'm saving the images.
The Setup in XCode
Basic Questions
Is there a certain bit depth, argb vs rgba format, or some other quirk that I need to know to get these images to show up correctly? Is there any way to verify that the program is loading the correct imageName#2x vs imageName? Is there some document that talks about integrated graphics (the iconography documentation isn't very helpful on technical details)
Actual Images
With Background:
Without Background:
I think you will find success if you just save the image at 4x the size you actually want and specify the size manually.
I have some images which are huge in size and my bundle size currently is 70 MB. I think Xcode already runs the assets through png crush.
Do not use any text images with useless effects, use UILabels instead.
Draw simple shapes and effects using CAShapeLayers instead of using
images.
Use JPEGs instead of PNGs where you don't need transparency.
(Actually file size depends on the image content here)
Use Save for Web option in PhotoShop or other tools to optimize PNG
images.
Use sprites combined together instead of separate images.
Make sure you delete all unused resources.
Do not localize common parts of the images, localize only the
different parts. (think of a background image with a small flag at
the bottom for each locale. use one single bg image and separate flag
images. localize flag images only, not the entire bg images with the
flags.)
Use the same splash images for iOS7 and previous iOS versions. (You
need to manually edit the JSON file in .xcassets)
Try using a CDN to download assets on the first launch.
In addition to images keep those in mind too:
Try replacing custom fonts with default system fonts if you don't
need them really.
Use MP3 audio files instead of WAV files. (or other
compressed formats)
Make sure you delete all unused 3rd party frameworks.
You can try converting the images to jpg (if they don't have any transparent regions).
Also try using http://imageoptim.com/
It seems very unlikely that you actually need huge images. After all, the screen is not huge. Thus, the most likely form of size reduction is to reduce the physical dimensions of the images to the size you are actually going to be displaying.
This saves bandwidth when the user downloads the image, reduces the size of the app on the user's hard disk (the device), and also saves memory at the time an image is loaded. It is a vast waste of RAM to load an image that is larger than the size at which it will be displayed; after all, remember, the memory involved rises exponentially with the square of the difference.
One option is to host the images on a CDN like OpenText and fetch them as part of app initialization, or whenever they are first needed. Obviously this is more coding, but projects like SDWebImage make it pretty easy:
https://github.com/rs/SDWebImage/tree/master/SDWebImage
It also gives you the flexibility to swap out those images later if you use caching headers.
Is there a quick/easier way to create the required graphic files for an iOS UI theme (at standard and 2x resolutions) from a PSD such as http://graphicriver.net/theme_previews/2989093-magnanimous-ios-ui-kit-for-mobile-interface?index=6. The only way I know of is to use Photoshop to painstakingly cut the image up, but it will probably take me the best part of a day to do so.
Take a look at Slicy for Mac OS.
In Photoshop you can use: from the menu: File/Automate/batch and record actions which you use lots of times. Like save As, to -> PNG and add name #2x to it, enz.
After the recording you are able to edit the Action via menu: Windows/Actions