|
|
总有人在那里炫耀自己的ps(
$ {5 `" A: F* a! n3 y l3 HPhotoshop
# u- c' p+ G) ^$ X)技术，好象是平面就要用ps做，结果很多做网页的设计师也用ps做平面图然后切割导图，再做网站，今天我就来说说用
4 ]2 G; ~+ F! K5 e: K" `Fireworks
$ E6 {8 q1 J$ C) ~ b i+ l一样可以做出好的" i3 u6 K2 I, R; b6 G/ y" d
网页设计; E- f1 q+ H; \+ I. s$ N7 @
，只要你有心! 先看最终效果图:
3 o# [/ o# R' j7 x! Q* _& k' z/ F% F' ~4 l8 u
 # n6 b0 d7 Y$ D5 r! w
下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度：没有一个固定值，因为每个人的
" j+ c# W7 N8 j6 Z4 a" R* B: v浏览器
3 y* r, Q" F# f+ k的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。 宽度： 1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。 2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005 3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001 注：Firefox或Opear在内容少于2 w5 N" D1 I1 A; |- V- L+ f
浏览器4 Q# y+ ~' K8 _7 N& g) V9 ^
高度时不显示右侧滚动条。 所以如果是1024的分辨率，你的网页不如设成1000$ E) V" ~& o$ J+ r( D& a/ _
安全
7 G6 G& ~. g# e T5 s7 @0 Q一点。 如果是800的分辨率一般都设成770。 这些需要明白并且牢记，不然很可能做出来不符合3 p5 w% p: B2 w: j. C
浏览器
$ U% c! Z9 \$ [6 {, H' _. H要求，不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右，1024的设定990左右. 3 K! `4 a$ X1 U
( U0 ~& c0 y; v$ Q& B& P: _: c' B
 6 Q( Z' H; t9 y( G& c& R( Q
我这样用辅助线和标尺把大概范围划分出来，注意我的划分，正好是770，和1000的地方，应为我要做的网站是1024分辨率下的，但是考虑到依然可能存在800分辨率的用户，所以我回把主要的内容和菜单都放置在770以内，770-1000的地方放一些辅助的东西，这个习惯特别是在做一些门户网站设计的时候更要考虑以下，毕竟改善用户体验也是我们要考虑的问题. 2.开始工作 我们继续讲解，现在我们来画上部菜单部分的内容，其实很简单拉，就是画一个方框，一个圆，然后组合，加上渐变就可以了，如下图设置
; C) F# B1 y4 p! q/ U& a: ?0 ^2 g7 F$ h/ g! `
8 B [* e+ G9 h% g+ t
5 }- F# }/ Z5 }/ R& Q0 `5 U0 @# `; e
 7 q. }# ^% Z8 S2 [
2 ]+ Z7 K# I( w6 ~$ h1 `
9 `& n) H- ]. U: w7 X 7 y' ]* c& m! @# g/ @
3 X0 Q; R3 G! u; j" w Z
% U- f: h* b) K1 D/ Y! k 3.下面我们来画哪个类似徽章的东西 其实也很简单，创意是类似奖状上贴的哪个获奖标志一样，会让网站生动一点，嘿嘿. 我们选择多边形，如图: & s( U$ A/ E8 I: g' |; a4 {, H
& j5 g2 t+ P- X& k3 F; i5 L 2 N) ^4 E6 v5 B
( W% A& z: ~9 P% u
设置如下，继续贴图，大家要注意一下图层顺序，拖动到下层就好了
* C+ S3 ~: \9 k
2 K$ ~- q [1 ?5 {& s6 V! [ 9 a: s* D; I3 d: N' L3 d% K3 Z: T
+ ^) {% J1 O3 y9 L+ W$ D 恩 要注意，这个图层我们固定了以后通常就不动了，所以要锁定，不然鼠标晃来晃去很容易把图移位，注意图层那里点一下就多了一个小锁子，方便吧，这下他就彻底不干扰我们了! 3 I, C& E( D$ x5 F9 ?/ D' @) S' W
& T/ x+ Y8 S6 X9 N a: @2 {3 k) D+ d( W
 " | o1 _8 z/ P. H% K
! j& V/ D' |$ w# L
好的我们继续，其实其他的东西都大同小异 我们来研究一下细节. 我最喜欢的就是firewroks超级多的纹理，在ps里面有些纹理要自己做真的好麻烦啊! 我最喜欢的对角线，恩4 e& |. d0 A/ x( Y) j
. e5 q0 _8 L5 z f* f4 Q- A" z 看页面左边的渐变部分，其实就是拉出来了一个矩形，然后加上线性的渐变，然后加上对角线的纹理，稍微调整一下透明度，就这么简单，效果却很好看，嘿嘿
. f* {7 Q! s; T Y7 W9 V. o @* }
1 w! {- e! n `% Z
/ w2 @% g) A. ]1 z# I4 e. T2 T7 t8 J0 y* p/ w+ p* _; C. O7 C
下一个小地方，就是产品资讯的背景框，其实也很简单 就是一个矩形，然后外框为红色，矩形加一个内部发光，发浅灰色的光，就这样就成了 + i5 Z. N$ W" L. B, [
, o( [# ^( @, S
8 N2 o# x/ \! M; b; n
! `6 n. J0 A4 w/ s! {3 j1 d2 w 下一个地方 就是右上角大家可以看到一个类似网格的底纹 其实就是一个矩形，再加上一个蒙版，一个渐变，就ok了，现在看起来是不是生动很多，嘿嘿 OK，看图 1 j* b, N( Q, R& N3 v
: K3 B# }9 }: \- B( r" I7 N
4 c2 \) u! a0 b( L
( s W% A2 i( f 就这样一个网站的
. E( ? Q! p1 l平面设计" j. f) H3 C( T) F6 T9 K1 e
三下五除二的就搞定了，嘿嘿，怎么样
$ `8 E/ z7 w6 [Fireworks4 R5 K) k6 i/ C3 j
方便不! OK，今天就到这里，再欣赏一下我们的作品吧，不错吧! |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
