美文网首页
2018-05-09

2018-05-09

作者: UI设计达人 | 来源:发表于2018-05-10 10:37 被阅读16次

Hello,不露又和大家见面了,今天给大家带来的是一个可爱Q弹的icon~看起来像块饼干是吧~做起来非常简单哦,快打开PS一起躁起来吧。先来看看效果图:

步骤1:打开PS,新建一个800*600的画布。给画布填充颜色:#6807ae,在画布中间建一个尺寸为360*360;圆角为60的圆角矩形;填充颜色:#ffffff。

步骤2:在圆角矩形左上角建一个90*90的矩形,填充渐变色:#fc7f26~#fcc277;角度:-45°。

步骤3:复制出剩下的15个;然后选中这16个渐变小色块右建—创建剪切蒙版,得到下图:

步骤4:用钢笔工具勾出上面的白色“淋面”,颜色为#ffffff(记得添加剪切蒙版哦)。用路径选择工具选中这个形状后在它的右上角画一个椭圆,尺寸随意。画这个圆的时候按住ALT键即可完成布尔运算的减法运算;另外画两个正圆在“淋面”的左下方,画圆的时候按住SHIFT键即可完成布尔运算的加法运算。

步骤5:现在给底部圆角矩形加图层样式:

步骤6:现在给白色“淋面”加图层样式:

步骤7:好啦~简简单单的几步下来~一个可爱的icon就这么诞生了可以加点装饰在背景上,显得更生动~

小伙伴们可以通过学习上面这种质感小图标的做法,尝试着做出不同样式的图标(例子如下);技巧包括:添加渐变提升质感,添加内阴影/斜面浮雕等图层样式打造出厚度感。最后记得交作业哦~爱你们。

作品作者:NestStrix Design

教程作者:不露

转自:学UI网

相关文章

  • 2018-05-09

    2018-05-09

  • 2018-05-09

    2018-05-09 戴师傅简书作者 2018-05-09 21:10 打开App (稻盛哲学学习会)打卡第54天...

  • selenium+js处理display属性为none

    Author='jolting' Date='2018-05-09' 故事and事故 故事是这样开始的,正在写自动...

  • Gone with the wind

    2018-05-09 周三 早上晨练,看到满草坪的蒲公英,心里升腾起柔...

  • 520情话-我必生死相依

    浅水涅槃 2018-05-09 10:07 · 字数 7324 · 阅读 96 · 原谅我喜欢你好多年 261 遇...

  • TF1-1第1次

    【时间】2018-05-09 【地点】福田锦囊寓酒店 【级别】TF1-1第1次 【自我感受】 【钻石反馈】 ...

  • 日精进打卡(第306天)

    2018-05-09 姓名:李义 公司:........ 组别:259期利他二组 【知~学习】 背诵 六项精进大纲...

  • neo4安装

    2018-05-09 安装 1.当然是下载了 neo4j-desktop-offline-1.1.0-x86_64...

  • selenium处理鼠标事件

    author='jolting' date='2018-05-09' 好久没更了,最近有项目测试,需要写自动化用例...

  • 详细深刻快速改命转运忏悔文

    详细深刻快速改命转运忏悔文 欧阳岳灵 已关注 2018-05-09 16:12 · 字数 717 · 阅读 90 ...

网友评论

      本文标题:2018-05-09

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