|
|
总有人在那里炫耀自己的ps(/ W) Q1 s3 b+ i7 v6 Q
Photoshop
- ]' K& o$ ~2 W2 |& q8 Y! V)技术，好象是平面就要用ps做，结果很多做网页的设计师也用ps做平面图然后切割导图，再做网站，今天我就来说说用( D1 E! ^$ S1 C' H; w+ A
Fireworks0 T8 z6 U7 I7 ]& g
一样可以做出好的% { d3 K: y& Q. \6 h
网页设计
( y) @ E; U, A8 |1 X，只要你有心! 先看最终效果图: % x0 z$ N' t) Q- \3 ~1 S+ o
) e! G4 j3 g8 N, w- m' o+ {! h
 % r% O' S y' a
下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度：没有一个固定值，因为每个人的1 D$ a2 V8 j+ G/ z6 Q5 b1 {
浏览器4 M# B! s# W: i4 n9 e" _. K
的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。 宽度： 1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。 2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005 3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001 注：Firefox或Opear在内容少于$ h8 l1 d5 D: y% \& Y
浏览器) Q1 R- a! P+ T" p0 c: n
高度时不显示右侧滚动条。 所以如果是1024的分辨率，你的网页不如设成1000
" }& T) z; E7 m' r3 ?0 i$ B安全3 L) g& c* W& M/ t/ F# Y' U
一点。 如果是800的分辨率一般都设成770。 这些需要明白并且牢记，不然很可能做出来不符合, T5 z9 b7 K1 C4 _# f
浏览器0 j5 F9 a3 W2 a( L
要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右，1024的设定990左右. ! Z* P" c7 i5 d& T, b. \7 X) B
3 Q: x% v9 }, v* p! {/ a ' K$ A- D8 d2 ^2 w3 k
我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题. 2.开始工作 我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置 ) l' z5 r6 I, ^& `
0 ^/ J3 a! k5 ~ # b9 `) v3 \& v, W& ] r+ L. |
% h. H/ }. [, ?+ o9 O% j5 P2 g& d/ c% i4 N: G% V N7 l
 : y1 D2 }4 Q2 Q! p$ a# r
+ @) ]/ j- F4 j" v0 _
- j9 R' [7 \: p9 h4 T3 A/ z- T
 4 {, h' X9 F, a# L: p; ?/ u
& L$ W8 r: _; s3 `( Y. V; E0 _
# t2 A5 _2 ~2 C5 R 3.下面我们来画哪个类似徽章的东西 其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿. 我们选择多边形，如图: 5 O$ ?" r$ x3 Q2 @# l
# T4 n. G+ d, x" ~
: m3 ? `2 t$ J8 A& i
( H' h' S, [6 W7 f, E 设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了 6 y- H: E$ k3 V7 c( T6 y
! c- c, j: A2 d1 _1 v
& _6 {5 x% d2 L6 q3 X U% a' l. {# l ]# {9 p ~/ h) B7 K+ t% U: v
恩 要注意，这个图层我们固定了以后通常就不动了，所以要锁定，不然鼠标晃来晃去很容易把图移位，注意图层那里点一下就多了一个小锁子，方便吧，这下他就彻底不干扰我们了! ; D( f$ l/ ]! R" A: q
. P$ G ^+ y. J+ p
 ! c. k6 e' s+ v7 S) R4 g3 x0 a; \% {
0 a M; Y) O# }9 K/ [5 k7 j( j 好的我们继续，其实其他的东西都大同小异 我们来研究一下细节. 我最喜欢的就是firewroks超级多的纹理，在ps里面有些纹理要自己做真的好麻烦啊! 我最喜欢的对角线，恩
9 p# ^" J, r: y3 T ) i8 A/ T# K; C3 | h- T
看页面左边的渐变部分，其实就是拉出来了一个矩形，然后加上线性的渐变，然后加上对角线的纹理，稍微调整一下透明度，就这么简单，效果却很好看，嘿嘿 ; l8 O$ K1 y" q7 o; I8 k2 [3 C
6 m1 J/ ^+ ^# ?; Z$ E+ C' t
0 {$ B8 t) U1 U" |% p( e5 B& E4 K+ w) f! Z7 P- X B
下一个小地方，就是产品资讯的背景框，其实也很简单 就是一个矩形，然后外框为红色，矩形加一个内部发光，发浅灰色的光，就这样就成了 " e% _, z3 m: {9 W
. o5 S# F6 @+ W% j0 b H" M2 `0 G % b/ `2 c) l3 P4 j. I3 c# V
2 ]/ U6 j" W3 ]0 J5 d- V& _
下一个地方 就是右上角大家可以看到一个类似网格的底纹 其实就是一个矩形，再加上一个蒙版，一个渐变，就ok了，现在看起来是不是生动很多，嘿嘿 OK，看图 7 Y+ ]( R! X0 o- G0 ~8 i3 v
7 F& j* u3 L6 M5 A+ z & Z" o; {& ]& f
6 `7 S( w" p' b( B* _; a 就这样一个网站的
- q1 `7 E) ^" w }' n平面设计
7 _$ C) p9 ]1 [, m( H# Y4 l三下五除二的就搞定了，嘿嘿，怎么样
1 I# ]! L Y2 x* f* `) P8 q( K9 PFireworks* G# }0 ^4 J$ a( z/ a) X! e/ j
方便不! OK，今天就到这里，再欣赏一下我们的作品吧，不错吧! |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
