利器兩連發！收錄180種漸變背景+最值得學習的交互作品集

編者按：今天推薦的兩個網站，一個收錄了180種超美的漸變背景，可直接下載PSD/Sketch 的源文件，一個是高手親薦的交互設計作品集，看完保證收獲爆多。

WebGradients

一個收錄 180 個線性漸變背景免費集合的網站，你可以從這里挑選網站背景，利用產生的 CSS 語法將它快速套用到你網站的任何部分。WebGradients 讓使用者能直接點擊后預覽背景效果，一鍵產生 CSS 語法或下載 PNG 圖片格式。

此外，WebGradients 還提供免費的 Photoshop 和 Sketch 下載！如果需要的話，你能從網站上找到購買鏈接，自由贊助金額，亦可免費取得這兩種素材組合包。

STEP 1

開啟 WebGradients 網站后，往下拖曳就能找到收錄的所有 180 種線性漸變背景顏色，網站右上角有兩個鏈接，分別是 .Sketch 和 .Psd 兩種不同圖片格式的在線購買鏈接。

STEP 2

WebGradients 收錄的每個背景顏色都有名稱、色碼及預覽圖。

點擊預覽后會直接放大、套用到你目前的網頁背景，就能看到該漸層顏色的變化效果。

STEP 3

點擊背景圖右上角的「下載」圖示可以取得背景圖的 PNG 格式，不過更方便的方式是點擊右下角的「Copy CSS」，WebGradients 會自動產生漸層圖案的 CSS 樣式并復制到剪貼簿，例如我取得的某一段語法看起來像這樣：

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

只要把它加入你網站或應用程序的 CSS 樣式表單就能輕松套用，非常簡單。

STEP 4

如果你想獲取這些漸層背景的 Sketch 或 Photoshop 原始圖檔，點擊網站首頁右上角的下載鏈接就能找到，會連接到 Gumroad 商店，可以自由填入購買價格（輸入 $0 元免費下載），若喜歡或覺得對你來說非常有幫助不妨付費贊助一下。

交互設計作品集

@錦妖_BCJ2嚶?：Simon Pan的作品集，極度詳細，一個case study能抵一本手冊：http://simonpan.com/ 里面的流程學校講過，但這些業界真實的案例和方方面面的細節依然有很強的指導作用。

另一個無比詳細的作品集，就一個case，是設計Adobe Portfolio的。由于要搭梯子，我就引用一些圖吧，有條件的可以去Medium原文看。

仔細看完這篇blog，至少能學到：

• 較完整的設計過程是什么樣的？
• 做決策有哪幾種方式？
• 如何用草稿引導思維？
• 如何做詳盡美觀的標注？（更適用于縝密的大公司）
• 如何展示和排版自己的作品？
• 如何記述自己的設計過程？

想看到更多的作品集，請到博客：http://alldesignprocess.tumblr.com （梯子）

「優設最新的神器推薦」

1. 《這款圖標神器，讓你體驗用完即走的暢快感》
2. 《超過5萬張！免費高清可商用圖庫ZOOMMY 3.0重磅來襲！》
3. 《超好用的PS字體管理插件FONTAGS（附安裝方法）》

原文地址：free.com.tw/zhihu

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量190萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com