打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
【新提醒】PhotoShop利用钢笔及图层样式制作精致小图标效果

最近上微博,貌似UI设计灰常热,偶然看到国外一组蓝色小图标,被这种简洁干净的风格吸引了,于是已经尝试做了一下,今天跟大家分享一下经验!我尽量把教程做的详细简单些,高手们可以尽情跳过一些步骤!欢迎大家踊跃交流!


这个是当时看到的老外的图


开始教程之前,大家跟我喊一句,

钓鱼岛是中国的!!!
Let’s go!




1、新建文档800*400,72dpi




2、为了规范和制图方便,我一般会调出参考线(ctrl+;)和网络(ctrl+’),我们打开编辑-首选项-参考线、网格和切片菜单,进行网格设置,跟本次教程文档大小(800*400)相配合即可(每个大格间距50),这里设置间隔50,子网络5.



3、将背景转为图层并填充蓝色 4c9eeb
4、我们为背景加入一些颗粒效果。
滤镜-杂色-添加杂色

本帖隐藏的内容


5、给背景加入一些光的感觉。在图层混合模式里改动。



6、添加后的效果。


颗粒和光的感觉有了,我们现在加入自制的“格子”。
格子虽然不复杂,但经常看到有的朋友深受其困扰,总是奔波于下载各种样式,其实这种图案触类旁通,我带大家做一下~




7、新建文档,50*50,72dpi,透明。



如果我看教程,那我一定会想凭什么是50??有的作者可能不会解释,于是我们模仿的时候,只会照搬而不懂原理,导致下次还是不会设置。

这种深深的不安感会在我等菜鸟心中埋下,会很恐惧~不管你们是不是这感觉,我反正是。。。。我的菜鸟同胞们,李菊福不???!!

50的由来是我们上面根据网格设置的哦,50刚好一大格,不是凭空来的,一句话,设计从文档大小设置就开始了!



8、选择选区工具,如图设置。




9、调出网格(ctrl+’),用刚刚设置好大小的选区,画出四个竖线,由于网格线的存在,对齐很容易。




10、新建编组,外框,在左侧画出一条竖线。






11、选择选区工具,如图设置。Bingo!要画横线了





12、如图,内部四条横线在中间,外框是最上边的横线。
将内部组的不透明度降低到50%。
这样设置可以模拟出外框粗,内框细的效果,参见PS自带网格~






13、ctrl+alt+shift+e盖印图层(注意要把背景图层隐藏掉~,我们要做的是背景透明的),
打开编辑-定义图案,如图键入名字即可。
好了这个文档就可以关掉了~




14、回到之前的背景图层,加入图案叠加,选择刚刚自己做的图案,如图设置~
效果看起来还不错吧,如果想让网格再浅一些,可以把不透明度再拉低。






15、做好这几步之后的效果图。





16、OK,这个背景搞定之后,开始画图。
图标我就以三角形开始,做出一个由三角形变化而来的图形。
会进行一些切割,过程中基本的图案制作操作都会涉及。

选择多边形工具






17、三角形的设置。





18、建立一个三角形之后,我们摁下键盘上的A键(路径选择工具的快捷键),ctrl+c复制一份,然后ctrl+v粘贴,ctrl+t进行旋转,如图~






选择第一种叠加方式进行组合。






19、我们继续摁下键盘上的A键,选择这个6角图形,ctrl+c复制一份,然后ctrl+v粘贴,ctrl+t进行缩放。
为什么不会镂空??因为此时设置还是第一种方式组合,我们选中小6角形,改为第二种方式组合。








20、效果图~小图标很可爱,虽然站酷上的同志们都爱重口味。。。







21、下面添加图层样式

别担心,我会把为什么这样设置告诉大家。
Don’t worry ,be happy.(有知道这句话出处的战友们,吱一声!!你懂的)







20、先加入投影,因为背景颜色比较浅,如果先上渐变叠加,我们叠加浅色的不容易看出来色彩是否合适,先加入投影把主体和背景分离出来~




21、现在加渐变(大家可以试试把投影层去掉,是不是没法判断颜色了?所以不是因为投影排在第一个就第一个设置它哦!!)






22、添加内阴影,可以和上图对比一下,看作用在哪里,大家来找茬~




23、添加一个描边,看着更舒服。渐变的颜色是#4c8ab4,#60b6ee






24、效果图








基本内容就是这些,下面给大家分享一下我画这种简单小图标的方法。

1、 我以小信封为例,先画一个矩形,添加描边。




2、新建图层,用画笔工具涂一下信封的样子。






3、 白线把黑色矩形划分之后,黑色部分就是我们需要勾出的图形,再进行切割即可~









前些天在站酷下载的方正经黑体很适合这风格~


【温馨提示】
本篇教程由 后援团队【教程组】从网络收集整理发布,请大家尊重原作者。最后祝大家学习愉快! 另外喜欢收集教程发教程的朋友请:点击>>>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Photoshop将鼠绘出非常逼真的牛仔裤兜效果教程(上篇)
个性DIY!用Photoshop制作漂亮的小图标
Photoshop制作非常精致的红色邮件图标
Photoshop制作漂亮的青草字
16个Photoshop实用技巧分享
用Photoshop制作漂亮MM梦幻艺术照片
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服