網頁設計！網頁設計中的圖標的使用技巧與資源合集
- 2022-12-24 22:47:24
- 來源/作者：互聯網/佚名
- 己被圍觀次
圖標是每一個現代UI中不可或缺的組成部分，它們不僅能協助UI布局組織內容，而且輕量級的圖標融入界面也不會喧賓奪主。不僅手機和平板的APP UI中會大量用到各種圖標，而且iPod和智能手表的界面中也是如此，這正是因為圖標具備快速直觀傳達信息的能力。
我最喜歡的案例就是GitHub的教學頁面。頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍，當你向下滾動的時候，每個板塊都有單獨對應的圖標，為你說明這以塊是干啥的。
值得注意的是，每個圖標都使用的是手繪的效果，雖然色彩不同，但是整體風格高度一致，明顯是統一設計的一整套圖標。更重要的是，每一個圖標都明確直觀地描述了它所在區塊的內容。文字內容足以描述清楚細節，但是圖標能高度概括地闡明信息。
你可以在 Glazed & Infused 的首頁看到類似的設計效果。文字小區塊詳細地描述了他們的服務、咖啡和禮品卡的信息，而頂部的手繪圖標則從視覺上闡明了內容的性質，更重要的是，這三個圖標迅速地抓住了用戶的眼球。
矢量背景
從重復平鋪背景到矢量對象，你可以用矢量圖形做很多事情。對網站背景的處理方式，已經遠不止于平鋪紋理那么單一了。通過矢量圖形來創建覆蓋整個背景的場景已經很容易了。
矢量圖形可以很輕松地縮放，但是很難創造出逼真的效果。想制作出復雜樣式的矢量圖形并不容易，你需要通過大量的練習來熟悉在圖形上構建圖形的技巧，不過一旦學會還是蠻有趣的。在這里我們推薦一個好用的工具：Bota Iusti。
設計教程
跟蹤學習在線的設計教程是提高圖標設計技能的重要方式。想要精通設計技能沒有捷徑，唯有不斷學習，堅持練習。
雖然圖標設計是一個廣泛的領域，但是許多教程是可以舉一反三的，接下來提供的一系列教程非常實用，希望你能通過學習融入日常的設計中去。
16×16 px Icons
*PSjia.COM 傾力出品，轉載請注明來自PS家園網（www.wh207.com）
上一篇：ps6 3d模塊教程
更多精彩內容
-
工具運用，給產品圖片加上尺寸標識 -
ps大師之路:ps筆刷的詳細設置 -
ps無縫重復圖案的制作和使用方法 -
photoshop大師之路消除鋸齒和羽化 -
教你怎樣分辨照片是否被ps過 -
淺談photoshop圖像處理中的亮調,中間調,暗調選取 -
Photoshop自由變形調整照片的透視變形 -
文字設計，英文字母組合的N種方式