来源：xuexin.com 薛欣
/ R5 |& F+ Q" R" h% ?+ R1 h$ s6 j0 ^
因为相对于主体来说，内容部分并不是很容易出彩，所以其设计比主体更加需要清晰的思路，并非常考验制作者的耐心。通常情况下内容部分的主要工作都是在Dreamweaver 中，所以这里我们在photoshop 中所设计的只是一个供参照的外观。
8 ?; K7 i( C0 w8 v0 x% K) y5 s# p
/ ~! ]1 X/ Z2 z 1. 在页面的右侧用矢量“矩形工具”绘制一个淡绿色的背景填充，该绿色的十六进制值为“#eefded”，几乎接近于白色，这是为了突出前景深绿色的文字。这里的文字内容都是虚构的，其十六进制颜色值为“#054d00”，布局的位置如图1-2-1 所示。
8 @0 r/ x, y9 {7 T
8 \: Y; ~+ K+ S @* K) a
! F5 G9 I& T; n' d6 O+ N# e N2 t& q4 l) d, {
$ I6 H$ c" F0 h7 z, d
0 _ t) Q: G T! B9 i6 l
图1-2-1
1 q. H; w, z% q( G
2. 在文字的下面是播放在线视频的地方，我们这里插入一些图片进行占位。图片推荐在Adobe Stock Photos CS3 中进行查找，这是Adobe 提供的一个庞大的图片素材库，包含在Adobe Bridge CS3中，低质量的图片小样是完全免费的。因为网页需较高的下载速度，因此低质量的照片反而更适合于网页设计师。需要注意的是，该搜索功能暂时还不支持中文，所以这里我们搜索“bridge”来下载一些关于桥的照片，如图1-2-2 所示。
& T* P! d4 \3 {3 Y# b% y3 v6 g! Y3 M) u& ^ Y6 N) k" Z
2 r* J& f# W* m" Y* F6 _! R
' E5 D O) B9 c: K2 R$ Q" ~. Q4 z
图1-2-2
8 ~5 U( w# h% b# s/ b 3. 我们用多张“桥”和“花园”的图片合成了这部分的图像内容，这里使用的石桥剪影字体为“方正古隶简体”，合成的方法因为非常简单，这里就不再赘述，如图1-2-3 所示。
% @* a9 Q! Z# ]$ c2 X
& W# z9 J$ G+ P
) f8 t( T0 z8 X, n
- U3 ^5 i X' H* @
图1-2-3
% | \$ j1 d1 d 4. 在下面绘制深灰色矩形，十六进制颜色值为“#2a2a2a”。输入文字“ShiQiao Garden”，字体为“Trajan Pro”，这些均是作为中间的隔断和装饰，如图1-2-4 所示。
6 [2 ], W# n5 u0 }+ H# S w. I
* f3 k6 i7 [4 J4 }+ m9 \- Z9 p3 e* d5 o% u0 @5 c* x3 F- q
# W8 F1 m+ C1 B7 Q( a# y" u
; S5 G7 \7 y0 o+ ^/ ]$ D! O图1-2-4
1 z8 d$ u( H' m. s
5. 在隔断下面再绘制一个较浅的灰色矩形，十六进制值为“#7a7a7a”。在该矩形上面再并排绘制两个颜色更浅的灰色矩形，十六进制值为“#efefef”。这些矩形的绘制主要是用来布局，频繁的使用灰色有两个原因，一是因为灰色通常在设计中表示高级，另外，网页的主体过于鲜艳，使用灰色可以平衡一下，以避免“抢了主角儿的戏”，如图1-2-5 所示。
% y( J) h. O G [- \* K4 K! g" a& S; s
" D( D- ^" K9 f+ B' W5 J( K
# |3 @) f' `" S4 [6 b4 w( [% t8 {
8 R q4 ?" b* b" a8 j% h) V* m
图1-2-5
0 }3 w; _% T0 J& \
9 p M; a: u+ F7 T: Z
; [1 l4 B" [. g) q: f0 y
& E7 ]. V2 S" g0 T/ t5 p8 k Q( O
: p$ u. ]3 J% C& v; A* ~( {8 @
6. 在Adobe Stock Photos CS3 中搜索茶壶和棋子的图片，均在photoshop 中处理为90 X 90 像素的大小。在茶壶层上右击，选择“混合选项”，设置“描边”的参数为大小“6”像素，位置为“内部”，“内部”描边可以保证四个角均为直角，描边的十六进制颜色值为“#067f18”，如图1-2-6 所示。
! w3 z4 H; f- [! C5 l1 M; ^
: A% i# v" P) M7 m& {" l6 A% B1 R
3 j" q" R7 o' [. @6 c
' j N( {+ t3 z2 r- N# J+ }
( J! q7 R3 A$ p0 K% s, \. f
8 D& w+ ~1 r/ v3 c# t
图1-2-6
- I. L- }5 \* n. @/ P$ N% |
3 O; E1 ]- j) o( j( S9 {8 C 7. 在茶壶层单击右键，选择“拷贝图层样式”，如图1-2-7 所示。接下来再选择棋子层, 单击右键选择“粘贴图层样式”，这样做可以保证两者的图层样式完全相同，并且更加快捷方便。
7 w$ o% I: y5 G7 ]& D
# R$ e3 }6 X' _+ c4 Q- ~5 R/ l8 X* ]$ I/ p. }7 {: t& W
1 p4 U+ z) P8 e1 F* j图1-2-7
/ j8 U8 _* Q7 w, M s 8. 在添加文字“石桥茶舍”和“石桥棋坊”，字体为“方正古隶简体”，颜色值为“#646464”。介绍文字为“宋体”，大小“12 点”，消除锯齿的方法为“无”，这样设置可以保证非常清晰的小字，这类的清晰小字普便应用于网页设计中，如图1-2-8 所示。
2 L& x! Y$ @5 G
% ~% V4 f( P' \5 e5 E5 v! {* n) L v$ Y, G5 ^3 ~: H3 l) ]6 z4 a
! m& B/ v% p3 }3 z+ G& M, j
, L! ~2 j& l" k" v
图1-2-8
6 B+ P/ p: T( q# @8 g 9. 在页面的左侧位置，是用来放“Spry 选项卡式面板”的，这里我同样是做了一个外观占位，具体的操作会在后面的教程中详述，如图1-2-9 所示。
4 O1 {. d8 G' |; v0 G. {6 u; m* q! M
: `! Q5 }$ D2 U. p. i- j' V9 E! { m* C: J+ w
8 l) q% I0 X" @% \+ N7 t9 Q3 R5 B
图1-2-9
) v6 k9 K* y% X' M% U6 H& G3 _; ] 10. 在页面的最下放，我们绘制一个深灰色的矩形，起图层名为“灰色长条”，十六进制颜色值为“#2a2a2a”，上面输入版权信息、地址、管理员和联系人的姓名，联系人是我刚出生的女儿，估计你联系她，她也不会理你，哈哈，如图1-2-10 所示。
' z- ^8 e# g0 j+ V; g& e: k
3 h. |: S. A& w' X/ ]! f+ n
- s* |% O' n5 \4 _
7 M8 u9 M8 L P5 o( m1 D
$ O0 n# ~9 `. n1 A. z5 M
图1-2-10
- j4 ]* B4 x! Y2 z$ I 11. 在我们为这个矩形描个边儿，同样是右键选择“混合选项”，在描边中设置大小为“3”像素，位置同样的内部，颜色为较浅的灰色，十六进制颜色值为“#7a7a7a”，如图1-2-11 所示。
1 P5 A+ Y9 q+ |! p2 }6 M3 T+ S( G W* A+ D; R5 Z) S
# q* ]; N! m8 d& H
8 t: _7 B$ a' B% Q" a0 P( l/ \图1-2-11
6 t, n# h; o" k$ m: _) C
: W. }. ]) ~' [/ G% N* d: s
4 |% |; ^* L: K, Y. Z: g& e7 B- }( ^7 g0 x6 Z' w9 ?
, Y) A+ G& K d2 O: G
12. 因为是内部描边，在描过边后，您也许会发现较粗的描边已过多占用了本来就不富裕的“灰色长条”。为了增大一些空间，也为了这个描边更具有装饰性，这里需要把上边缘的描边去掉。不过我们知道，photoshop 的描边设置中没有直接对单独边缘的设置方法，因此我们需要有一个小弯路。
2 k' z! M7 M9 z$ I/ a- j
5 s. V( ?# P0 v. H V: M 选择“灰色长条”层，执行菜单“图层> 图层样式> 创建图层”，这样可以使样式从图层中分离而成为一个单独的普通图层，如图1-2-12 所示。
* V0 j% `. q2 n" l
* I6 z5 U# Y$ D
- b0 i9 r: A$ l7 z. Z6 b: ]
8 @2 d, X4 L6 k1 h9 q5 U1 R
- G/ z/ ]8 n' v! b; v4 u3 A图1-2-12
+ s$ U. D) ^! i- o' W
13. 我们可以注意一下图层面板中“灰色长条”层和其样式的变化。现在选择“灰色长条”的内描边层，然后使用选区工具把上边缘的描边删除，看不清可以放到足够大，如图1-2-13 所示。说到这里，可能很多读者会觉得为了这一点儿差别大动干戈没什么必要，其实不然，网页设计其实就种很琐碎的工作，只有在细节中才能表现出精致的页面，成功的页面设计永远都是由无数个精雕细刻的“小零件”组成的。至此我们首页的图样就已经制作完成了。
) P% A/ u' n6 G" u% n" t3 q4 i) [3 m5 L7 @5 c/ D7 u+ N
. u% d# u- e) _( n) C0 d# J
! |* x# t0 R3 e7 q0 i6 Y5 I
1 I( J: C6 m7 y
图1-2-13
* ]# \6 L _/ Z; X
7 t4 A* o, U7 g ^( b
举一反三：2 ~7 X% H/ J% o5 f
$ } P; D- B4 Q8 n' I 尝试按照自己的思路来设计内容部分的网页布局。
/ z' I5 ^$ L. L; l6 e8 o2 j# p) q
7 C- M& l3 Y) xphotoshop制作网站首页(1):首页主体制作
y9 t0 ^4 ]/ V. I) ?1 L8 o5 }' {9 n6 x k: X& F( n3 S
photoshop制作网站首页(2):首页内容的制作
+ Q% X8 ?2 W2 {- C+ l2 U; Y
) k( G+ `6 X) M& ]; x k0 r& D- |5 J# s5 U
photoshop制作网站首页(3):切割网页图片
/ @& g% T3 W) e6 `$ z8 F* V! i1 N) n7 E$ ~/ k' H# m% j B; T
photoshop制作网站首页(4):制作导航菜单+ } @% j+ U9 c
; z) ^/ K5 {7 b& C |
photoshop制作网站首页(5):添加Flash视频9 @0 \1 v) o+ A
, r: l5 D$ {. Lphotoshop制作网站首页(6):控制版面与插入Spry对象
收藏到QQ书签