<b>Photoshop打造彩色玻璃导航菜单</b>[Photoshop设计]

　　本文以Photoshop CS2中文版为例,别的版本的Photoshop在操作步骤上大概会略有差别.先看一下终究效果.

　　终究效果

　　具体操作步骤以下.

　　1.启动Photoshop CS2中文版,按Ctrl+N翻开“新建”对话框,按照需求稍做设置(大小应当能放得下将来的导航菜单)后,单击“肯定”按钮新建一个文档.

　　2.单击图层面板下方的“成立新图层”按钮新建一个图层.挑选工具箱中的“圆角矩形工具”,在选项栏中将其半径设置为15px,然后在新图层上画一个如图1所示的圆角矩形.

　　图1

　　3.目前对上述形状利用以下图层款式.

　　投影:

　　图2

　　内阴影:

　　图3

　　内发光:

　　图4

　　颜色叠加:

　　描边:

　　图6

　　利用上述款式后,得到如图7所示的按钮效果.

　　图7

　　4.目前再次利用“圆角矩形工具”,这一次,在按钮上方画一个小一些的白色圆角矩形,如图8所示.

　　图8

　　5.将这一图层的混合情势设置为“叠加”,并将不透明度设置为30%,则可以得到如图9所示的按钮效果.

　　图9

　　6.接下来复制这些按钮,并将它们布列成一个导航菜单,增添上文本,如图10所示.

　　图10

　　7.挑选工具箱中的“切片工具”,翻开“视图”菜单,确认“对齐”左边有一个对勾,这样可以使切片自动对齐边沿,从而成立出更为精确的切片.利用“切片工具”一个按钮一个按钮的切割,每个切片中包含一个按钮,后果如图11所示.

　　图11

　　8.既然已经做好切片,那么目前可以将其输出为HTML文件,从而为后来的网页计划做预备了.挑选菜单号令“文件｜存储为Web所用格局”,为了得到最好的图象效果,采取如图12所示的设置.设置完毕单击“存储”按钮.

　　图12

　　9.在“将优化后果存储为”对话框中挑选网页文件要保存的位置,并如图13所示输入文件名,挑选保存范例为“HTML和图象(*.html)”,然后单击“保存”按钮.

　　图13

　　这样就会得到一个HTML页面,一个images文件夹,这个文件夹中即包含按钮图片.

　　目前只需求将HTML代码拷贝到别的网页中便可以利用了,不过在拷贝时不要拷贝由Photoshop生成的header/body标签.