|
CSS混沌初開(kāi)III:頂部圖片視覺(jué)修飾
這節(jié)是關(guān)于素材設(shè)計(jì)的最后一部分了，設(shè)計(jì)工作完成后將會(huì)開(kāi)始講解如何切片以及在CSS和XHTML中構(gòu)建最終頁(yè)面。首先看一下這節(jié)設(shè)計(jì)的效果圖：
在制作按鈕時(shí)，我用了粉紅和暗綠兩種色調(diào)，可能看起來(lái)有點(diǎn)怪，但個(gè)人很鐘意這個(gè)組合。在設(shè)計(jì)網(wǎng)頁(yè)整體界面的過(guò)程中，我會(huì)給出一些意見(jiàn)和建議，重點(diǎn)是頂部的圖片，如何增加一些細(xì)節(jié)，讓它看起來(lái)更加的美觀、精致。
頂部圖片的視覺(jué)處理
在教程的前兩部分中，提到過(guò)導(dǎo)航按鈕的顏色選擇，現(xiàn)在我們來(lái)看一下如何處理一張花卉圖像的色調(diào)，使其與頁(yè)面的風(fēng)格達(dá)到統(tǒng)一。在用到的花卉圖像素材中，大家可以發(fā)現(xiàn)它上面也有紅和綠兩種色調(diào)，我要做的事情就是把其中的顏色調(diào)制成粉紅和暗綠，就好似導(dǎo)航菜單中使用的色調(diào)一樣：
首先來(lái)看一下圖片中花朵的顏色，它的色調(diào)偏向于大紅，還是使用PS中的色相/飽和度命令來(lái)對(duì)它進(jìn)行調(diào)整。利用快捷鍵按Ctrl+U調(diào)出色相/飽和度面板，在“編輯”項(xiàng)的下拉列表中選擇“紅色（Ctrl+1）”，這樣我們就能只針對(duì)圖像中的紅色進(jìn)行調(diào)整了。拖動(dòng)色相滑塊調(diào)制出我們需要的紅色，具體的數(shù)值依據(jù)實(shí)際情況，比如我這里是大致是-30左右：
下一步就是通過(guò)修飾細(xì)節(jié)增加一些輔助色調(diào)來(lái)增進(jìn)視覺(jué)效果，為接下來(lái)的濾鏡處理作一些預(yù)處理。頂部圖片的處理對(duì)創(chuàng)意有一定的要求，如果有相關(guān)的經(jīng)驗(yàn)的話也就不是件難事，所以素材處理能力以及個(gè)人的美工基礎(chǔ)都會(huì)對(duì)設(shè)計(jì)過(guò)程、設(shè)計(jì)結(jié)果產(chǎn)生影響：
在之前的步驟中圖片的尺寸和體積無(wú)疑已經(jīng)進(jìn)行了調(diào)整，但是如果有比較多的細(xì)節(jié)要處理的話，建議還是在原始尺寸上操作，像示例中的圖片我剛開(kāi)始也是在1600 1200的原始大小下進(jìn)行處理的。我為圖像添加了個(gè)人比較偏愛(ài)的繪畫(huà)涂抹濾鏡（濾鏡菜單—藝術(shù)效果），效果如下圖。在PS中，濾鏡的運(yùn)用是很有趣的一件事情，調(diào)節(jié)其中的參數(shù)就可以達(dá)到很多意想不到的效果，加之在CS版本中提供了可用濾鏡效果的縮略圖預(yù)覽，讓這個(gè)實(shí)用的工具用起來(lái)更加方便：
接著我們添加一些波浪線條來(lái)營(yíng)造虛幻的意境，可以用筆刷或者鋼筆繪制一些曲線，當(dāng)然也可以用漸變工具制作，只要達(dá)到下圖中漸隱效果即可。事實(shí)上我們只需要做出其中一條就可以了，然后復(fù)制圖層調(diào)整其透明度、角度、扭曲制作出其它的線條。這里使用的顏色還是推薦使用粉紅，為了區(qū)別于花朵的顏色，可以把線條的粉紅明度調(diào)大一點(diǎn)。在圖片的右邊，我利用Tamuz字體添加了一個(gè)修飾符號(hào)，效果如下：
如果對(duì)以上操作有疑問(wèn)，可以 下載QuickTime演示影片 觀看！
在圖片上添加BLOG標(biāo)題
Blog的標(biāo)題反映了你網(wǎng)站的內(nèi)容主題，其文字組織因人而異，一般還會(huì)加上一個(gè)圖標(biāo)或LOGO，畢竟每個(gè)人都想自己的Blog與眾不同，有一些標(biāo)志性的元素，在這里我就簡(jiǎn)單的選用一個(gè)仙人掌標(biāo)志：
下面是一些關(guān)于字體或修飾符號(hào)的資源鏈接：
最終的界面設(shè)計(jì)效果
至今為止，不論是在導(dǎo)航按鈕還是頂部圖片的制作，我們都還沒(méi)有遇到什么棘手的難題�，F(xiàn)在讓我們把做出來(lái)的素材整合在一起，拼合成一張 最終的界面效果 。這已經(jīng)是界面設(shè)計(jì)的最后一個(gè)階段了，所有若還有什么可添加的修飾元素，最好都在界面效果圖中體現(xiàn)出來(lái)。在我的示例頁(yè)面中，文章標(biāo)題和友情鏈接的前面我都用精致的圖標(biāo)進(jìn)行修飾，效果看起來(lái)還可以，當(dāng)然你們可以選擇自己喜歡的素材替換，最好也能在設(shè)計(jì)過(guò)程中體會(huì)到樂(lè)趣！
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2864629-1-1.html
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 頂部圖片視覺(jué)修飾 下一頁(yè) 側(cè)邊欄導(dǎo)航菜單的實(shí)現(xiàn)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 頂部圖片視覺(jué)修飾
