首頁 百度優化 網絡營銷 品牌策劃 網站服務 新聞營銷 品牌公關 行業資訊

當前位置:北京網絡公司|網絡營銷|網絡推廣|網站推廣【愛牛網絡營銷公司】 >首頁 -> 網站建設

PS在網頁設計中加強像素化細節技巧
2010-07-17 15:26:37 來源:網站建設 作者:愛牛網絡 【 】 瀏覽:654

并且你會留意到這些技巧都圍繞一個詞,就是“像素化”,簡單地說就是一些1px,2px的小線。好吧,我們開始。
    1.像素分隔線

    第一個介紹的是分隔線,請看下圖的導航欄。

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

并且你會留意到這些技巧都圍繞一個詞,就是“像素化”,簡單地說就是一些1px,2px的小線。好吧,我

們開始。
    1.像素分隔線

    第一個介紹的是分隔線,請看下圖的導航欄。

 我們可以看到這些分隔線,都是有2條相鄰的1px直線構成的,并且一條顏色較背景色更深,一條較淺。

接下來,看方法:

    選取鉛筆工具(不要選錯為畫筆),大小調為1px
    選取一個較背景色更深的顏色,如圖中的深藍色,按住Shift畫出一條直線
    選取一個較淺的顏色,再畫一條直線。OK
    PS.畫線過程可以放大畫布(Z)以便觀察。

    怎么樣,效果比單色的分隔線要好很多吧?接下來再看一些使用這個分隔線技巧的例

2.像素邊緣

    首先我們看一張沒有加“像素邊緣”的原圖:

 

接下來是加上后的:

 看出來區別了嗎?沒關系,接下來請看放大下的圖片:

  可以看到在黑色塊的下面畫了一條1px的純白色線。而這條線讓下面的白色塊的邊緣不再平淡無奇,而有一種燈光反射(高亮)的效果。使得白色塊的邊緣更加突出。而方法跟第1個技巧是一樣的,就是用鉛筆工具畫1px的線。需要注意顏色的選擇,一般選擇比背景色更淺的顏色,才能制造高亮的效果。

    3.像素陰影

    這是3個技巧里面最容易實現的,但它一樣特別實用,甚至經常會用到。照例我們先看圖片:

可以看出在有陰影下,文字立體感得到加強,特別在文字的背景較復雜,比較多噪點時使用該技巧會使文件比較突出。

    而加上陰影方法很簡單,只需雙擊圖層名稱,添加“投影”的圖層樣式。然后按下圖設置參數:

    也就是把距離與大小調為“1”。接下來我們看看一些使用該技巧的例子:

總結一下  :以上這些技巧都是我自己看來學來的,在這里希望需要的人可以學會它。這些1px的線很多人會說,用戶根本就不會去注意,就是瞪大眼都看不到。是的,這的確沒錯。但是我認識很多好的設計,能經得時間與多人的考驗,那都是很多細節來構成的。這些細節盡管你覺得看不到,但是它卻為成功的設計打下堅實的基礎。

Tags:網站建設 責任編輯:愛牛網絡
】【打印繁體】【收藏】 【關閉】 【返回頂部
上一篇五個為你的網頁設計添加光影效果.. 下一篇網頁設計中完美的圖像處理五大要素

相關欄目

最新文章

圖片信息

熱門文章

推薦文章

相關文章

千炮彩金捕鱼内购破解版下载 天津快乐十分快三组合 江西新时时分位走势 一码三期中特 福建快3开奖结果昨天 烈火江西时时软件 七星彩加减乘除法 韩国快三今日走势图 快乐十分技巧黑龙江时时走势图 快乐二十分任一怎么算中奖 江西快三走势图彩经网 快3五码复式 秒速时时软件手机版 凤凰彩票平台下载安装 河南快3开奖基本走势 老时时360历史 云南怏乐十分前三直选走势图