通过sips命令一键批量生成APP启动画面的所有尺寸,包含IOS和Android。
关于命令代表的相关知识可以通过sips -h 命令查询,具体可以看这篇文章
sips命令进行图片批量处理
。
批量生成APP 启动页面
操作步骤
创建一个文件夹,把启动图保存为screen.png,放在文件夹中;
然后创建一个text文件,将下列代码复制进去保存,将后缀改为.sh;
-
鼠标放在底部红框位置,也就是文件夹的名称,右键——在终端打开。
当然你也可以直接打开终端,通过cd [field path]
路径直接运行命令;
打开终端后,输入命令sh screen.png 回车,等待完成即可。
注意事项
-
图片命名要尺寸一致,如果需要更多的尺寸,在下方复制一份,修改下尺寸就行,sips -z [height] [width] ,第一个数字表示高度,第二个是宽度。
运行命令
sh [file Name]
,sh+文件的名字回车就可以
--out 表示输出到相应的位置,不加的话相当于在原图的基础上直接修改,那么始终是一张图,并不是我们想要的。
--out 路径后面跟的图片命名就是最终输出后的名字,路径可以让图片按照分类进行区分开IOS和Android。
-
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