1、按钮一、立体按扭的制作在网页上，按扭是实现交互效果的重要途径。创建和设置完整的按扭可以引导浏览者选择自己喜欢内容或栏目，因此按扭的生动性、新颖性直接决定了页面的访问量。虽然网页按扭的形式多种多样，甚至有些看起来也很复杂，但只要掌握 Photoshop 6.0 的基本知识，运用各种技巧，都是可以实现的。而且较之于其它同类处理软件，实现这些效果更为简单。在这一实例中，就介绍利用 Photoshop 6.0 强大的图形处理功能来制作富有立体感的按扭。制作立体按扭的技术要领是各种渐变颜色的运用，以实现逼真的 3D 效果。下面以 Step-by-Step 的形式，分步来介绍。按 Ctrl+N 键，新建一
2、个 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所示效果：图 3选择 Select Modify Contract 命令，激活 Contract Select 对话框，输入数值 2，使选择区域缩小 2 个像素单位：图 4使用合适的颜色填充选择区域，然后取消选择，这时的按扭效果如图 5 所示：图 5按扭已初步实现了立体效果，具有了我们较为熟悉的 Windows 风格，但略显单调。下面继续介绍在此基础上添加修饰，使其更具有三维效果。下面几个步骤将实现在按扭上内嵌入几条立体纹理。方法较为简单，但效果不错。就先跟着我来做吧：新建一图层 La
4、yer2。选中单行选择工具，按住 Shift 键的同时，在按扭适当位置上单击，得到多个成行的选择区域。图 6选择 Edit Stroke 命令，在打开的对话框中设置线宽为 1 像素单位，颜色为白色。单击OK 确定，取消选择，可以得到如图 7 所示的效果：图 7复制 Layer，在新图层上，按 Ctrl+I 键取反色。单击按扭，选择移动工具，使用键盘的方向键，向上按击一下，使黑色线条向上移动一个象素单位，效果如图 8 所示：图 8使用快捷键 Ctrl+E 向下合并图层。然后用移动工具将合并的三条线段，调节至适当位置。若想将超出按扭外的多余部分删除，可以在按住 Ctrl 键的同时，在 Layer
5、面板上选中Layer 1 图层名得到选择区域，然后按 Ctrl+Shift+I 键反选，再按 Delete 键删除即可，效果如图 9：图 9完成了纹理嵌入，下面给按扭文字位置也做出适当效果：再新建一层，用矩形选择工具在需要输入按扭文字的位置做出一矩形区域，如图 10图 10选择线形渐变工具，定义好较深的前景色和适当的浅色背景色，加强阴影产生的对比度。并在按住 Shift 的同时，用鼠标自上而下拖动，填充渐变色，产生内凹的效果，使用 Ctrl + D 键，取消选择，得如图 11 效果：图 11新建一层，使用文字工具输入需要的文字，就完成了按扭的制作：图 12本例制作的只是按扭的外型，将按扭放置到
6、网页上时，只要根据需要，设置其目标链接就能实现按扭特有的交互功能，相信效果酷酷的按扭，肯定能给自己的主页增加一定的访问量。使用 Photoshop 还可以制作出很多各种眩目的效果，但基本方法都是一样的，只要发挥主观能动性，熟练运用各种技巧，相信各位读者都能做出自己满意的作品。二、3d 导航按钮1、 新建 RGB 文件200 宽*200 高 、选一种颜色填充背景，新建一层，画一个圆角矩形，缩小选区3个像素，如图。2、 新建一层，Ctrl+Shift+I 反转选区，用黑色填充；然后 Ctrl+A、Ctrl+X，将这层内容存入剪贴板。3、回到圆角矩形层，按着 Ctrl 单击层调入选区，Ctrl+Sh
7、ift+V 粘贴，做出黑色边框。4、在粘贴后自动建立的遮罩层上使用模糊滤镜：Filter-Blur-Gaussian Blur3.5，模糊值与导航按钮的立体感成比。5、点击圆角矩形层，按 Ctrl 和方向键向上、向右各移动一个像素。然后为这一层添加阴影，内嵌线条，导航文字，使用其它色彩，导航按钮就完成了如果要强化边缘，可以在这步移动之前新建一层，用白色描边：Edit-Stroke（Outeside、1） ，层合成模式选Overlay，层透明度降到（ 60-70）%。6、应用示例。下图是参考 EyeBall 的导航栏做的，我们将不断把国外站点的优秀作品、界面做出来，介绍给大家。敬请期待。三、按钮
8、1、 新建 RGB 文件200 宽*200 高 、建立一个新层，用圆形选取工具拉出一个正圆选区（按 Shift） 。2、确定前景为白色、背景黑色。选择圆形渐变工具，从左上角向右下角拉一条渐变线。3、缩小选区（SelectModifyContract ）或者根据实际需要用做一个选区（建议用工具再选取一个小圆，这样更平滑）然后将选择区域转动 180 度（ EditTransformRotate 180）4、再缩小两个像素（SelectModifyContract ）2。第二次旋转 180 度（EditTransformRotate 180）如左所示，注意不要取消选区。5、现在调色：Ctrl+U 打
9、开调色板，选中 Colorize 自由调整。可以再反转选区，渲染外框色调，最后添加阴影，至此按钮效果应该不错了到这里不禁想说一下：其实每一种物件、效果制作，步骤和细微处伸缩空间都很大，大胆处理，不拘一格，会出现一些你预想不到的效果。6、应用示例。四、外凸按钮1、新建 RGB 文件200 宽*200 高 、用纹理填充背景，新建一层，做一个正圆选区，Select-Modify-Save Selection指定保存通道名，确定，羽化边界：Ctrl+Alt+D2，按D设置默认前、背景色，以 Radial Gradient tool 从右下穿过左上边缘一点做渐变。2、Select-Modify-Load
10、 Selection选择前一步保存的通道，确定，缩小三个像素点：Select-Modify-Contract3， DEL删除中间部分。3、新建一层，在中间做一个比上面删除部分小一点的圆形选区，Select-Modify-Save Selection指定保存通道名，确定，羽化边界：Ctrl+Alt+D2 ，以 Radial Gradient tool 从左上穿过右下边缘一点做渐变。4、Select-Modify-Load Selection选择前一步保存的通道，确定，缩小两个像素点：Select-Modify-Contract2。5、现在前景设为白色，按住 Alt 键从纹理层吸取背景色，以 Ra
11、dial Gradient tool 从左上往右下做渐变，然后将 Layer 1 层 也就是删除了中间部分那一层的合成模式改成Overlay，外凸按钮就做完了。注：下图用 Ctrl-U 对背景层和按钮层进行了色调的调节，以使颜色更统一五、为按钮加上材质1、首先建立一个 14585 pixels 的 RGB 模式的图象，然后将你喜欢的图像载入其中。2、 在通道（channels）中建立一个 Alpha 通道。3、 然后做出矩形立体按钮。4、回到 RGB 模式，执行“图像”（Image）“应用图像”（Apply Image）命令，打开“应用图像”对话框，将你所引入的图像层与 Alpha1 通道进行
12、合并，对话框设置如图5、设置完成后，点 OK，即可将你喜欢的图像加入到你的按钮中。六、一种按钮的三种实现方法（外挂滤镜）下面有三种按钮的效果，大家先来欣赏一下：分别是感觉不错吧！猜猜各是用什么完成的。猜不出？好，让我来打开迷底！从左到右，一是用老牌 KPT 滤镜，一是用 Eyecandy4000 滤镜，第三种是直接用外photoshop 中自带的滤镜。今天先说老牌 KPT 滤镜的实现方法：新建一个 500 X 500 图象，背景色设为黑色。拖动水平与垂直辅助线到文件的中间。(按 Ctrl+R 使文件窗口显示标尺)选择 Elliptical Marquee 工具，按 SHIFT+ALT 键的同理
13、拖动鼠标，在文件中间画一个圆形选区。新建一层 , 命名为 chrome base. 起动 KPT 5 Shape Shifter,应用 janspeed chrome，并使用 COOL KITCHEN 来设置图象。点 创造一个新层，命名为 reflective sphere。在中间按 SHIFT+ALT 键再画一个比之前小的圆形选区。再次运行 KPT 5 Shape Shifter 应用 janspeed sphere 效果。记住保留选区。在 reflective sphere 层下面新建一层，命名为 sphere shadow。设置 SELECT MODIFY EXPAND,将选区扩大 2
14、pixels，并填充上白色。按 Ctrl+D 取消选区。应用高斯模糊： Go FILTER BLUR GAUSSIAN BLUR，Radius 1.5 pixels.在 Sphere shadow 层上面，Reflective Sphere 层下面新建一层。按住 Ctrl 点击 Reflective Sphere 层，获得些层选区。将选区扩展 1 pixel： MODIFY EXPAND 。填上黑色。取消选区，应用高斯模糊：FILTER BLUR GAUSSIAN BLUR. Radius 1 pixel.选中 sphere shadow 层，按键盘上的键，向下移动 1 pixel ，向右移动
15、 1 pixel to the right。效果完成！看看效果：再来看看 Eye Candy 4000 制作的过程与效果：新建一个 400 X 400 背景色为黑色的文件。按上个例子的方法在中间划好一个圆形选区。点击按钮 新建一层，命名为 chrome base。选择命令：Filter Eye Candy 4000 Chrome，应用 janspeed4 bevel preset。设置如下：Environment map: Porch,Bevel Width: 1.00,Bevel Height: 97,Smoothness: 50,Ripple Thickness: 56,Ripple Wi
16、dth: 2.46,Bevel Placement: Inside Marquee and Random Seed: 550.选择命令：IMAGE ADJUST HUE/SATURATION: 设置：HUE: 190, SATURATION: 5, LIGHTNESS: 0. 注意到光影效果方面不大对，现在来调整一下： EDIT FREE TRANSFORM，使它向左边稍稍旋转。新建一层命名为 reflective sphere。在中间位置，按住 SHIFT+ALT 键，在中间划另一个圆圈，记得要比原来的小。运行 KPT 5 Shape Shifter 并应用 janspeed sphere
17、custom preset 点击 OK. 记住要保留选区。在 reflective sphere 下面新建一层。命名为 sphere shadow。选择命令： SELECT MODIFY EXPAND 设置扩展为 2 pixels 并填充上白色。按 Ctrl+D 删除选区。选择命令：FILTER BLUR GAUSSIAN BLUR. 设置 Radius 1.5 pixels.在 Sphere shadow 层上面，Reflective Sphere 层下面新建一层。命名为 black sphere shadow。按住 Ctrl 键并点击 Reflective Sphere 层，获得此层的选区
18、。选择命令：MODIFY EXPAND 设置扩展 1 pixel 并填充上黑色。删除选区(Ctrl+D)，运行命令：FILTER BLUR GAUSSIAN BLUR，设置 Radius 1 pixel。点击 the sphere shadow 层，使其处于当前编辑状态，向下向右各移动 1 pixel。效果完成。看实力的时候到了，用 photoshop 自带滤镜制作的过程与效果：新建一个 400 X 400 背景色为黑色的文件。用鼠标拉出两条辅助线，一条垂直，一条水平。选择 Elliptical Marquee 工具，在中间按住 SHIFT+ALT 键，拖动鼠标，画出一个圆形选区。填充白色。按
19、上面的方法再画一个圆形选区，大小比上一步的小。按 “delete”键删除选区内的白色，做成一个圆环。按住 Ctrl 键点击第二层。去到通道(channel) 面板，新建一个通道(Alpah 1)，填充上白色。复制 Alpha 1 通道，按 Ctrl+D 删除选区。添加高斯模糊： FILTER BLUR GAUSSIAN BLUR. Radius: 5 pixels。按住 Ctrl 点击通道 Alpha 1 获得选区，在通道 Alpha 2 中反选 SELECT INVERSE 同时填充上黑色。在通道 Alpha 2 上全选，选择 EDIT COPY 并粘贴到一个新窗口，命名为 CHROMEBA
20、SE ，保存成“psd” 格式文件，关闭它。返回层面板，点击任意一层，使其处于编辑状态。打开一张图片作为镜像图片。目的是为了在制成的按钮中做一个球面的镜像。把打开的图片 copy 到编辑的文件中：按快捷键 Ctrl+A 全选图片， EDIT COPY 并粘贴到编辑文件的新一层上 (Layer 3)。如果打开的图片比编辑的文件小，小于 400X400, 使用 FREE TRANSFORM 工具伸展它。全选 (Ctrl+A) 并 IMAGE CROP。点击 Layer 3, 应用滤镜：FILTER DISTORT GLASS。导入之前保存好的材质文件，使用下面的设置：DISTORTION: 18,
21、 SMOOTHNESS: 15, SCALING: 100% 按 OK 确定。在当前工作层 layer 3 中按住 Ctrl 点击 layer 2 来获得圆环的原始选区。选择命令：SELECT INVERSE 接着按 DELETE 键删除无用的部分。在IMAGES/BRIGHTNESS/CONTRAST 和 HUE/SATURATION 中调节颜色。将前面教程中制作的反射镜效果放置于铬环中间。七、金属按钮新建一大小为：500x500 pixels 的文件。新建一个层，并用 50%灰色填充。在菜单上操作：Filter（滤镜） Noise（杂色） Add Noise（添加杂色）. 将数目（amou
22、nt）设为 35, 选择 Gaussian（高斯分布）和 Monochromatic（单色）.Filter （滤镜） Blur（ 模糊） Motion Blur（动态模糊）. 75 Pixels Image（图像）) Adjust（调整） Brightness / Contrast（明暗/ 对比度）将亮度设为 -10, 对比度设为+35 在图层面板上双击该层将其改名为 Full Metal Texture 新建一个通道, 将其命名为：Rounded Box 。在中央建一如图的拐角平滑的方块。将该通道拖到通道面板的按纽 上以得到该通道的一个复制。 接下来把新通道拖到按纽 上, 这样我们可以得到这
23、个方块的选区。 将选区高斯模糊 18 像素: Filter（滤镜） Blur （模糊） Gaussian Blur（高斯模糊）. 18 pixels 然后再依次高斯模糊?9 pixels, 6 pixels 最后再一次 3 pixels. 总共 4 次的模糊！反选： Ctrl+Shift+I, 然后 edit(编辑) fill(填充)black( 黑色) 。再次反选：Ctrl+Shift+I。 收缩选区 48 pixels：Select（选择） Modify（编辑） Contract（收缩）. 16 Pixels, 然后重复两次即可。接下来， Ctrl+Alt+D ，填入羽化值 25。然后用
24、50%灰色填充选区。 回到第一个通道（没有经过模糊的）, 点击按纽，你可以看到你得到了一个选区。 现在回到图层面板, 右键点击图层 Full Metal Texture, 在下拉菜单上选择 Layer Via Copy（通过拷贝的图层）. 这时将出现一个新层，上面只有原图层选区内图象的复制。双击该图层并将其改名为?Metal Texture. 接下来，选择图层 Full Metal Texture layer, 用暗灰色填充图层。 回到通道面板, 把通道 Rounded Box 拖到按纽 上以得到一个选区 . 再回到图层面板, 点击 新建一个层。并把新层拖到层 Metal Texture 的下
25、面. 并用一中亮的灰色填充选区.双击该层将其改名为“Plain Gray“.点击层 Metal Texture 前的眼睛的小图标使该层暂时隐藏。选择图层 Plain Gray, 然后在菜单上 Filter（滤镜） Render （渲染） Lighting Effects（光照） . 点击左图可放大图像，你可以看到具体的参数设置。需要注意的是用了两个光源，一个点从左上方向右下方射的点光，另一光源是全光源。另：可通通过把光照面板左下方的小灯泡拖到光照区以增加光源。 光照完成后，双击完成光照的层将其改名为： Lighting Effects. 按住 ctrl 键点击该层，然后高斯模糊该层 6 pix
26、els： Filter（滤镜） Blur（模糊） Gaussian Blur（高斯模糊）. 按下来，点击被隐藏的层，也就经过光照的层的上一层 Metal Texture。这时层 Metal Texture 将不再被隐藏，将其图层混合模式（ blending mode）改为：overlay(叠加 ).把层 Lighting Effects 拖到按纽 , 这时我们得到了它的一个复制。把新层拖到层Metal Texture 上方, 把不透明度改为 30%, 图层的混合模式（blending mode）改为颜色减淡（ Color Dodge）. 选择层 Metal Texture, 然后在菜单上 Im
27、age（图像） Adjust （调整） Brightness/Contrast（明暗对比度）, 把对比度变小直到合适的效果. 选择层 Lighting Effects ,然后我们为它加上投影：用右键点击它，然后选 Effects（效果）最后，选择灰色的背景层： Filter（滤镜） Render （渲染） Lighting Effects（光照） . 但是记得把纹理通道（texture chanle）设为无（None）.八、如何做矩形立体按钮1、 首先建立一个 130120 pixels 的 RGB 模式的图象，然后在图形中选取一个矩形范围，并填充上你所需的颜色。如图 2、然后按图 2 所示拖
28、出 8 条辅助线。（注：在沿辅助线边缘选取范围时，最好选中“View（视图）Snap To Guides（紧贴网格）”命令，以便选取范围沿辅助线位置进行定位选取。3、用多边形套索工具在矩形上部沿辅助线进行选取，如图 34、按 Ctrl+L 打开色阶（Levels）对话框，将选取范围的图象增加亮度； 5、重复 3、4、步，（注意调整左侧边缘的亮度时，通常比上部边缘暗，以区分上部边缘的不同光线照射亮度；调整右侧边缘的亮度时，下部边缘色应略暗于或右侧边缘。6、隐藏参考线（Ctrl+；），最后一个标准的矩形按钮就呈现在我们面前。 九、三种制作按钮的方法创建一个新层，在该层上用 marquee(直接按
29、M 键就可激活该工具)画一个圆，将其保存到通道 4(save the selection )，然后用一种纹理(Texture)填充，纹理可以自己制作或直接由别的图获得，对所选的纹理 select all (CTRL+A)全部选定，copy (CTRL+C)并复制，然后回到刚建立的圆上,将复制的内容贴上 paste(CTRL+V)。再创建一个新层,选定白色作为前景色 ,然后对其做自左上到圆心的渐层填充 (方向如左图) 并在 Gradient Tool 的对话框中设置 option 为“Foreground to Transparent“ .现在将前景设为黑色,自右下到圆心做渐层填充 (方向如左图
30、 ),设置同 step 2. 如果你想再加上阴影，再创建一个新层，将其移动到 Background layer 和做纹理填充的层之间，用 60%的黑填充.然后将其全部选定(CTRL+A)，并做高斯模糊(FILTER.BLUR.GAUSSIAN BLUR )设置为 2pixels，按下 “V“，将你的阴影用右箭头和下箭头向右下分别移动 3pixels。这里你有 3 种选择来生成 3 种不同的按钮，回到你刚做渐层填充的层，载入通道4(CTRL+ALT+4)，缩小它(SELECT.MODIFY.CONTRACT.6 pixels.)。Option 1 - 平坦按钮 , 按下 DELETE 键.Opt
31、ion 2 - 柔软圆形按钮 , 做羽化 SELECT.FEATHER.3 pixels. 再按下 DELETE 键.Option 3 - 凹形按钮 , 先做羽化 SELECT.FEATHER.3 pixels. 然后 LAYER. TRANSFORM.180 Degrees.并使 inside 为 70% opacity. 注：不知道是不是仍要注意什么问题，我在做这个内嵌式按钮的时侯老是碰到麻烦，作出来的东西看起来不像。如有高手知道是怎么回事，还请告诉我。十、晶莹剔透的 apple 风格按钮苹果公司的网站一如其产品给人以晶莹剔透时尚前卫的感觉，特别是经过细致处理的小按钮和小图像是页面的关键。
32、这里我们分析一个透明胶囊效果按钮的制作过程，以便大家能够举一反三，做出更多透明风格的超酷界面。 (下面是最后的效果 )第一步：绘制基本轮廓 1.运行 PHOTOSHOP，新建一个 450*100 的文件(可自行设定，本人做得这么大是为了能使读者看得更加清楚）。2.将前景色置为绿色（RGB： 156,220,121)，然后选择工具箱中的圆角矩形工具拖制成如图所示的形状。将图层命名为 “形状”,接着双击该图层打开“layer style”对话框，选中其中的“inner shadow”和“bevel and emboss”项用于生成图像的立体效果。第二步：制作阴影图像 1.在路径面板（path)选中
33、新生成的“shape1 clipping path”选项，接着点击“load path as a selection”按钮把路径转变为选区。2.现在我们新建一个图层（命名为“阴影” ）故名思义它是用来制作图标阴影的。选中“ 阴影”图层并将前景色变为比较暗的颜色（14，86,10),接下来使用 “edit”菜单下的“fill”把前景色填充到选择区域中。3.黑不溜瞅的一大块阴影未免显得生硬，我们帮它做做美容修饰一下。打开“filter”菜单下的“blur-gaussina blur”，在“radius”项输入 8pixels 左右，给阴影添加上模糊效果。随后我们把“阴影” 图层的不透明度(opac
34、ity) 改为 60%，并把该图层拖到“形状”图层之下，利用移动工具适当的调整阴影的位置后效果如图。4.新建一个名为“ 黑色阴影”的图层用来增加阴影的层次感（为了效果好，麻烦一点也值：），使用刚才用过的胶襄状选区，将其填充为黑色，然后点击“edit”菜单下的“ free transform”把图像的高度缩小约一半，最后将该层的不透明度设为 4%左右。对了，不要忘记将它拖到“形状”层之下，“ 阴影”层之上，并用移动工具调整到适当的位置。第三步：添加反射光 制作比按钮更浅的反射光效果，并应用图层混合模式和调整透明度产生透明的效果。1.新建名为“反射光”的图层并置于图层面板最上端。2.将前景色置为黄绿色（213，248，153），打开胶襄状选区（点击“形状”图层，打开路径面板，选择“shap1 clipping path ”项后按下“load path as a selection”）。用前景色填充选区。3.把“反射光 ”图层的混合模式设为“color dodge”，使用这种模式时，会加亮图层的颜色值，加上的颜色越暗效果越细腻。将不透明度设为 15%。用移动工具移至图案的偏下方。这样反射效果就形成了。
