Icon generator script

Solar2D General Questions/Discussion
#21

Interesting. 

I generate my artwork with Inkscape on Wndows, and use this script to export everything:

for %x in (29)  ; do inkscape.exe --export-png icon-small.png -w %x C:/ [full path to your art].svg ;

for %x in (40)  ; do inkscape.exe --export-png icon-small-40.png -w %x C:/ [full path to your art].svg ;

for %x in (50)  ; do inkscape.exe --export-png icon-small-50.png -w %x C:/ [full path to your art].svg ;

for %x in (57)  ; do inkscape.exe --export-png icon.png -w %x C:/ [full path to your art].svg ;

for %x in (58)  ; do inkscape.exe --export-png icon-small@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (60)  ; do inkscape.exe --export-png icon-60.png -w %x C:/ [full path to your art].svg ;

for %x in (72)  ; do inkscape.exe --export-png icon-72.png -w %x C:/ [full path to your art].svg ;

for %x in (76)  ; do inkscape.exe --export-png icon-76.png -w %x C:/ [full path to your art].svg ;

for %x in (80)  ; do inkscape.exe --export-png icon-small-40@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (87)  ; do inkscape.exe --export-png icon-small@3x.png -w %x C:/ [full path to your art].svg ;

for %x in (100) ; do inkscape.exe --export-png icon-small-50@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (114) ; do inkscape.exe --export-png icon@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (120) ; do inkscape.exe --export-png icon-60@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (120) ; do inkscape.exe --export-png icon-40@3x.png -w %x C:/ [full path to your art].svg ;

for %x in (144) ; do inkscape.exe --export-png icon-72@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (152) ; do inkscape.exe --export-png icon-76@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (167) ; do inkscape.exe --export-png icon-167.png -w %x C:/ [full path to your art].svg ;

for %x in (167) ; do inkscape.exe --export-png icon-83.5@2x.png -w %x C:/ [full path to your art].svg ;

for %x in (180) ; do inkscape.exe --export-png icon-60@3x.png -w %x C:/ [full path to your art].svg ;

for %x in (512) ; do inkscape.exe --export-png icon-512.png -w %x C:/ [full path to your art].svg ;

for %x in (1024) ; do inkscape.exe --export-png Itunes-Artwork.png -w %x C:/ [full path to your art].svg ;

for %x in (1024) ; do inkscape.exe --export-png icon-1024.png -w %x C:/ [full path to your art].svg ; 

for %x in (1024) ; do inkscape.exe --export-png Itunes-Artwork@2x.png -w %x C:/ [full path to your art].svg ; 

for %x in (192) ; do inkscape.exe --export-png icon-xxxhdpi.png -w %x C:/ [full path to your art].svg ;

for %x in (144) ; do inkscape.exe --export-png icon-xxhdpi.png -w %x C:/ [full path to your art].svg ;

for %x in (96) ; do inkscape.exe --export-png icon-xhdpi.png -w %x C:/ [full path to your art].svg ;

for %x in (72) ; do inkscape.exe --export-png icon-hdpi.png -w %x C:/ [full path to your art].svg ;

for %x in (48) ; do inkscape.exe --export-png icon-mdpi.png -w %x C:/ [full path to your art].svg ;

for %x in (36) ; do inkscape.exe --export-png icon-ldpi.png -w %x C:/ [full path to your art].svg ; done

You can run the whole block at once from the Windows CMD as admin, and make sure to be in the C:\Program Files\Inkscape folder (or wherever you have it).

It will generate all the new correctly sized and named icons for iOS and Android inside of the Inkscape install folder. Thats why you need to run CMD as admin.

Cheers. 

EDIT: of course its C:\ not “/”     

#22

That is really cool. Before this I have manually changed the icon.

#23

I don’t believe Apple wants you to round off the icons. They apply a mask themselves. Also note, we are dropping iOS 6 and 7 on Monday. Once that happens, the number of icons that needs to be generated drops significantly.

Here is the new list for people using daily builds after we drop 6 and 7.

Icon-Small-40.png -  40 × 40

Icon-Small@2x.png - 58 × 58

Icon-76.png - 76 × 76

Icon-Small-40@2x.png - 80 × 80

Icon-Small@3x.png - 87 × 87

Icon-60@2x.png - 120 × 120

Icon-76@2x.png - 152 × 152

Icon-167.png - 167 × 167

Icon-60@3x.png - 180 × 180

The names are actually irrelevant now, but we are sticking with the traditional naming scheme for now in our docs. 

Rob

#24

I use a script in Scheme to achieve similar results using Script-Fu in Gimp.  The script can be found in this GitHub repository.

#25

If you StackOverflow, I encourage you to post your answer to this question (and perhaps upvote the question and my answer while you’re at it).

#26

I bought the app icon tool from https://iconverticons.com

Drag n drop and dont have to worry about it.

5$ worth

Disclaimer! I am not affiliated in anyway, just sharing the easy solution (for me)

#27

I have a lua script that I run on my Mac to generate icons, launch screens, and even screenshots, as long as you have the inkscape .svg files.  Also need imagemagick.   This seems like the place to post it.   Obviously, you would have to change some of the parms up at the top.

local inkscape = "/Applications/Inkscape.app/Contents/Resources/bin/inkscape" local BASE\_DIR = "/Users/davemikesell/Devl/Corona/Eels" local MODEL\_DIR = BASE\_DIR .. "/models/" local OUT\_DIR = BASE\_DIR .. "/Eels/" local SS\_OUT\_DIR = BASE\_DIR .. "/screenshots" local IOS\_SS\_OUT\_DIR = BASE\_DIR .. "/screenshots/iOS/" local AND\_SS\_OUT\_DIR = BASE\_DIR .. "/screenshots/Android/" local TMP = OUT\_DIR .. "tmp.png" local icons = { -- iOS { suffix = "", w = 57, h = 57 }, { suffix = "@2x", w = 114, h = 114 }, { suffix = "-40", w = 40, h = 40 }, { suffix = "-40@2x", w = 80, h = 80 }, { suffix = "-60", w = 60, h = 60 }, { suffix = "-60@2x", w = 120, h = 120 }, { suffix = "-60@3x", w = 180, h = 180 }, { suffix = "-Small-40@3x", w = 120, h = 120 }, { suffix = "-Small@3x", w = 87, h = 87 }, { suffix = "-76", w = 76, h = 76 }, { suffix = "-76@2x", w = 152, h = 152 }, { suffix = "-Small", w = 29, h = 29 }, { suffix = "-Small@2x", w = 58, h = 58 }, { suffix = "-Small-40", w = 40, h = 40 }, { suffix = "-Small-40@2x", w = 80, h = 80 }, { suffix = "-Small-50", w = 50, h = 50 }, { suffix = "-Small-50@2x", w = 100, h = 100 }, { suffix = "-72", w = 72, h = 72 }, { suffix = "-72@2x", w = 114, h = 114 }, { suffix = "-167", w = 167, h = 167 }, -- Android { suffix = "-ldpi", w = 36, h = 36 }, { suffix = "-mdpi", w = 48, h = 48 }, { suffix = "-hdpi", w = 72, h = 72 }, { suffix = "-xhdpi", w = 96, h = 96 }, { suffix = "-xxhdpi", w = 144, h = 144 }, } -- Must have all sizes listed here (excluding non-supported orientation): -- -- https://docs.coronalabs.com/daily/guide/distribution/buildSettings/index.html#launchimage local LaunchScreenSizes = { { suffix = "", w = 320, h = 480 }, { suffix = "@2x", w = 640, h = 960 }, { suffix = "-568h@2x", w = 640, h = 1136 }, { suffix = "-667h@2x", w = 750, h = 1334 }, { suffix = "-736h@3x", w = 1242, h = 2208 }, --{ suffix = "-Landscape-568@2x", w = 1136, h = 640 }, --{ suffix = "-Landscape-667@2x", w = 1334, h = 750 }, --{ suffix = "-Landscape-736h@3x", w = 2208, h = 1242 }, { suffix = "-Portrait", w = 768, h = 1024 }, { suffix = "-Portrait@2x", w = 1536, h = 2048 }, { suffix = "-Portrait-1366@2x", w = 2048, h = 2732 }, --{ suffix = "-Landscape", w = 1024, h = 768 }, --{ suffix = "-Landscape@2x", w = 2048, h = 1536 }, --{ suffix = "-Landscape-1366@2x", w = 2732, h = 2048 }, } local function exportIcons() local nm = "Icon" local mod\_nm = MODEL\_DIR .. nm .. ".svg" for i=1, #icons do local parms = icons[i] local png\_nm = nm .. parms.suffix .. ".png" local cmd = inkscape .. " -f " .. mod\_nm .. " -w " .. tostring(parms.w) .. " -h " .. tostring(parms.h) .. " -e " .. TMP print(cmd) os.execute(cmd) cmd = "convert -alpha off tmp.png tmpnoalpha.png" print(cmd) os.execute(cmd) cmd = "mv tmpnoalpha.png " .. png\_nm print(cmd) os.execute(cmd) end -- Special renders local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. TMP .. " -w 512 -h 512" print(cmd) os.execute(cmd) cmd = "convert -alpha off tmp.png tmpnoalpha.png" print(cmd) os.execute(cmd) cmd = "mv tmpnoalpha.png GooglePlay512x512.png" print(cmd) os.execute(cmd) local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. TMP .. " -w 1024 -h 1024" print(cmd) os.execute(cmd) cmd = "convert -alpha off tmp.png tmpnoalpha.png" print(cmd) os.execute(cmd) cmd = "mv tmpnoalpha.png itunes1024x1024.png" print(cmd) os.execute(cmd) cmd = "rm tmp.png" print(cmd) os.execute(cmd) end local function exportLaunchScreens() local nm = "LaunchScreen" local mod\_nm = MODEL\_DIR .. nm .. ".svg" for i=1, #LaunchScreenSizes do local parms = LaunchScreenSizes[i] local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUT\_DIR .. "/Default" .. parms.suffix .. ".png -w " .. tostring(parms.w) .. " -h " .. tostring(parms.h) print(cmd) os.execute(cmd) end end local function exportIPadScreenshots() local nm = "ScreenshotiPad" local OUTDIR = IOS\_SS\_OUT\_DIR .. "iPad" local W = 2048 local H = 2732 for i=1, 5 do local mod\_nm = MODEL\_DIR .. nm .. i .. ".svg" local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUTDIR .. "/" .. nm .. i .. ".jpg -w " .. tostring(W) .. " -h " .. tostring(H) print(cmd) os.execute(cmd) end end -- NOTE: Same aspect ratio as iPhone screenshots - use same model, render different size local function exportAndTablet10Screenshots() local inm = "ScreenshotiPhone" local onm = "ScreenshotAndTablet10" local OUTDIR = AND\_SS\_OUT\_DIR .. "tablet10" local W = 720 local H = 1280 for i=1, 5 do local mod\_nm = MODEL\_DIR .. inm .. i .. ".svg" local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUTDIR .. "/" .. onm .. i .. ".jpg -w " .. tostring(W) .. " -h " .. tostring(H) print(cmd) os.execute(cmd) end end -- NOTE: Same aspect ratio as iPhone screenshots - use same model, render different size local function exportAndPhoneScreenshots() local inm = "ScreenshotiPhone" local onm = "ScreenshotAndPhone" local OUTDIR = AND\_SS\_OUT\_DIR .. "phone" local W = 540 local H = 960 for i=1, 5 do local mod\_nm = MODEL\_DIR .. inm .. i .. ".svg" local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUTDIR .. "/" .. onm .. i .. ".jpg -w " .. tostring(W) .. " -h " .. tostring(H) print(cmd) os.execute(cmd) end end local function exportAndTablet7Screenshots() local nm = "ScreenshotAndTablet7" local OUTDIR = AND\_SS\_OUT\_DIR .. "tablet7" local W = 600 local H = 1024 for i=1, 5 do local mod\_nm = MODEL\_DIR .. nm .. i .. ".svg" local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUTDIR .. "/" .. nm .. i .. ".jpg -w " .. tostring(W) .. " -h " .. tostring(H) print(cmd) os.execute(cmd) end end local function exportIPhoneScreenshots() local nm = "ScreenshotiPhone" local OUTDIR = IOS\_SS\_OUT\_DIR .. "iPhone" local W = 1242 local H = 2208 for i=1, 5 do local mod\_nm = MODEL\_DIR .. nm .. i .. ".svg" local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUTDIR .. "/" .. nm .. i .. ".jpg -w " .. tostring(W) .. " -h " .. tostring(H) print(cmd) os.execute(cmd) end end local function exportGoogleFeaturedImage() local nm = "GoogleFeaturedImage" local mod\_nm = MODEL\_DIR .. nm .. ".svg" local cmd = inkscape .. " -f " .. mod\_nm .. " -e " .. OUT\_DIR .. "/" .. nm .. ".png -w 1024 -h 500" print(cmd) os.execute(cmd) end exportIcons() exportIPhoneScreenshots() exportAndPhoneScreenshots() exportAndTablet10Screenshots() exportAndTablet7Screenshots() exportIPadScreenshots() exportLaunchScreens() exportGoogleFeaturedImage()
#28

Nice script!  I do have a couple of suggestions for you.

  1. Icons. We’ve dropped support for iOS 6 and 7 in the current public build (happened a month or so a go in daily builds). This means that a) specifically named Icons are not needed any more and b) there are far-fewer icons that need to be created. Clearly there isn’t a problem continuing to name something Icon-small-40@2x.png, but we find Icon-80.png to be more logical. Our new, greatly recommended Icon scheme is here:  https://docs.coronalabs.com/guide/distribution/buildSettings/index.html#appicons

  2. Icons part two (bonus points). Producing a macOS .icns file and a Windows desktop .ico file would be useful too

  3. Launch images. While Apple is still hanging on to their need for an 640x1136 portrait Default-568h@2x.png file to get into “Tall” mode and the two iPhone 6/6s/7 and IPhone 6/6s/7 plus sized Default-xxxh@nx.png files to get out of iPhone compatibility mode, I’m not 100% sure the names matter since you specify them in the UILaunchImages table in your plist table in build.settings. But people are being rejected for not including the Default-568h@2x.png file.  For people on older builds that support iOS 6 and 7, you have to use Static launch images (i.e. all of these variants of Default-something.png.) 

But since we’ve dropped support for iOS 6 an 7, there is no reason why our developers should not switch to Storyboard based launch images. It only needs 3 files a 1x, 2x and 3x version. Sizes don’t matter as long as they are large enough to look good on the device. You only need one line in build.settings instead of a massive table. We have  a tutorial that takes you through how to build a custom storyboard launch image, but if you download the Xcode project, open it in Xcode and just export the storyboard, then you just need three files: Launch.png, Launch@2x.png and Launch@3x.png. Make them something like 512x512, 1024x1024 and 1536x1636 and you’re all set. Of course Static launch images will still work for now. Apple is making it harder and harder to continue using them. And you don’t need Default-568h@2x.png with storyboards. Apple won’t reject you.

