CSS混沌初開III:頂部圖片視覺修飾
這節(jié)是關(guān)于素材設(shè)計的最后一部分了，設(shè)計工作完成后將會開始講解如何切片以及在CSS和XHTML中構(gòu)建最終頁面。首先看一下這節(jié)設(shè)計的效果圖：

在制作按鈕時，我用了粉紅和暗綠兩種色調(diào)，可能看起來有點(diǎn)怪，但個人很鐘意這個組合。在設(shè)計網(wǎng)頁整體界面的過程中，我會給出一些意見和建議，重點(diǎn)是頂部的圖片，如何增加一些細(xì)節(jié)，讓它看起來更加的美觀、精致。
頂部圖片的視覺處理
在教程的前兩部分中，提到過導(dǎo)航按鈕的顏色選擇，現(xiàn)在我們來看一下如何處理一張花卉圖像的色調(diào)，使其與頁面的風(fēng)格達(dá)到統(tǒng)一。在用到的花卉圖像素材中，大家可以發(fā)現(xiàn)它上面也有紅和綠兩種色調(diào)，我要做的事情就是把其中的顏色調(diào)制成粉紅和暗綠，就好似導(dǎo)航菜單中使用的色調(diào)一樣：

首先來看一下圖片中花朵的顏色，它的色調(diào)偏向于大紅，還是使用PS中的色相/飽和度命令來對它進(jìn)行調(diào)整。利用快捷鍵按Ctrl U調(diào)出色相/飽和度面板，在“編輯”項的下拉列表中選擇“紅色（Ctrl 1）”，這樣我們就能只針對圖像中的紅色進(jìn)行調(diào)整了。拖動色相滑塊調(diào)制出我們需要的紅色，具體的數(shù)值依據(jù)實際情況，比如我這里是大致是-30左右：

下一步就是通過修飾細(xì)節(jié)增加一些輔助色調(diào)來增進(jìn)視覺效果，為接下來的濾鏡處理作一些預(yù)處理。頂部圖片的處理對創(chuàng)意有一定的要求，如果有相關(guān)的經(jīng)驗的話也就不是件難事，所以素材處理能力以及個人的美工基礎(chǔ)都會對設(shè)計過程、設(shè)計結(jié)果產(chǎn)生影響：

在之前的步驟中圖片的尺寸和體積無疑已經(jīng)進(jìn)行了調(diào)整，但是如果有比較多的細(xì)節(jié)要處理的話，建議還是在原始尺寸上操作，像示例中的圖片我剛開始也是在1600 1200的原始大小下進(jìn)行處理的。我為圖像添加了個人比較偏愛的繪畫涂抹濾鏡（濾鏡菜單—藝術(shù)效果），效果如下圖。在PS中，濾鏡的運(yùn)用是很有趣的一件事情，調(diào)節(jié)其中的參數(shù)就可以達(dá)到很多意想不到的效果，加之在CS版本中提供了可用濾鏡效果的縮略圖預(yù)覽，讓這個實用的工具用起來更加方便：

接著我們添加一些波浪線條來營造虛幻的意境，可以用筆刷或者鋼筆繪制一些曲線，當(dāng)然也可以用漸變工具制作，只要達(dá)到下圖中漸隱效果即可。事實上我們只需要做出其中一條就可以了，然后復(fù)制圖層調(diào)整其透明度、角度、扭曲制作出其它的線條。這里使用的顏色還是推薦使用粉紅，為了區(qū)別于花朵的顏色，可以把線條的粉紅明度調(diào)大一點(diǎn)。在圖片的右邊，我利用Tamuz字體添加了一個修飾符號，效果如下：

如果對以上操作有疑問，可以 下載QuickTime演示影片 觀看！
在圖片上添加BLOG標(biāo)題
Blog的標(biāo)題反映了你網(wǎng)站的內(nèi)容主題，其文字組織因人而異，一般還會加上一個圖標(biāo)或LOGO，畢竟每個人都想自己的Blog與眾不同，有一些標(biāo)志性的元素，在這里我就簡單的選用一個仙人掌標(biāo)志：

下面是一些關(guān)于字體或修飾符號的資源鏈接： Minion修飾符和Tamuz字體 Adobe提供的修飾性字體 一系列免費(fèi)的Dingbats字體
最終的界面設(shè)計效果
至今為止，不論是在導(dǎo)航按鈕還是頂部圖片的制作，我們都還沒有遇到什么棘手的難題。現(xiàn)在讓我們把做出來的素材整合在一起，拼合成一張 最終的界面效果 。這已經(jīng)是界面設(shè)計的最后一個階段了，所有若還有什么可添加的修飾元素，最好都在界面效果圖中體現(xiàn)出來。在我的示例頁面中，文章標(biāo)題和友情鏈接的前面我都用精致的圖標(biāo)進(jìn)行修飾，效果看起來還可以，當(dāng)然你們可以選擇自己喜歡的素材替換，最好也能在設(shè)計過程中體會到樂趣！

最新評論