当前位置:首页ps教程Photoshop制作透明磨砂风格的图标教程
Photoshop制作透明磨砂风格的图标教程
°
  • 素材类型: 资源-素材
  • 上传时间:

本教程主要使用Photoshop制作透明磨砂风格的图标教程,最近毛玻璃质感的UI界面与图标非常流行。今天我们就用PS来完成这个效果。

效果图

Photoshop制作透明磨砂风格的图标教程

教程步骤

在开始制作之前,我们可以先整体的观察一下毛玻璃作品的特征。

Photoshop制作透明磨砂风格的图标教程

Step 01 绘制草稿

1.1 根据以上分析结果,我将这次案例定为手机应用图标。先进行简单的草稿绘制。

Step 02 绘制形状

2.1 画稿画好之后,然后用AI开始画图形。

2.2 图形绘制期间,如果发现造型可优化的地方,也可以立即修改。

(1)信息图标

Photoshop制作透明磨砂风格的图标教程

(2)文档图标

Photoshop制作透明磨砂风格的图标教程

(3)邮件图标

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

(4)天气图标

Photoshop制作透明磨砂风格的图标教程

2.3 所有图层画好之后,可以将图形放在一起,并且调整好大小位置,使图标看着整体更协调。

Photoshop制作透明磨砂风格的图标教程

Step 03 安装插件

3.1 下载本教程提供的插件脚本并解压。然后点击文件-脚本-其它脚本。

Photoshop制作透明磨砂风格的图标教程

3.2 选中脚本的文件,点击打开。 3.3 出现下面提示,点确定。 3.4 然后跳出导出面板,选择为psd格式并设置好路径导出。 Step 04 打开PSD文件 4.1 将刚才导出的psd文件打开。 4.2 然后点图层筛选器的形状,并且按shi

3.2 选中脚本的文件,点击打开。

Photoshop制作透明磨砂风格的图标教程

3.3 出现下面提示,点确定。

Photoshop制作透明磨砂风格的图标教程

3.4 然后跳出导出面板,选择为psd格式并设置好路径导出。

Photoshop制作透明磨砂风格的图标教程

Step 04 打开PSD文件

4.1 将刚才导出的psd文件打开。

Photoshop制作透明磨砂风格的图标教程

4.2 然后点图层筛选器的形状,并且按shift选中所有图层,将透明度改为100,并Ctrl+G编组。

Photoshop制作透明磨砂风格的图标教程

4.3 然后关掉筛选器,将形状以外的所有图层删除。并且按图标含义编组。

Photoshop制作透明磨砂风格的图标教程

Step 05 制作文件夹图标 5.1 图像-模式,将模式改为RGB。 5.2 粉色形状颜色填充改为dab8f8。 5.3 为第一个图标,【文件面】图层添加图层样式。 5.4 修改【文件底】的颜色填充,并对【文件面】右键-拷贝图层样式,对

Step 05 制作文件夹图标

5.1 图像-模式,将模式改为RGB。

Photoshop制作透明磨砂风格的图标教程

5.2 粉色形状颜色填充改为dab8f8。

Photoshop制作透明磨砂风格的图标教程

5.3 为第一个图标,【文件面】图层添加图层样式。

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

5.4 修改【文件底】的颜色填充,并对【文件面】右键-拷贝图层样式,对【文件底】右键-粘贴图层样式。

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

5.5 选中【文件纸】图层,添加渐变叠加。 5.6 Ctrl+J复制【文件纸】图层,放到【文件面】上方并做剪贴蒙版。 5.7 将图层透明度改为50,并调整羽化属性。 5.8 拷贝【文件面】图层,并修改颜色填充,然后调整图层模式

5.5 选中【文件纸】图层,添加渐变叠加。

Photoshop制作透明磨砂风格的图标教程

5.6 Ctrl+J复制【文件纸】图层,放到【文件面】上方并做剪贴蒙版。

5.7 将图层透明度改为50,并调整羽化属性。

Photoshop制作透明磨砂风格的图标教程

