Unsplash It 直接取用免費圖庫相片素材,產生網頁設計、開發應用程式用的特定大小佔位圖片

Unsplash It 直接取用免費圖庫相片素材,產生網頁設計、開發應用程式適用的特定大小佔位圖片

之前寫過一篇「Unsplash 高解析度免費圖庫素材,適用於個人或商業專案」介紹,不知道大家還記得嗎?這是我平常找圖片時固定會用的免費圖庫,而本文要介紹的 Unsplash It 網站跟免費圖片有一點關係,不過它不是圖庫,而是結合 Unsplash 的佔位圖片產生器,也就是能產生範例圖片、用於網站或應用程式開發的免費服務。

什麼是佔位圖片呢?簡單來說,就是在設計網頁或應用程式時,主要圖片尚未被放入,先使用範例圖片來填補某些空間,也被稱為是 Placeholders。設計師或開發者可以上網尋找素材作為範例,但要剪裁成特定大小會有些浪費時間,透過第三方服務就能從網址列快速指定大小,而且無須自行託管、儲存圖片。

先前我介紹過幾個類似的佔位圖片產生器,例如:以貓咪作為範例圖片的 Placekitten、或是快速產生指定大小圖片的 Fake Images Please? 等等,本文介紹的這款 Unsplash It 則是直接取用免費圖庫的相片素材,讓你使用起來更接近真實圖片,而且沒有版權問題。

Unsplash It 最基本用法是從圖片網址指定相片大小,可自訂長度寬度,也能加入一個隨機的標籤來產生隨機圖片。另外,Unsplash It 還能夠產生灰階圖片、圖片集、特定圖片、模糊特效、剪裁位置,完全都是使用網址來進行設定調整。

以下我會介紹幾個 Unsplash It 的使用範例,詳細的操作方式可以到它的網站查找。

網站名稱:Unsplash It
網站鏈結:https://unsplash.it/

使用教學

STEP 1

最基本的用法,Unsplash It 網站上已經有說明,直接複製網站內的網址,在後面加入圖片尺寸(寬度及長度),以 Html 程式碼插入網站就可以立即看到圖片。如果你要產生正方形圖片,後面加入一個尺寸即可。

Unsplash It

例如需要 640 x 400(px)的佔位圖片,利用網址:https://unsplash.it/640/400/ 來快速產生,相片可直接連結,無須手動另存新檔或下載到電腦裡,下圖就是我使用 Unsplash It 所取得的特定大小相片。

STEP 2

對了,如果要在佔位圖片上使用隨機效果,可在網址後面加入 ?random ,即可在每次重新整理頁面時自動取得一張新相片。

STEP 3

若你的網站採用黑白設計,希望在佔位圖片上採用灰階(Grayscale)效果,可以在網址列後面加入 /g/ 來將圖片產生為灰階模式,例如:https://unsplash.it/g/200/300 ,當然多種屬性是可以互相混搭使用的。

STEP 4

Unsplash It 還能讓使用者建立圖片列表(List)、指定特定圖片、模糊特效等等,更多詳細的設定說明可以參閱網站,在這裡就不多做闡述。目前 Unsplash It 網站並沒有限定相片使用流量,若你在設計網頁時會用到範例圖片,這或許是個不錯的選擇。

值得一試的三個理由:

  1. 使用來自於 Unsplash 圖庫的免費相片,無版權問題
  2. 可指定特定大小、隨機圖片,或是加入灰階、模糊等特效
  3. 網址支援 SSL,可在 https 網站上使用
分享到...