通过sips命令一键批量生成APP启动页面的所有尺寸

通过sips命令一键批量生成APP启动画面的所有尺寸,包含IOS和Android。

关于命令代表的相关知识可以通过sips -h 命令查询,具体可以看这篇文章
sips命令进行图片批量处理






批量生成APP 启动页面

操作步骤

  1. 创建一个文件夹,把启动图保存为screen.png,放在文件夹中;

  2. 然后创建一个text文件,将下列代码复制进去保存,将后缀改为.sh;

  3. 鼠标放在底部红框位置,也就是文件夹的名称,右键——在终端打开。
    当然你也可以直接打开终端,通过cd [field path] 路径直接运行命令;



  4. 打开终端后,输入命令sh screen.png 回车,等待完成即可。



注意事项

  1. 图片命名要尺寸一致,如果需要更多的尺寸,在下方复制一份,修改下尺寸就行,sips -z [height] [width] ,第一个数字表示高度,第二个是宽度。


  2. 运行命令sh [file Name] ,sh+文件的名字回车就可以

  3. --out 表示输出到相应的位置,不加的话相当于在原图的基础上直接修改,那么始终是一张图,并不是我们想要的。

  4. --out 路径后面跟的图片命名就是最终输出后的名字,路径可以让图片按照分类进行区分开IOS和Android。

  5. rm -r -f 是Linux命令,更多可以看这里Linux命令中单词代表的含义 - 简书 (jianshu.com)

    rm --remove命令用于删除一个文件或者目录
    -r --root 将目录及以下之档案亦逐一删除
    -f --force 忽略不存在的文件,直接删除,无需确认,不会提示

sh代码部分

直接粘贴进去,尺寸按照自己想要的修改就行。

#!/bin/sh

androidScreenWithSize(){
sips -z 800 480 screen.png --out ./android/screen-hdpi-portrait.png
sips -z 640 360 screen.png --out ./android/screen-mdpi-portrait.png
sips -z 1280 720 screen.png --out ./android/screen-xhdpi-portrait.png
sips -z 1920 1080 screen.png --out ./android/screen-xxhdpi-portrait.png
sips -z 3840 2160 screen.png --out ./android/screen-xxxhdpi-portrait.png
}

iPhoneScreenWithSize(){
sips -z 960 640 screen.png --out ./ios/iphonePortraitiOS_640x960px.png
sips -z 1136 640 screen.png --out ./ios/iphonePortraitiOS_640x1136px.png
sips -z 1334 750 screen.png --out ./ios/iphonePortraitiOS_750x1334px.png
sips -z 1792 828 screen.png --out ./ios/iphoneXRPortraitiOS_828x1792px.png
sips -z 2208 1242 screen.png --out ./ios/iphonePortraitiOS_1242x2208px.png
sips -z 2436 1125 screen.png --out ./ios/iphoneXPortraitiOS_1125x2436px.png
sips -z 2688 1242 screen.png --out ./ios/iphoneXSMaxPortraitiOS_1242x2688px.png
}

rm -r -f android
rm -r -f ios
mkdir android
mkdir ios

androidScreenWithSize
iPhoneScreenWithSize






批量生成手机桌面图标的所有尺寸

代码系统文件夹名:是跟开发人员问的,图标一般都放在这些文件夹下,好处是跟开发保持一致,他们只需替换就行,效率更高。

用来区分自定义的:表示我们自己又给它套了一层,按照用途起了个别名,方便我们区分是安卓还是苹果系统的图标。



Linux命令

rm remove命令用于删除一个文件或者目录
rm -r --root 将目录及以下之档案亦逐一删除
rm -f --force 忽略不存在的文件,直接删除,无需确认,不会提示
mkdir make directory 建立目录命令
mkdir -p --parent 确保目录名称存在,不存在的就建一个

比如:创建一个文件夹ios ,再创建一个子文件夹a ,在子文件夹a下再创建多个子文件夹bb和cc ,可以这样写:
初级:mkdir ios ios/a ios/a/bb ios/a/cc
中级:mkdir -p ios/a/bb ios/a/cc
进阶:mkdir -p ios/a/{bb,cc}

初级
进阶

方法一:代码部分

通过全部列举的方式生成,代码较多

#!/bin/sh

androidIcon(){
sips -z 48 48 icon-origin.png --out ./android/res/mipmap-mdpi/ic_launcher.png
sips -z 72 72 icon-origin.png --out ./android/res/mipmap-hdpi/ic_launcher.png
sips -z 96 96 icon-origin.png --out ./android/res/mipmap-xhdpi/ic_launcher.png
sips -z 144 144 icon-origin.png --out ./android/res/mipmap-xxhdpi/ic_launcher.png
sips -z 192 192 icon-origin.png --out ./android/res/mipmap-xxxhdpi/ic_launcher.png
}

iosIcon(){
sips -z 1024 1024 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-1024X1024.png
sips -z 216 216 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-216X216.png
sips -z 192 192 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-192X192.png
sips -z 180 180 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-180X180.png
sips -z 167 167 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-167X167.png
sips -z 152 152 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-152X152.png
sips -z 144 144 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-144X144.png
sips -z 120 120 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-120X120.png
sips -z 96 96 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-96X96.png
sips -z 87 87 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-87X87.png
sips -z 80 80 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-80X80.png
sips -z 76 76 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-76X76.png
sips -z 72 72 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-72X72.png
sips -z 60 60 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-60X60.png
sips -z 58 58 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-58X58.png
sips -z 48 48 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-48X48.png
sips -z 40 40 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-40X40.png
sips -z 36 36 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-36X36.png
sips -z 29 29 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-29X29.png
sips -z 20 20 icon-origin.png --out ./ios/AppIcon.appiconset/Icon-App-20X20.png
}