I would consider making your script offer a choice… Due to the complexity of getting the UILaunchImage table right, I don’t know if you want to consider producing the right build.settings table for it too.

Rob

#29

here’s what i use w photoshop, easily modified as specs change, just drag the script into the app (or via file-scripts menu) and feed it a 1024x1024 “master” icon, specify output folder, done.

/\* \* CoronaIconResizer.jsx \* Author: davebollinger (at) gmail (dot) com \* Purpose: takes a high-resolution source version of icon image \* and produces all currently known ios/android icon sizes \* as named for use with Corona \* Caveats: will overwrite any existing files in output folder \* does NOT produce: \* ouya icons 732x412, etc \* or Default\* launch images \* or any "tv" 16:9 icons \* or anything else "non-square" \* (because it has no idea how you intend to crop/letterbox/etc) \* Photoshop Version Required: \>=CS2 \* \*/ //$.level = 1; var doc; try { function optionalPreResizeProcessing() { // insert code here as desired } function optionalPostResizeProcessing() { // insert code here as desired } var hirezFilename = File.openDialog("Select high-resolution (\>=1024x1024) source image:", "\*.png", false); if (hirezFilename != null) { doc = open(hirezFilename, OpenDocumentType.PNG); if (doc == null) { throw "An error occurred while attempting to open the source image."; } doc.changeMode(ChangeMode.RGB); // in case it's an indexed image?! optionalPreResizeProcessing(); var docInitialHistoryState = doc.activeHistoryState; // for later undo of resize if (doc.width != doc.height) { throw "Please select a SQUARE image as the source."; } if ((doc.width \< 1024) || (doc.height \< 1024)) { throw "Please select a HIGH-RESOLUTION (\>=1024x1024) image as the source."; } var outputFolder = Folder.selectDialog("Select output folder:", doc.path); if (outputFolder == null) { throw "Processing cancelled."; } var options = new ExportOptionsSaveForWeb(); options.format = SaveDocumentType.PNG; // PNG-something options.PNG8 = false; // PNG-24 or PNG-32 options.transparency = true; // PNG-32 options.quality = 100; // in theory not necessary options.interlaced = 0; // not interlaced options.includeProfile = false; // no profile options.optimized = true; // yes optimized doc.info = null; // no metadata var specs = [/\* \* iOS, in resolution order: \*/ { "filename":"Icon-40.png", resolution:40 }, { "filename":"Icon-58.png", resolution:58 }, { "filename":"Icon-76.png", resolution:76 }, { "filename":"Icon-80.png", resolution:80 }, { "filename":"Icon-87.png", resolution:87 }, { "filename":"Icon-120.png", resolution:120 }, { "filename":"Icon-152.png", resolution:152 }, { "filename":"Icon-167.png", resolution:167 }, { "filename":"Icon-180.png", resolution:180 }, { "filename":"iTunesArtwork", resolution:512 }, { "filename":"iTunesArtwowrk@2x", resolution:1024 }, /\* \* Android, in resolution order: \*/ { "filename":"Icon-ldpi.png", resolution:36 }, { "filename":"Icon-mdpi.png", resolution:48 }, { "filename":"Icon-hdpi.png", resolution:72 }, { "filename":"Icon-xhdpi.png", resolution:96 }, { "filename":"Icon-xxhdpi.png", resolution:144 }, { "filename":"Icon-xxxhdpi.png", resolution:192 }, { "filename":"play-store-icon.png", resolution:512 }, /\* \* Amazon, in resolution order: \*/ { "filename":"amazon-store-icon.png", resolution:114 },]; for (i=0; i\<specs.length; i++) { // retrieve it var spec = specs[i]; // process it var rez = UnitValue(spec.resolution, "px"); doc.resizeImage(rez, rez, null, ResampleMethod.BICUBICSHARPER); optionalPostResizeProcessing(); // save it var outputFile = new File(outputFolder + "/" + spec.filename); if (outputFile.exists) { outputFile.remove(); } doc.exportDocument(outputFile, ExportType.SAVEFORWEB, options); // undo it doc.activeHistoryState = docInitialHistoryState; } alert("Processing completed."); } } catch (exception) { if ((exception != null) && (exception != "")) alert(exception); } finally { if (doc != null) doc.close(SaveOptions.DONOTSAVECHANGES); }
#30