5.8 拷贝【文件面】图层,并修改颜色填充,然后调整图层模式为正片叠底。调整形状羽化,并针对【文件纸】做剪贴蒙版。

Photoshop制作透明磨砂风格的图标教程

5.9 复制【文件纸】图层,去掉渐变叠加,修改填充色、图层模式、不透明度以及形状羽化,最后加上文字。这个图标就做好啦。

Photoshop制作透明磨砂风格的图标教程

教程做完才意识到图层命名错了┮﹏┭

应该是邮件的被命名成文件了,不过就酱叭不改了。

Step 06 其他图标制作 后续图标的做法和上述类似,大家可以尝试自己做完后面几个。 也可以按着教程参数继续 6.1 将【文件面】和【文件纸】样式分别拷贝粘贴到【短信上/下】 6.2 复制【短信下】并针对【短信上】做剪

Step 06 其他图标制作

后续图标的做法和上述类似,大家可以尝试自己做完后面几个。

也可以按着教程参数继续

6.1 将【文件面】和【文件纸】样式分别拷贝粘贴到【短信上/下】

Photoshop制作透明磨砂风格的图标教程

6.2 复制【短信下】并针对【短信上】做剪贴蒙版,调整不透明度和形状羽化。

Photoshop制作透明磨砂风格的图标教程

6.3 复制【短信下】并针对【短信上】做剪贴蒙版,并稍微往下放一点。

6.4 然后调整颜色填充、模式、不透明度和形状羽化。最后加上文字效果也做好啦。

Photoshop制作透明磨砂风格的图标教程

6.5 将【文件面】和【文件纸】样式分别拷贝粘贴到【云朵/太阳】

Photoshop制作透明磨砂风格的图标教程

6.6 拷贝【太阳】层,并放到【云朵】上方做剪贴蒙版,然后调整不透明度和羽化。

Photoshop制作透明磨砂风格的图标教程

6.7 拷贝【云朵】层,去除渐变叠加,并放到【太阳】上方做剪贴蒙版。然后设置颜色、模式、不透明度以及羽化。最后再加上文字就做好啦。

Photoshop制作透明磨砂风格的图标教程

6.8 分别拷贝【云朵/太阳】图层样式,粘贴到【夹子/纸张】。

Photoshop制作透明磨砂风格的图标教程

6.9 拷贝【纸张】层,并放到【夹子】上方做剪贴蒙版,然后调整不透明度和羽化。 6.10 拷贝【夹子】层,去除渐变叠加,并放到【纸张】上方做剪贴蒙版。然后设置颜色、模式、不透明度以及羽化。最后再加上文字就做好

6.9 拷贝【纸张】层,并放到【夹子】上方做剪贴蒙版,然后调整不透明度和羽化。

Photoshop制作透明磨砂风格的图标教程

6.10 拷贝【夹子】层,去除渐变叠加,并放到【纸张】上方做剪贴蒙版。然后设置颜色、模式、不透明度以及羽化。最后再加上文字就做好啦。

Photoshop制作透明磨砂风格的图标教程

Step 07 完善效果

7.1 新建一个背景图层,用一个大画笔,分别吸取紫色和蓝色,在画面里一顿瞎涂。

7.2 然后滤镜-模糊-高斯模糊,并且将图层不透明度改为50。

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

7.3 新建一个白色圆角矩形,并调整不透明度,然后加上投影样式。

Photoshop制作透明磨砂风格的图标教程

7.4 Ctrl+Alt+Shift+E盖印图层,并点击滤镜-Camera Raw滤镜。

7.5 然后调整校准和效果,这样整个图标就做好啦。

Photoshop制作透明磨砂风格的图标教程

Photoshop制作透明磨砂风格的图标教程

最终效果图

Photoshop制作透明磨砂风格的图标教程

温馨提示:

文章标题:Photoshop制作透明磨砂风格的图标教程

文章链接:https://www.4tu.cn/photoshop/17764.html

更新时间:2024年08月12日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
ps教程

Photoshop制作照片后隐藏的MM

2024-8-12 9:11:36

ps教程

Photoshop调出磨砂主题风格的苹果

2024-8-12 9:12:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索