Photoshop制作圆形卷边效果的网页图标教程

是匿名账户

是匿名账户

2016-02-19 17:11

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享Photoshop制作圆形卷边效果的网页图标教程的教程,热爱PS的朋友们快点看过来吧!

先看效果图:

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

新建文档450x450像素,背景白色,新建图层填充黑色,添加渐变叠加样式,设置很简单,我就不截图了。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

建新层前景色#8c0000画一个正圆。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

添加图层样式。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

效果如下。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

只保留投影效果的显示,然后减法模式用钢笔做如下路径,只保留左上角部分。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

Ctrl+T选择缩放位置如下。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

选择第一步画的正圆图层,用钢笔减法模式画一个路径,得到下图效果。

Photoshop制作圆形卷边效果的网页图标

选择形状1副本,修改图层样式。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

把渐变中心往下挪动一定距离,会得到类似下图的效果。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

输入文字F,颜色#c01616,并添加一些投影。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

新建层,调出形状1副本的选区填充白色,之后椭圆工具减选,图层不透明度4%,此为右下角高光部分。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

如果颜色不喜欢,可以添加色相/饱和度调整层,调节颜色。

Photoshop制作圆形卷边效果的网页图标

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

最终效果如下,本ps教程结束。

Photoshop制作圆形卷边效果的网页图标

展开更多 50%)
分享

猜你喜欢

Photoshop制作圆形卷边效果的网页图标教程

设计创意
Photoshop制作圆形卷边效果的网页图标教程

Photoshop制作圆形卷边效果的网页图标

PS PS基础
Photoshop制作圆形卷边效果的网页图标

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

Photoshop教程:制作照片卷边立体效果

PS PS教程
Photoshop教程:制作照片卷边立体效果

Photoshop制作网页常见卷页效果教程

PS PS基础
Photoshop制作网页常见卷页效果教程

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

Photoshop教程:打造网页常用圆形折角图标

PS PS教程
Photoshop教程:打造网页常用圆形折角图标

Photoshop快速制作图片卷边效果

设计创意
Photoshop快速制作图片卷边效果

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

PS将人物照片处理成插画效果教程

PS将人物照片处理成插画效果教程

以猫为元素的logo设计

以猫为元素的logo设计
下拉加载更多内容 ↓