網頁設計師都在用的照片圖庫網站(免費下載、高畫質、可商用)

Image for post
Image for post
本篇原文刊載於 Riven 個人網站:https://riven.design/2271

推薦使用的照片圖庫

Pexels

Pexels 是我覺得最適合做網頁設計的照片圖庫網站了!不僅有強大的搜尋引擎(輸入中文也可以),我們還可以透過標籤、類似圖片來擴大搜尋範圍,而每張照片幾乎都支援到可以下載 5000 x 3000 像素以上的尺寸,品質很好之外質感也都不錯,還能免費下載並獲得商用授權。

Image for post
Image for post
可以透過搜尋關鍵字的方式找到適合的照片
Image for post
Image for post
點開圖片可以選擇大小來下載
Image for post
Image for post
Pexels 有很清楚寫明的授權規則

Unsplash

這個在很多網誌部落格會看到,常常會被引用到文章當中,而且很多媒體編輯器都有內建可以使用。而授權部分則是跟 Pexels 擁有相同的免費下載、可商用與不強迫標注來源的規則,都是相當清楚且友善的。

Image for post
Image for post
Unsplash 上有很大量的照片數量與分類可以找
Image for post
Image for post
透過 Collections 可以找到別的使用者蒐集的資料夾

PAKUTASO

PAKUTASO 是日本的照片素材網站,那如果想找一些日系感的攝影,在這邊就比較容易找到,而因為在台灣其實工作上滿容易遇到喜歡日本風格的客戶與利害關係人等,所以直接使用日本的平台找會更精準一些,我們可以更快地達成想要的設計感。

Image for post
Image for post
PAKUTASO 比較建議使用分類去找
Image for post
Image for post
而且還可以從「模特」去找到同一位人物入鏡的更多相關照片。

下載後調整照片的小訣竅

而在網站平台上取得照片後,我們通常還會再做一點簡單的加工處理,為的就是讓照片更符合網頁的需求,而以下我列出幾個常見的處理步驟。

簡易調色

照片的顏色對網頁視覺的影響最大,所以通常只要色調感上不要相差太多,放上去都是還算 OK 的。

Image for post
Image for post
Image for post
Image for post
覆蓋上一個透明度低的黑色矩形,就能在照片上疊加清楚文字。

照片裁切

今天如果抓下來的圖片尺寸很大(可以的話當然是先選好再下載省一道功),則我們可以先裁切小張一點,不然容易造成檔案過大。

Image for post
Image for post
電腦內建的圖片編輯工具都可以直接幫助我們做照片裁切
Image for post
Image for post
剪裁遮色片(Mask with Shape),快捷鍵為 Command + Shift + M (Windows: Ctrl + Shift + M)。

壓縮檔案

今天下載來的照片,要上傳到網站之前,都記得一定要經過壓縮,因為從圖庫網站上下載來的照片,通常品質很高、同時檔案也會很肥大,而直接丟上去網站上容易拖垮網站的載入瀏覽速度。

Image for post
Image for post
可以看到熊貓幫我們原本 1.3 MB 的圖片,壓縮到只有 335 KB,省下 73% 的檔案空間。

使用圖庫要注意的事情

最後,再次提醒大家使用網路上的圖庫資源,一定要看好使用的授權規範,通常各家的網站規則都是不同的,如果不小心觸法那可是很麻煩的哦~特別是有動漫卡通或電影的截圖,以及常見的梗圖等等,都是不能夠直接拿來用的️

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store