2021年設計師推薦-20個製作網頁設計必須收藏的免費商用素材

Chloe Chen

Published in

AAPD — As A Product Designer

12 min readJul 26, 2021

Hi 大家好，我是Chloe，這篇文章會告訴以設計師的角度，製作網頁最實用的免費素材是哪些。All for FREE ❤️

前言

當你在經營自己的網站或社群平台，是否經常需要高畫質&高品質的素材去包裝行銷自己的產品或服務？好不容易找到一張中意的圖片，才發現你需要訂閱該網站的服務，或者你發現免費圖片的license授權有所限制，不允許你在商業行為使用。

你想從Google上找免費素材，但是所有網路上看到的圖片幾乎都是有版權保護的，就算大部分作者的沒有特別說明，這不意味著其他人可以未經許可下載修改利用，從事這些行為，還有侵權違法的疑慮及風險，找到適合的素材變成一件苦差事。

什麼是CC0-License？

想要找高品質商用素材，123rf、ShutterStock、Adobe Stock是幾個很知名Stock photos & images付費圖庫。使用付費圖庫優點是，你想要的圖片比較不容易在其他網站大量出現。

但並不是所有人都有足夠的預算去支付這些素材，這時候你需要的是具有CC0-License授權的免費圖片。

Creative Common是一個致力於分享創意及推廣知識的非營利組織，在他們官網有關於CC0-License授權規範。CC0（Creative Commons Zero 公眾領域貢獻宣告）意味著科學家、教育工作者、藝術家、設計師、創作者不保留任何著作的權利及利益，願意提供給社會公眾領域，開放所有人以該著作為基礎，進行再次修改利用、創作等行為。

具有CC0-License授權聲明的素材具有以下優點

可以盡情修改利用 You can edit
可以作為商業用途 Commercial and Non-commercial purposes
不需要註明出處來源 No credit required

當然如果你願意註明，這對創作者是一個很大的鼓勵。

設計師推薦商用素材

以下收錄的素材，很多網站是我在瀏覽器書籤多年的收藏，大部分的網站我經常造訪，這些素材不限於網頁製作，不過本文會以這個角度出發，羅列所需的免費素材及工具，包含免費圖片、字體、Icon、Mockup、插畫或設計素材、免費去背、Pattern

圖庫照片 Stock Images & Photos

Unsplash

在Unsplash你會發現圖片非常卓越，他們對於品質有把關，只篩選最好的圖片提供給用戶。Unsplash的背後有超過20萬個攝影師為這個社群貢獻，目前網站提供超過200萬張高畫質圖片。

他們的服務專注於提供優質照片，另外分類也可以找到底片風格的照片還有桌布。

✅ 免費
✅ 可商用
✅ 不需聲明

Pexels

Pexel2014年創立於德國，他們提供320萬件免費資源，每個月新增大約20萬個新的素材。2018年後被Canva收購後，成為旗下的一員。

他們的首頁有很有自己的風格，圖片會依據色系做分類，用戶還可以在這邊找到圖片及影片。

✅ 免費
✅ 可商用
✅ 不需聲明

Pixabay

Pixabay同樣也是一間德國公司，2010年創立於德國柏林，2018年後和Pexels雙雙被Canva收購，以支援Canva的線上服務。

用戶可以在這邊找到圖片，插圖，甚至是音樂。

✅ 免費 (除非有特別註明)
✅ 可商用 (除非有特別註明)
✅ 不需聲明

xFrame

xFrame有別於上述的歐美平台，是以亞洲人為主的免費圖庫。他們的服務宗旨是因應全球化現象，亞洲文化輸出越趨強勢，他們發現以往的Stock Photos在亞洲人這塊內容很有限，所以他們希望可以提供更多元的選擇。他們持續更新動態，首頁每天Updates都有一個新的系列，品質也不在話下。

值得一提的是xFrame的母公司是日商Pixta，他們的核心服務是提供付費Stock photos & images。

✅ 免費
✅ 可商用 (有特別限制，請自行參考License)
✅ 不需聲明

字體

Google Fonts

在Google眾多的服務項目中，其中一個免費的字體，裡面有上千個免費開源的字型家族（粗體，係體，斜體等等）可以供選擇，字體檔可以下載使用於平面印刷物件或者數位檔案，也可以安裝成網頁文字。很可惜的是，繁體中文字體製作過程繁瑣且費時，所以選擇相當有限，不過Google還是有免費中文字體Noto Sans思源黑體跟Noto Serif思源宋體可以使用。

