ionic3项目实战教程 - 第12讲 ionic3制作icon和splash

这一讲主要包含以下几个部分：

• 1.设计icon;

• 2.设计splash；

• 3.生成各个平台各个尺寸的icon和splash；

1.设计icon

来，打开你的PS，新建-文件，像素为1024*1024，背景透明，确定；
...
新建图层，背景色，你随意就好 ；
...
再新建一个文字，没错，就是左边竖着的工具栏，有一个类似T的小图标；
...
将刚才那个文字大小改为 180 ，将文字改为"精品"；
...
在复制一个，将文字改为"女装"，摆好位置，没错就像下面这样；
...

12-1.png

...
...
...
好了，我已经控记不住我寄几了;
...
优秀的设计师啊，有木有！！！！
...
...
...
好吧 我承认...
...
...
...

12-2.jpg

......
......
......

2.设计splash：

...

3.生成图标资源

在生成资源之前，请先添加platform，这里以安卓示例，�执行ionic cordova platform add android：

> $ ionic cordova platform add android
 cordova platform add android --save - done!
 Copying default image resources into ./resources/android - done!

生成图标资源：

 Usage:

    $ ionic resources [<platform>] [options]  
  Inputs:

    platform ................. The platform for which you would like to generate 
                               resources (e.g. ios, android)  
  Options:

    --force, -f .............. Force regeneration of all resources
    --icon, -i ............... Generate icon resources
    --splash, -s ............. Generate splash screen resources  
  Examples:

    $ ionic cordova resources 
    $ ionic cordova resources ios
    $ ionic cordova resources android

啥？看不懂？
...
好的
...
请先删除 ionic3-dress/resources/icon.png  
...
然后将第一部分保存的icon.psd放到 ionic3-dress/resources/目录
...
执行 ionic cordova resources android --icon  
...
...
...

$ ionic cordova resources android --icon
 Collecting resource configuration and source images - done!
 Filtering out image resources that do not need regeneration - done!
 Uploading source images to prepare for transformations - done!
 Generating platform resources: 6 / 6 complete - done!
 Modifying config.xml to add new image resources - done!

12-3.png

splash类似，将设计好的splash.psd放到ionic3-dress/resources/，删除之前的png，然后执行ionic cordova resources splash 即可。

完！

作者：IonicBlog
链接：https://www.jianshu.com/p/4f0ec59bb627