這一講主要包含以下幾個部分：

• 1.設(shè)計icon;
• 2.設(shè)計splash；
• 3.生成各個平臺各個尺寸的icon和splash；

1.設(shè)計icon

來，打開你的PS，新建-文件，像素為1024*1024，背景透明，確定；
...
新建圖層，背景色，你隨意就好 ；
...
再新建一個文字，沒錯，就是左邊豎著的工具欄，有一個類似T的小圖標(biāo)；
...
將剛才那個文字大小改為 180 ，將文字改為"精品"；
...
在復(fù)制一個，將文字改為"女裝"，擺好位置，沒錯就像下面這樣；
...

12-1.png

...
...
...
好了，我已經(jīng)控記不住我寄幾了;
...
優(yōu)秀的設(shè)計師啊，有木有?。。?！
...
...
...
好吧 我承認(rèn)...
...
...
...

12-2.jpg

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

2.設(shè)計splash：

...

3.生成圖標(biāo)資源

在生成資源之前，請先添加platform，這里以安卓示例，?執(zhí)行ionic cordova platform add android：

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

生成圖標(biāo)資源：

 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/目錄
...
執(zhí)行 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類似，將設(shè)計好的splash.psd放到ionic3-dress/resources/，刪除之前的png，然后執(zhí)行ionic cordova resources splash 即可。

完！