在網頁設計中細節的處理十分重要,我個人也常常觀摩外國佬的網站,發現優秀的網站設計在細節方面的處理都是照顧十分周全的。今天在這裡分享給大家的小技巧很簡單,但卻可以很好滴增強整個網站的細節。所以我自我認為這些技巧對提升你的網站設計水準也是有幫助的。
而你會留意到這些技巧都圍繞著一個詞,就是“像素化”,簡單地說就是一些1px,2px的小線。好吧,我們開始吧。
1.像素分隔線第一個介紹的是分隔線,請看下圖的導覽列。

留意圖中紅圈圈中的線已經按鈕之間的分隔線,這些線看起來有一種凹進去的感覺,形成一種很好的分隔線的感覺。接下來我把這張圖放大,我們來看看其中原理。

我們可以看到這些分隔線,都是有2條相鄰的1px直線構成的,並且一條顏色較背景色更深,一條較淺。接下來,看方法:
選取鉛筆工具(不要選錯為畫筆),大小調至1px
選取較背景色較深的顏色,如圖中的深藍色,按住Shift畫出一條直線
選取較淺的顏色,再畫一條直線。 OK
PS.畫線過程可以放大畫布(Z)以便觀察。
怎麼樣,效果比單色的分隔線好很多吧?接下來再看一些使用這個分隔線技巧的範例:
2.像素邊緣
首先我們來看一張沒有加上「像素邊緣」的原圖:

接下來是加上後的: