Motivation
there are a number of free icon generating web sites available which begs the question whether a script like this provides any value… but leveraging a robust image manipulation utility like imageMagick to apply unique aesthetics makes a DIY approach like this more compelling… along those lines, in the current script, i’m applying:
- custom “centering” – for the splash images where the icon sits inside of a larger background, i’ve found positioning the icon 2/7ths of the way down from top to be the most pleasing
- outer glow
Result
!generate.cmd
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
@echo off ::keeps all variable definitions local to batch file so no need to cleanup after setlocal ::*** make sure to start with 1024x1024 original *** set inFile=!original.png if not [%1] EQU [] set inFile=%1 rename "%inFile%" "%inFile%.save" erase Default*.png Icon.ico Icon*.png Icon.ico Splash*.png Itunes*.png rename "%inFile%.save" "%inFile%" :: this was a handy page that did most BUT NOT ALL of what i saw in the "Resources" folder generated from the Xamarin project template... :: http://icon.angrymarmot.org/index.html#c9a51e815eac3df5c54f :: so i decided to have a crack at generating the remaining "Default" aka splash screen images since they represented an interesting challenge of: :: 1) resizing onto a larger background :: 2) applying "outer glow" to mitigate the blue-on-blue... :: albeit, i could've chosen a more simpatico background color, but i favor sticking with defaults until something really kicks me in a different direction ::***install fantastically handy ImageMagick tool from => http://www.imagemagick.org/script/binary-releases.php ::main options docs: http://www.imagemagick.org/script/command-line-options.php#compose ::clarify options used: ::-channel portion yields more desireable hard edge on shadow, see: http://www.imagemagick.org/Usage/blur/#shadow_outline ::+swap is necessary because we need the input image to initially come first in order to render it's corresponding shadow but then we want the shadow behind... and the + sign is handy shortcut to swap the last 2 layers in pipeline w/o having to explicitly specify ::-gravity North centers horizontally and at top vertically and then the -extent sets the outer "canvas" size with the negative offset bringing the icon down from the top ::the double %% on -level is required to escape the normal processing of "%" as a batch variable @echo on goto pause magick "%inFile%" -define icon:auto-resize="256,128,96,64,48,32,16" ( +clone -shadow 100x80-0-0 -channel A -level 0,50%% +channel ) +swap -background none -layers merge -gravity center "Icon.ico" :Icons call :IconSub 29 Icon-Small call :IconSub 40 Icon-Small-40 call :IconSub 50 Icon-Small-50 call :IconSub 57 Icon call :IconSub 58 Icon-Small@2x call :IconSub 60 Icon-60 ::including this one only because it's referenced in LaunchScreen.storyboard, even though i'm not using LaunchScreen because i want the app to Splash with the big background style image call :IconSub 72 Icon-72 call :IconSub 76 Icon-76 call :IconSub 80 Icon-Small-40@2x call :IconSub 100 Icon-Small-50@2x call :IconSub 114 Icon@2x call :IconSub 120 Icon-60@2x call :IconSub 144 Icon-72@2x call :IconSub 152 Icon-76@2x call :IconSub 512 iTunesArtwork call :IconSub 1024 iTunesArtwork@2x :Splashes call :SplashSub 320 480 Default call :SplashSub 640 960 Default@2x call :SplashSub 640 1136 Default call :SplashSub 768 1004 Default-Portrait call :SplashSub 1536 2008 Default-Portrait@2x call :SplashSub 1024 748 Default-Landscape call :SplashSub 2048 1496 Default-Landscape @echo off echo ____ _ _ echo / ___^| _ _ ___ ___ ___ ___ ___ ^| ^| ^| ^| echo \___ \ ^| ^| ^| ^| / __^| / __^| / _ \ / __^| / __^| ^| ^| ^| ^| echo ___) ^| ^| ^|_^| ^| ^| (__ ^| (__ ^| __/ \__ \ \__ \ ^|_^| ^|_^| echo ^|____/ \__,_^| \___^| \___^| \___^| ^|___/ ^|___/ (_) (_) @ping localhost -n 10 >nul: exit :IconSub @echo off :: %1 = desired size :: %2 = file name SETLOCAL set /a shadowSize=%1*8/100 if %shadowSize% EQU 0 set shadowSize=1 magick "%inFile%" -resize %1 ( +clone -shadow 100x%shadowSize%-0-0 -channel A -level 0,50%% +channel ) +swap -background none -layers merge -gravity center -resize %1 %2.png @echo on @goto :EOF :SplashSub @echo off :: %1 = width :: %2 = height :: %3 = file name SETLOCAL set smallestDimension=%2 if %1 LSS %2 set smallestDimension=%1 ::the shadow creates a natural "padding" effect, so start out with icon same as smallest dimension set /a iconSize=%smallestDimension% set /a shadowSize=%smallestDimension%*8/100 ::center the icon 1/3 of the whitespace available down from top set /a verticalOffset=(%2-%iconSize%)*2/7 ::default Xamarin project blue background #3498DB :: handy script to generate following commands if you already have a folder with the desired resulting images: :: >magick identify -format "magick \"\%inFile\%\" -resize %w %f\n" Icon*.png iTunes*.png magick "%inFile%" -resize %iconSize% ( +clone -shadow 100x%shadowSize%-0-0 -channel A -level 0,50%% +channel ) +swap -background "#3498DB" -layers merge -resize %iconSize% -gravity North -extent %1x%2+0-%verticalOffset% %3.png @echo on @goto :EOF |
Looks pretty cool =)
