UI学习 -1 图标设计

Posted zhaogaojian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了UI学习 -1 图标设计相关的知识,希望对你有一定的参考价值。

学习渠道来自网上各种视频,本篇学习来自网上xiaoyin讲解

1、打开pscc,新建移动移动设备iphone6页面 

2、新建渐变图层,画多个圆形状填充白色

技术图片

 

其中羽化设置

技术图片

 

 4、背景效果

技术图片

 

 5、阳光

添加新图层,填充黑色,滤镜,镜头光晕

技术图片

 

 图层滤色

技术图片

 

 再增加一个白色虚化图层

技术图片

 

 6、新建一个图标

技术图片

 

 7、图标颜色

技术图片

 

 8、设置渐变,投影

技术图片

 

 9、增加一个小椭圆

技术图片

 

 技术图片

 

 技术图片

 

 10、再画两个圆,大圆上亮下暗,小圆上暗下亮,设置投影白1,内阴影,黑5即可。

技术图片

 

 11、最终效果如上图,效果没有原视频好。

以上是关于UI学习 -1 图标设计的主要内容,如果未能解决你的问题,请参考以下文章

前端的UI设计与交互之图标篇

图标(icon)设计的方法都有哪些?

转:用品牌基因法做图标设计,高级UI设计师才会的手法!(升级篇)

UI设计中如果图标大小不一致一般怎么处理?

安云信息科技开启图标吸引用户的方法

干货 | 图标(ICON) 的 9 种设计原则