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

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

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

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

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

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

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

Doodle Ipsum

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

loremizer 把網站內的文字或圖片替換為範例文字或圖庫素材(Chrome 擴充功能)

loremizer

對於平時經常擷取螢幕畫面的使用者來說,很多時候都得搭配繪圖軟體將重要資訊模糊或隱藏,例如不想洩漏的 Email、使用者名稱(帳號)或信用卡卡號等等,之前曾介紹過「Image Blur 線上為圖片特定範圍加入模糊特效,遮蔽重要資訊更方便」就相當有用,把圖片上傳選取要模糊的範圍就能有類似馬賽克效果,但我想起更早之前曾推薦過另一款 Status Snapper(已無法使用)更實用,會自動模糊網站中的重要資訊,讓你在擷圖時不用手動編輯處理圖片。

BLOKK 適合在 Mockup 使用的填充字型,讓視覺效果更貼近真實樣貌

BLOKK 適合在 Mockup 使用的填充字型,讓視覺效果更貼近真實樣貌

如果你是從事網頁開發、平面設計工作的話,應該會很常使用範例文字或圖片來填充設計區域,使 Mockup 或 Wireframe 更貼近完成時的效果。最近我在網路上找到另一個解決方案,透過 BLOKK Font 免費字型可以更快速地為你產生範例文字,這套字型完全免費,而且相當輕巧,主要是把文字轉為類似於方塊的顯示效果,遠遠看起來就有點像是卡通報紙呈現的感覺。

12 個你應該知道的中英文假字、文章產生器(Lorem Ipsum)

12 個你應該知道的中英文假字、文章產生器(Lorem Ipsum)

對於網頁開發或平面設計來說,在工作時可能經常會需要使用一些文字或圖片來填充空白區域,以設計排版,讓它看起來更接近完成時的樣貌,也能協助其他人瞭解你的構想。先前我們曾經介紹過 Placehold.it 範例圖片產生器,可依照使用者的需求來產生特定寬度、高度的圖片,用以測試在不同大小圖片下的網頁呈現效果。那如果需要範例文字,你會怎麼做呢?