|
|
总有人在那里炫耀自己的ps(
5 M+ W! x1 J- l# M& d: dPhotoshop% w" C/ ]8 L- Q: p( _$ ^8 L! K, ^
)技术，好象是平面就要用ps做，结果很多做网页的设计师也用ps做平面图然后切割导图，再做网站，今天我就来说说用- H1 j" n$ ~7 T# m
Fireworks6 s1 k8 h' @$ a
一样可以做出好的& e! x; v2 c& o' t
网页设计
4 j D5 S- c3 u' _# w: o，只要你有心! 先看最终效果图:
7 R: b9 Z$ W( p2 F1 _" n) u7 }3 g8 `; ^% j
' ^1 G: h/ b* ]. d1 I7 ?/ R& `! f 下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度：没有一个固定值，因为每个人的- r, O; j9 a: V8 h! Z+ ^
浏览器% B' l7 ]) [) B2 @. }* X) c3 a: k
的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。 宽度： 1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。 2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005 3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001 注：Firefox或Opear在内容少于! |: e4 b( q, Z h( ?5 l3 P( t
浏览器
" f+ D, z2 d; I高度时不显示右侧滚动条。 所以如果是1024的分辨率，你的网页不如设成1000
/ l' F! E- U. @安全4 Q4 W+ Q7 a# N) L) c
一点。 如果是800的分辨率一般都设成770。 这些需要明白并且牢记，不然很可能做出来不符合
9 ?( H- ^9 \6 t- D浏览器5 d v) U& G0 Y4 J. l0 S6 n, r N
要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右，1024的设定990左右.
3 d; Q8 x1 W( O0 @, d* @
5 k {* J; W( n 4 I: L1 I3 S+ w$ [$ i' T
我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题. 2.开始工作 我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置 ^9 F( w& P3 m% F( Z9 U* R5 ^
y& e2 e7 r& D' B
 3 x$ `6 t3 h* ^4 D' s; Z
) Z" t3 B8 P3 c
2 y& d8 j' [3 Z, t ) g7 D& i) ]: _* k% x4 k$ I
5 f) L# T; Z$ @# t! d' ]: l/ I) f/ z% N% ?
 ' s# C: h, X+ D8 ^
, z9 ] J" b: m7 A' J- f * m9 z+ P5 [# H7 \5 ~
3.下面我们来画哪个类似徽章的东西 其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿. 我们选择多边形，如图:
. Q& {+ r5 N7 f: x8 t4 `# L2 T" K3 W3 J2 k0 A
5 G$ a! U* v( V3 H3 w9 R$ K/ H& q+ b. t7 H% e! i
设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了
4 a4 F1 I; |, J. r2 N2 I* J' d2 z. J# ?& U8 p5 C, O
3 ^$ z: I* j2 v4 J: x+ Q: C
p8 D. W/ v( k/ |4 } 恩 要注意，这个图层我们固定了以后通常就不动了，所以要锁定，不然鼠标晃来晃去很容易把图移位，注意图层那里点一下就多了一个小锁子，方便吧，这下他就彻底不干扰我们了! 3 n4 a( s5 M+ B. L+ t% j
2 r; Z' y! `$ \6 c
% ~; d9 u8 i2 t* R4 f/ m
- w$ Y: z) P6 x' r& K0 T 好的我们继续，其实其他的东西都大同小异 我们来研究一下细节. 我最喜欢的就是firewroks超级多的纹理，在ps里面有些纹理要自己做真的好麻烦啊! 我最喜欢的对角线，恩1 k& s4 j% I1 t2 F9 q
. `. A* u9 Z" a' r7 n' l2 v 看页面左边的渐变部分，其实就是拉出来了一个矩形，然后加上线性的渐变，然后加上对角线的纹理，稍微调整一下透明度，就这么简单，效果却很好看，嘿嘿
! E3 ~ j. u/ j# u1 u6 w. O6 A @
 5 f) K7 n& T% u( c! \* D3 r, s! h9 ~
7 M# {1 Q4 S" {6 ^0 o& w 下一个小地方，就是产品资讯的背景框，其实也很简单 就是一个矩形，然后外框为红色，矩形加一个内部发光，发浅灰色的光，就这样就成了
$ Z1 Z! U/ B! H3 u: m' M+ q2 q) `6 o; k4 X; u+ G4 m5 L
 4 @1 h" \' S! F p
+ b D6 D+ |( P
下一个地方 就是右上角大家可以看到一个类似网格的底纹 其实就是一个矩形，再加上一个蒙版，一个渐变，就ok了，现在看起来是不是生动很多，嘿嘿 OK，看图
( W- p3 C) M: r, s6 \ `! f- R0 [5 ]6 ^+ b
, d4 ]% h0 r2 X. c
) `. J7 h0 e) l( W$ C$ O5 O7 a 就这样一个网站的
- I+ |. _& K' c3 {* Q! H3 m平面设计# i! X0 C; ?8 P# z+ Z
三下五除二的就搞定了，嘿嘿，怎么样 D# {& v6 k4 n6 S, n
Fireworks
1 W+ Z# y+ o' D' f/ H5 @. w! k方便不! OK，今天就到这里，再欣赏一下我们的作品吧，不错吧! |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
