Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

Lorem Picsum 線上測試圖產生器,快速插入特定長度、寬度 CC0 圖片

在開發網頁或設計版型可能會需要放入圖片進行測試,除非你原本就有自行準備測試圖片,否則就需要使用佔位圖片(Placeholder),簡單來說,佔位圖就是依照使用者所需的長度寬度快速產生圖片,以填充特定的圖片空位,好處是不用手動裁切圖片,大多數的佔位圖片產生器都是透過圖片網址來指定要顯示的大小,有些還能加上特效、選擇不同類型的範例圖片,我覺得可以在圖片中顯示長寬尺寸對於要辨識來說也很有用。

Placy 線上佔位圖產生器,製作特定尺寸範例圖三種格式下載

Placy 線上佔位圖產生器,製作特定尺寸範例圖三種格式下載

在開發網站、測試網頁模版設計時經常會需要用到佔位圖(Placeholder),這是什麼呢?簡單來說就是範例圖片,用於填充一些可能要預留、之後顯示圖片的位置,既然是佔位圖片就要符合幾個要件,像是快速設定要產生特定尺寸大小、可以快速取用(甚至不用下載圖片、直接給使用者圖片鏈結),或是在圖片上方會清楚標示出這張佔位圖的尺寸,對於開發來說就會更方便更省時間。

Lorem.space 免費測試圖片產生器,提供電影海報、音樂封面可自訂尺寸

Lorem.space 免費測試圖片產生器,提供電影海報、音樂封面可自訂尺寸

Lorem ipsum 就是所謂的測試文章,也是一篇常用於排版設計的拉丁文文章,中文稱為亂數假文或隨機假文,後來經常在各種測試功能看到這個名詞,例如之前介紹過「Doodle Ipsum 產生插圖測試圖片,可選擇樣式和指定尺寸」就是用來產生特定插圖風格、尺寸大小的測試圖片,或是在另一篇「12 個你應該知道的中英文假字、文章產生器」有收錄一些可做為測試排版或 CSS 樣式的文字內容,對開發者來說非常實用。

Doodle Ipsum 產生插圖測試圖片,可選擇樣式和指定尺寸

Doodle Ipsum

Lorem ipsum(簡稱為 Lipsum)是指一篇用於測試文章排版或字型效果的拉丁文文章,我曾在之前寫過的「12 個你應該知道的中英文假字、文章產生器」提到,如果你要測試字體或排版效果可使用範例文章,通常會用來填充版面,有助於預覽實際顯示的效果。你可能會問:既然有測試用文字那有沒有測試用的圖片呢?佔位圖片(Placeholder)能依照使用者需要的圖片尺寸大小產生對應的圖片,可能是單色圖片、免費圖庫素材基努李維照片

Dummy Image 假圖產生器,以網址快速載入各種尺寸顏色圖片

Dummy Image 假圖產生器,以網址快速載入各種尺寸顏色圖片

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

PlaceKeanu 把基努李維照片拿來做佔位圖,以網址產生特定尺寸圖片

PlaceKeanu 把基努李維照片拿來做佔位圖,以網址產生特定尺寸圖片
Copyright : delcreations / 123RF Stock Photos

如果說到最喜愛的好萊塢演員,我想很多人可能會回答基努李維(Keanu Reeves),小時候第一次看《捍衛戰警》令人記憶猶新,還有後來經典《駭客任務》系列和《康斯坦汀:驅魔神探》等電影,這幾年掀起一波 John Wick 熱潮,我最近也在 Apple TV 上重溫最早的前兩集,雖然是一部浮誇的電影,但不得不說這個角色太適合他。

WP Test 測試 WordPress 最棒範例內容,填充各種內容協助開發佈景主題

WP Test 測試 WordPress 最棒範例內容,填充各種內容協助開發佈景主題

每次建立一個全新 WordPress 網站進行測試前,總得先部署適合開發的環境,以往我都是使用 WordPress 官方提供的佈景主題開發測試範例元件(Theme Unit Test),能快速匯入一堆測試內容(也就是範例內容),這個範例檔其實藏得非常隱密,如果平常沒有閱讀說明文件的習慣可能很難馬上找到,後來我又陸續發現其他適用於 WordPress 的範例測試檔案,若你有開發上的需求,想要填充內容到新網站,可以試試看其他人準備好的檔案。

Unsample 免費範例圖產生器,一鍵下載打包 Unsplash 圖庫指定大小相片

Unsample 免費範例圖產生器,一鍵下載打包 Unsplash 圖庫指定大小相片

Unsplash 可能是目前全世界最大的免費圖庫,不只有成千上萬、數量龐大的高畫質相片供使用者免費下載,更重要的是為開發者提供 Unsplash API 用於串接這個超大型圖庫(在寫這篇文章時已有 23 萬張 CC0 相片素材),直接讓你取用網站資源。有越來越多的第三方服務或應用程式倚賴 Unsplash 而生,事實上開放不見得是壞事,不重複造輪子也是一個相對省力的方法,網站上提供的相片可作為任何用途,避免誤用到可能會有版權爭議的素材。

Placemat 漂亮的佔位圖片產生器,開發網頁快速嵌入特定尺寸範例圖片

Placemat 漂亮的佔位圖片產生器,開發網頁快速嵌入特定尺寸範例圖片

如果你的工作是網站設計或前端開發,那麼可能會需要用來填充版型、預覽效果的範例圖片和文字,文字可以使用假字假文產生器來建立,圖片部分則必須尋找佔位圖片等服務,什麼是佔位圖片(Placeholders)呢?簡單來說,佔位圖就是能依照你需要的長度、寬度來快速產生符合尺寸的特定圖片,填充目前仍空白的開發環境,為圖片預留位置。

如何下載、匯入 WordPress 佈景主題開發測試範例元件(Theme Unit Test)?

如何下載、匯入 WordPress 佈景主題開發測試範例元件(Theme Unit Test)?

說到 WordPress,最為人津津樂道的就是它的外掛和佈景主題資料庫相當龐大,也因為它提供了非常完整的開發資源,讓每個人都能設計自己所需的元件或模版樣式。如果你也想為自己的 WordPress 網站開發獨特的版面設計,官方說明文件(WordPress Codex)提供了一個測試範例元件檔案,能產生一堆用來開發測試用的內容,非常好用。