UI設計教學：DIY扁平化icon陰影圖示－Part 1｜菜鳥救星RookieSavior

文/圖、菜鳥編

近年來，扁平化設計的趨勢盛行，不僅只是在平面設計應用，也廣泛的被應用在網頁設計及APP UI應用上。
扁平化的概念是以單純的色塊，用圖像的方式呈現出一種簡約的風格。在後期則有一些創新的手法融入在扁平化設計中。最常見的手法就是使用陰影效果來添加一點特色，鳥編先介紹給大家一個免費下載的網站，讓你有需求時可快速使用。

網站名稱：Flatty Shadow
內容說明：可讓使用者根據需求針對圖像自行設定不同色彩、大小、陰影變化
傳送門：http://flattyshadow.com/

一進到網頁，馬上就可以看到視覺化的操作，左方可以設定陰影的角度，而右方則是設定深度，所有的調整可以立即在中間的圖像中呈現出來。

使用方式相當簡單，可拉至網頁最下方，或是點選主頁一開始右上角的「Get Started」。

在畫面左方的工具列，依序如下：

1.設定圖像與陰影顏色
2.設定底圖樣式：分為直角、圓角及圓形
3.陰影的設定
4.ICON的選擇
5.圖像大小設定

首先我們先選擇要設計的圖示，基本上食、衣、住、行都有含括在內。可以一次選擇要使用的圖示，後續再一一細部設定即可。

接著我們針對顏色做設定，如果沒有特定選取，則會六個圖示一起做變動。

如果有不想要變動的，擇點選後會反白，後續的修改就部會被變動到。可以從下圖中看到fs-folder的圖示是反白的，當鳥編異動顏色時，fs-folder還是維持一開始的現狀。

底圖部分，可選擇預設按鈕，如下圖標示1，共有三種預設，當然你也可拖曳圖示2來進行變化。

陰影設定部分，如剛開始首頁一樣，可進行角度與深度的設定。

最後就是選擇要輸出的大小，上方的ICON SIZE是設定圖示大小，BACKGROUND SIZE是針對底圖，但請注意底圖的大小要大於icon喔，不然會出現錯位的狀況。

最後可以選擇下載，或是網頁編碼，可利用在網頁設計上，相當方便。

此網站相當便利，但如果沒有自己想要的icon怎麼辦，這部分鳥編會在PART2來告訴大家如何自己製作陰影效果喔。

加入菜鳥救星官方Line並回覆「我想看文章」，不定期獲得更多知識吧！

不同頻道，不同知識！

Facebook Instagram Youtube