CssGaga - Icon 1 to N

视频演示

优酷
备用地址：百度网盘 Youtube 腾讯视频

功能介绍

该功能分为三个部分：

适用于换肤的纯色 Icon 1toN，一张图片批量生成 N 套皮肤不同颜色的 Icon （比如 Qzone V8 中的 Icon 跟肤）
适用于移动客户端 Native App 的 Icon 1toN，一张图片批量生成 iOS、Android 需要的各种尺寸的图片
以上二者的叠加，纯色 Icon 先生成 N 套不同颜色的，之后再生成对应的移动端各种尺寸

最终生成的图片都会经过 CssGaga 的压缩

纯色 Icon 1toN

类似于之前的皮肤1toN 功能，不同之处是一个针对 css，一个针对 icon，另外配色表的格式有所变化。

原理

图片上的一个像素点颜色由R（红）G（绿） B（蓝）A（透明度）四部分组成，CssGaga 将其中的 R、G、B 值替换新的 R、G、B 值，只保留透明度 A，并按照文件名规则保存为新的图片

所以，源图片可以为任意颜色的 png 图片，CssGaga 会保留原形状替换为纯色的 icon

1. 建立配色表，命名为 icon.csv

以下是 Qzone V8 配色表的一部分

备注	文件名格式	色值(rgb格式)
简约蓝	35-%filename%-nav	rgb(87,160,217)
简约蓝	35-%filename%-nav-hover	rgb(97,179,242)
简约蓝	35-%filename%	rgb(245,245,245)
简约蓝	35-%filename%-hover	rgb(166,166,166)
湖底蓝	1-%filename%-nav	rgb(187,160,217)
湖底蓝	1-%filename%-nav-hover	rgb(197,179,242)
湖底蓝	1-%filename%	rgb(245,45,245)
湖底蓝	1-%filename%-hover	rgb(166,166,106)
空间黄	2-%filename%-nav	rgb(187,160,217)
空间黄	2-%filename%-nav-hover	rgb(197,129,242)
空间黄	2-%filename%	rgb(145,45,245)
空间黄	2-%filename%-hover	rgb(86,166,106)
可可棕	3-%filename%-nav	rgb(166,166,106)
可可棕	3-%filename%-nav-hover	rgb(187,160,17)
可可棕	3-%filename%	rgb(197,129,142)
可可棕	3-%filename%-hover	rgb(145,45,125)
酒吧紫	5-%filename%-nav	rgb(86,166,10)
酒吧紫	5-%filename%-nav-hover	rgb(87,160,217)
酒吧紫	5-%filename%	rgb(97,179,242)
酒吧紫	5-%filename%-hover	rgb(245,245,245)

##### 具体格式要求：

打开 Excel，建立一个新的文件，第一行为表头，可采用上表的形式（可随意修改，不影响 CssGaga 运行），以下每行为一条替换规则，理论上可填写无数条
第一列为备注，可留空，但必须有第一列（可随意修改，不影响 CssGaga 运行）
第二列为文件名格式，即批量生成后的 icon 命名格式，其中 %filename% 为源图片文件名（不含后缀）变量
第三列为替换后的 icon 的色值，目前只支持 rgb 格式，比如 rgb(87,160,217)

2. 将 icon.csv 放置在源 icon 相同的目录中

3. CssGaga 界面上选中皮肤1toN，将源图片（可多选）拖进来即可开始运行，图片输出在当前目录下的 Flat 目录

源文件文件结构

D:\icon\source.png
D:\icon\icon.csv

1toN 后的文件结构

D:\icon\Flat\35-source-nav.png
D:\icon\Flat\35-source-nav-hover.png
D:\icon\Flat\35-source.png
D:\icon\Flat\35-source-hover.png
D:\icon\Flat\1-source-nav.png
D:\icon\Flat\1-source-nav-hover.png
D:\icon\Flat\1-source.png
D:\icon\Flat\1-source-hover.png
...

移动端图片 1toN

一张 @2x（200% 宽高）图片（png/jpg 格式）生成 5 张图片：iOS 2 张（100%、200%），Android 3 张（100%、150%、200%）

格式要求：

源图片为 200% 宽高的图片，并以 @2x 结尾
目前该功能为测试功能，需关闭 CssGaga 后修改配置文件 CssGaga.exe.config 来开启（在 <appSettings> 节点中添加一条 <add key="chkMobileImage" value="1" />）