Skip to content

Instantly share code, notes, and snippets.

@collimarco
Last active March 9, 2016 16:21
Show Gist options
  • Save collimarco/5870c6e8203b4146f81b to your computer and use it in GitHub Desktop.
Save collimarco/5870c6e8203b4146f81b to your computer and use it in GitHub Desktop.
Mobile Res Generator
<!-- If you use PhoneGap or PhoneGap build you may want to add the following lines to config.xml -->
<icon src="icon.png" />
<icon gap:platform="android" gap:qualifier="ldpi" src="res/icon/android/icon-36-ldpi.png" />
<icon gap:platform="android" gap:qualifier="mdpi" src="res/icon/android/icon-48-mdpi.png" />
<icon gap:platform="android" gap:qualifier="hdpi" src="res/icon/android/icon-72-hdpi.png" />
<icon gap:platform="android" gap:qualifier="xhdpi" src="res/icon/android/icon-96-xhdpi.png" />
<icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
<icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
<icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
<icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
<icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
<icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
<icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
<icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
<gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="res/screen/android/screen-ldpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="res/screen/android/screen-mdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="res/screen/android/screen-hdpi-portrait.png" />
<gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="res/screen/android/screen-xhdpi-portrait.png" />
<gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
<gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
<gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
<gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
<gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
<gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />
icon.png 128
res/icon/android/icon-36-ldpi.png 36
res/icon/android/icon-48-mdpi.png 48
res/icon/android/icon-72-hdpi.png 72
res/icon/android/icon-96-xhdpi.png 96
res/icon/blackberry/icon-80.png 80
res/icon/blackberry/icon-80.png 80
res/icon/ios/icon-57.png 57
res/icon/ios/icon-72.png 72
res/icon/ios/icon-57-2x.png 114
res/icon/ios/icon-72-2x.png 144
res/icon/webos/icon-64.png 64
res/icon/windows-phone/icon-48.png 48
res/icon/windows-phone/icon-173.png 173
These shell scripts automatically generate PNG icons and splash screens (launch images) at different sizes and resolutions given a default icon and splash screen in Inkscape SVG format.
PREREQUISITES
Make sure that you have Inkscape installed. Running the following command you should see the path to the executable:
> which inkscape
/usr/bin/inkscape
CONFIGURATION
You can specify the input icon and splash screen (and some other options) in the configuration at the top of each shell script.
You can choose the output formats by editing icon_formats and splash_formats. In these files the columns (output file name, output width, output height) are separated using tabs.
USE
Generate all the icons/splash screens described in icon_formats/splash_formats running mobile_icon_generator.sh or mobile_splash_generator.sh
#!/bin/sh
# The icon in input (in SVG format)
export src_icon_svg=icon.svg
cat icon_formats | while read icon; do
file_name=$(echo "$icon" | cut -f1)
width_and_height=$(echo "$icon" | cut -f2)
mkdir -p $(dirname $file_name)
inkscape $src_icon_svg --export-png=$file_name -w$width_and_height
done
#!/bin/sh
# The launch image in input (in SVG format)
export src_splash_svg=splash.svg
export src_splash_width=320
export src_splash_height=320
cat splash_formats | while read splash; do
file_name=$(echo "$splash" | cut -f1)
width=$(echo "$splash" | cut -f2)
height=$(echo "$splash" | cut -f3)
half_width=$(expr $width / 2)
half_height=$(expr $height / 2)
src_half_width=$(expr $src_splash_width / 2)
src_half_height=$(expr $src_splash_height / 2)
x0=$(expr $src_half_width - $half_width)
y0=$(expr $src_half_height - $half_height)
x1=$(expr $src_half_width + $half_width)
y1=$(expr $src_half_height + $half_height)
mkdir -p $(dirname $file_name)
inkscape $src_splash_svg --export-png=$file_name --export-area=$x0:$y0:$x1:$y1 -w$width -h$height
done
res/screen/android/screen-ldpi-portrait.png 200 320
res/screen/android/screen-mdpi-portrait.png 320 480
res/screen/android/screen-hdpi-portrait.png 480 800
res/screen/android/screen-xhdpi-portrait.png 720 1280
res/screen/blackberry/screen-225.png 225 225
res/screen/ios/screen-iphone-portrait.png 320 480
res/screen/ios/screen-iphone-portrait-2x.png 640 960
res/screen/ios/screen-iphone-portrait-568h-2x.png 640 1136
res/screen/ios/screen-ipad-portrait.png 768 1024
res/screen/ios/screen-ipad-landscape.png 1024 768
res/screen/windows-phone/screen-portrait.jpg 480 800
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment