Photoshop利用滤镜制作炫彩格子风格的APP软件图标
利用Photoshop创建彩色格子icon,本教程中用到了智能对象和智能滤镜,你会从中了解到智能滤镜的强大作用。好了,我们来学习一下吧,希望你会喜欢。
![Photoshop制作炫彩格子风格的APP软件图标](https://file.psd.cn/p/20220927/tz0mqj14u0x.jpg)
打开Photoshop,Ctrl+N新建一个文档,文档尺寸可自定义。
![1511688ae8a346188bd96f1586cf9fff 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/w130hvbe4qr.jpg)
按住Alt键双击背景图层,使其转换为普通图层。然后再次双击,打开图层样式面板,为其添加颜色叠加样式,颜色为#262523。
![7345b3e6a65e476cb42878507a93fd3c 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/opc2vj1dsgi.jpg)
![d02075b9f72d46818a8a12bf32c46d0a 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/51domhbu1uw.jpg)
![0a50ff434ab842c59cdcd03c481e19ee 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/2x0mhow13u1.jpg)
![658ecbe08008467aa50b0fcede3ed04e 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/qpivujlrpue.jpg)
新建一层,用白色大号柔边画笔在画布中心点击出白色亮光。
![3088ea71bc4646aca510871387a11300 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/1yswam0vhtf.jpg)
![2490e41e434642918beec65aaf42caa6 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/crnmzsp3tqf.jpg)
![a0b70c6c86bf4e0ab9b2a17db484ee9b 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/q4jmzw1nvia.jpg)
接下来我们创建icon主体。利用圆角矩形工具在画布中心点击,在弹出的对话框中设置数值如下:
![d9a75dd338e64f0bb1f621cf4bbdad00 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/nuldrhexlca.jpg)
在圆角矩形上方随意绘制一个比其尺寸大一些的形状,因为我们后面会将其转换为剪贴蒙版,因此形状可随意绘制。
![4d6ad0be5c70462abe28d0b079d3c351 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/p1xzo4miilj.jpg)
![e51af720988c42b69954c1ef06bc8ba0 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/wskjsjolqs3.jpg)
![52ce87f7757e4f99808405dca65a35d2 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/dvuuicje11b.jpg)
利用马赛克滤镜(滤镜>像素化>马赛克)对其进行分块处理。
![f0232be344da4d8f8b6c4e451e2bdb29 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/cxycrz5dypc.jpg)
将执行了马赛克滤镜的图层Ctrl+J复制一层,同样转换为剪贴蒙版。然后点击滤镜>风格化>照亮边缘。
![5a1253e1cb7c4160bf531dc0344b85cf 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/4ls25jjf2m5.jpg)
![c8ead6ba9d2941be9341af319c4ae2bd 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/fldl4gevp1v.jpg)
第8步:
将上一步创建的图层Ctrl+J再次进行复制。将图层混合模式设置为减去,图层不透明度设置为20%。
选择移动工具,利用键盘上的方向键将其位置向下方与右方分别移动1像素。这样格子的间隔部分便形成了凹槽的效果。
![637e54f8cb984f5b94e0e6d0a3acac1a 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/0zgv3nax0me.jpg)
利用椭圆工具在icon中心绘制出一个正圆形。
![a9f679a0a5554c43922b10bea4c78b10 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/xh14rfms2on.jpg)
![e7b9e62e892b4496a74f6e1dc25188a7 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/iadq2xq3xtj.jpg)
![5703623ba19143479d50dc65b99b4353 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/yewvuuh44um.jpg)
![9ecf940e2f1644148f630c59224660b9 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/jy2u4nn442r.jpg)
![b7f6bad298604fccba04e4aaae9c9df0 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/ggong2vxzmp.jpg)
利用椭圆工具在icon中心再次创建一个较小的正圆形。
![3d28ad34d44c444aa45d12982d48f8d5 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/klz3dfcez0m.jpg)
![c4537aa59ecf4e0ba8769ba0b3b567cf 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/vi4s20lj5em.jpg)
![8ec2bf6e410644ce8788b9aebd786d96 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/ayb4owakiu3.jpg)
![2de04114ed2b45bc8b1b07a648f71ddd 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/54432ydphij.jpg)
![2836753d844d442694b85fbdde93b813 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/0ihtmjds3zu.jpg)
![7125d0884c1d4810aa23d24b87314fb6 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/mgmjzsxsfpz.jpg)
下面我们来添加文字。
![e39beaac03ac4c20a11b6af1eff9350c 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/ifv3jmznrdu.jpg)
![b2d4057cf3a241b0ad2dea5e0df78ee5 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/0ja2cd2mvql.jpg)
![bb2b7df651654d6b9e3e6f6d12726f66 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/kljykwytawb.jpg)
![9ea895e3674e45e4bf94cdc33eab40bb 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/5wemzy5cidi.jpg)
做到这里,总觉得icon平平淡淡,缺少点感觉。好吧,使出我们的杀手锏,添加发光!你立刻就会感受的奇迹的发生了。
把第4步创建的圆角矩形图层按住Alt键向上拖动复制一份,把填充调为0,这样我们就可以不受这个图层本身颜色的控制了,而可以对图层样式进行为所欲为的调整,嘿嘿。
![29918a0c47924f5cb5b623c5e9c6518d 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/ib0u4unj5dw.jpg)
![d38173e2d90b4022a50d5e4e3b0bb2d9 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/gol22d1zuxg.jpg)
![5fe6eb054a0a4374bccc5c455502e654 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/a05syrzuuuf.jpg)
![486cbbde1042473aa74b402d388addeb 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/qgtdh4howan.jpg)
第13步:
好吧,苦逼的设计师,继续调整。
双击图层,打开图层样式面板。在混合选项中,将“图层蒙版隐藏效果”勾选上。
![e02d4d510d144257888a93620a5ea7af 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/jtbrdohje3f.jpg)
![8d49603882284b268766783d11b3528c 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/iwdpcpo4y4p.jpg)
最后添加上倒影。Oh,my god!终于完了!
![f70bab2e9d874803b53cda17ceeaf22b 用PS创建彩色格子icon](https://file.psd.cn/p/20220927/tz0mqj14u0x.jpg)
-
PS怎么设计正方形的西瓜图标标志?
2022-10-09 7
-
用photoshop制作一个工商银行图标
2022-10-09 11
-
用Photoshop制作一个圆形的音乐图标按钮
2022-10-09 7
-
Photoshop巧用路径绘制浏览器logo图标
2022-10-09 5
-
photoshop简单制作一个下载的图标
2022-10-09 6
-
Photoshop制作一个视频UI图标
2022-10-09 8
-
PS怎样设计一个色彩靓丽的方形按钮图标?
2022-10-09 8
-
Photoshop绘制扁平化风格索尼PSP游戏机图标教程
2022-10-09 13
-
PS怎样快速制作一个旋转空调按钮图标?
2022-10-09 11
-
PS制作一个逼真的空调调节器旋钮开关ui图标教程
2022-10-09 8
-
PS怎么制作按钮开关图标?
2022-10-09 8
-
PS鼠绘漂亮质感的立体旋钮图标
2022-10-09 6
-
使用Photoshop绘制肥皂盒ICON图标教程
2022-10-09 9
-
PS简单设计一个简洁的按键图标
2022-10-09 7
-
PS打造炫彩的开始图标按钮
2022-10-09 7
-
PS路径和钢笔工具制作扁平化图标方法详解
2022-10-09 5
-
PS鼠绘教程:绘制超精致《今日头条》立体图标
2022-10-09 8
-
教你用Photoshop设计立体质感的盒子图标
2022-10-09 7
-
用PS制作简洁大气质感的圆形开关按钮图标
2022-10-09 8
-
PS图标教程:绘制逼真的火龙珠图标
2022-10-09 6
-
photoshop中短信icon图标按钮制作教程
2022-10-09 4