网页图像效果直通车

Author: 何勇平 Date: 2001年 16期

?牐牰猿跹д呃此担桓龊玫睦颖瘸て鄹咚捣Γ蛭痈蜗蠡跹д呖梢韵盅?现用。为此,曾经得力于例子学习的我,来一回别开生面的网页图像效果实例剖析,希望你能从中得到相应技法的诀窍,不多说了,开工!
  ?牐犜谄饰銮按蠹蚁壤纯匆幌鲁善贩职逋迹╚16040701a^1):    
      特效制作:这是剖析的重点,教你如何制作电线、螺丝、围线面板。     
      内容编辑区:这里主要是存放网站内容的地方,想插图、写文章任凭阁下您了。    
      栏目设置区:安排你网站的栏目(如“给我留言”、“给我写信”、“站点向导”之类)。注意:此区域定位可以用两个表格写位。    
      现在可能有人会问:你那些螺丝、电线是怎么制作的?怎么样将图片变成网页呢?这个不是很难,请你打开Photoshop或ImageReady(建议用这个,里面有弧形选择),我们一一举例说明:
  #1    一、围线面板的制作
      部析(^16040701b^2):用ImageReady工具栏选择工具的“倒角选取”(如果你用的工具是photoshop,那只能是方形的),先画一个方框。
  ?牐犎缓笥谩癆lt+倒角选取”减去左下方的角。好了,接下来用快捷键“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文件各制作完成后的网页(包括切割完成的小图片),以学习为主,切勿全盘引用。