网页图像效果直通车 何勇平 2001年 16期 对初学者来说，一个好的例子比长篇阔论更具说服力，因为例子更形象化，初学者可以现学现用。为此，曾经得力于例子学习的我，来一回别开生面的网页图像效果实例剖析，希望你能从中得到相应技法的诀窍，不多说了，开工！ 　　在剖析前大家先来看一下成品分板图（^16040701a^1）： 　　 特效制作：这是剖析的重点，教你如何制作电线、螺丝、围线面板。 　　 内容编辑区：这里主要是存放网站内容的地方，想插图、写文章任凭阁下您了。 　　 栏目设置区：安排你网站的栏目（如“给我留言”、“给我写信”、“站点向导”之类）。注意：此区域定位可以用两个表格写位。 　　 现在可能有人会问：你那些螺丝、电线是怎么制作的？怎么样将图片变成网页呢？这个不是很难，请你打开Photoshop或ImageReady（建议用这个，里面有弧形选择），我们一一举例说明： 　　#1 一、围线面板的制作 　　 部析（^16040701b^2）：用ImageReady工具栏选择工具的“倒角选取”（如果你用的工具是photoshop，那只能是方形的），先画一个方框。 　　然后用“Alt+倒角选取”减去左下方的角。好了，接下来用快捷键“Alt + ←Backapace”填上前景色。 　　#1 二、电线的制作 　　剖析（^16040701c^3）：填上背景颜色后，新建一个层，接着点击Edit（编辑）→Stroke（描边） →将描边线的大小设为2，最后用投影（Layer→Layer style→Drop shadw），接下来在效果面板中的数值，如^16040701d^4和^16040701e^5所示： 　　 剖析（^16040701f^6）：新建一个图层，然后用“画笔”工具（笔头大小适当，但要求用不模糊的）连接两个孔。（注意：手千万别抖，不然画出来的就不是电线，而是麻绳），接下来用“海浮雕+投影”修饰所画的线（Layer→Layer style→Drop shadw和Bevel And Emboss），如果将投影效果中的Opacity减小一点，电线就会更逼真，OK，电线制作完毕。 　　#1 三、制作螺丝 　　 剖析（^16040701g^7）：首先制作一个浮动的按钮，先用“椭圆选取”画一个圆，填充灰色（你也可以选其它颜色），接着用浮雕（其中的Size大小设为54），然后用投影效果好让螺丝微浮，可以了，合并一个图层，让我们进行下一步，螺丝刀口的设计。 　　 剖析（^16040701h^8）：如果仔细研究一下，你会发现开口的地方其实就是用两条线（一黑一白），中间的间隔竖条是用“矩形选取”选择适当大小，然后填充颜色（颜色要比旁边的深），填充后就可以用线条画两边了，是不是很简单呢？顺便教你一个小技巧，在画直线的同时按住Shift键，这样你画直线就不会偏了。 　　#1 四、切割图片 　　 我们还是用图片成品当实例说明一下：我是先在ImageReady制作完图片，再用Fireworks的“切割”工具进行切割，接下来就可以用表格定位，用网页常用手法（插图以及单元格背景）制作完成这个网页（^16040701i^9）。 　　 另：需要辅助文件的朋友可以与我联系（laohe2000@263.net），也可以到我的网站（www.80cn.com）下载文件包，里面有PSD文件各制作完成后的网页（包括切割完成的小图片），以学习为主，切勿全盘引用。