您好,欢迎来到素彩网!

立体按扭的教你制作

来源:sc115.com | 267 次浏览 | 2015-09-21

标签: 按扭 制作

Photoshop 6.0立体按扭的制作

在网页上,按扭是实现交互效果的重要途径。创建和设置完整的按扭可以引导浏览者选择自己喜欢内容或栏目,因此按扭的生动性、新颖性直接决定了页面的访问量。虽然网页按扭的形式多种多样,甚至有些看起来也很复杂,但只要掌握Photoshop 6.0的基本知识,运用各种技巧,都是可以实现的。而且较之于其它同类处理软件,实现这些效果更为简单。在这一实例中,就介绍利用Photoshop 6.0强大的图形处理功能来制作富有立体感的按扭。

制作立体按扭的技术要领是各种渐变颜色的运用,以实现逼真的3D效果。下面以Step-by-Step的形式,分步来介绍。

、按Ctrl+N键,新建一个Width(宽度)为300 pixels,Height(高度)为150 pixels,分辨率为72 ppi的RGB图像文件,并选择喜欢的颜色填充背景图层;

、激活通道面板,单击Create new channel按扭,新建一个名“mask”的通道;

1

、选择矩形工具,制作一个白色矩形,取消选择,选择mage > Adjust > Levels命令,在Levels面板上设置参数为140,1.00和150。然后回到Layer面板,新建一层,选择Selection > Load Selection命令,在将通道转成选区;

2

、单击按扭,或直接使用快捷键“D”,使前景色为黑色,背景色为白色。选择角度渐变工具,然后从矩形选择区域的左下角按下鼠标并拖动至右上角,此时可得效果如错误!未找到引用源。3所示效果:

3

、选择Select > Modify > Contract命令,激活Contract Select对话框,输入数值2,使选择区域缩小2个像素单位:

4

、使用合适的颜色填充选择区域,然后取消选择,这时的按扭效果如效果图5所示:

5

按扭已初步实现了立体效果,具有了我们较为熟悉的Windows风格,但略显单调。下面继续介绍在此基础上添加修饰,使其更具有三维效果。

下面几个步骤将实现在按扭上内嵌入几条立体纹理。方法较为简单,但效果不错。就先跟着我来做吧:

、新建一图层Layer 2。选中单行选择工具,按住Shift键的同时,在按扭适当位置上单击,得到多个成行的选择区域。

6

、选择Edit > Stroke命令,在打开的对话框中设置线宽为1像素单位,颜色为白色。单击OK确定,取消选择,可以得到如效果图7所示的效果:

7

、复制Layer,在新图层上,按Ctrl+I键取反色。单击按扭,选择移动工具,使用键盘的方向键,向上按击一下,使黑色线条向上移动一个象素单位,效果如效果图8所示:

8

、使用快捷键Ctrl+E向下合并图层。然后用移动工具将合并的三条线段,调节至适当位置。若想将超出按扭外的多余部分删除,可以在按住Ctrl键的同时,在Layer面板上选中Layer 1图层名得到选择区域,然后按Ctrl+Shift+I键反选,再按Delete键删除即可,效果如效果图9:

9

完成了纹理嵌入,下面给按扭文字位置也做出适当效果:

、再新建一层,用矩形选择工具在需要输入按扭文字的位置做出一矩形区域,如效果图10

10

、选择线形渐变工具,定义好较深的前景色和适当的浅色背景色,加强阴影产生的对比度。并在按住Shift的同时,用鼠标自上而下拖动,填充渐变色,产生内凹的效果,使用Ctrl + D键,取消选择,得如效果图11效果:

11

、新建一层,使用文字工具输入需要的文字,就完成了按扭的制作:

12

本例制作的只是按扭的外型,将按扭放置到网页上时,只要根据需要,设置其目标链接就能实现按扭特有的交互功能,相信效果酷酷的按扭,肯定能给自己的主页增加一定的访问量。:)

使用Photoshop还可以制作出很多各种眩目的效果,但基本方法都是一样的,只要发挥主观能动性,熟练运用各种技巧,相信各位读者都能做出自己满意的作品。


搜索: 按扭 制作 

最热-按钮制作

ps 创建凹陷按钮(1)

ps打造逼真的电梯按钮

ps:打造漂亮蝴蝶琉璃按钮

精质按钮

播放器按钮的打造

光滑透明的icon—ps的图层样式

教你用PS打造精致金属质感水晶按钮

ps打造一款美女水晶按钮

ps快速制造三维立体按钮

导航按钮打造

弯曲管道

ps快速实现按钮浮动

ps 创建凹陷按钮(3)

素材
叫声24叫声24
警报声10警报声10
警报声9警报声9
警报声5警报声5
警报声4警报声4
脚步声21脚步声21
脚步声20脚步声20
脚步声17脚步声17
脚步声26脚步声26