通过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 <./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命令进行图片批量处理 |

你可能感兴趣的:(通过sips命令一键批量生成APP启动页面的所有尺寸)