0

0

Photoshop打造半透明的橙色玻璃图标

PHP中文网

PHP中文网

发布时间:2016-06-01 14:35:01

|

2222人浏览过

|

来源于php中文网

原创

作者寄语:一个图标跟画一幅油画差不多,也是经历起稿,形状,大色块,细节这几步来做的,只不过做图标没油画那么有艺术气息罢了。这个教程只当做参考之用,并不是什么标准,我们还是得在不停的实践中找到属于自己的技巧,形成自己的风格。 最终效果

Photoshop打造半透明的橙色玻璃图标

1、新建一个256 * 256像素的文档,如下图。

Photoshop打造半透明的橙色玻璃图标

2、先把图标主要轮廓形状画出来。新建一个组,然后选择圆角矩形工具,半径设置为100,画出一个两头圆的形状。

Photoshop打造半透明的橙色玻璃图标
 
3、选择椭圆工具,画出两个椭圆,将小椭圆向上移一点,让它看起来有透视感。然后按住Ctrl 点小椭圆的图层,得到小椭圆的图层选区。

Photoshop打造半透明的橙色玻璃图标

4、选择矩形选框工具,在属性栏选择“添加到选区”,然后拉出下图所示的选区。

Photoshop打造半透明的橙色玻璃图标

5、新建一个组,选中,然后点击蒙版,得到一个带有蒙版的组,把白色长条圆角图层拖进去,就得到一个半圆角。我们等下就要在这个组里制作这个透明玻璃罩。蒙版组这个方法挺方便不用一个ietuc一个图层去蒙版。

Photoshop打造半透明的橙色玻璃图标

6、用圆角矩形工具再画一个相同的形状,不过要大一点,不要超过黑色椭圆的宽度,加点颜色好区分各个图层。

Photoshop打造半透明的橙色玻璃图标
 
7、栅格化黄色这个圆角图层,然后把多余的用选区工具删除。因为用椭圆工具画出来是矢量,没法直接删减,只有栅格化变成位图再删减。

Photoshop打造半透明的橙色玻璃图标

8、复制白色圆角图层,然后双击其中一个,填充为0%,然后给它添加“内发光”数值,不透明度为:20%,大小20。

Photoshop打造半透明的橙色玻璃图标

9、双击另外一个圆角图层,也是设置填充0%,这个内发光就要厚一些,不透明度80%,大小为10。

Photoshop打造半透明的橙色玻璃图标

10、新建一个组,用白色圆角作为选区来蒙版组,在这个组里添加透明玻璃罩的细节,先画一个反光,透明度为20%。

Photoshop打造半透明的橙色玻璃图标
 
11、画一个白色椭圆,栅格化,然后点快速蒙版模式,画一个渐变。退出蒙版模式,按Delete 得到一个透明渐变高光。

Photoshop打造半透明的橙色玻璃图标

12、用钢笔工具随意画些圆弧形状,用到制作一些反光细节。

Photoshop打造半透明的橙色玻璃图标

13、画完后执行:滤镜 > 模糊 > 高斯模糊,数值自己测试,这里是2.5,得到一个小光点。

Photoshop打造半透明的橙色玻璃图标

14、按同样的方法,画多几个反光点。

Photoshop打造半透明的橙色玻璃图标
 
15、用钢笔工具画一个高光,填充7%。

Photoshop打造半透明的橙色玻璃图标

16、在顶部画一个椭圆,用来制作玻璃罩的高光部分。

Photoshop打造半透明的橙色玻璃图标

17、执行:滤镜 > 模糊 > 高斯模糊,数值为15,得到高光部分。

Photoshop打造半透明的橙色玻璃图标

18、现在来制作下半部分,因为要做金属感,所以给他添加一个浅灰色。

Photoshop打造半透明的橙色玻璃图标
 
19、画细节,同样新建一个蒙版组,在组里用钢笔工具画阴影部分。

Photoshop打造半透明的橙色玻璃图标

20、高斯模糊一下,数值为9.5。

Photoshop打造半透明的橙色玻璃图标

21、用钢笔工具画出高光及反光部分,然后高斯模糊。

Photoshop打造半透明的橙色玻璃图标

22、现在画个装饰物,新建组,用圆角矩形工具画一个矩形,这个半径数值就要小点,随个人喜好要圆点还是方点,然后选择大圆角图层的选区,如下图。

Photoshop打造半透明的橙色玻璃图标
 
23、给组加上蒙版。

Photoshop打造半透明的橙色玻璃图标

24、复制一层,缩小95%,然后添加蓝色渐变,点回黑色那层,添加一个大小为1的描边。

Photoshop打造半透明的橙色玻璃图标

25、按照之前添加细节的方法给蓝色这层添加光影细节。

Photoshop打造半透明的橙色玻璃图标

26、现在来制作里面的光效。选择小椭圆的选区。

Photoshop打造半透明的橙色玻璃图标
 
27、新建一个组,添加蒙版。在组里面画一个椭圆添加一个深橙色,适当高斯模糊。

Photoshop打造半透明的橙色玻璃图标

28、再画一个小的椭圆,添加黄色并高斯模糊,效果如下图。

Photoshop打造半透明的橙色玻璃图标

29、现在来制作罩的液体,选择玻璃罩的选区。

Photoshop打造半透明的橙色玻璃图标

