这一讲主要包含以下几个部分:
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
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