UI設計教學:DIY扁平化icon陰影圖示-Part 1|菜鳥救星RookieSavior 發佈日期: 2021-06-292021-06-28 作者: yijun 文/圖、菜鳥編 近年來,扁平化設計的趨勢盛行,不僅只是在平面設計應用,也廣泛的被應用在網頁設計及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 分享此文:分享到 Twitter(在新視窗中開啟)按一下以分享至 Facebook(在新視窗中開啟)按一下以分享到 Telegram(在新視窗中開啟)按一下即可分享至 Skype(在新視窗中開啟)按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)請按讚:喜歡 正在載入... 相關