30、也是新建组然后添加蒙版,在里面用钢笔画出液体的性质。

Photoshop打造半透明的橙色玻璃图标
 
31、栅格化图层,添加快速蒙版,添加渐变,退出后删减。

Photoshop打造半透明的橙色玻璃图标

32、得到透明渐变的液体,喜好什么颜色自己添加。

Photoshop打造半透明的橙色玻璃图标

33、用同样的方法去做液体的反面。

Photoshop打造半透明的橙色玻璃图标

34、用钢笔工具画出一些反光细节。

Photoshop打造半透明的橙色玻璃图标
 
35、现在来制作黑色圆框的反光细节,选择大椭圆的选区。

Photoshop打造半透明的橙色玻璃图标

36、新建组并添加蒙版,画出高光细节。

Photoshop打造半透明的橙色玻璃图标

37、现在来制作底座,同样的方法先画出各个形状,用不同颜色区分。

Photoshop打造半透明的橙色玻璃图标

38、给底座添加主要颜色。

Photoshop打造半透明的橙色玻璃图标
 
39、用同样方法画出细节。

Photoshop打造半透明的橙色玻璃图标

Photoshop打造半透明的橙色玻璃图标

Photoshop打造半透明的橙色玻璃图标

40、新建组,用底座的选区添加蒙版。在组里用钢笔画一圈黑色,然后添加白色描边。

Photoshop打造半透明的橙色玻璃图标
 
41、再画出一些细节。

Photoshop打造半透明的橙色玻璃图标

42、新建组,画一个圆角矩形,然后用变换路径,透视等编辑,得到一个梯形。

Photoshop打造半透明的橙色玻璃图标

43、同样复制一层,缩小,添加蓝色渐变以及高光。

Photoshop打造半透明的橙色玻璃图标

44、新建组,用圆角矩形工具画一个成条形。

Photoshop打造半透明的橙色玻璃图标
 
45、添加黑色,大小1像素描边,然后复制多一个。

Photoshop打造半透明的橙色玻璃图标

46、用钢笔画一些高光细节上去,让它质感好一点。

Photoshop打造半透明的橙色玻璃图标

47、最后画阴影,画一个黑色椭圆。

Photoshop打造半透明的橙色玻璃图标

48、高斯模糊,数值自己调试。

Photoshop打造半透明的橙色玻璃图标
 
49、复制多一层,然后动感模糊,角度为0,距离自定。

Photoshop打造半透明的橙色玻璃图标

50、最终效果:

Photoshop打造半透明的橙色玻璃图标

Photoshop打造半透明的橙色玻璃图标

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

39

2026.02.06

java多线程方法汇总
java多线程方法汇总

本专题整合了java多线程面试题、实现函数、执行并发相关内容,阅读专题下面的文章了解更多详细内容。

17

2026.02.06

1688阿里巴巴货源平台入口与批发采购指南
1688阿里巴巴货源平台入口与批发采购指南

本专题整理了1688阿里巴巴批发进货平台的最新入口地址与在线采购指南,帮助用户快速找到官方网站入口,了解如何进行批发采购、货源选择以及厂家直销等功能,提升采购效率与平台使用体验。

289

2026.02.06

快手网页版入口与电脑端使用指南 快手官方短视频观看入口
快手网页版入口与电脑端使用指南 快手官方短视频观看入口

本专题汇总了快手网页版的最新入口地址和电脑版使用方法,详细提供快手官网直接访问链接、网页端操作教程,以及如何无需下载安装直接观看短视频的方式,帮助用户轻松浏览和观看快手短视频内容。

150

2026.02.06

C# 多线程与异步编程
C# 多线程与异步编程

本专题深入讲解 C# 中多线程与异步编程的核心概念与实战技巧,包括线程池管理、Task 类的使用、async/await 异步编程模式、并发控制与线程同步、死锁与竞态条件的解决方案。通过实际项目,帮助开发者掌握 如何在 C# 中构建高并发、低延迟的异步系统,提升应用性能和响应速度。

11

2026.02.06

Python 微服务架构与 FastAPI 框架
Python 微服务架构与 FastAPI 框架

本专题系统讲解 Python 微服务架构设计与 FastAPI 框架应用,涵盖 FastAPI 的快速开发、路由与依赖注入、数据模型验证、API 文档自动生成、OAuth2 与 JWT 身份验证、异步支持、部署与扩展等。通过实际案例,帮助学习者掌握 使用 FastAPI 构建高效、可扩展的微服务应用,提高服务响应速度与系统可维护性。

7

2026.02.06

JavaScript 异步编程与事件驱动架构
JavaScript 异步编程与事件驱动架构

本专题深入讲解 JavaScript 异步编程与事件驱动架构,涵盖 Promise、async/await、事件循环机制、回调函数、任务队列与微任务队列、以及如何设计高效的异步应用架构。通过多个实际示例,帮助开发者掌握 如何处理复杂异步操作,并利用事件驱动设计模式构建高效、响应式应用。

11

2026.02.06

java连接字符串方法汇总
java连接字符串方法汇总

本专题整合了java连接字符串教程合集,阅读专题下面的文章了解更多详细操作。

47

2026.02.05

java中fail含义
java中fail含义

本专题整合了java中fail的含义、作用相关内容,阅读专题下面的文章了解更多详细内容。

29

2026.02.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号