[ps网页制作] photoshop制作网站首页(3):切割网页图片

来源：xuexin.com 薛欣; y; k( K& e2 q; V0 |2 R- a, x, ^
切图是网页设计中非常重要的一环，它可以很方便的为我们标明哪些是图片区域，哪些是文本区域。另外，合理的切图还有利于加快网页的下载速度、设计复杂造型的网页以及对不同特点的图片进行分格式压缩等优点。 1. 使用工具箱中的“切片工具”在标题部分的左右各切一刀，使用“切片选择工具”双击右侧部分，在弹出的面板中设置切片类型为无图像。因为该部分是纯色，为了在网页中显示效果相同，设切片背景为黑色，这样该部分输出成网页后将由透明占位符和黑色背景色代替，如图 所示。 / Z# l8 C/ ^- s* l) ^
/ O0 U! p4 o8 @3 O. I

  g+ h7 q" k, s  S3 d, m0 ^& O" t" s! l! W( ~; b1 [
图
- k% u9 g+ w% n4 y: f" \$ T+ Q& [/ J# T5 W
2. 使用切片的固定大小，设置宽度为“68”，高度为“40”，这次是切割的导航条按钮，将切片和被切对象对齐，切的时候要小心，避免切片之间重叠，如图1-3-2 所示。   [+ N# m: ^8 D1 J  n; k1 X5 h
9 g$ G1 a* F2 l  D, j  [6 H
, O7 B: b; G* u& p# {
图1-3-2
  n. C& i) I% ^7 p$ g6 u
7 `3 l% r+ Q5 H, s& Z5 X4 C) a; ? 3. 使用同样的方法将其它导航条按钮切割，注意最后一个“管委会”按钮是三个字，因此设置的切片宽度要大，如图1-3-3 所示。需要注意的是，切割的时候要注意平衡，比如右侧切割了，那么左侧也要等高的切一刀，这样输出成网页的时候不容易乱。 # C9 _$ i% d( d# z/ x

" H# w5 G; V4 ]0 n9 y
( V8 S0 `& `* o: e# O
1 m! T! F1 Q7 u( h图1-3-3
8 }! t6 z" y" V* l4. 切割方法同上，注意切片左上角的编号。下一行切片14 和15 共两刀，再往下16、17、18 共三刀，其中17 为纯色，因此设为无图像，并用相应的颜色标识，如图1-3-4 所示。后面的方法基本相同，需要把在Dreamweaver 中处理的纯色背景部分设为无图像，并以相应的切片背景色填充。如果某个图层的范围正好是要切割的大小，可以直接使用“基于图层的切片”功能。 0 {/ ?& V( a. h& x
7 b+ {; `% B+ p

# g+ @8 q5 `/ j2 q1 P4 ]4 E) x6 Z$ `  B0 y
图1-3-4
" H( ~% [1 g4 T0 d" A! U
5 |/ \5 u7 \5 Z$ o/ ^% ]) c5. 执行菜单“存储为Web 和设备所用格式”，该命令用于将PSD 源文件输出成网页或是手机等设备所使用的格式。在对话框中进行简单的优化设置，确定后设置输出类型为“HTML 和图像”，并且要输出所有的切片，如图1-3-5 所示。 / j. ?# w$ j% j: T. k

: p0 M2 _% S' [9 t3 e. y
, a9 M) y0 X- i9 ^7 z# X, X$ H. M% Q2 C- [/ w
图1-3-5 + a8 `) i% E+ X& A1 P
0 B, Q) S+ j# b7 v: Z
举一反三：
' A# x5 ?4 Z: s! j+ f尝试使用切图工具对已有的版面进行切割，并注意切割的技巧。
6 W" ~9 {4 S8 k9 e1 \) W
; _, \6 I; z4 ]& sphotoshop制作网站首页(1):首页主体制作
$ q+ ?; Y' g5 t. ^6 A6 G* @' B6 ]
( W) G% P9 t: `$ X+ Dphotoshop制作网站首页(2):首页内容的制作
0 t- Q' G- H* b/ m- n) j
' |0 \/ ~0 j! N$ H
8 q% v: L8 A& qphotoshop制作网站首页(3):切割网页图片' H8 S, I4 R% O

1 U; o' I3 b: uphotoshop制作网站首页(4):制作导航菜单
" n- V/ y; I4 o1 Z5 @2 s* e( t# J0 J9 c+ R8 h" e
photoshop制作网站首页(5):添加Flash视频9 @/ Y' W( N/ s

! w! {+ q% h9 v8 Qphotoshop制作网站首页(6):控制版面与插入Spry对象