彩色有机玻璃效果
001<P class=suojin><IMG height=170 src="http://www.images.com.cn/tutoriall/book/images/photoshop01.jpg" width=220 align=left border=1>从Photoshop6.0新增的Layer Style命令，为网页美术设计带来了丰富而有趣的效果。这个功能在以前的版本中虽然已经有了一个雏形，但远不如现在完整、灵活。
<P class=suojin>这个例子中的效果，所制作的物件有玻璃感，或者说更象是略带透明的彩色有机玻璃制品。这种感觉的产生，主要是因为其中间部分较暗，而左上角及右下角都变得明亮鲜艳。关于所谓玻璃感的由来，其关键就在于对折射光的表现。
<P class=suojin>需要说明一点的是，Layer Style的参数设定与作品幅面大小是密切相关的，幅面大小不同，要达到同样的效果，则参数也不同。尤其是当你将设计好的作品放大或缩小时，效果更明显。我是指改变其分辨率、增减画幅的总像素数量，这时作品的像素数量改变了，但各项参数的数值并未改变，比如立体边的大小，假如原来是16个像素，当缩小作品时，仍为16个像素值，所以相对来说缩小了的作品就会有太大的立体边数值，这一点必须注意。我在制作这个样例时，画幅的分辨率是465个像素见方。
<P class=suojin>调出LayerStyle控制面板的方法很简单。首先，形状必须在新建图层上，当选择了这个作好形状的图层后，在图层控制面板上双击这个图层的预视小图框即可。或者，你也可以选择菜单命令Layer/LayerStyle中的某一项。
002 <A onclick="openPictureWindow_Fever('images/photoshop02.jpg','469','398','photoshop tutorial','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop02x.jpg" width=177 align=left border=0></A><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/011.jpg" width=150 align=left><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/01.jpg" width=150 align=left>
<P class=suojin>
<P class=suojin>
<P class=suojin>首先，在新图层上建立的形状是深蓝色的，然后，请调出LayerStyle控制面板。
<P class=suojin>我用Bevel and Emboss子项使其改变色彩并具备初步的缓和凸起效果，更明显的立体化是由Contour子项完成的。注意光线的投射角度几乎是在正中。这一部分比较简单，但几乎总要用到，所以请大家多作练习，掌握起来并不困难，在此不多述说。
003
<P class=suojin><A onclick="openPictureWindow_Fever('images/photoshop05.jpg','633','432','photoshop tutorial','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop05x.jpg" width=220 align=left border=0></A><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/02.jpg" width=150 align=left>用Contour子项，使形状的边缘有明显的凸起，为了使凸起效果较硬，选择有两个锐利峰值的曲线并对其作了修改，使峰值更高。从左边的图例中可以看到，点击曲线图标本身，可以得到曲线编辑控制版，Photoshop的默认设置，两个尖端在中间高度，但我将它们再调高了一格。如果你要将自己编辑的曲线保存，可以点击曲线编辑控制版上的New按钮，然后在弹出的命名对话框中给它起个名字。注意Save按钮是用于保存整个控制版设置的，如果你的Layer Style有许多自定义内容，而你又要格式化硬盘并重装Photoshop，那么最好先将设置保存到安全的地方。
<P class=suojin>004
<P class=suojin><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop13.jpg" width=150 align=right><A onclick="openPictureWindow_Fever('images/photoshop08.jpg','534','361','photoshop tutorial','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop08x.jpg" width=222 align=right border=0></A>Inner Shadow从词义上应该是指内部的阴影效果，但这次我用它却是为了给立体边缘“打光”，你也可以理解为给边缘加上亮的“影子”。我选择白色，混合模式为Screen。必须有一个较小的Distance值，使影子稍微偏离中心，这样立体边的亮度才会明显。我也给Choke调节了较小的值，使亮度的效果较硬，Choke的值越大，亮度效果越硬。Size很好理解，我也只是给了它一个很小的值，10个像素。如果将它调大，比如20，你会得到一个白蒙蒙的类似磨沙玻璃的效果。
005<A onclick="openPictureWindow_Fever('images/photoshop10.jpg','633','432','photoshop tutoriall','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop10x.jpg" width=220 align=left border=0></A><IMG height=160 src="http://www.images.com.cn/tutoriall/book/images/03.jpg" width=160 align=left>
<P class=suojin>透明感是从现在开始的，过渡填充的影响使左上方和右下方变得明亮，这类似于玻璃物件的折射效果。与曲线编辑相同，点击过渡色图标可以打开过渡色编辑控制版。我并没有编辑从亮色到暗色再到亮色的过渡方式，不过我选择了Reflected填充方式，这种方式会多一次重复填充，并以相反的填充方向进行，结果还是从亮到暗再到亮的效果。这种填充方式很适合用于给圆主体侧面填充过渡色。Hard Light混合模式使色彩产生明丽的效果，你也可以尝试用其它的混合模式，比如Color Dodge、Difference、Luminosity都很有趣。
006
<P class=suojin><A onclick="openPictureWindow_Fever('images/photoshop09.jpg','633','432','photoshop tutoriall','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop09x.jpg" width=220 align=right border=0></A><IMG height=158 src="http://www.images.com.cn/tutoriall/book/images/04.jpg" width=160 align=right>阴影的设置比较容易理解。为了更好地表达半透明玻璃的感觉，阴影色最好不要简单地使用默认的黑色，而应该用与玻璃物件接近的颜色。如果选择有峰值的曲线，将使阴影内部产生明暗变化。记住透明物体的阴影，其内部某些地方反而较亮。这个例子的凸起效果比较简单，所以我只是选择了一个峰值的缓和曲线，使阴影与物件边缘接触的地方有一条亮线。如果凸起的效果比较复杂多变，则可以给阴影选择两个峰值的曲线，并将Size增大，阴影内部将出现更多的明暗变化，用以体现多变的立体边产生的阴影效果。
<HR noShade SIZE=1>
007
<P class=suojin><A onclick="openPictureWindow_Fever('images/photoshop15.jpg','633','432','photoshop tutoriall','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop15x.jpg" width=220 align=left border=0></A>Color Overlay是给物件整体上色的。从上面的样例中似乎看不出多少变化，因为我只是用它稍微调整了一下颜色，减少了部分较亮区域的青色感觉。控制界面很简单，只有颜色选择和混合模式列表，当然还后透明度控制。看上去简单，而这个子项却相当重要，下边的三个例子，都是从现在这个效果开始修改的，从我放在每个样例上面的Color Overlay设置剪屏图可以看到，改变颜色和混合模式，就能得到完全不同的色彩效果，这在为网页设计动态按钮时很有用处。
<P class=suojin>需要注意的是，阴影色也作了相应的改变。
<P class=suojin>这个例子并不复杂，但如果你能灵活运用，实在可以设计出千变万化的效果，你不动心吗？
008
<IMG height=87 src="http://www.images.com.cn/tutoriall/book/images/photoshop18.jpg" width=352> <A onclick="openPictureWindow_Fever('images/photoshop19.jpg','465','458','photoshop tutoriall','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop19x.jpg" width=152 border=0></A> <IMG height=87 src="http://www.images.com.cn/tutoriall/book/images/photoshop20.jpg" width=352> <A onclick="openPictureWindow_Fever('images/photoshop21.jpg','465','458','photoshop tutoriall','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=148 src="http://www.images.com.cn/tutoriall/book/images/photoshop21x.jpg" width=150 border=0></A> <IMG height=87 src="http://www.images.com.cn/tutoriall/book/images/photoshop22.jpg" width=352> <A onclick="openPictureWindow_Fever('images/photoshop23.jpg','465','458','photoshop tutoriall','30','30')" href="<b>javascript</b> :;" target="_blank" ><IMG height=150 src="http://www.images.com.cn/tutoriall/book/images/photoshop23x.jpg" width=152 border=0></A>
<P align=center>
好啊！
页:
[1]
