在設計網頁或是配置版面時經常會需要預先保留圖片位置,讓開發或示範時使畫面更接近最終樣貌,如果手邊的圖片還沒處理,我們可以透過佔位圖片(Placeholder)呈現出特定大小的圖片範圍。簡單來說,佔位圖片產生器利用網址直接調整、產生特定尺寸範例圖,省去必須自行裁切圖片的麻煩,因為是以網址形式載入圖片,即使沒有下載圖片依然能在網頁上顯示,我曾介紹過的 Unsplash It、Placekitten、Placemat 和 PlaceKeanu 都是類似應用。
佔用圖片
PlaceKeanu 把基努李維照片拿來做佔位圖,以網址產生特定尺寸圖片

如果說到最喜愛的好萊塢演員,我想很多人可能會回答基努李維(Keanu Reeves),小時候第一次看《捍衛戰警》令人記憶猶新,還有後來經典《駭客任務》系列和《康斯坦汀:驅魔神探》等電影,這幾年掀起一波 John Wick 熱潮,我最近也在 Apple TV 上重溫最早的前兩集,雖然是一部浮誇的電影,但不得不說這個角色太適合他。
Unsample 免費範例圖產生器,一鍵下載打包 Unsplash 圖庫指定大小相片
Unsplash 可能是目前全世界最大的免費圖庫,不只有成千上萬、數量龐大的高畫質相片供使用者免費下載,更重要的是為開發者提供 Unsplash API 用於串接這個超大型圖庫(在寫這篇文章時已有 23 萬張 CC0 相片素材),直接讓你取用網站資源。有越來越多的第三方服務或應用程式倚賴 Unsplash 而生,事實上開放不見得是壞事,不重複造輪子也是一個相對省力的方法,網站上提供的相片可作為任何用途,避免誤用到可能會有版權爭議的素材。
Placemat 漂亮的佔位圖片產生器,開發網頁快速嵌入特定尺寸範例圖片
Unsplash It 直接取用免費圖庫相片素材,產生網頁設計、開發應用程式用的特定大小佔位圖片
之前寫過一篇「Unsplash 高解析度免費圖庫素材,適用於個人或商業專案」介紹,不知道大家還記得嗎?這是我平常找圖片時固定會用的免費圖庫,而本文要介紹的 Unsplash It 網站跟免費圖片有一點關係,不過它不是圖庫,而是結合 Unsplash 的佔位圖片產生器,也就是能產生範例圖片、用於網站或應用程式開發的免費服務。
Placekitten 產生特定大小的小貓範例圖片,製作網頁、平面設計師適用!
對於製作網頁或平面設計師來說,當主要的圖片尚未放入時,仍需要先使用範例圖片來填充某些區塊,這在英文稱為 Placeholder,意思就是佔用某個範圍的意思,不過若要自行製作特定大小的圖片也太費時間,先前我介紹過可以透過修改網址,產生特定大小範例圖片的服務,例如 Fake Images Please 或是 Placehold.it,都可以利用一行鏈結來產生圖片,如果你覺得這些服務產生的圖片太過呆板,可以使用本文要介紹的 Placekitten,它能依照你的需要,產生特定尺寸的小貓圖。
Fake images please? 快速產生特定大小的範例圖片
對於網頁設計者來說,在製作網頁時可能會預留一些圖片的位置,如果你手邊沒有適當大小的圖片,又想預覽看看效果如何的話該怎麼辦呢?別浪費時間製作範例圖了,直接使用一串網址就能產生你需要的圖片尺寸,還能變換顏色跟想呈現的字樣,真的是一個很方便的工具喔!
Placehold.it 範例圖片產生器,以網址快速調用任何尺寸的圖片
設計網頁時常常需要找寬度、長度合適的圖片來填充區塊,或是測試不同大小圖片的表現。這往往可能浪費很多時間,甚至還要自己動手製作某些特殊尺寸的圖片,相當麻煩。透過方便的線上工具- Placehold.it ,可以快速產生任何大小的佔位圖片,且能自訂圖片的格式、顯示的文字、顏色等等。