Fireworks設(shè)計制作漂亮網(wǎng)

1、Fireworks 設(shè)計制作漂亮網(wǎng)頁總有人在那里炫耀自己的 ps(photoshop) 技術(shù),好象是平面就要用 ps 做,結(jié)果 很多做網(wǎng)頁的設(shè)計師也用 ps 做平面圖然后切割導圖,再做網(wǎng)站,今天我就來說 說用 fireworks 一樣可以做出好的網(wǎng)頁設(shè)計,只要你有心 !先看最終效果圖 :下面開始講解 :1. 布局先來說一下 我們制作網(wǎng)頁一般的大小高度：沒有一個固定值, 由于每個人的瀏覽器的工具欄不同, 我見過有的瀏覽器工 具欄被插件占了半個屏幕,所以高度沒有確切值.寬度：1、在 IE6.0 下,寬度為顯示器分辨率減 21,比方 1024的寬度 -21 就變成 1003.但值得注意的是 IE6.

2、0( 或更低) 無論你的網(wǎng)頁多高都會有右側(cè)的滾動條框.2、在 Firefox 下,寬度的分率辨減 19.比方 1024的寬度 -19 就變成 10053、在Opear下,寬度的分率辨減 23.比方1024的寬度-23就變成1001 注：Firefox或Opear在內(nèi)容少于瀏覽器高度時不顯示右側(cè)滾動條. 所以如果是 1024的分辨率,你的網(wǎng)頁不如設(shè)成 1 000平安一點.如果是 800 的分辨率一般都設(shè)成 770.這些需要明白并且牢記, 不然很可能做出來不符合瀏覽器要求, 不過一般我 們都回設(shè)定的再稍微小一點, 應為有些瀏覽器加了插件或者其他的東西寬度會有 變化 所以 800 的分辨率一般設(shè)定

3、760左右, 1024的設(shè)定 990左右.我這樣用輔助線和標尺把大概范圍劃分出來,注意我的劃分,正好是 770, 和 1000的地方,應為我要做的網(wǎng)站是 1024分辨率下的, 但是考慮到依然可能存 在800分辨率的用戶,所以我回把主要的內(nèi)容和菜單都放置在 770以內(nèi), 770-1000 的地方放一些輔助的東西, 這個習慣特別是在做一些門戶網(wǎng)站設(shè)計的時候更要考 慮以下,畢竟改善用戶體驗也是我們要考慮的問題 .2. 開始工作我們繼續(xù)講解, 現(xiàn)在我們來畫上部菜單局部的內(nèi)容, 其實很簡單拉, 就是畫 一個方框,一個圓,然后組合,加上漸變就可以了,如下列圖設(shè)置3. 下面我們來畫哪個類似徽章的東西 其實也

4、很簡單, 創(chuàng)意是類似獎狀上貼的哪個獲獎標志一樣, 會讓網(wǎng)站生動一 點,嘿嘿 .八、5八、八、我們選擇多邊形,如圖 :設(shè)置如下,繼續(xù)貼圖,大家要注意一下列圖層順序,拖動到下層就好了恩 要注意,這個圖層我們固定了以后通常就不動了,所以要鎖定,不然鼠 標晃來晃去很容易把圖移位,注意圖層那里點一下就多了一個小鎖子,方便吧, 這下他就徹底不干擾我們了 !好的我們繼續(xù),其實其他的東西都大同小異我們來研究一下細節(jié) .我最喜歡的就是 firewroks 超級多的紋理,在 ps 里面有些紋理要自己做真 的好麻煩啊 !我最喜歡的對角線,恩 看頁面左邊的漸變局部, 其實就是拉出來了一個矩形, 然后加上線性的漸變, 然 后加上對角線的紋理,稍微調(diào)整一下透明度,就這么簡單,效果卻很好看,嘿嘿下一個小地方,就是產(chǎn)品資訊的背景框,其實也很簡單 就是一個矩形,然后外框為紅色,矩形加一個內(nèi)部發(fā)光,發(fā)淺灰色的光,就 這樣就成了下一個地方 就是右上角大家可以看到一個類似網(wǎng)格的底紋 其實就是一個矩形,再加上一個蒙版,一個漸變,就 ok 了,現(xiàn)在看起來是 不是生動很多,嘿嘿OK看圖就這樣一個網(wǎng)站的平面