不用是專業設計師，也能輕鬆駕馭的設計小工具。
不論是你的網站、網頁內容、社群媒體，都一定會使用到圖片或是影片類的素材，但是關於這些三不五時需要被更新的內容，是不是時常搞得你心煩意亂：要用什麼字體、顏色、尺寸大小，可不可以螢幕直接截圖直接標示重點、加註文字，哪裡還有免費的圖庫素材激發我的靈感、怎麼簡單地製作動畫圖檔、找到符合的動態圖、甚至到Logo設計……
這篇文章集結了6個面向，分門別類告訴你關於設計的實用線上小工具，更棒的是，這些大多數的線上工具其基本使用都是免費的
一、字型
做網頁的時候常常不知道要使用哪種字型比較好看嗎？
Google Fonts可以綜覽不同的字體，並且在頁面上直接做篩選功能，如想要比較窄、比較寬或是斜線字體，又加上顏色的感覺如何，都可以透過Google Fonts在線上即時閱覽。
如果你想要知道，你所使用的字句若套用在不同的字體上的樣子，英文的字體可以使用wordmark.it 這個工具。
Tiff 是當你有選擇障礙的時候，可以協助你的小幫手。你可以選擇2種字型，輸入4個英文字母，它會將兩種不同的字型疊在一起，讓你看到兩種字型的差異，同時你也可以透過遮罩功能，只讓一種字型出現。
若想要下載比較特別的字體，可以參考Da Font、1001 Free Fonts、Font Squirrel這三個網站。
Da Font提供的字體很特別，使用者也可以在網上提供字體供其他人下載。1001 Free Fonts則是會每天提供幾種不同類型的字型給使用者下載，而支付約20美元的費用，即可下載1萬種不同的字型。Font Squirrel 提供的字體看起來就比較一般，網站上提供字體查詢（Font Identifier）的功能。
如果你想要知道一個網站它所使用的字體為何，可以下載What Font這個Chrome的外掛工具。
二、顏色
不知道網站的顏色要怎麼搭配，Pictaculous 可以幫你！不知道這張圖的顏色是什麼，它也可以幫你。只要上傳圖片或是某個你所希望用的主色調Pictaculous就像調色師一樣為你找出它的搭配組合，或是你的搭配組合建議。
想要快速知道網站所使用、圖片所使用的顏色，ColorZilla 一樣是Chrome的外掛小工具，讓你可以一「點」就知道它所使用的顏色。
如果你的筆電使用的是Mac，則可以使用command+空白鍵，輸入「color」，找到Digital Color測量計的功能，當你的游標移動時，它就會顯示它的RGB色彩搭配色號，讓你不用再眼睛脫窗地去比對究竟你想要使用的色彩搭配是什麼色號。
三、引用文字
在你網站上，可能會需要使用者見證，或是你喜歡透過勵志的「每日一句」來與你的讀者互動，那麼你可以試試Quozio和Quotes Covers這兩個免費的工具。
Quozio可以讓你自己選則喜歡的背景做搭配，你只要輸入欲引用的文字，以及說該句話或是段落的人，它就會自動生成一則貼文，讓你能直接分享到社群媒體平台上。
Quotes Cover這個工具則是有許多使用者製作了「Quote」的圖片，你可以先在頁面上看看是否有符合你想要的風格類型，可以直接下載，或者是重新設計。或是透過3個步驟設計屬於你自己的引用風格圖片。
同樣先是輸入你想要引用的字、是誰說的、你希望文字的排列方式、是使用在哪個社群媒體上、檔案的大小、畫素，接著進一步到頁面的側欄進行細部微調，選擇想要的檔案類型下載儲存，就完成了！
四、螢幕截圖直接註解
有些作業系統有內建的螢幕截圖基本功能，但大多不能直接加上註解，像是Mac可以透過command+shift+3擷取全螢幕，或是command+shift+4擷取特定畫面，會自動以截圖的時間作為命名存在桌面；Windows則是得使用printscreen功能，再到其他頁面貼上打開（Windows 8 以上的作業系統則可以按Windows + Printscreen鍵，螢幕截圖會自同存到媒體櫃的圖片），不過這兩種方式都沒辦法有效且直接利用螢幕截圖，必須開啟其他的應用程式才能做進一步的截圖編輯。
Jing這個免費的工具可以讓你直接選擇想要捕捉的螢幕畫面，即時編輯和分享，視訊時也可以使用。
Awesome screenshot則是會出現在頁面的上方，可以使用的編輯功能比較多。免費版本可以有一個專案、30張圖片、以及30秒的影像錄製，付費升級的計畫則沒有此限制，還可以跟其他人分享你正在編輯的圖片頁面協作。
如果你平時是使用Evernote做筆記，那麼對它的內建截圖小工具Skitch應該也不陌生。擷圖後可以馬上編輯，在圖片上加上文字、箭頭、標籤、圖形，此外，它還多了一個打馬賽克的功能，對大部分有截圖功能需求的使用者來說，可說是既快速又便利，而且最棒的是，它免費！並且支援各個作業系統。
五、免費圖庫
如果你想要找比較有創意的照片，Compflight是一個不錯的選擇。你可以直接在頁面上搜尋你想要的圖片類型或是風格。在搜尋結果的圖片下若有藍色的底線，則表示可以直接下載；若無，則代表原作者可能沒有提供下載的檔案，若不需要太大的圖檔，你也可以使用前面提到的截圖工具。
如果你想要比較獨樹一格、具自我風格類型的照片，可以考慮在Unsplash上面找找。它的搜尋設計有點類似於Pinterest，頁面主要是以圖片的流行度和更新的時間做排序。幾個比較大的主題類別包括商務、小清新、自然、科技、飲食、旅行、歡樂時光、光影變化。
懶惰的話，Hubspot有提供跟節慶有關的圖庫還有現成的圖庫。好處在於你不用連上網，就可以有一拖拉庫的圖片可以搜尋，壞處就是可能要花比較多的時間才能找到符合你想要的風格的圖片。
之前在「內容行銷工具推薦」這篇文章中也有提到一些跟找圖相關的網站，若有需求的人也可以進一步了解內容行銷所需要的實用小工具！
六、Logo設計
設計網頁、公司、品牌的Logo沒有靈感？沒有大把的預算請設計師幫忙？那麼你可以尋求以下幾個Logo製作的網站：
Logo Garden的介面陽春。你可以從圖庫裡面搜尋符合你的概念的圖示、更改顏色、加上文字與簡單的效果。網站上已經有超過200萬個Logo設計，付費的版本是39.99美元。
Logo Maker Ucraft 有點像專門為做Logo的小畫家，你可以先在資料庫裡面找尋你需要的圖示，再進行各種排列組合的客製化、變換顏色、寫入文字，而這個軟體是完全免費的。
Free Logo Design 只要輸入公司的名稱、在目前可以挑選的36個產業類別裡選擇合適的產業類別，它就會提供你一系列的免費樣式參考。選擇一個你喜歡的Logo之後，就可以進入到編輯頁面增加新的icon、做Logo的疊加、加入文字、其他圖案的方塊設計出屬於你自己的Logo。很棒的是，你可以將每個疊加的圖示局部拆解，配上自己想要的顏色，非常方便好用！但是如果你需要專業的Logo-高畫質的檔案，則需要付費約60美元。
Logotype Maker 不論是在搜尋功能或是在界面設計上都很繽紛，你可以從36個分類去找跟你的產業相關的Logo 模板。輸入公司名稱，將想要參考的5個Logo放入Wish List，它就會自動從你所選的風格跟文字上去搭配生成不同排列組合的Logo樣式供你挑選。基本的樣式是免費的，只能從模板中挑選Logo，基本的收費方案是24.99美元，包括200種以上的字體、60萬種形狀和進階的模板可以任君挑選，進階的付費方案是39.99美元，可以做無限次的修改。
Logaster的網站看起來很有設計感。想要生成你的專屬Logo，只需要4個步驟就能完成，跟前面幾個網站很像。首先，輸入你的公司名稱和產業類別，接著選擇你的Logo理念，再進階做細部編輯，最後就完成了！費用則根據你使用Logo的需求而有不同的收費方式，完整的打包帶走約30美元（支援中文！）
Logojoy的操作方式是先輸入你的公司名稱或是想要製作Logo的名稱，接著選擇5種或是以上的風格設計、9宮格的顏色、輸入Slogan、透過搜尋列選擇合適的icon，最後挑選演算法為你設計出的Logo。在預覽功能的頁面，你可以看到實際的Logo印製在名片上、文件、衣服、手機殼以及大型廣告牆上的樣子。更棒的是，你還可以重新再將公司名稱、標語、icon更換字型、顏色、版面位置顏色置換成自己想要的樣子。基本的收費是20美元，進階方案是65美元，加入設計師諮詢時間1小時則是165美元。
DesignEvo也是一個免費的工具，有多樣化的字體選擇（並且提供中文支援），同時還有數百萬個圖示供挑選，以及多種範例。在內部的介面操作滿容易的，可以透過圖示和形狀搜尋想要的圖案，文字也提供許多參考的樣式，重點是不需要註冊也不用付費，只要分享在任意的社群媒體平台上即可下載！
免費製作Logo的網站還有很多，大家可以多多利用Google 強大的搜尋功能，為你找到「免費製作logo 推薦」。
七、圖片大小調整
有時候你可能找到的圖不符合網站的需求，那麼就會需要重置圖片的大小。但是要如何才能在不會使用繪圖軟體的情況下做到這件事呢？Simple Image Resizer 可以直接將圖的比例調整縮小，或是如果你知道你想要重新設置的圖片尺寸大小，也可以直接輸入尺寸。
另一個網站Picresize則可以讓你調整圖片的尺寸大小之外，還能讓你直接加入特效功能，對於喜歡使用特效並且需要圖片壓縮功能的使用者來說，算是滿便利的線上工具。
八、圖片編輯
說完了圖片的尺寸，接著就是圖片編輯。在不會使用或是不想要透過Photoshop、Lightroom這種比較專業的軟體做圖片調整，或是Powerpoint、Office的內建修圖，你還有哪些選擇？
如果你想要重新將你的圖片上色、加上框線、文字、其他的圖片，並且不使用需要安裝的軟體，PicMonkey是一個你可以考慮的工具，它同時提供翻轉、裁切、大小調整等調整圖片的基本功能。
若你喜歡很酷炫、很復古、或是像Instagram在編輯圖片時可以有很多濾鏡功能的話，則可以使用Befunky這個線上工具。它有基本的免付費版本，也有小額付費的進階版本。除了編輯圖片之外，你也可以在線上製作邀請函、名片、菜單等其他類型的文件。
移動裝置的App則可以選擇VSCO Cam或是Snapseed。
Photocollage這個基本的工具可以讓將多張圖片做拼貼，你可以自己排列圖片，或是先上傳想要拼貼的照片之後，選擇「Template」，它就會自動顯示不同照片張數所搭配的版型，最多可以到25張照片；或是也可用Photovisi這個免費的軟體，你可以選擇要製作卡片或是圖片拼貼，它提供簡單的版型設計和裝飾的小圖案，整個使用的頁面上「看起來」比較簡約乾淨，但視覺上的調整就相對沒那麼專業（位置、快捷鍵）。
九、動態圖
說到動態圖檔.gif，你就絕對不能不知道Giphy這個工具。除了可以直接到官方網站上搜尋和下載相關的動態圖示以外，Giphy也有提供chrome的外掛小工具，供喜歡使用動態圖檔的使用者做搜尋和下載。你也可以直接上傳Youtube影片，擷取一小段作為動畫圖檔，非常方便！
若你時常需要這個功能，則可以安裝MakeGif這個chrome的擴充工具，讓你在看影片的同時就可以馬上將影片段落轉成Gif檔案並即時分享。
Imgplip也可以讓你將影片中的片段做成gif檔或是圖片。你只要簡單提供影片的網址或是上傳影片，選擇你想要的片段，再加上客製化的文字與標題和其他微調的內容，就可以分享你的動態圖了！
而Gifmaker.me 是一個可以讓你自己創造Gif檔的線上工具，你只要上傳幾張照片，調整每張照片的大小、播放速度，還可以加入Youtube的音樂連結，就可以做成一個簡單的動畫、影片。
動態圖檔的集大成之老大哥則是Make a gif。它可以讓你把自己的照片、Youtube的影片、Facebook的影片、自己的影片、視訊、或是原本就是Gif的檔案，再製成Gif動態圖檔。
十、社群媒體做圖
你是不是常常要在不同的社群媒體上發文配圖？或是要製作投放廣告的圖？Canva有基本免費的工具可以協助你做到這件事，並提供非常多模版而Pagemodo則是一個主要和Facebook結合的應用軟體，你可以在界面上設計粉絲專頁的貼文、封面、排程、製作廣告內容、以及設計側欄項目的內容等。
Fotor則是結合了上一個主題的圖片編輯，以及這個主題的社群媒體做圖功能。過去它只有英文版本，現在也有簡體中文的版本了，若需要將製作社群媒體的圖和後製的搭配，個人認為是個滿實用的小幫手。
十一、資訊圖表
前面提到的Canva，它也可以作為資訊圖表的工具。但比較專業製作的資訊圖表工具還有Venngage、Infogram、Pikochart、Visme、Ease.ly。
Venngage有超過1000種的資訊圖表範例，主要分成八大主題，分別為商務、行銷、教育、飲食、人力資源管理、科技、旅行和社群媒體。而除了資訊圖表之外，其他類型的資訊圖像化，像是專案、報告、海報、推廣文宣，你都可以參考網站上的設計。
免費的功能比較陽春，以月計的升級付費版本有19美元和49美元的兩種不同方案。
Infogram主要是圖表和資訊圖表的製作，它可以整合外部的Google表單，是一個將圖表視覺上美化非常好的工具，強項在於使用者可以和資訊圖表互動。
免費的版本可以使用的基本圖表類型與其他付費版本相同，付費版本可以使用500種以上的地圖視覺工具原型，免費的則可以使用兩種，資料庫的使用比率也相對小很多。若有大量圖表之製圖需求，或是圖表常需要使用到地圖的使用者則可以選擇infogram作為資訊圖表使用的投資。付費的版本是19美元和67美元，團隊共用則是119美元，大型的企業則有客製化方案。
若在使用上有任何疑問，也可以透過它們的線上客服尋求協助。
Pickochart 是在資訊圖表的平台中，費用看起來比較友善的。你可以透過它來製作資訊圖表、報表、海報或是投影片。免費的版本可以使用10種不同的資訊圖表模板，其他種類的檔案做圖也在5～8種不等。在圖表工具的操作上也十分便利，你可以直接在界面上看到圖表的類型，輸入數值以後修改內容，算是非常直覺的設計。
Visme有超過500種以上的資訊圖表模板，超過6000個icon以及百萬張圖片，不需要任何的設計背景都可以輕鬆使用製作出你的資訊圖表，在圖表上能加入外部連結，比較特別的地方在於可以自訂標籤和設定動畫效果。在價格方面也非常經濟實惠，分成月付10美元、20美元，以及團隊共同使用的60美元方案。
Easel.ly 的理念是希望能鼓勵人們將想法以視覺化的方式呈現。希望能讓人們的想法、意見、建議、設計、專案、目標等抽象的思維透過資訊圖表的方式更具體地讓其他關注相同議題的人理解。
它的資料庫有超過十萬張以上的圖片和資訊圖表的模板，有線上即時的小幫手可以協助你，還有許多部落格文章能夠讓你自己學習如何將資訊視覺化做得更好。基本的功能只能照著既有的模板做微幅的調整，可以使用的圖示非常有限，進階的付費功能是36美元。
如果你想要看看自己的履歷轉換成資訊圖表的樣子，可以到Visualize.me，綁定你的LinkedIn帳號，它就會自動同步到平台上以圖示的方式展現。所以，如果想要直接使用這個功能的話，就先到LinkedIn把你的履歷內容製作地完善一些吧！
十二、其他
如果你是專業的UI/UX設計師，你可能會需要Invision和Marvel這兩個小幫手。不論你是在設計網站或是app，你都可以透過這兩個線上平台和設計師或是工程師協作調整整個架構與排版。你可以將設計好的元素通通放在平台上，並且測試實際的使用情形，又平台提供語法檢視，因此可以在討論時直接請工程師協助你將版面或是設計調整成設計師想要的樣子。
Marvel的費用範圍有免費的、12美元一個月的進階版本，56美元的4個共同協作版本以及企業的客製化版本。Invision的進階付費則分成15美元、25美元、5個共同協作者的99美元以及客製化的企業方案。可以看公司的規模大小及協作需求購買合適的方案。
若只是想知道你的圖片設計放在不同的移動裝置上的樣子，則可以使用Placeit檢視，讓你不需要再一個個透過預覽的功能，就可以直接看到所有裝置上，圖片擺上去以後合不合適。
如果想要有夜店風格、看起來很酷炫的特效，你可以使用Hypno 這個app，為你錄製類似瘋狂或是斷片效果的影片，只需要先擺出幾個簡單的表情之後，Hypno就會自動幫你加油添醋（誤），讓你看起來「煥然一新」！
【結語】
找不到什麼工具，不知道什麼東西怎麼做，Google就對了！這篇文章為你整理了許多線上的實用設計小工具，是不是讓你有點眼花撩亂啊？找到你需要的工具類別，選擇一個你看順眼的、覺得合適的軟體鑽研，相信你不必是設計專業出身，也可以成為設計小達人唷！
