CSS混沌初開II:背景圖案及配色
本教程的第二部分主要有兩個重點：一是如何正確選擇導航菜單中所涉及的顏色，雖然它沒有很多的技術(shù)含量，但使用的顏色是否恰當，與后期出來的效果是有很大影響的；另外一部分主要是關(guān)于頁面背景的，側(cè)重于制作背景圖片素材時的一些細節(jié)問題。
在第一講中，我主要是介紹一種實現(xiàn)玻璃材質(zhì)按鈕的快捷途徑，現(xiàn)在來講顏色的選擇似乎有點滯后了。不過鑒于網(wǎng)站的風格存在差異，素材色系的選擇也是界面設計階段很重要的一塊內(nèi)容，網(wǎng)絡上也有很多關(guān)于網(wǎng)頁色彩的文章，大家可以依據(jù)其中介紹的一些基本知識進行參考，雖然良好的色彩感覺需要很長一段時間來培養(yǎng)。
選擇你的色彩體系
事實上色系的選擇會體現(xiàn)很多個人因素，畢竟每個人都會有各自的色彩偏好，你的選擇也會彰顯你的個人風格。沒人能建議你“必須選擇什么顏色”，這里我也只能提供一些個人認為比較實用的意見：

使用至少一種高飽和度、高辨識度的色彩，并以其色調(diào)定義站點的整體基調(diào)。把這個色彩運用在文本鏈接上，能使其更加顯眼、引人關(guān)注； 謹記不要在一張頁面中使用過多的顏色，這樣只會讓你的網(wǎng)頁看起來很花哨繁雜。我的建議是最好保持在三種之內(nèi)：一個強調(diào)色和兩個輔色；

在顏色的搭配上，不論是主色還是輔助色，都要善于通過它們明度變化來衍生更多的色彩，如果只是反復的使用三種以下的顏色未免會讓人感覺單調(diào)，當然這也不是意味著顏色變化越多你的頁面看起來就會越出色，仍然要視乎網(wǎng)站的整體風格和設計者對顏色的駕馭能力：

在PS中我們可以通過在色相/飽和度（Ctrl U）面板中調(diào)整參數(shù)來調(diào)配顏色。事實上圖中的幾組顏色就是通過這種方法調(diào)制出來的，當然在這個面板中可以變化出很多顏色，具體哪個參數(shù)應該為什么值都沒有硬性的規(guī)定，網(wǎng)絡上有很多推薦的色彩組合并明確給出了RGB值，大家在利用這種方法配色的時候也可以參考那些文章教程。
如果你看了上面的講解之后仍然不知道如何著手，這段關(guān)于顏色的影片 或許會對你有所幫助。事實上我覺得每個人都應該去看一下這個影片，不僅因為它本身設計得相當有趣，更重要的是對于認識和了解大眾化的色彩體驗和感知從而運用到網(wǎng)頁設計中，它都是一個很好的引導和鞏固。
是時候開始繪制背景圖案了
現(xiàn)在我們開始討論網(wǎng)頁的背景圖案。當我們在PS等軟件中創(chuàng)作背景圖案時，往往要精細到像素，尤其是那些平鋪填充的背景。首先我們在PS中新建一個30x像素的空白文檔，填充適當?shù)念伾?，并用鉛筆工具在其上繪制一些單像素小點，下面是一些例子：

如第一講中導航按鈕上的小點一樣，在這里你也可以盡量的發(fā)揮自己的創(chuàng)意，但是還是有幾個需要注意的地方，比如小點的顏色，不能跟背景色反差太大，不然平鋪以后它們會變得很刺眼。如果要利用小點來組合出一些圖案或線條，我通常會采用復制圖層并通過方向鍵調(diào)整其位置的方法，適當?shù)臅r候還會變化其圖層模式或透明度等。

制作這些背景圖案的一個難點就是，如何保證圖案平鋪時能實現(xiàn)無縫接合，畢竟背景的面積往往比較大，它上面若有割裂就會很顯眼。我通常采用的方法是利用PS中的矩形選框工具，比如下圖中，正方形選區(qū)左上角標識出的像素必須與其它三個標識區(qū)一致，那么當我們把這樣一塊區(qū)域截取下來進行平鋪的時候就不會有問題：

當然這個問題是否容易解決，也是視乎你最初設計的背景圖案，如果我們動手的時候就把可能遇到的一些問題考慮在內(nèi)，那么到解決的時候也不會太費力甚至返工了。
下載本例素材源文件

最新評論