华信智原祝大家新年快乐
您的位置: 首页 > 行业新闻

用PS绘制简单拟物图标思路分享

来源:华信智原  |  发布时间:2018-09-14  |  浏览量:1376



关于教程


本次临摹的设计作品,光影原理非常简单,适合初学者学习。光影从上到下,上方亮下方暗。底座要用到渐变和投影,S字母对话框部分要制作高光,营造质感。


教程步骤


新建画布 900×600px 72ppi,填充背景色#f9f9f9,在画布上绘制一个圆角矩形,大小225×160px,圆角20px。居中于整个画布,并命名为【底座】。在矩形图层上添加图层样式。添加渐变营造光感。


添加描边。因为光线的方向,描边颜色为渐变。上浅下深。



添加投影,突出层次感。投影叠加3层,增加真实感。投影颜色不变#595959。第一层投影距离和大小数值较小,第二层和第三层投影距离和大小数值逐渐加大。


图片7.png


可以适当的调整等高线。调整投影间的过渡关系。


图片10.png


给底座添加反光。Ctrl+J复制【底座】,并将复制的图层命名为【反光】,删除图层样式。


图片11.png


去掉填充色,设置描边色为#ffffff。给反光层添加图层蒙版。用柔边画笔擦去下半部分。


图片12.png


绘制一个圆角矩形,命名为【小按键】大小29×31px,圆角6px。矩形填充颜色为#ebedef,描边色为#7a7a7a。描边为1px。并添加投影。投影颜色为#595959。


图片15.png


多复制几个【小按键】放在合适的位置。中间的长圆角矩形大小为102×31px。圆角为6px。


图片16.png


绘制一个圆角矩形,并命名为【对话框】。大小150×114px,圆角20px。并添加图层样式渐变及描边对话框有三层颜色,故添加内外两层描边。



通过修改锚点,做出对话框的形状。


图片20.png


复制【对话框】图层,命名为【描边】,放在【对话框】图层的下方。栅格化【描边】图层及其图层样式后,再添加图层样式。


图片21.png


从原图可以看出,对话框与底座间是有阴影的。我们可以通过羽化来实现。在【描边】图层下方新建图层,命名为【对话框投影】,选择椭圆选框工具,设定羽化值为30px。


图片22.png


框出投影的大概范围并填充较深的蓝色。填充颜色后可以适当的改变其大小和透明度,也可以多复制几层。使投影更加真实。



绘制圆角矩形,命名为【高光】,色值#ffffff,大小129×39px, 圆角12px。添加图层蒙版,选中蒙版,使用渐变工具,按住shift键,使高光颜色过渡均匀。



将【高光】复制一层。命名为【质感】,先将蒙版部分填充为白色,右键转换该图层为智能对象,选择滤镜-模糊-高斯模糊。并添加图层蒙版,使过渡均匀。


图片29.png

最后选一个喜欢的字体,打上字母S。


最终效果图

图片30.png


  • UI设计师
  • 跨境电商

报名热线:400-7777-699

微博

微信公众号

友情链接 :智原在线

DT人才培训基地(贵阳中心)|黔ICP备16004548号-1|咨询热线:400-7777-699|地址:贵阳市花溪大道中段532号(贵阳大数据及外包产业示范基地)|版权所有:北京朗杰科技有限公司

华信智原-DT人才培养基地

您现在的工作状态?

您想学习什么专业?

提交获取优惠 在线咨询