UI设计之插画风格圆形图标设计_惠州计算机UI设计培训学校
作者:hz_admin02发布时间:2022-05-23分类:电脑培训网-热点问答浏览:842
本教程主要使用Photoshop设计立体插画主题风格的图标,作品的整体效果以剪影风格为主的插画,整体的层次立体感表现的非常的不错。
先看看效果图:
![<a style='color:blue' href='http://ui.tedu.cn/'>ui培训</a>教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_64116.png)
整个插画就是树枝滴部分会稍微花点时间哦~建议熟练滴童鞋不要临摹,自已动手画一画这些树枝,对自己的构图能力和控制力都是很有帮助滴哦
建好画布后,画一个圆:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_28643.png)
然后砸门建立一个分组,alt+左键显示圆的选区,然后给分组建立一个蒙版,把所有滴部件都画在这个组里的时候就不会超出圆的大小啦~
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_65178.png)
现在开始画地面,砸门用钢笔工具画出轮廓来:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_56113.png)
砸门可以直接复制一个放在后面,水平旋转后调整下位置就好啦、
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_25078.png)
接下来开始做树枝滴部分,为了整个画面的层次感,窝做了四层呢~太多了也不好,显得和杂乱,下面一层层的来看
第一层:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_84173.png)
第二层:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_70539.png)
第三层:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_15446.png)
第四层是由左右两部分组成滴,窝把其他的隐藏了让童鞋们看得清楚点:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_44453.png)
放在一起来看哈效果(,,・ω・,,)
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_76916.png)
做到这里就完成大部分啦,嘻嘻
然后窝们来做点装饰品,先做个云,这个云其实是由4个圆加矩形拼起来滴:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_32628.png)
缩小放到合适滴位置上
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_51350.png)
再来看哈树叶滴做法,用布尔运算取交集:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_12634.png)
合并形状组件后删除上面或下面滴锚点,再复制一个垂直旋转:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152208_89166.png)
酱紫就可以分别给颜色啦~
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_26236.png)
放在合适滴位置上:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_84571.png)
下面来画可爱滴鹿鹿
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_56209.png)
这里需要童鞋们对钢笔工具有很好滴控制力,关于钢笔工具,窝前面有篇文章叫“钢笔工具锚点的控制”,童鞋们可以先去看一看,然后再来画这只鹿。
画好之后呢,砸门把它放进去,放到空中让鹿飞起来。
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_69427.png)
接下里就可以开始填色了哦,将地面弄成渐变色,背后滴大圆也加上渐变色:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_33506.png)
再给云朵和鹿加上渐变色:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_74275.png)
最后,想要做粗剪影滴效果就要加上投影,我们给地面,树枝,云,鹿都加上投影,正片叠底效果不好滴话,童鞋们可以试试“线性加深”和“颜色加深”:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_17642.png)
然后做最外面一圈滴内阴影效果,砸门把大圆复制一个放在最最最上面,填充改为0,然后添加内阴影:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_64211.png)
做到这里就差不多啦,砸门再给整个画面增加颗粒质感,给那些数值滴投影和大圆滴内阴影加上杂色,需要注意滴是,杂色,阴影颜色,大小,距离这些都会互相影响滴,所以窝这里不给具体参数,童鞋们自己把控一哈:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_83442.png)
再来看看效果:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_27124.png)
这时候窝们发现地面滴杂色不是很明显,砸门单独做一哈,把上面那层地面复制一个,图层模式改为溶解,透明度10%-20%,图层样式去掉,颜色比之前加深一点点:
![ui培训教程-插画效果图 ui培训教程-插画效果图](https://ynbdqn.cn/zb_users/upload/2022/05/20220523152209_74957.png)
点击咨询直接了解更多相关资料,我在惠州北大青鸟新方舟等你。
本文内容转载自网络,版权归原作者所有,如有侵权请联系我们进行删除。
相关推荐
- 茂名信息:企业职工养老待遇资格认证,今年你做了吗?|||计算机职业技能培训班
- 惠州信息:《行风热线面对面》节目围绕“多措并举促进高质量充分就业”主题与市民交流互动|||大学生计算机培训学校
- 2024中高职三二分段招生计划-湛江市财经职业技术学校专业介绍
- 2024中高职三二分段招生计划-湛江市智洋艺术外语职业高级中学专业介绍
- 2024中高职三二分段招生计划-廉江市卫生职业技术学校专业介绍
- 2024中高职三二分段招生计划-湛江市财政职业技术学校专业介绍
- 2024中高职三二分段招生计划-湛江市体育学校专业介绍
- 2024中高职三二分段招生计划-湛江艺术学校专业介绍
- 2024中高职三二分段招生计划-湛江中医学校专业介绍
- 2024中高职三二分段招生计划-湛江机电学校专业介绍
- 电脑培训网-热点问答排行
-
- 1东莞信息:(万江)广东茂名幼儿师范专科学校到万江人社分局开展校企洽谈活动|||计算机培训学校招生
- 2东莞信息:(万江)万江人社分局组织企业赴东莞技师学院开展校园招聘活动|||计算机培训学校招生
- 3汕头信息:市人力资源和社会保障局召开工作调度会|||计算机专业维修学校
- 4茂名信息:聚焦粤西桂东人才高地筑站引博集聚医学英才|||计算机职业技能培训班
- 5湛江信息:导师“传经”下基层,湛江这群乡村创业人有了新“法宝”|||广州学电脑培训学校
- 6韶关信息:全省社保“镇村通”工作推进会在我市召开推动社保“镇村通”工程落地见效|||电脑计算机编程培训学校
- 7计算机等级考试问答-报考时选错级别科目,但已缴费可否重置修改?-北大青鸟教育-教育实力
- 8计算机等级考试问答-报名缴费重复缴了两次,会自动退费吗?-北大青鸟教育-教育实力
- 9江门信息:关于高温津贴,看看你能领多少?|||计算机培训机构
- 最近发表
-
- 茂名信息:企业职工养老待遇资格认证,今年你做了吗?|||计算机职业技能培训班
- 惠州信息:《行风热线面对面》节目围绕“多措并举促进高质量充分就业”主题与市民交流互动|||大学生计算机培训学校
- 2024中高职三二分段招生计划-湛江市财经职业技术学校专业介绍
- 2024中高职三二分段招生计划-湛江市智洋艺术外语职业高级中学专业介绍
- 2024中高职三二分段招生计划-廉江市卫生职业技术学校专业介绍
- 2024中高职三二分段招生计划-湛江市财政职业技术学校专业介绍
- 2024中高职三二分段招生计划-湛江市体育学校专业介绍
- 2024中高职三二分段招生计划-湛江艺术学校专业介绍
- 2024中高职三二分段招生计划-湛江中医学校专业介绍
- 2024中高职三二分段招生计划-湛江机电学校专业介绍
- 标签列表
-