I’ve been working away on my latest app, and was just creating a new piece of artwork for the splash screen. When I did this, I wanted to start with the iPad Pro 12″ and scale down within Photoshop to maximise the quality of each asset size.
For all of my other assets, I had started with the iPad for some stupid reason and got my math all confused.
So I went hunting for a guide, and found an old site from Ben Lew of Pi’ikea St. It was a little out of date, plus I really wanted to calculate the sizes using the iPad Pro as the starting point.
So I took Ben’s page and popped it into a spreadsheet. The result is available below for download. I’ve also taken a screenshot so that you can see it easily.
In Photoshop, something Ben taught me to do a few years back was to create a layer called “default”, and, in order to get Photoshop to export the various layers in my file as appropriately sized assets, add the sizes as percentages along with folder names.
For me, assuming my originals are for the iPad Pro 12″, this means I give my ‘default’ layer the name:
"default 15.63% iphone/@1x, 31.25% iphone/@2x, 46.88% iphone/@3x, 37.5% ipad/@1x, 75.00% ipad/@2x, 100.00% ipad/@pro"
Similarly, where the originals are for an iPad Retina, the default layer would be called:
"default 20.8% iphone/@1x, 41.7% iphone/@2x, 62.5% iphone/@3x, 50.0% ipad/@1x, 100.00% ipad/@2x, 133.33% ipad/@pro"
You can download the spreadsheet below.
artwork sizes – PDF
artwork sizes – Numbers
artwork sizes – Excel
>About a month ago, I put together the website for pkclsoft.com. Before I started however, I hunted around for a tool I could use on my Macbook that was free, and would do what I wanted.
There are tools around, and no matter which one you choose, they all have their pros and cons. In any case, I ended up choosing to stick with iWeb. It’s there, and it works.
That said, I set about writing and laying out the website, importing my old Google pages site I had for PortaBill, and getting it online.
Whilst it’s a fairly simple website, it does the trick for now, but there has been one very annoying quirk; the images are all saved within the site in a folder for the respective page.
I did a bit of hunting to see if I could find some way to tell iWeb not to do this. I couldn’t.
You see, iWeb pages, by their very nature are graphic rich, have lovely backgrounds, and look nice (with very little effort mind you).
The problem is that every image, including the background images in every page of your site, is saved on a per page basis. So, if you have 20 pages in your site, there will be 20 copies of every image included in the page templates you use from iWeb.
Back when I first hit this problem, I found a forum (here) post discussing the problem and a possible solution, but no-one seemed to have done anything about it.
Well, now that uAlertMe is up and selling I thought it was time to write the tool myself, and as a result, we now have iWebIO (iWebImageOptimizer). This relatively simple, free tool will allow you to tell it the name of a folder on your Mac that contains the root level index.html for your iWeb website.
That done, it checks all of the PNG, TIFF, JPEG and GIF files for duplicates (by using md5). All images that have duplicates are then listed, and you can then click on one to see what pages are using it.
Finally, clicking on “Optimize” will, after a cautionary prompt, traverse your site, moving one copy of each duplicated image to a new “images” folder in the root folder of the site. All other duplicates are deleted, and all .html files are updated to refer to the images/xxxx files.
It’s simple, and may have some issues with older versions of iWeb pages, or templates that I haven’t used.
It makes the following assumptions:
- There must be an index.html in the root folder.
- If an image is found in the folder “xxx_files”, then there will be an html file called “xxx.html” that will need to be updated.
- You have made a backup of your site. iWebIO overwrites and deletes files in the folder tree you specify. It does warn you, but only once.
If you have any queries, let me know at: support@pkclsoft.com, or comment here. If there’s enough demand, I might make the source available.
Have fun.
About a month ago, I put together the website for pkclsoft.com. Before I started however, I hunted around for a tool I could use on my Macbook that was free, and would do what I wanted.
There are tools around, and no matter which one you choose, they all have their pros and cons. In any case, I ended up choosing to stick with iWeb. It’s there, and it works.
That said, I set about writing and laying out the website, importing my old Google pages site I had for PortaBill, and getting it online.
Whilst it’s a fairly simple website, it does the trick for now, but there has been one very annoying quirk; the images are all saved within the site in a folder for the respective page.
I did a bit of hunting to see if I could find some way to tell iWeb not to do this. I couldn’t.
You see, iWeb pages, by their very nature are graphic rich, have lovely backgrounds, and look nice (with very little effort mind you).
The problem is that every image, including the background images in every page of your site, is saved on a per page basis. So, if you have 20 pages in your site, there will be 20 copies of every image included in the page templates you use from iWeb.
Back when I first hit this problem, I found a forum (here) post discussing the problem and a possible solution, but no-one seemed to have done anything about it.
Well, now that uAlertMe is up and selling I thought it was time to write the tool myself, and as a result, we now have iWebIO (iWebImageOptimizer). This relatively simple, free tool will allow you to tell it the name of a folder on your Mac that contains the root level index.html for your iWeb website.
That done, it checks all of the PNG, TIFF, JPEG and GIF files for duplicates (by using md5). All images that have duplicates are then listed, and you can then click on one to see what pages are using it.
Finally, clicking on “Optimize” will, after a cautionary prompt, traverse your site, moving one copy of each duplicated image to a new “images” folder in the root folder of the site. All other duplicates are deleted, and all .html files are updated to refer to the images/xxxx files.
It’s simple, and may have some issues with older versions of iWeb pages, or templates that I haven’t used.
It makes the following assumptions:
- There must be an index.html in the root folder.
- If an image is found in the folder “xxx_files”, then there will be an html file called “xxx.html” that will need to be updated.
- You have made a backup of your site. iWebIO overwrites and deletes files in the folder tree you specify. It does warn you, but only once.
If you have any queries, let me know at: support@pkclsoft.com, or comment here. If there’s enough demand, I might make the source available.
Have fun.
