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

Chloe Chen
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)

Super Bundle字體大禮包
物超所值的資源包Bundle限時優惠中

Creative Market

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

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

每週更新六個免費的素材Free Goods
我的購買紀錄
藏在頁尾的Free Goods

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)

Blush

Blush提供的線上客製化插圖的網站,使用Figma或Sketch的用戶,也可以安裝Blush的外掛。在這邊可以找到風格多元的插畫,並且把它改成你想要的樣子。順帶一提,他們酷炫的網頁是用Webflow做的。

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

選擇眾多,有些看起來很ㄎㄧㄤ
點選右上的Edit可以編輯
自畫像就做好了

Icons8

Icon8主打項目是做icon,但是他的服務還真的是包山包海,有線上去背,免費音樂,貼文產生器,還有大量免費插圖,有些插圖甚至還是動態的。最棒的是,他提供多款3D的免費素材,風格一致,還有不同的角度供用戶挑選。

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

去背

Remove.bg

Remove.bg在2018年開始展露頭角,仰賴著AI的技術,實現了快速去背的理想,大幅加快了去創作者去背的速度。這樣的服務也是完全免費。不過用戶必須確保上傳的圖片尺寸夠大,因為去背完之後,免費下載的去背圖會是原圖的0.25倍。事實上除了圖片去被,他們也開發了影片去背的工具Unscreen

✅ 免費
✅ 無限量去背

Pattern重複樣式

Subtle Patterns

Subtle Pattern正如其名主打低調的重複樣式,用戶可以直接預覽套用在背景的效果,而且他們很貼心在邊界做好無縫接軌,讓你的背景重複排列銜接看起來非常自然。

✅ 免費
✅ 可商用
⚠️ 需聲明

以上名單是我覺得介面使用起來舒服,免費素材穩定提供,品質又高,精挑細選的免費網站。

如果你喜歡這份收藏,希望你可以分享給你的朋友們,或者拍手支持我繼續寫作。最多可以拍50下,歡迎拍好拍滿 ❤️❤️

你也有收藏很久,覺得很想和我分享的免費又實用網站嗎?歡迎你留言告訴我。

免責聲明:以上內容及授權範圍以該網站最新公告為主。

https://medium.com/as-a-product-designer

--

--