Photoshop设计金属立体效果的APP图标

2016-02-16 01:09 11 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是Photoshop设计金属立体效果的APP图标,一起来学习了解下吧!

【 tulaoshi.com - PS 】

今天为大家带来一篇非常简单的iCloud图标的PS教程。这篇教程虽然简单,但是有很多细节,大家从中还可以学到非常常用的角度渐变和渐变描边的用法。

先看看效果图

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

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

第1步:

打开Photoshop,Ctrl+N新建文档,根据自己的情况来定义尺寸。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

第2步:

选择圆角矩形工具,按住Shift键在画布上绘制出一个方形的圆角矩形,这里我将圆角半径设置为50像素。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

第3步:

双击圆角矩形图层,为其添加渐变图层样式。渐变样式选择角度渐变。渐变颜色使用深灰与浅灰相互交替,具体设置如下图。这是做金属样式的常用手法。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

再添加描边样式,此处填充类型选择渐变。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

第4步:

选择钢笔工具,工具模式选择形状,在圆角矩形中心绘制出云形。这里我并没有严格按照iCloud的曲线来绘制,只是教大家一种方法。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

第5步:

双击云图层,为其添加内阴影样式。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

继续添加描边样式,这里依然选择渐变描边,将默认的黑白渐变反向即可。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

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

第6步:

将云图层Ctrl+J复制一层,清除其图层样式,并将颜色改变为浅灰色。Ctrl+T将其缩小,缩小时按住Alt键可以进行中心缩放。缩小完毕,你可以利用直接选择工具微调锚点,使边缘看上去均匀即可。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

第7步:

复制圆角矩形的图层样式,粘贴到内部的云形图层。(小技巧:按住Alt键拖动图层样式的fx图标到另外图层上,可以快速复制图层样式。)

将描边大小修改为2像素,我们就完成了非常简单的icloud图标的制作。

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

来看看最终效果图吧:

Photoshop设计金属立体效果的APP图标,PS教程,图老师教程网

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

来源:http://www.tulaoshi.com/n/20160216/1566234.html

延伸阅读
标签: PS PS基础
本教程主要使用Photoshop设计木质立体效果的软件图标,这篇教程教UI设计师使用PS鼠绘质感立体图标,教程绘制出来的图标质感挺强,也很精细,很漂亮。推荐过来和朋友们一起分享学习了。 先来看看最终的效果图吧: 具体的绘制步骤如下: 1.新建文件。大小400*300,做球形渐变。 2.用圆角矩形工具画一个251*237的圆角矩形,这一边我用了...
标签: 设计
先看看效果图 1、首先我们来分解这个图标,观察其各个组成部分,然后我们分层制作。 2、接下来我们从最底层做起,首先新建画布,置入模糊背景素材。使用钢笔工具在画布上勾勒出一个心形形状,然后对其添加图层样式。 3、底层做好后,接下来我们制作搞怪。搞怪的制作非常简单,首先按住Ctrl键后点击心形图层会出现整...
标签: PS PS基础
效果图: 第一步:画一个圆角为45px,宽高为256*256的圆角矩形,添加图层样式:斜面浮雕和渐变叠加。 第二步:复制刚才的圆角矩形,去掉样式,用直接选择工具将高度调整到226px,左右宽度也分别缩小3-4px。 第三步:再次复制改圆角矩形,用直接选择工具将左右下高度分别减少2px,添加图层样式:投影和内阴影。效果都不是很明显,可...
来源:PS联盟 作者:Sener 本教程介绍稍微有点倾斜的立体字制作方法。过程也不是很复杂,制作之前需要对立体字的制作有一定的了解。教程重点是文字的透视和立体面的制作。在刚开始制作透视的时候需要多调整一下文字变形,效果看上去透视自然即可。立体面的制作跟其它立体字的方法基本相同。 最终效果 1、新建一个800 * 600像素的文档,背景...
标签: PS PS基础
善用图层样式,你会发现图层样式非常的强大,下面的图片很简单,用图层样式就可以做了出来。前几天我把源文件删了,所以现在我边做边截图出来,有什么不同的也可以提问,楼主只是一个业余爱好者,前段时间喜欢上了临摹各种ICON。不过过段时间我应该要去研究颜色原理了。 先看看效果图 下面是临摹对比 临摹,我们先排列好画布 ...

经验教程

555

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部