這幾年有不少背景圖案製作工具,都可以在線上預覽、客制化圖形細節,最終產生 CSS 和 SVG 格式,甚至在不用下載任何檔案的情況下直接複製程式碼,加入網頁就會獲得非常好的效果,兼具品質和效能,也不會拖慢網頁速度。例如之前我厭過的 Hero Patterns 快速產生重複圖案 CSS 背景;CSS Background Patterns 也能製作各種純色彩背景圖,如果需要背景圖也能試試看接下來要介紹的服務。
產生器類
線上產生器列表,包含常見的身份證產生器、隨機密碼產生器、捲軸產生器、CSS產生器與任何有趣實用的產生器。
passwrd.in 開啟網頁隨機產生密碼,可自訂密碼字串長度
SVG Waves 免費波浪圖產生器,互動式介面即時產生圖案原始碼
Humanotion 在 Notion 上製作個人大頭貼,免費 192 種角色組合可商業用途
Ray.so 將你的程式碼轉為漂亮圖片,加入視窗外框和陰影效果
Image It 線上將文字轉圖片,內建五種配色支援 HTML、CSS 語法
有時候在社群網站想要分享一段文字,但又希望可以突顯內容,讓其他人更容易注意到,就能透過產生器將文字轉為圖片,因為社群網站大多不支援 HTML 或 CSS 樣式,如果製作成圖片就可解決此問題,而且也能在單一圖片裡塞進更多內容,是個很有用的方法。雖然 Instagram 限時動態部分後來也加入讓使用者輸入文字的功能,但只能打打字、加進表情符號或貼圖,變化也較少。
Cool Backgrounds 免費背景製作工具,內建五種效果可自訂顏色
根據 Cool Backgrounds 開發者研究,在發佈網頁或文章前最困難的步驟之一是找到合適背景圖片,好的圖片不僅能凸顯整篇內容質感,也可獲得更多使用者注意。我之前推薦不少免費背景產生器,依照使用者需求快速製作出很活潑、色彩鮮豔的背景,例如 Svg Wave 產生波浪狀背景圖案(在很多網站都能看到);Hero Patterns 製作好看的重複平鋪式背景,而且只要將 CSS 語法帶入就能套用。
Meta Tag Generator 網站資訊標籤產生器,為搜尋媒體和社群網路最佳化
對我來說,要讓網站在搜尋引擎取得好的排名表現,把程式碼寫正確是首要任務,因此我相當重視 Google 之前釋出的「搜尋引擎最佳化入門指南」說明文件,如果你對於開發網站有興趣,或是工作也會碰到相關內容,之前推薦過「HEAD 網頁開發參考手冊」很有用,它收錄 HTML5 在會出現的各種元件和使用範例,幫助開發者寫出更為完整全面的網頁標頭,對不想要翻找艱澀繁瑣說明文件的朋友 HEAD 也直接給出最基本的標頭範例。
Mock Magic 為擷圖畫面加上外框,支援 iPhone、MacBook 等裝置模型
我介紹過不少實物模型(Mockup)工具,可以讓使用者上傳畫面,快速合成到相片中出現的裝置畫面,像是 iPhone、iPad 或是 MacBook,有些還帶有裝飾或景深,看起來非常專業!有時候如果需要展示網頁或應用程式,單獨放上擷圖好像又太單調,就可以選擇像是 Mockup Photos、MockDrop 或 Mockuper 等服務稍微處理一下,類似工具都不需要額外下載安裝軟體,只要選擇想使用的模型,把手邊相片上傳後就會整合。