讨好设计师小姐姐的神器EzPP

2020-08-11 本文已影响0人曹建峰

1. 生成应用图标 —— ezpp resize 命令的进阶用法

很多处理图片的任务，都是很低级的体力活，

比如，把一个应用图标，改成十几种不同的尺寸。

如果这个时候，你直接去找设计师小姐姐，往往得不到好脸色。

本来是个大设计师，你却拿人家当小美工来用。

不悦的设计师

这种时候，你也不用委屈自己，默默的一张张的去改。

用一个1024x1024的应用图标，生成安卓和iOS需要的所有大小的图标，只需要一行命令就够了。

在命令行输入:

$ezpp resize -i playground/logo.png -a

输出:

[1/24]--------- RESIZE ----------
resize: (1024, 1024)->(40, 40)
from:   /Volumes/user/cjf/w/ezpp/playground/logo.png
to:     /Volumes/user/cjf/w/ezpp/playground/logo.png.out/ios/AppIcon.appiconset/Icon-App-20x20@2x.png
[2/24]--------- RESIZE ----------
resize: (1024, 1024)->(60, 60)
from:   /Volumes/user/cjf/w/ezpp/playground/logo.png
to:     /Volumes/user/cjf/w/ezpp/playground/logo.png.out/ios/AppIcon.appiconset/Icon-App-20x20@3x.png

...

[24/24]--------- RESIZE ----------
resize: (1024, 1024)->(192, 192)
from:   /Volumes/user/cjf/w/ezpp/playground/logo.png
to:     /Volumes/user/cjf/w/ezpp/playground/logo.png.out/android/res/mipmap-xxxdpi/ic_launcher.png
[1/1]--------- COPY ----------
from:    /Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/ezpp-0.0.3-py3.6.egg/ezpp/resize_cfg/Contents.json
copy to: /Volumes/user/cjf/w/ezpp/playground/logo.png.out/ios/AppIcon.appiconset/Contents.json

结果:

logo.png.out/
├── android
│   └── res
│       ├── mipmap-hdpi
│       │   └── ic_launcher.png
│       ├── mipmap-mdpi
│       │   └── ic_launcher.png
│       ├── mipmap-xhdpi
│       │   └── ic_launcher.png
│       ├── mipmap-xxhdpi
│       │   └── ic_launcher.png
│       └── mipmap-xxxhdpi
│           └── ic_launcher.png
├── android_stores
│   ├── 1024.png
│   ├── 16.png
│   ├── 216.png
│   ├── 256.png
│   └── 512.png
└── ios
    └── AppIcon.appiconset
        ├── Contents.json
        ├── Icon-App-1024x1024@1x.png
        ├── Icon-App-20x20@1x.png
        ├── Icon-App-20x20@2x.png
        ├── Icon-App-20x20@3x.png
        ├── Icon-App-29x29@1x.png
        ├── Icon-App-29x29@2x.png
        ├── Icon-App-29x29@3x.png
        ├── Icon-App-40x40@1x.png
        ├── Icon-App-40x40@2x.png
        ├── Icon-App-40x40@3x.png
        ├── Icon-App-60x60@2x.png
        ├── Icon-App-60x60@3x.png
        ├── Icon-App-76x76@1x.png
        ├── Icon-App-76x76@2x.png
        └── Icon-App-83.5x83.5@2x.png

人至贱则无敌。这时候，你可以去找设计师小姐姐，告诉她你为她节约了多少时间。

对你点赞的设计师

2. 简单的图标不求人

如果你开始做一个临时项目，或者实验项目，

不希望看到默认图标，而又不想拜求跟大设计师。

你需要的仍然只是一行命令。

在命令行输入:

ezpp text2icon -t "EzPP" -o playground/ezpp_t.png

输出

text2icon:[title:EzPP,subtitle:None,color:#ffffff,bgcolor:#3399ff]

结果:

最简单的text2icon结果

如果你觉得这个图标有点单调的话，还可以加副标题或者阴影效果。

同样只需要一行命令。

在命令行输入:

ezpp text2icon -t "EzPP" -s"ovo.top" -o playground/ezpp_c.png -c "#543" -b "#f93"

输出

text2icon:[title:EzPP,subtitle:ovo.top,color:#543,bgcolor:#f93]

结果

指定颜色和副标题结果

没错，可以指定图标的前景色和背景色

3. 加阴影，装B神器

在命令行输入:

ezpp shadow -i docs/ezpp_t_128.png

输出

shadow file with alpha= 0.5:
docs/ezpp_t_128.png 
to docs/ezpp_t_128_shadow.png

结果

原图	加阴影后
原图	加阴影后

此外还有改图片颜色等方便的功能，具体如下。

4. EzPP功能一览

功能	前	后
毛玻璃特效	前	后
改颜色(包括改亮度和饱和度）	picture before recolor	picture after recolor
改大小	A icon before resize	A icon after resize
改格式	lego_mc_l.jpg(203k)	lego_mc_l.webp(109k)
创建纯文本图标	"EzPP"	纯文本图标
投影	A clean background icon	Shadow added on clean background