作者：薛欣 来源：xuexin.com
2 X7 v- g5 t2 U5 e, s ?; m% ~
本教程是一系列教程,主要讲解如何用photoshop制作一个网站的首页.
3 W- H% E7 |: M) F, h
第1讲 制作首页的主体部分
. B+ L7 }4 o6 n1 _! ^( w' ?
9 G; Z: S5 \0 p1 U* `" Z/ ]! z( [
8 B; i' X% \; f d9 y. q
`2 Y+ Y3 n* u7 d3 _. D3 p9 f+ ?' g 课程总览
# `" C4 M! Z8 N; Z, J4 ^# G Y, X" ?4 {1 u) y2 e
在本课程中，朋友们将学习到以下内容：
8 ^6 [; q7 ?! I5 T- `4 Y
- k v0 p' y6 ?, `( q
•• 如何通过photoshop CS3 进行网站首页的版面设计
3 M! h( J, N/ w+ O9 j
( G% w8 O! y; Q* l
•• 各种网页版面元素的设计技巧和方法
7 m7 v% a4 n% H$ `! r1 p7 P6 S" }7 Y" D6 m, I; B7 W Q. X. B
•• 如何进行网页的切图以及切片的属性设置
% H3 o' q) _; ]4 H& ~# r4 o. n
, o4 D5 ~: f6 [6 ^5 i) Y2 X •• 如何创建与Flash 整合的FLV 视频
9 D+ n3 H3 d5 p% J2 i; u( h
; \4 V- i0 A. }9 Y+ } •• 在Dreamweaver CS3 中使用“Spry 选项卡”构件
! Y% D8 ^& e4 L9 U
+ A6 R+ M) G/ e/ I! W5 t9 Q6 L
•• photoshop、Flash、Dreamweaver 的协同工作
; J- \% A/ J4 m8 l
1 G$ K! L/ G9 F- p9 u1 d2 f. t 第1 讲 制作首页的主体部分
7 b* x7 K% F1 I" D
6 z3 P# b' ]. t2 c% ? 本文以“石桥花园”的网站首页为例，来演示页面创作的整个过程。其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。
( q& N* h2 e5 B
7 j) G! M' M; }
书归正传，早先的网页页面设计一般是以Dreamweaver 为中心，由photoshop 或Flash 等软件来提供各种素材，如图片、动画、文字等。自从photoshop 出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了photoshop。因为photoshop 本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。
6 z1 c8 H0 u7 g2 c8 C( |3 l/ B% U* D, V5 Q4 I
' d( N5 M( I6 z- z& ~ 1. 打开photoshop CS3, 执行菜单“文件> 新建”。在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB 颜色”，其它参数保持默认。
# N) |8 Y& U" f V2 s
; u6 m8 t! Z. F" {/ f6 |( f: v2 V+ g
2. 按下Ctrl+A 全选页面，执行菜单“编辑> 填充”将页面填为纯黑色。在工具箱中选择矢量的“矩形工具”，绘制一个如图1-1-1 所示长方形A。然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1 中B 所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。
g$ @+ X1 O) S8 Y, Q5 T5 S( a) J3 }* O, @: y
7 K, y$ @0 j9 P' k
1 }! h" n/ ]+ V1 i; G! E
- v+ U3 V% c; t. @( B! }
图1-1-1
7 z+ l- w/ X2 M4 q
% M' y# C/ z" Q! e
5 D w! r. x8 U( h& h
+ K: P/ b3 q( h9 K
9 q" n0 Q: U D5 Q; H4 D 3. 使用横排文字工具，输入“石桥花园”字样，字体为“方正流行体简体”。再输入“ShiQiaoGarden”，字体为“Bickham Script Pro”，字号均为“30 点”，文字如图1-1-2 所示布局。
; p, x' Q- P2 d3 \" \
! @% E6 l! A8 v$ b8 I3 w' M7 M
2 n9 H4 t6 r/ b; L' J# k9 A! ~2 d f$ |; `' D9 }" U0 H
% ?* T/ b+ v. s: ]/ x5 w5 O. \
图1-1-2
! i: }( }6 m: d ?1 W- K' S
4. 这是一张拍摄自龙亭的花卉原始素材，采用了微距加上2.8 的大光圈，实现了浅景深的背景模糊效果，读者可以使用模糊工具或镜头模糊滤镜实现类似的效果，如图1-1-3 所示。
0 D2 V5 P. P+ `, ^9 W5 f3 U
' U ~% t+ F Y/ P$ Y. J0 b
) X7 D! d$ V. L2 ^' o% [- j, W3 D! c
. W4 n2 A* b Q+ D& `
2 D' \) C$ z& s! S; c" Z0 J: w8 E( ^
图1-1-3
5 \: j; O1 t* F& `5 |; `
5. 我们对图片进行简单的处理，执行菜单“图像> 调整> 色阶”，从两侧向中间调整黑色和白色滑块的位置以使图片主体更加突出，更富有感染力。原素材本身是16:9 宽屏的，我们使用选区工具加删除键进行适当的裁切，如图1-1-4 所示。
+ D$ ]; x2 V" y( ]
% U! t- I0 {) l# L, `. M9 j3 `/ v
2 d7 ^$ H/ \% k9 s, I7 i8 D
9 L x" O# c" Y) Q! G0 Z
图1-1-4
6 H& `4 a! L- |4 d" J 5. 为了增加花卉的现代感和时尚感，我们进一步对图片进行加工，随意找一张图片，执行菜单“滤镜> 像素化> 马赛克”，数值调大，产生大色块的马赛克效果。然后通过素材或自己制作一张扭曲后的网格，这些都是待合成的素材，如图1-1-5 所示。
# L, o) B5 }8 ?+ K! E; A, v& p
8 e; I# |1 S t9 l* R8 a N3 H$ u, S) p7 M& `( h/ D
: s/ ^2 L+ i) A( v3 e9 S5 N4 N+ N7 M
% d+ U5 {; @. [# Q5 ^; \: l4 v图1-1-5
% D! {; G) c) T( H$ E
4 f& A. V/ x" a" E1 }! v
; C3 U$ K2 D% v; q' B9 [9 |- h4 h4 |/ {
/ L) D! U: o; f, v+ N& v
6. 现在有网格、花卉和马赛克三层图片，网格放在最上层，将图层的混合模式设为“颜色加深”，不透明度设为“68%”。花卉层的混合模式设为“强光”，马赛克图层不变，三者的合成效果如图1-1-6所示。
0 x6 s# R/ Y! r# Q6 P0 u" M: i
- ?1 J/ M0 `& J
- f1 Y- h; k4 J
; }/ |" G2 [1 f" e
Q$ ~* ?, O8 ^8 Q1 b' _( l* \7 Q
图1-1-6
^+ @2 s6 p! G( h# p# t
2 A# Y0 ?; V% k' g 7. 下面要制作的是首页的导航条部分，使用矢量的“矩形工具”绘制一个长方形，注意该长方形不要画满，留一些黑边在周围，黑边上窄下粗，使其具有一定的层次感。十六进制颜色值为“#c8fcc5”，一种清淡的绿色，如图1-1-7 所示。
, Z! o2 S6 e' s9 A! t& V4 H& d4 @7 G0 h
6 j. ]2 @+ t1 T2 m* {2 f5 d) M' J* e$ W! z( P* H
8 e% J: L5 x+ W5 {; @图1-1-7
0 C9 r5 `. U( p- v: ~( a3 d
8. 使用横排文字工具输入导航条上的文字，使用大括号“{}”进行装饰，字体为“方正小标宋_GBK”, 消除锯齿的方法为“浑厚”，如图1-1-8 所示。这里所制作的导航只起到占位作用，后面的教程中将设置导航条按钮的翻转效果。
" }/ @; L% @0 Y' i* F
7 g% I A5 l$ Z3 m" ~0 ^# D& b) a( l. G0 P7 T. i/ _0 t5 l" K
. o) ~& n2 o" D L, [, Y5 A9 ^, p! c
8 \) j m' I$ b% \! K: z图1-1-8
5 W" _ Q7 {) S; P0 e 举一反三：
% C5 Y1 n! |% p" D1 z5 q+ [4 Y2 |5 b; j2 b
尝试用类似的方法设计个人主页的标题和导航条等部分。
3 [# D) |! G f# D; e! m
6 L- x& J: M M8 U" |2 O
未完待续……
* H. F- Z/ J% d& W& xphotoshop制作网站首页(1):首页主体制作
4 y; Y/ h! o( b! d0 f0 k, D2 e: ^
3 E! T" r4 N4 @photoshop制作网站首页(2):首页内容的制作
, C+ m' h$ d/ Q, w& F F: D; H1 I0 X, ]# Z8 u( U* S9 `
- o+ h" B" n6 @. x
photoshop制作网站首页(3):切割网页图片/ X+ w8 r4 I% [9 G0 z( s8 n6 `* z
- E) W* \" e& Y$ _
photoshop制作网站首页(4):制作导航菜单
" [2 `5 d6 w2 K3 A: t0 V+ L8 m. r) W# o
photoshop制作网站首页(5):添加Flash视频$ C/ W4 } c3 w, h6 c1 R" @
, Z W m! a+ L# e+ r( |2 G r" n
photoshop制作网站首页(6):控制版面与插入Spry对象
收藏到QQ书签