草根站长论坛 » 站长设计素材 » fireworks设计网页平面稿入门

RAO 发表于 2006-12-28 12:56

fireworks设计网页平面稿入门

总有人在那里炫耀自己的ps(photoshop)技术,好象是平面就要用ps做,结果很多做网页的设计师也用ps做平面图然后切割导图,再做网站,今天我就来说说用fireworks一样可以做出好的网页设计,只要你有心! {fu7]h us
先看最终效果图:
#qSe,}Pi [align=center][url=http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092449159.jpg][img=510,398]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092449753.jpg[/img],n8ZY0I0hkq;R5k7H1Y
[u][color=#0000ff]点击放大[/color][/u][/url][/align]下面开始讲解:
Ek0m N{k [b]1.布局[/b]C\4F"@E7bP'UF
先来说一下 我们制作网页一般的大小
V+J0B'V-K0ykc 高度：没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。
RV xB0H^[&C8kj 宽度：
7w)Z:J^i(i*L%P 1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。1~)LAWs3i
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005Rh~5L1MXb*RXz
R2C
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
3A k8}wM&P 注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。
ijL$Z
q 所以如果是1024的分辨率，你的网页不如设成1000安全一点。W4U8J\"u
如果是800的分辨率一般都设成770。-kh&LUj-N)AmM zG
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右,1024的设定990左右.
#R;myq sb4E+lp8o ~Y [align=center][img=510,420]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092449947.gif[/img][/align]我这样用辅助线和标尺把大概范围划分出来,注意我的划分,正好是770,和1000的地方,应为我要做的网站是1024分辨率下的,但是考虑到依然可能存在800分辨率的用户,所以我回把主要的内容#of#z5{T1DG
[b]2.开始工作[/b] sl8fA.@P}&l7Squ(Xw}6p
我们继续讲解,现在我们来画上部菜单部分的内容,其实很简单拉,就是画一个方框,一个圆,然后组合,加上渐变就可以了,如下图设置
c#`zp"?2Hp._ [align=center][img=350,258]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092631215.gif[/img][/align][align=center][img=350,258]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632329.gif[/img][/align][align=center][img=350,258]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632355.gif[/img][/align][b]3.下面我们来画哪个类似徽章的东西[/b]d9g$KFF~X9_2wo$~
其实也很简单,创意是类似奖状上贴的哪个获奖标志一样,会让网站生动一点
&mA_!t&VDV&~Z 我们选择多边形,如图: C+n8I XRKE
[align=center][img=350,258]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632823.gif[/img][/align]和菜单都放置在770以内,770-1000的地方放一些xc.U7b6g$|;t;Bt
设置如下,继续贴图,大家要注意一下图层顺序,拖动到下层就好了
h s]9oz)_[E [align=center][url=http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632768.gif][img=510,98]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632776.gif[/img]
!Ei ca7Z(d [u][color=#0000ff]点击放大[/color][/u][/url][/align]要注意,这个图层我们固定了以后通常就不动了,所以要锁定,不然鼠标晃来晃去很容易把图移位,注意图层那里点一下就多了一个小锁子,方便吧,这下他就彻底不干扰我们了!xM"~"w"c
[align=center][img=219,293]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632229.gif[/img][/align]好的我们继续,其实其他的东西都大同小异#CA7dJ ^(s2m.UA
我们来研究一下细节：4dj6`/J#M2v
我最喜欢的就是firewroks超级多的纹理,在ps里面有些纹理要自己做真的好麻烦啊!我最喜欢的对角线Kq#H'MC3f+oQ7A
看页面左边的渐变部分,其实就是拉出来了一个矩形,然后加上线性的渐变,然后加上对角线的纹理,稍微调整一下透明度,就这么简单,效果却很好看,嘿嘿z${q)S
ns7B(t
[align=center][img=510,289]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632520.gif[/img][/align]下一个小地方,就是产品资讯的背景框,其实也很简单
$_LMRJ/]&| 就是一个矩形,然后外框为红色,矩形加一个内部发光,发浅灰色的光,就这样就成了
g4V?X'U$]G'kc [align=center][img=510,97]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632334.gif[/img][/align]下一个地方 就是右上角大家可以看到一个类似网格的底纹2@LUR3O(A:L0X/P
其实就是一个矩形,再加上一个蒙版,一个渐变,就ok了,现在看起来是不是生动很多CE bBWaNx
OK,看图：*]u*rC+{(L+@
[align=center][img=503,197]http://www.citk.net/Article/UploadCitk_Edu/200612/20061219092632440.gif[/img][/align]就这样一个网站的平面设计三下五除二的就搞定了，怎么样fireworks方便不!@1uK AR[
其实还有更方便的东西,例如切片,和dreamweaver的配合,这个我们下回接着讲。
6E]
n;Ka+yeR3| C:["o;O)lz)W$H4J y7L5V
辅助的东西,这个习惯特别是在做一些门户网站设计的时候更要考虑以下,毕竟改善用户体验也是我们要考虑的问题

查看完整版本: fireworks设计网页平面稿入门