經營網路社群平台、投放廣告、製作簡報、設計邀請卡或商店網頁等各種用途都會用到圖片素材,如果不是設計師或熟悉繪圖軟體,可能無法在一片空白的畫布做出圖片,但有不少工具可以降低難度,讓我們透過拖曳、點選和預覽等互動方式產生好看又吸引人注意的圖片素材,像是以前推薦過的「DesignCap 線上平面設計工具,輕鬆自製高品質社群媒體圖片」就非常好用,或是 Adobe Spark、Moose Photos 都是類似工具。
圖片製作
Iconpie 上傳圖片自動產生各種網頁及應用程式專用的圖示尺寸
無論是開發網站、網頁服務或是一般手機應用程式,一定都會用到圖示,這在網站上通常被稱為網頁圖示(Favicon),應用程式也會因裝置需要不一樣的圖示大小,雖然轉換圖片大小是很簡單的事,但我們不一定確切知道需要什麼樣的尺寸或格式,有一些工具可以快速解決問題,像是 Favic-o-Matic 就能協助使用者製作出各種尺寸的網站圖示,而且也提供對應的程式碼非常有用。
Formito 免費網站圖示 Favicon 產生器,以文字或表情符號線上製作圖案
DesignCap 線上平面設計工具,輕鬆自製高品質社群媒體圖片
對於自由工作者、工作室或一般商家來說,平常維護網站或社群媒體可能都得自己來,除了要回訊息以外還要更新粉絲專頁上的動態貼文、Instagram 照片或是投放廣告,製作素材可能是最花費時間的部份吧!以前都要透過複雜的繪圖軟體才能製作素材,現在有不少線上設計工具在不用具備技能情況下就能產生好看的圖片,像是之前介紹過的:
Adobe Spark 提供刪除背景功能,一鍵自動化去背加入其他顏色
幾年前介紹「Adobe Spark 經營社群必備!線上製作美麗又引人注目的宣傳圖片」或許你曾經聽過或是使用過,對於要製作社群網站的圖片或廣告素材相當有用,Adobe Spark 提供大量圖庫,使用者可直接從線上編輯器進行編輯調整,也能針對要使用的平台先設定出最合適的圖片大小,就不用透過 SocialSizes 或是圖片編輯軟體裁切出特定尺寸。最近 Adobe Spark 加入全新「刪除背景」功能,雖然還在測試階段,但終於可以透過這項工具進行去背工作。
Dummy Image 假圖產生器,以網址快速載入各種尺寸顏色圖片
在設計網頁或是配置版面時經常會需要預先保留圖片位置,讓開發或示範時使畫面更接近最終樣貌,如果手邊的圖片還沒處理,我們可以透過佔位圖片(Placeholder)呈現出特定大小的圖片範圍。簡單來說,佔位圖片產生器利用網址直接調整、產生特定尺寸範例圖,省去必須自行裁切圖片的麻煩,因為是以網址形式載入圖片,即使沒有下載圖片依然能在網頁上顯示,我曾介紹過的 Unsplash It、Placekitten、Placemat 和 PlaceKeanu 都是類似應用。
Favicon.io 最強大的網站圖示產生器,可線上文字製作或以圖片轉換
Favic-o-Matic 快速裁切、製作各種尺寸大小的 Favicon 網站圖示
Marked.cc 將文字轉為精緻圖片輸出,分享社群更吸睛
曾經介紹過不少可以將程式碼轉圖片線上工具,像是 Carbon 將程式碼轉為美麗圖片,在社群分享更引人注目,或是 Codeimg、CodeZen 等等,對於要在社群網站分享程式碼來說轉為圖片會很有用,也免於諸多限制。若要把程式碼傳給其他人使用,可考慮「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」讓程式碼更易於閱讀和使用,於是有人想到:除了程式碼以外,有沒有可以把一般文字轉為圖片且效果更好的工具呢?
Codeimg 程式碼轉圖片,可自訂視窗陰影效果更適合分享社群網站
如果想把一小段程式碼分享到社群網站,透過 GitHub Gist 產生鏈結是個不錯的方式,或是參考我之前介紹的「5個程式碼分享服務,貼上後立即產生鏈結並加入高亮效果」,若要轉為精美的圖片,我也推薦過 Carbon、CodeZen 可以將程式碼轉成圖片、加上視窗陰影和上色效果的線上工具,對於要分享至社群網站來說更好用。大家都知道社群網站在不同區塊或類別都有不一樣的圖片尺寸限制,接下來要介紹的這項服務就是整合社群網站模版和程式碼轉圖片工具,讓你可以做出更適合分享的程式碼圖片。