1、实现这个效果,确实比你想象的要简单.只需几个渐变和一些特效.
在此例中,最终的结果是做一个胶囊型的按钮,如果你选用其它图形,别忘了使图形的角更平滑些,这样才能得到更好的效果.具体方法是:
gaussian blur 你要平滑的地方并进行brightness / contrast调整.
开始.
新建一透明层, 画出一个黑色胶囊状的图形.方法是:先画一正圆切换移动工具(move tool)按住shift向右拖动鼠标, 将复制的圆形放在合适位置,接着画一长方形将两个原形连接起来并填充黑色.合并图层,这样你就得到了胶囊按钮的图形..
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-15.gif[/img]
2、新建一层,改变图层混合模式为screen. 选择合适的前景色和背景色,从按钮的顶部到底部拖一垂直渐变.在这里我用了0x2654a0 和 0xafcbee做前景色和背景色. 注意:我所选用的颜色都不是网页安全色(web-safe colors).如果你要把此按钮放在网页上的话,可能需要寻找更好的颜色 ,否则别人看不到不是太可惜了吗. right?
按住ctrl+g将渐变层置入按钮图层中.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-16.jpg[/img]
3、ctrl+点击黑色按钮图层, 将选择区域保存为通道. 选择你所创建的通道, 保持选择区域浮动, 收缩(contract)它 (具体收缩的数量要看你图像的大小而定) 直到如图所示.
对于其它样式的图形, 例如文字一类有锐角的图形, 你可能需要应用 select > modify > smooth 来平滑图形,具体的数量根据具体情况而定.
反转选择区域.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-17.jpg[/img]
4、保持选择区域浮动按 q进入快速蒙版.在按钮的底步画一长方形并填充黑色,最终效果如图,其中红色部分代表未选中部分.
快速蒙版比通道的好处就是,它能立刻让我看到效果
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-18.jpg[/img]
5、用高斯模糊(gaussian blur) 和亮度/对比度( brightness / contrast )进行调整, 如图. 按 q退出快速蒙版模式再次将选择区域存入通道中.这一步是为按钮的顶部加入高光
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-19.jpg[/img]
6、复制 先前收缩的alpha channel, 并进行gaussian blur. 这一步将给按钮的底部加入高光. 因为它没有硬边,所以我们不需进入快速蒙版 模式.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-16.gif[/img]
7、如果你回到层面版, 新建一层读取我们为按钮顶部高光建立的alpha通道选择区域. 选择层>新建图层蒙版>显示选择区域( layer > add layer mask > reveal selection).
点击层图标确保我们是在图层上工作而不是图层蒙版. 选择渐变工具, 在渐变属性面版中选择白色前景色到透明的渐变. 从按钮顶部到中部做一线性渐变填充.将不透明度调到到80%.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-20.jpg[/img]
8、新建一层选择混合模式为color dodge. 读取我们为按钮底部高光建立的alpha通道的选择区域. 再次选择层>新建图层蒙版>显示选择区域(layer > add layer mask > reveal selection).
选择渐变工具设置为白色前景色到透明渐变, 从按钮底部到中部拖动. 双击该图层,打开层特效面版(layer style),将填充不透明度(fill opacity)调到到35%.注意,是”填充不透明度(fill opacity)” 一定要看清楚.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-21.jpg[/img]
9、你知道我非常喜欢闪烁的光线.这是苹果按钮所没有的,我想它的效果非常不错. 如果你没有看过我先前的chrome tutorial, 这里将告诉你如何做这些闪光:
新建一层选择一个巨大的soft brush. 点击停留少许时间, 接着, 不要移动画笔的中心点, 按下 [ 键选择一个稍小的soft brush再点击并停留一些时间. 接着再按一次 [键 选择一个较小的soft brush继续绘制
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-22.jpg[/img]
10、现在为原始的黑色胶囊层添加阴影(dropshadow) 特效. 不要选择太暗的颜色; 因为我们是在做苹果按钮, 不是吗? 它是透明的, 所以光线会穿过按钮. 因此最好选择一个接近按钮的颜色做阴影.
现在给按钮加入一些黑色文字. 苹果在mac os x用的是 lucida sans 字体. roman字体 应该也不错.
为文字层加入 阴影(dropshadow)特效. 让阴影稍稍远离文字一些距离,调整阴影的不透明度为80%
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-23.jpg[/img]
11、hey,那就是最终的效果. 如果你还想更进一步并在按钮后加入一些灰线,往下看. 适合的背景图案将使你的按钮显得更加透明.
新建一任务,白色背景.新建一层模式为 multiply.画一水平的黑线 扩展置画部两边.用 移动工具,按下 alt 和 shift 将复制线条向下移动一些. 这样将新建一线条复制层,执行ctrl-e将它与原先的线条层合并.重复此步, 复制,合并, 复制,合并, 直到你有了足够的线条如图.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-17.gif[/img]
12、调整不透明度至7%. 干的不错!
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-24.jpg[/img]
13、如果你真想给人们留下深刻印象, 你可以使按钮后的线条看起来有一些折射. 一个小技巧, 例如创建一个用于置换(displacement )的地图,如下图.
我制作这幅图的方法是选择先前收缩的 alpha 通道, 读取选择区域, 应用 circular shapeburst(在kpt3的gradient designer工具中), 并进行高斯模糊(gaussian blur).
如果你没有kpt3, 那么你或许可以的到相似的结果,方法是:在全黑的通道中用读取先前收缩 alpha 通道的选择区域,进行收缩调整(contracting the selection a whole bunch ),用白色填充选择区域, 读取先前收缩的 alpha 通道选择区域, 应用大数值的 gaussian blur.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-18.gif[/img]
14、选择从弹出式菜单选择复制通道( duplicate channel), 在折叠菜单中选择 new. 单击 ok 保存新文件为psd. 这个文件将用做置换的地图.
选中黑线层.alt+点击图层左部的眼睛图标 这将隐藏除了黑线层之外的所有层.调整图层不透明度为100% 这将更易于我们观察. 现在拖动此层到右下角的新建层图标上 ,复制此层. 点击左部的眼睛图标隐藏按钮图层. 现在, 没有选中任何物体, 执行屡镜>变形>玻璃( filter > distort > glass )从下部的菜单中选择读取材质( load texture). 在弹出的菜单中选择我们存储的psd文件点击 ok. 选择较低的变形(distortion 和平滑 (smoothness)设置, ok.
最终的结果可能有一些锯齿.你可以用轻微的 高斯模糊(gaussian blur)和 亮度/对比度(brightness / contrast)进行调整.
现在读取你第一次建立的 alpha 通道 反转选择区域. 按 delete 选择混合模式为 normal.
恢复下部黑线层可视, ctrl-e对这两层进行合并 返回不透明度为7% . 恢复所有图层可视.
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-24.jpg[/img]
完成.
oh, 顺便说一句, 如果你不喜欢蓝色,可以用色相/饱和度(hue / saturation)调整图层轻易的改变按钮的颜色
[img]http://218.28.49.10/supercow/website/library/pmsj/ps/20030329-26.jpg[/img]
（）
