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

html images
  • 什麼是佔位圖片呢?簡單來說,就是在設計網頁或應用程式時,主要圖片尚未被放入,先使用範例圖片來填補某些空間,也被稱為是 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 網站上使用

本文出處 free.com.tw

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

Leave a comment

Your email address will not be published.


*