美文网首页hybrid APP(ionic)Ionic3项目实战教程ionic2.0+实战
ionic3项目实战教程 - 第12讲 ionic3制作icon

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

作者: IonicBlog | 来源:发表于2017-08-29 22:36 被阅读1271次

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

  • 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 即可。

完!

相关文章

网友评论

  • 巴拉拉能量:没有iphonex的启动页是为什么呢
  • 背光者:Error: Unhandled "error" event. (The platform "splash" does not appear to be a valid cordova platform. It is missing API.js. splash not supported.) 报这个错。大佬,咋破?
  • Spon9e:多谢桶哥良心教材:heart_eyes:
    双击666!
    IonicBlog:@Spon9e 老铁 稳:+1:
  • dml1874:运行ionic cordova resources splash,提示Platform splash not detected. Would you like to install it? ,返回> cordova platform add splash --save
    Using cordova-fetch for splash@0.2.1
    Adding splash project...
    Unable to load PlatformApi from platform. Error: Cannot find module 'E:\git clon
    e\ionic\node_modules\splash'
    Error: Unhandled "error" event. (The platform "splash" does not appear to be a v
    alid cordova platform. It is missing API.js. splash not supported.)
    [ERROR] Exception:
    这是为什么?
    背光者:@dml1874 我解决了。命令有问题
    dml1874:@一隅文学 没有呢,splash图片有几张是错误的
    背光者:我也是这个错你解决了吗?
  • 谢炳南:我这边运行ionic cordova resources要登录账号,我在网页可以登录,可是在命令行那边就提示找不到账户
    IonicBlog:@谢炳南 这段时间好多网友都不能登陆,再等等,可能是官方服务器出bug了

本文标题:ionic3项目实战教程 - 第12讲 ionic3制作icon

本文链接:https://www.haomeiwen.com/subject/djntdxtx.html