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並回覆「我想看文章」,不定期獲得更多知識吧!

不同頻道,不同知識!

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料