建站常識
PS加強網頁設計中像素化細節(jié)的技巧
2009-05-14 15:08:00
原文:http://www.ediyang.com/3-photoshop-skills-make-pixel-popping/
在網頁設計中細節(jié)的處理十分重要,我個人也經常觀摩外國佬的網站,發(fā)現優(yōu)秀的網站設計在細節(jié)方面的處理都是照顧十分周全的。今天在這里分享給大家的小技巧很簡單,但是卻可以很好滴增強整個網站的細節(jié)。所以我自我認為這些技巧對提升你的網站設計水平也是有幫助的。
并且你會留意到這些技巧都圍繞一個詞,就是“像素化”,簡單地說就是一些1px,2px的小線。
好吧,我們開始。
1.像素分隔線
第一個介紹的是分隔線,請看下圖,為 Pixel2Life.com 的導航欄。
留意圖中紅圈圈中的線已經按鈕之間的分隔線,這些線看起來有一種凹進去的感覺,形成一種很好的分隔線的感覺。接下來我把這張圖放大,我們看看其中原理。
我們可以看到這些分隔線,都是有2條相鄰的1px直線構成的,并且一條顏色較背景色更深,一條較淺。接下來,看方法:
- 選取鉛筆工具(不要選錯為畫筆),大小調為1px
- 選取一個較背景色更深的顏色,如圖中的深藍色,按住Shift畫出一條直線
- 選取一個較淺的顏色,再畫一條直線。OK
PS.畫線過程可以放大畫布(Z)以便觀察。
怎么樣,效果比單色的分隔線要好很多吧?接下來再看一些使用這個分隔線技巧的例子:
clearspring.com
tutorial9
#p#2.像素邊緣
首先我們看一張沒有加“像素邊緣”的原圖:
接下來是加上后的:
看出來區(qū)別了嗎?沒關系,接下來請看放大下的圖片:
可以看到在黑色塊的下面畫了一條1px的純白色線。而這條線讓下面的白色塊的邊緣不再平淡無奇,而有一種燈光反射(高亮)的效果。使得白色塊的邊緣更加突出。
而方法跟第1個技巧是一樣的,就是用鉛筆工具畫1px的線。需要注意顏色的選擇,一般選擇比背景色更淺的顏色,才能制造高亮的效果。
3.像素陰影
這是3個技巧里面最容易實現的,但它一樣特別實用,甚至經常會用到。照例我們先看圖片:
可以看出在有陰影下,文字立體感得到加強,特別在文字的背景較復雜,比較多噪點時使用該技巧會使文件比較突出。
而加上陰影方法很簡單,只需雙擊圖層名稱,添加“投影”的圖層樣式。然后按下圖設置參數:
也就是把距離與大小調為“1”。
接下來我們看看一些使用該技巧的例子:
總結一下
以上這些技巧都是我自己看來學來的,在這里希望需要的人可以學會它。這些1px的線很多人會說,用戶根本就不會去注意,就是瞪大眼都看不到。是的,這的確沒錯。但是我認識很多好的設計,能經得時間與多人的考驗,那都是很多細節(jié)來構成的。這些細節(jié)盡管你覺得看不到,但是它卻為成功的設計打下堅實的基礎。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網站設計制作
- [2023-04-10 11:07:30] 網站建設制作流程知多少
- [2022-10-14 10:11:30] 做網站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產品”思維搭建網站!
- [2022-08-08 09:12:57] 一家公司的網站應該有哪些板塊內容?
- [2022-08-05 09:28:06] 企業(yè)網站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網站首頁設計的好看,這個網站就成功了一大半!
- [2022-05-20 09:34:19] 網站后臺管理系統是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網站建設公司
- [2022-05-17 11:27:01] 高端網站定制與模板化網站應該怎么選擇?
- [2022-04-22 16:00:41] 現在高端的網站設計都有哪些新的趨勢?
延伸閱讀
- [2010-07-09 16:18:00] 科幻風格的多樣性及探索歷程
- [2006-11-22 08:34:00] 網頁設計配色應用實例剖析——黃色系
- [2005-12-29 21:19:00] 網頁設計必須注意的29個問題
- [2010-09-28 08:20:00] 視覺焦點-剖析網頁設計中的幾何圓
- [2006-05-30 12:18:00] 網頁設計制作九大“要點”
- [2005-12-29 20:52:00] 網頁設計中的文字運用
- [2010-09-07 22:00:00] 蓋座漂亮的“樓”–淺談網頁設計中的構圖
- [2009-08-20 14:24:00] 戴著鎖鏈跳舞
- [2007-07-13 15:34:00] 網頁設計中安全色譜
- [2005-12-28 13:58:00] 網頁設計中“點”的視覺構成
- [2006-12-28 16:41:00] 網頁設計不良損害健康
- [2006-08-09 13:09:00] 《設計師談網頁設計思維》引言:從哪里開始