作者寄语:一个图标跟画一幅油画差不多,也是经历起稿,形状,大色块,细节这几步来做的,只不过做图标没油画那么有艺术气息罢了。这个教程只当做参考之用,并不是什么标准,我们还是得在不停的实践中找到属于自己的技巧,形成自己的风格。
最终效果
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-10-01-201901/7f41d947189aa1e789c8c9fa0cac989b-0.jpg)
1、新建一个256 * 256像素的文档,如下图。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/7f41d947189aa1e789c8c9fa0cac989b-1.jpg)
2、先把图标主要轮廓形状画出来。新建一个组,然后选择圆角矩形工具,半径设置为100,画出一个两头圆的形状。
3、选择椭圆工具,画出两个椭圆,将小椭圆向上移一点,让它看起来有透视感。然后按住Ctrl 点小椭圆的图层,得到小椭圆的图层选区。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/6441862c39e4fea2c8a9359c52db636f-3.jpg)
4、选择矩形选框工具,在属性栏选择“添加到选区”,然后拉出下图所示的选区。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/6441862c39e4fea2c8a9359c52db636f-4.jpg)
5、新建一个组,选中,然后点击蒙版,得到一个带有蒙版的组,把白色长条圆角图层拖进去,就得到一个半圆角。我们等下就要在这个组里制作这个透明玻璃罩。蒙版组这个方法挺方便不用一个ietuc一个图层去蒙版。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/7c01350f8b13a07d825bc1052d2fa4b0-5.jpg)
6、用圆角矩形工具再画一个相同的形状,不过要大一点,不要超过黑色椭圆的宽度,加点颜色好区分各个图层。
7、栅格化黄色这个圆角图层,然后把多余的用选区工具删除。因为用椭圆工具画出来是矢量,没法直接删减,只有栅格化变成位图再删减。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/68e5e084a41cf25d9d3407c59806b678-7.jpg)
8、复制白色圆角图层,然后双击其中一个,填充为0%,然后给它添加“内发光”数值,不透明度为:20%,大小20。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/68e5e084a41cf25d9d3407c59806b678-8.jpg)
9、双击另外一个圆角图层,也是设置填充0%,这个内发光就要厚一些,不透明度80%,大小为10。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/c28f1c960633cc469a6901fc3b7d57bd-9.jpg)
10、新建一个组,用白色圆角作为选区来蒙版组,在这个组里添加透明玻璃罩的细节,先画一个反光,透明度为20%。
11、画一个白色椭圆,栅格化,然后点快速蒙版模式,画一个渐变。退出蒙版模式,按Delete 得到一个透明渐变高光。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/891dbc7ef74a334fb5db77ef22341fc5-11.jpg)
12、用钢笔工具随意画些圆弧形状,用到制作一些反光细节。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/891dbc7ef74a334fb5db77ef22341fc5-12.jpg)
13、画完后执行:滤镜 > 模糊 > 高斯模糊,数值自己测试,这里是2.5,得到一个小光点。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/e2696c9a4fc69d371ea7133ced09e75c-13.jpg)
14、按同样的方法,画多几个反光点。
15、用钢笔工具画一个高光,填充7%。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/af148a2eb98ee6ec9f553274d1f33425-15.jpg)
16、在顶部画一个椭圆,用来制作玻璃罩的高光部分。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/af148a2eb98ee6ec9f553274d1f33425-16.jpg)
17、执行:滤镜 > 模糊 > 高斯模糊,数值为15,得到高光部分。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/8f378ad1e3dc1fd09b5c94fa110e013b-17.jpg)
18、现在来制作下半部分,因为要做金属感,所以给他添加一个浅灰色。
19、画细节,同样新建一个蒙版组,在组里用钢笔工具画阴影部分。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/8f378ad1e3dc1fd09b5c94fa110e013b-19.jpg)
20、高斯模糊一下,数值为9.5。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/adef5d46272b9c7952746ba6a6824493-20.jpg)
21、用钢笔工具画出高光及反光部分,然后高斯模糊。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/adef5d46272b9c7952746ba6a6824493-21.jpg)
22、现在画个装饰物,新建组,用圆角矩形工具画一个矩形,这个半径数值就要小点,随个人喜好要圆点还是方点,然后选择大圆角图层的选区,如下图。
23、给组加上蒙版。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/bd3f9dcd2e60a5891db993bc4a1c6488-23.jpg)
24、复制一层,缩小95%,然后添加蓝色渐变,点回黑色那层,添加一个大小为1的描边。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/75e3ca3455e90700fc899a7cbce234ef-24.jpg)
25、按照之前添加细节的方法给蓝色这层添加光影细节。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/75e3ca3455e90700fc899a7cbce234ef-25.jpg)
26、现在来制作里面的光效。选择小椭圆的选区。
27、新建一个组,添加蒙版。在组里面画一个椭圆添加一个深橙色,适当高斯模糊。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/9d43c0f13173afa445886653367321f5-27.jpg)
28、再画一个小的椭圆,添加黄色并高斯模糊,效果如下图。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/9d43c0f13173afa445886653367321f5-28.jpg)
29、现在来制作罩的液体,选择玻璃罩的选区。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/a3413bf04a2e86705c813af987ab093f-29.jpg)
30、也是新建组然后添加蒙版,在里面用钢笔画出液体的性质。
31、栅格化图层,添加快速蒙版,添加渐变,退出后删减。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/e58d1e67cc34c2807334f281e9b1bd3a-31.jpg)
32、得到透明渐变的液体,喜好什么颜色自己添加。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/e58d1e67cc34c2807334f281e9b1bd3a-32.jpg)
33、用同样的方法去做液体的反面。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/c6a3b59f713b0600c21296fea075d677-33.jpg)
34、用钢笔工具画出一些反光细节。
35、现在来制作黑色圆框的反光细节,选择大椭圆的选区。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/a5e754df3963e3dc8488226176d3d802-35.jpg)
36、新建组并添加蒙版,画出高光细节。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/1bb30bff2225ab057be651e31ed995f9-36.jpg)
37、现在来制作底座,同样的方法先画出各个形状,用不同颜色区分。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/1bb30bff2225ab057be651e31ed995f9-37.jpg)
38、给底座添加主要颜色。
39、用同样方法画出细节。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/00afc4c59f44f5f1df07aa03e0d944a2-39.jpg)
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/100270127f4a2756f72b2e2e366ec2a8-40.jpg)
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/100270127f4a2756f72b2e2e366ec2a8-41.jpg)
40、新建组,用底座的选区添加蒙版。在组里用钢笔画一圈黑色,然后添加白色描边。
41、再画出一些细节。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/3f242fded21354c6c11116b13392b465-43.jpg)
42、新建组,画一个圆角矩形,然后用变换路径,透视等编辑,得到一个梯形。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/3f242fded21354c6c11116b13392b465-44.jpg)
43、同样复制一层,缩小,添加蓝色渐变以及高光。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/25ea6616e181e0244993cbbd3046ddac-45.jpg)
44、新建组,用圆角矩形工具画一个成条形。
45、添加黑色,大小1像素描边,然后复制多一个。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/002ff110f3b85a728845171d69b50421-47.jpg)
46、用钢笔画一些高光细节上去,让它质感好一点。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/002ff110f3b85a728845171d69b50421-48.jpg)
47、最后画阴影,画一个黑色椭圆。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/95d1749ac4c58c93cea05a1956dbf890-49.jpg)
48、高斯模糊,数值自己调试。
49、复制多一层,然后动感模糊,角度为0,距离自定。
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/b2b548646ac83a194922534d8d447503-51.jpg)
50、最终效果:
![Photoshop打造半透明的橙色玻璃图标](https://img.gxlcms.com//Uploads-s/new/2019-10-01-201901/b2b548646ac83a194922534d8d447503-52.jpg)