說到網頁中最常用到的元件,想必一定是大家都知道的「按鈕」,網頁中無時無刻不充滿著按鈕這個元素,但是如何設計出一個好的按鈕就是一門深奧的學問了,像站長自己本身其實沒有什麼藝術和美工的基礎,所以常常做不出來非常滿意的按鈕設計,這時除了可以參考別人的按鈕設計之外,還可以依靠今天所要介紹的這種線上按鈕製作服務「Da Button Factory」來提高自己的設計時的方便性。
Da Button Factory 是一個線上按鈕製作服務,可以讓使用者設計出自己想要得按鈕樣式,藉由字型、形狀、顏色等不同的搭配,使用者可以很發揮創意製作出許多漂亮的按鈕。對於像站長這種不擅長設計的人來說可以非常有用的利器,除了可以即時預覽之外,還可以直接將設計完成的按鈕以圖片的方式保存下來,而進階一點的站長也可以選擇直接輸出 HTML 和 CSS 原始碼,非常的方便。想要自己製作按鈕的讀者請一定要來看看。
網站鏈結:https://dabuttonfactory.com/
使用教學
STEP 1
進到 Da Button Factory 後,就可以直接開始設計按鈕,首先在「TEXT」欄位中輸入想在按鈕上顯示的文字,並且支援英文與中文。
STEP 2
然後在「Font」的選項中,可以選擇喜歡的字型及字體的粗細、斜體、大小還有顏色。而有一點要注意,如果輸入的文字是中文,請記得要選擇像是 Zenhei 這種有標註「CJK support」的字型,否則可能會無法正常顯示。
STEP 3
下方的「Text Shadow」則是文字的陰影,如果不希望文字顯示陰影,可以取消這一選項,Distance to Text 是調整陰影與文字的間距,Color 可以調整陰影的顏色。
STEP 4
左側最下方的「SIZE」選項,這個對於擅長 CSS 的人來說可能會比較了解,可以調整按鈕與文字之間的距離,至於有沒有這個需求還是要看每個人的設計方針來決定。
STEP 5
右側選單的「Style」可以設定按鈕的背景形狀,並能調整數值來決定圓角的幅度。「Background」則能進行背景顏色的設定,目前有四種模式,單色(Unicolor)、雙色(Two Colors)、單向漸層(Gradient)以及雙向漸層(Pyramid)。
最後使用者也可以決定按鈕是否需要有邊框「Border」與陰影「Shadow」,並且可以設定兩者的大小、顏色以及陰影的方向,可以說是十分的豐富。
STEP 6
全部完成後,就可以將按鈕給輸出了,而輸出按鈕有兩種方式,分別是「圖片」和「程式碼」。先以圖片輸出來說,使用者需要在網頁中間的下拉選單中來選擇想要輸出的圖片格式,然後點選「Download」,就可以將按鈕儲存成圖片了。
STEP 7
比較進階一點的站長也可以選擇將按鈕輸出成程式碼,只需要點擊左邊的「Embed」便可以將出現的原程式碼複製到自己的網站中使用,同時編輯也可以更加地方便。
STEP 8
文章的最後,Da Button Factory 也提供了不少的範本可以給使用者直接編輯,點選右上角的「Examples」就可以直接取用,省去了一步步進行設定的繁瑣過程。