✅ 免費
✅ 可商用

Font Squirrel

Font Squirrel開宗明義點出，找到高品質的免費授權商用字體是相當困難的，因此他們想要克服現況，並在網站上面挑選了他最喜歡的商用字體給用戶使用。每一款字體可商用的範圍不太一樣，可以透過字體列表正下方的小icon多加了解。

✅ 免費
✅ 可商用 (每款許可範圍有些微差異，請自行參考License)

Pixel Surplus

Pixel Surplus的願景是提供用戶最受歡迎的免費物件Free Good，他們的設計非常精美且獨特。現在有99% off，僅0.1折25美金的Super Bundle字體大禮包，現省1000美金。

網站有其他付費的物超所值的資源包Bundle限時優惠中(每款活動截止時間不同)。

✅ 部分免費
✅ 可商用 (每款許可範圍有些微差異，請自行參考License)

Creative Market

Creative Market背後有190個國家的設計工作者協助支援，提供超過400萬件素材。他們雖然是收費平台，但是和Pixel Surplus一樣有Free Goods，他們每週更新六個免費的素材，包含免費素材和字體和插圖。我之前在這邊下載了很多富有設計感的字體和其他素材。他的Free Goods放在很隱密的地方，要滑到頁尾才會看得到。

✅ 部分免費
✅ 多數字體可商用，字體以外素材部分可商用 (每款許可範圍有些微差異，請自行參考License)

Icon

Flaticon

Flaticon和Freepik是同一家公司的產品。Flaticon提供超過5000萬個icon素材，並支援PNG、SVG等眾多格式。他們過去一直都可以免費下載向量，但是近期改版之後只能免費下載PNG格式。

✅ 部分免費
✅ 可商用
✅ 付費會員不需聲明，免費需要 (請自行參考License)

Iconmonstr

Iconmonstr的icon數量遠不及Flaticon，不過友善支援向量格式。Icon的線條粗細統一看起來非常順眼，用戶只要從這個網站一同下載所有需要的icon，就不需要煩惱icon視覺上看起來不和諧。

✅ 免費
✅ 可商用
✅ 不需聲明

Font Awesome

Font Awesome也是我最常用的網站之一，幾乎所有做過的網頁專案都有Font Awesome的icon。雖然他看起來是icon，但本質是webfont，讓你只要用幾行碼就可以讓你的網頁出現icon。Webfont的好處是方便修改icon大小及顏色，而且在所有裝置看起來都很清晰。

✅ 免費
✅ 可商用
✅ 不需聲明

Mockup實體模型

Mockup World

Mockup World提供iPhone、iPad、iMac、MacBook、Apple Watch、t-shirts和其他物件包裝等Mockup，他們這邊的免費檔是psd檔，並且有不同layers，以確保用戶可以改成他們想要的樣子。這邊要注意的是Mockup World給創作者決定授權範圍，所以每一個素材的聲明不盡相同。

✅ 免費
✅ 部分可商用
✅ 部分不需聲明 (請自行參考License)

Mockups for free

不同於Mockup World匯集了四散各地的免費Mockup，Mockups for free選擇比較少，但是幾乎大部分的Mockup都是自家開發，也確保了所有的素材都是一致免費可商用。

✅ 免費
✅ 可商用
✅ 不需聲明

插畫或設計素材

Freepik

Freepik絕對是我最常用的網站之一，很多時候我覺得他的向量圖檔品質甚至比其他付費的圖庫還要好。Freepick大部分都是免費的資源，但是有些素材是需要訂閱才能使用的。註冊免費會員之後，每天的下載額度是10個素材。

✅ 部分免費
✅ 可商用
✅ 付費會員不需聲明，免費需要 (請自行參考License)

Vecteezy

Vecteezy和Freepik的服務很相仿，除了免費的照片、向量圖檔之外，這邊還有免費的影片可以利用。部分素材是需要訂閱才能使用的。

✅ 部分免費
✅ 可商用
✅ 付費會員不需聲明，免費需要 (請自行參考License)

Vectorian

Vectorian號稱是世界上最大的復古風格圖書館。光是免費的Free Vector Pack就含85款裝飾，110款插圖設計，18款精美邊框。這邊收錄了18世紀文藝復興Renaissance Revival、巴洛克復興Baroque Revival至19世紀Great Gatsby大亨小傳奢華 Art Deco風格，如果想要尋找復古手繪風格，這邊是你的最佳選擇。

✅ 部分免費
✅ 可商用 (每款許可範圍有些微差異，請自行參考License)