文/圖:菜鳥編    

 

 

        近年來,扁平化設計的趨勢盛行,不僅只是在平面設計應用,也廣泛的被應用在網頁設計及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來告訴大家如何自己製作陰影效果喔。

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享: 美編晉升設計師的決勝點 

聯成電腦菜鳥救星:兩個方法做出IG吸睛照

聯成電腦菜鳥救星:用AI製作破舊斑駁文字

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()