rm -r -f android/res
rm -r -f ios/AppIcon.appiconset

mkdir -p android/res/{mipmap-mdpi,mipmap-hdpi,mipmap-xhdpi,mipmap-xxhdpi,mipmap-xxxhdpi}

mkdir -p ios/AppIcon.appiconset

androidIcon
iosIcon


方法二:代码部分

通过sips -Z 固定宽度,高度自适应的方式,利用数组简化代码行数。

#!/bin/sh

androidIcon(){
sips -z 48 48 icon-origin.png --out ./android/res/mipmap-mdpi/ic_launcher.png
sips -z 72 72 icon-origin.png --out ./android/res/mipmap-hdpi/ic_launcher.png
sips -z 96 96 icon-origin.png --out ./android/res/mipmap-xhdpi/ic_launcher.png
sips -z 144 144 icon-origin.png --out ./android/res/mipmap-xxhdpi/ic_launcher.png
sips -z 192 192 icon-origin.png --out ./android/res/mipmap-xxxhdpi/ic_launcher.png
}

iosIcon(){
sips -Z $1 icon-origin.png --out ./ios/AppIcon.appiconset/icon_app_$1.png
}


rm -r -f android/res
rm -r -f ios/AppIcon.appiconset

mkdir -p android/res/{mipmap-mdpi,mipmap-hdpi,mipmap-xhdpi,mipmap-xxhdpi,mipmap-xxxhdpi}
mkdir -p ios/AppIcon.appiconset

androidIcon
   
for iconIconSize in  20 29  40 58 60 76 80 87 120 152 167 180 1024
do
iosIcon $iconIconSize 
done


方法三:代码部分

通过sips -Z 固定宽度,高度自适应的方式,利用数组简化代码行数。
同时生成json配置文件,这样开发人员就可以直接拿来用,不用做修改了。
iPad的相应尺寸也添加进去了。

#!/bin/sh

androidIconWithSize(){
sips -z 48 48 icon-origin.png --out ./android/res/mipmap-mdpi/ic_launcher.png
sips -z 72 72 icon-origin.png --out ./android/res/mipmap-hdpi/ic_launcher.png
sips -z 96 96 icon-origin.png --out ./android/res/mipmap-xhdpi/ic_launcher.png
sips -z 144 144 icon-origin.png --out ./android/res/mipmap-xxhdpi/ic_launcher.png
sips -z 192 192 icon-origin.png --out ./android/res/mipmap-xxxhdpi/ic_launcher.png
}

iosIconWithSize() {
sips -Z $1 icon-origin.png --out ./ios/AppIcon.appiconset/icon_app_$1x$1.png
}

iPadIconWithSize() {
sips -Z $1 icon-origin.png --out ./ios/AppIcon.appiconset/icon_app_$1x$1.png
}

setContents(){
cat <<EOF >./ios/AppIcon.appiconset/Contents.json
{
  "images" : [
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "icon_app_40X40.png",
      "scale" : "2x"
    },
    {
      "size" : "20x20",
      "idiom" : "iphone",
      "filename" : "icon_app_60X60.png",
      "scale" : "3x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "icon_app_29x29.png",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "icon_app_58X58.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
      "filename" : "icon_app_87X87.png",
      "scale" : "3x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "icon_app_80X80.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "iphone",
      "filename" : "icon_app_120X120.png",
      "scale" : "3x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "icon_app_120X120.png",
      "scale" : "2x"
    },
    {
      "size" : "60x60",
      "idiom" : "iphone",
      "filename" : "icon_app_180X180.png",
      "scale" : "3x"
    },
    {
      "size" : "20x20",
      "idiom" : "ipad",
      "filename" : "icon_app_20x20.png",
      "scale" : "1x"
    },
    {
      "size" : "20x20",
      "idiom" : "ipad",
      "filename" : "icon_app_40X40.png",
      "scale" : "2x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "icon_app_29x29.png",
      "scale" : "1x"
    },
    {
      "size" : "29x29",
      "idiom" : "ipad",
      "filename" : "icon_app_58X58.png",
      "scale" : "2x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "icon_app_40x40.png",
      "scale" : "1x"
    },
    {
      "size" : "40x40",
      "idiom" : "ipad",
      "filename" : "icon_app_80X80.png",
      "scale" : "2x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "icon_app_76x76.png",
      "scale" : "1x"
    },
    {
      "size" : "76x76",
      "idiom" : "ipad",
      "filename" : "icon_app_152X152.png",
      "scale" : "2x"
    },
    {
      "size" : "83.5x83.5",
      "idiom" : "ipad",
      "filename" : "icon_app_167X167.png",
      "scale" : "2x"
    },
    {
      "size" : "1024x1024",
      "idiom" : "ios-marketing",
      "filename" : "icon_app_1024x1024.png",
      "scale" : "1x"
    }
  ],
   "info" : {
        "version" : 1,
        "author" : "lrachel"
    }
}
EOF
}

rm -r -f android/res
rm -r -f ios/AppIcon.appiconset

mkdir -p android/res/{mipmap-mdpi,mipmap-hdpi,mipmap-xhdpi,mipmap-xxhdpi,mipmap-xxxhdpi}
mkdir -p ios/AppIcon.appiconset

androidIconWithSize
setContents

for iosSize in 29 40 58 60 80 87 120 180 1024
do
iosIconWithSize $iosSize
done

for iPadSize in  20 40 29 58 40 80 76 152 167
do
iPadIconWithSize $iPadSize
done

参考文献

Linux awk 命令 | 菜鸟教程 (runoob.com)
sips命令进行图片批量处理 |简书

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容