Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Storyset – 線上客製化製作插圖與動畫免費圖庫，可即時編輯顏色與物件並支援輸出多種不同格式
Storyset 是一個非常優秀的線上開源項目，當中提供了許多高品質的插畫素材與動畫，並且可以讓你免費運用在各種商業或個人用途當中使用，只需要署名即可將免費素材套用在任何的專案當中。
用 AI 摘要這篇文章：
Storyset 是一個完全免費的線上插圖客製化平台，讓你在瀏覽器裡直接修改向量插圖的配色、背景和圖層，還能一鍵把靜態插圖變成動畫，匯出成 SVG、PNG、GIF、MP4 或 HTML 等多種格式。
目錄
把免費插圖加上顏色、背景、動畫的線上編輯器
Storyset 是 Freepik 公司旗下的免費線上插圖工具，跟 Freepik、Icons8、Flaticon、Slidesgo 同屬一個產品生態系。平台收錄了數萬張高品質向量插圖，涵蓋商業辦公、教育學習、科技網路、醫療健康等主題。
它跟一般免費圖庫最大的不同，是你可以直接在瀏覽器裡對插圖進行三層客製化：調整整體配色、切換背景模式、控制圖層的顯示與隱藏。更實用的是內建動畫系統，點一個按鈕就能讓插圖動起來，輸出成 HTML、GIF 或 MP4。這種「客製化加動畫化」一條龍的設計，在免費工具中非常少見。
Storyset 與 Freepik 的帳號是通用的。如果你本來就有 Freepik 帳號，直接用同一組帳號登入 Storyset 就能開始使用。免費帳號可以使用所有基本的瀏覽、客製化、動畫和下載功能，差別在於免費版下載時需要標註來源署名，付費版則可以免署名使用。
Storyset vs unDraw vs Open Doodles：免費插圖工具比較
在深入了解 Storyset 的功能之前，先看它和其他主流免費插圖平台的差異，幫你快速判斷哪個工具最適合自己的需求。
| 平台 | 線上編輯 | 動畫功能 | 圖層控制 | 授權 | 插圖風格數 |
|---|---|---|---|---|---|
| Storyset | 完整（配色/背景/圖層） | HTML/GIF/MP4 | 有 | 免費需署名 | 4 種風格，數萬張 |
| unDraw | 配色調整 | 無 | 無 | MIT（免署名） | 單一風格，約 500 張 |
| Open Doodles | 無 | 無 | 無 | CC0（免署名） | 手繪風，約 100 張 |
| ManyPixels | 配色調整 | 無 | 無 | CC0（免署名） | 2,500+ 張 |
| Artify | 配色調整 | 無 | 無 | 免費商用 | 約 200 張 |
Storyset 在「線上編輯深度」和「動畫支援」兩個維度上領先其他工具。如果你需要能深度客製化還能做動畫的單一平台，Storyset 是首選。如果你只需要快速找一張插圖改個顏色，Free Vector Illustrations 或 Loose Drawing 也是不錯的選擇。如果你特別在意免署名，Open Doodles 和 ManyPixels 採用 CC0 授權，使用上更沒有顧慮。
四大插圖風格：Rafiki、Bro、Amico、Pana
Storyset 將所有插圖分為四種主要風格，每一種都有明確的視覺特徵和適用場景：
Rafiki 是最完整的風格，支援三種背景模式（隱藏、簡單、詳細），人物比例接近真實，適合需要完整場景描繪的專案。Bro 和 Amico 風格較為簡潔，人物造型更幾何化，適合 APP UI 和網頁的空狀態頁面。Pana 是等距（Isometric）風格，適合需要展示流程、架構或空間感的內容。
在首頁左側的篩選器中，你可以依照風格類別、顏色、背景樣式和主題標籤（科技、醫療、教育等）來過濾結果。搜尋功能對英文關鍵字的支援較好，輸入「business meeting」或「remote work」會比中文關鍵字得到更精準的結果。這個搜尋邏輯跟在 Pixabay 或 Unsplash 等圖庫平台類似。
客製化編輯：顏色、背景與圖層
點進一張插圖之後，右側會出現編輯控制面板。Storyset 的客製化分為三個層次，每個層次都可以獨立調整。
配色系統
Storyset 採用「主色調驅動」的智慧配色邏輯。你在色盤上選擇一個主色調，整張插圖的所有配色就會根據主色自動產生一套協調的色彩方案。你也可以直接輸入 HEX 或 RGB 色碼，讓插圖完美融入企業視覺識別。如果你還沒有明確的品牌色，可以先用 Coolors 這類配色工具產生方案，再把色碼貼到 Storyset 裡。
背景三模式
大多數插圖提供三種背景模式：隱藏（透明背景）、簡單背景和詳細背景。透明背景適合需要將插圖疊加在其他元素上的場景，例如網頁設計或 APP UI。簡單背景保留基本色塊襯托，詳細背景則是完整的場景描繪。需要注意的是，背景模式的可用選項會依風格而異：Rafiki 和 Pana 支援全部三種模式，Bro 僅支援隱藏和簡單背景。
圖層控制
每張插圖都由多個可獨立控制的圖層組成，操作邏輯類似 Photoshop。你可以自由切換每個圖層的顯示或隱藏，把不需要的元素移除，只保留想要的。透過不同圖層的組合，同一張插圖就能產出多種截然不同的版本。這對於需要一系列風格統一但內容各異的插圖專案來說非常實用。
動畫功能：讓插圖動起來
在插圖編輯頁面點選「Animate it」按鈕，就會進入動畫編輯模式。Storyset 提供兩大類動畫效果：
進場動畫（Entrance）：包含淡入（Fade In）、上滑（Slide Up）、下滑（Slide Down）、左滑（Slide Left）、右滑（Slide Right）、放大（Zoom In）、縮小（Zoom Out）、左彈（Light Left）、右彈（Light Right）共 9 種效果。每種進場動畫都可以設定 Easing 模式（Toon、Linear、Ease-in、Ease-out）、持續時間和延遲時間，還能勾選「Animate children」讓子元素分別出場。
循環動畫（Looping）：包含搖晃（Shake）、旋轉（Spin）、浮動（Floating）、心跳（Heartbeat）、風吹（Wind）共 5 種效果，適合讓插圖保持持續的動態感。
如果你不想逐一設定，點一下「Randomize」按鈕就會自動產生一組動畫效果。我的建議是先多按幾次 Randomize 找到大致喜歡的版本，再針對個別圖層做微調，這樣比自己從頭調整更省時。
重要限制：GIF 和 MP4 格式無法同時包含進場動畫和循環動畫。如果你需要兩種效果，必須分別匯出兩次。HTML 格式則沒有這個限制，可以在同一個檔案中包含兩種動畫類型。如果你要把動畫嵌入網頁，HTML 格式是最完整的選擇，效果跟 LOADING.IO 產生的載入動畫類似。
匯出格式完整比較
Storyset 支援五種匯出格式，每一種都有最適合的使用場景：
| 格式 | 類型 | 優點 | 缺點 | 最適用場景 |
|---|---|---|---|---|
| SVG | 靜態向量 | 無限放大不失真、檔案小 | 不適合複雜漸層 | 網頁設計、APP UI、前端開發 |
| PNG | 靜態點陣 | 支援透明背景、相容性高 | 放大會模糊、檔案較大 | 簡報、社群媒體、文件 |
| HTML | 動畫（網頁） | 支援進場+循環動畫、向量品質 | 僅限網頁嵌入 | 網站動畫、Landing Page |
| GIF | 動畫 | 高相容性 | 色彩限制 256 色、畫質較低 | 社群貼文、Email 電子報 |
| MP4 | 影片 | 高畫質、檔案較小 | 部分平台不支援直接播放 | YouTube 影片、簡報嵌入 |
如果你不確定該選哪個格式：放網頁用 SVG 或 HTML 動畫，放簡報或社群用 PNG 或 GIF，做影片用 MP4。如果之後需要把 PNG 轉成 WebP 格式來加速網頁載入，可以用 AnyWebP 這類免費轉檔工具處理。
授權條款與商用規範
使用免費版下載的插圖，你必須在作品中標註來源署名，例如在網站頁尾、簡報備註或影片字幕中加上「Designed by Storyset (Freepik)」。只要做到署名，就可以將插圖用於商業用途，包括客戶專案、付費課程、商業簡報等。
如果想免署名使用，需要取得 Flaticon 的 Premium 授權。付費用戶可以免署名使用所有素材，還能存取更多獨家插圖。不管是免費版還是付費版，都禁止把素材單獨拿出來轉售，也不能拿去註冊商標。這跟 CC Search 等 CC0 授權平台的規範不同，CC0 的素材完全不需要署名，使用上更自由，但素材風格和客製化功能就沒有 Storyset 豐富。
適合誰、不適合誰
適合的使用者：
- 需要品牌一致性插圖的設計師和行銷人員：Storyset 的主色調驅動配色和圖層控制，能確保一系列插圖的視覺風格統一。
- 前端開發者和網站架設者：SVG 匯出可以直接用在網頁中，HTML 動畫格式支援進場加循環效果，適合 Landing Page 和互動介面。如果你的網站是用 WordPress 架設的，SVG 可以直接上傳到媒體庫嵌入頁面。
- 需要快速產出動態視覺的內容創作者：GIF 和 MP4 匯出讓你不用打開 After Effects 或其他專業動畫軟體，就能為社群貼文或 YouTube 影片加入動態插圖。
不適合的使用者：
- 需要照片級真實感素材的人：Storyset 只提供向量插圖，沒有照片素材。如果你需要真實照片，建議到 免費圖庫 平台尋找。
- 需要完全免署名的免費方案：免費版必須標註來源。如果你不能接受署名要求，需要付費取得 Flaticon Premium 授權，或者改用 CC0 授權的平台如 Open Doodles。
- 需要手機端操作的情境：截至 2026 年 5 月，Storyset 沒有獨立的手機 App，客製化編輯體驗在電腦上會好很多。
實際應用場景與工作流程
網站設計：登入頁面的 Hero 區塊放一張用品牌色配過的插圖，立刻提升視覺質感。404 錯誤頁面也很適合用插圖來軟化使用者的負面感受。APP 的空狀態（Empty State）頁面搭配一張 Pana 或 Amico 風格的插圖，使用者體驗會好上不少。如果你的插圖需要去背或進一步處理，可以搭配 Remove.bg 做背景去除。
簡報製作：投影片搭配一張客製化過的插圖，不僅幫助觀眾理解內容，也讓簡報的專業度提升。你可以根據簡報主題選擇對應插圖，再用品牌色進行配色，讓簡報跟公司的視覺識別一致。也可以搭配 Slidesgo 的簡報範本一起使用，效果更好。
社群媒體與 Email 行銷：Instagram 和 Facebook 的貼文配上 GIF 動畫插圖，比起純靜態圖片的互動率高出不少。電子報裡插入 Storyset 的 GIF 動畫，可以讓文字內容變得生動。不過要注意 GIF 檔案不要太大，可以用 ShortPixel 或 Compressor.io 這類壓縮工具先處理再上傳。
批量工作流程建議：遇到一個專案需要多張插圖時，先把所有需要的插圖收藏起來，統一進入客製化模式調整配色。這樣可以確保所有插圖的風格一致，不會因為分次操作而產生色差。調整完後統一下載，流程更有效率。如果匯出的 SVG 檔案偏大，可以用 Squoosh 做圖片壓縮，或用 SVGOMG 來優化 SVG 檔案大小。
WordPress 整合：SVG 檔案可以直接上傳到 WordPress 媒體庫，動畫的 GIF 和 MP4 也都能直接上傳。如果網站圖片比較多，建議搭配 Imagify 圖片壓縮外掛和 WP Rocket 快取外掛，確保載入速度不受影響。
三個立即下一步
- 鎖定品牌色，到 Storyset 官網搜尋一張插圖：用英文關鍵字搜尋你需要的場景，選定風格後輸入品牌 HEX 色碼，調整背景和圖層，下載 SVG 測試在實際專案中的效果。預期 5 分鐘內就能完成第一張客製化插圖。
- 試做一段 HTML 動畫：選一張插圖點「Animate it」，按幾次 Randomize 找到喜歡的效果，然後匯出 HTML 格式。把 HTML 檔案嵌入到你的網頁中，觀察動畫在實際環境中的流暢度和視覺效果。
- 確認授權是否符合你的需求：如果你要商用且不能署名，需要取得 Flaticon Premium 授權。如果可以署名，免費方案就能滿足大部分需求。建議先確認你的專案對署名的要求，再決定是否需要付費。
Storyset 常見問題 FAQ
Storyset 完全免費嗎？
Storyset 提供免費和付費兩種方案。免費方案可以使用所有基本的瀏覽、客製化、動畫和下載功能，唯一的限制是下載後需要標註來源署名。如果想免署名使用，需要取得 Flaticon Premium 授權。
Storyset 的插圖可以用在商業專案嗎？
可以。免費版只要標註署名就能商用，付費版可以免署名商用。不管哪個版本都不能把素材單獨拿出來轉售。
Storyset 和 Freepik 是什麼關係？
Storyset 是 Freepik 公司旗下的產品，兩者的帳號通用。Freepik Premium 訂閱用戶可以直接在 Storyset 上享受進階權益。Storyset 專門負責「插圖客製化與動畫」這個需求。
Storyset 動畫可以放在 YouTube 影片嗎？
可以。Storyset 匯出的 MP4 格式動畫可以直接用在 YouTube 影片中，只要符合授權要求（免費版需署名）。不管是放在片頭、片尾或轉場段落都不會有版權問題。
Storyset 匯出的 SVG 可以再編輯嗎？
可以。Storyset 匯出的 SVG 檔案是完全可編輯的向量格式，你可以用 Adobe Illustrator、Figma、Sketch、Inkscape 等向量繪圖軟體開啟並修改。
如果你對更多免費設計資源有興趣，也歡迎參考我們整理的免費圖庫總整理，收錄了 50 個以上高品質的免費圖庫和素材網站。你也可以看看 photoAC、Open Doodles 等其他優質免費素材資源。
