您好,欢迎来到素彩网!

ps快速制造三维立体按钮

来源:sc115.com | 121 次浏览 | 2011-07-06

标签: 三维 按钮 立体 制造 PS制造三维立体按钮 按钮制作

一、在开始此文章之前,先说几句费话:

  1.先看看下面的三维立体按钮,如果觉得喜欢的话,那么您可以继续看下去。




图一

  2.教程Photoshop7.0中实现,如参数设置面板有所不同,请参照7.0版本。

  关注photoshop制作效果的网友们都知道,前段时间流行苹果机的图标,于是无论是会使用photoshop的还是追求真善美的朋友,都在自己的桌面掀起了一番应用苹果机图标风潮,其中应用最多数的数按钮。当时的按钮多数都是简洁的三维立体按钮加文字,并且颜色也偏向于素色。如:



图二

  如今,三维立体按钮又发生了大变化!什么大变化??先别担心,技术上的变化不多,,其实只是将素色加以发挥,向彩色倾移,并加上些色彩丰富的小插图而已,留意文章开始的图标示例就明白了。

  好了,闲话少说,下面就让我以制作我的论坛图标为例子,一起进入三维立体按钮制作的教程

  二、过渡色的圆

  先打开PHOTOSHOP7,按 Ctrl + N,新建一个 Width=48 pixels,Height=48 pixels 的空文档,设置选择工具为“Elliptical Marquee Tool-圆形”选择工具,双击鼠标,在工具面板上部出现的属性设置栏里设置:Feather=0 px,Anti-aliased,Style=fixed Size,Width=45 px,Height=45 px。设定选区为直径是45的圆。



图三

  移动鼠标到画布上,点击鼠标左键,画出一个固定大小的圆形选择区。注意了,不是将选区置于画布中间,而是按键盘上的方向键,向左向上各移动 2 pixels,目的为后面做按钮阴影,突出按钮立体感做准备。当然,做完了过渡填充再移动也可以,这个由个人习惯定。



图四

  任意选择一种前景色,并设置背景色为同一色系中颜色较浅一种,如图五:



图五

在这里多插入几句可有可无的话,我们在选择同一色系的颜色时,如果已经确定了前景色,想设置背景色,那么双击背景色,弹出颜色拾色器-Color Picker,此时鼠标形状就会变成一个吸管,就可移动此形状的鼠标到各个可取色的面板去选择一个喜欢的颜色,在此吸取前景色,这时拾色器自动选择了前景色,那么我们就可以在拾色器中快速地选择到同一色系不同色深的颜色了。

  选择“ Gradient Fill Tool -过渡填充工具”,在属性工具条中设置过渡色为“Foreground to Background-前景色到背景色”,过渡模式为“Linear Grandient-线形过渡”,设置完成后属性工具如下图所示:



图六

  在选区中按“Shift”键,由上至下画过渡色,此步骤完成如下图:



图七

  三、初步三维立体感

  按“Ctrl + D”消除选区,双击此层应用层样式“Add a Layer Style”,在“Layer Style-层样式”设置面板中选择“Drop Shadow-下拉阴影”,参数设置为:Distance=2,Size=2,其它为缺省值。如图八所示:



图八

  再勾选“”,参数设置为: Blend Mode=Multiply,其它为缺省值。如图九所示:



图九

此步骤完成画布上已经初步显示出三维立体按钮的基本模样了,如下图:



图十

  四、加强三维立体感

  新建一个图层,选择“Elliptical Marquee Tool-圆形”选择工具,画一个椭圆,长约为圆形的二分之一,宽约为圆形的三分之一。选择前景色为白色,并按“G”把工具换成过渡工具,设置过渡色为“Foreground to Transparent -前景色到透明”,在选区中按“Shift”键,由上到下填充过渡色,效果如下图:


[1][2]下一页

搜索: 三维 按钮 立体 制造 PS制造三维立体按钮 按钮制作 

最热-按钮制作

导航按钮打造

弯曲管道

ps快速实现按钮浮动

ps 创建凹陷按钮(3)

ps实现梦幻水晶按钮

ps 创建凹陷按钮(2)

打造人像网页按钮

水晶按钮

立体按扭的打造

ps轻松打造web2.0水晶风格按钮

ps绘制精致金属边框水晶球按钮

打造网页翻转按钮

打造晶莹剔透的水晶按钮

素材
古代陶器PNG图标古代陶器PNG图标
蓝色邮件PNG图标蓝色邮件PNG图标
五颜六色的气球高清图片5五颜六色的气球高清图片5
五颜六色的气球高清图片4五颜六色的气球高清图片4
五颜六色的气球高清图片3五颜六色的气球高清图片3
五颜六色的气球高清图片2五颜六色的气球高清图片2
五颜六色的气球高清图片1五颜六色的气球高清图片1
中国龙雕塑高清图片6中国龙雕塑高清图片6
中国龙雕塑高清图片4中国龙雕塑高清图片4