Good idea on the build.settings table, Rob.   I used the Storyboard for a project a year or two ago, and got hung up porting it to a new project with new launch images, so just went back to the image list since I only had to add a couple new ones and re-run the script.   Perhaps I’ll take a look at it again…

#31

See: https://docs.coronalabs.com/guide/distribution/buildSettings/index.html#splashlaunch-screen

and: https://docs.coronalabs.com/guide/distribution/launchFile/index.html

But as I alluded to above, The default project that you download is setup to already look for files name “Launch.png”, “Launch@2x.png” and “Launch@3x.png”, so you really don’t need to do anything in Xcode other than load the project and skip to the export step unless you want to make some changes.

Rob 

#32

Yeah, that looks different than the way the process used to be.   Wasn’t there a command line component before, and copying a .xib or .nib file to the project folder?   

Anyway, I will definitely try that for my next release.   

#33

Yes, there used to be a command, but we found a way to export it from Xcode so command line access isn’t needed any more.

Rob

#34

Hi Rob, is there a way to make this work for landscape-only apps?

#35

The way I do Storyboard is use square image so it works both Landscape and Portrait. Basically it scales to fit the orientation.

Rob

#36

Which build was the storyboard enabled in?  I am using 2992 and all I get are square images (with black borders on the sides).

#37

Storyboard isn’t “enabled” in a particular version. Apple doesn’t support Storyboard based launch images until iOS 8. So even with 2992, if you’re device is running iOS 8 or later and you have it setup correctly it should work.  We dropped support for iOS 6 and 7 in a later daily build.

Rob

#38

I prefer to use Angry Marmot’s online icon generator made by Hayk Hayotsyan.

The autor is pretty open to any suggestions and pretty rapid with the updates.

Thanks Hayk, great job.

#39

Can’t be faster than me updating my own script :-).   Plus, you have to upload, and then download.   A local script puts everything where it belongs.