收下這個占位圖生成器，讓你的原型圖更精致！

在設(shè)計網(wǎng)頁或是配置版面時經(jīng)常會需要預(yù)先保留圖片位置，讓開發(fā)或示范時使畫面更接近最終樣貌，如果手邊的圖片還沒處理，我們可以通過占位圖片呈現(xiàn)出特定大小的圖片范圍。簡單來說，占位圖片生成器利用網(wǎng)址直接調(diào)整、產(chǎn)生特定尺寸范例圖，省去必須自行裁切圖片的麻煩，因?yàn)槭且跃W(wǎng)址形式加載圖片，即使沒有下載圖片依然能在網(wǎng)頁上顯示。

本文要推薦的「Dummy Image」算得上是占位圖片生成器翹楚，Dummy Image 讓開發(fā)者在線產(chǎn)生特定尺寸大小、背景色、文字色、文件格式或帶有文字的范例圖，除了利用網(wǎng)頁界面調(diào)整各個選項(xiàng)，亦可通過網(wǎng)址進(jìn)行設(shè)定，快速制作出開發(fā)或設(shè)計版面時會用到的占位圖。

Dummy Image 是一個開放源碼（Open Source）項(xiàng)目，相關(guān)信息可在 GitHub 找到，也有不少開發(fā)者將它制作成不同程序語言版本。值得一提的是網(wǎng)站收錄許多常見的廣告尺寸、屏幕和影片大小，通過鏈接快速帶入某個你想使用的范圍大小，就能達(dá)到預(yù)覽效果。

Dummy Image

網(wǎng)站鏈接：https://dummyimage.com/

使用教學(xué)

開啟 Dynamic Dummy Image Generator 占位圖產(chǎn)生器后，會有一個預(yù)先顯示的占位圖，從下方選項(xiàng)調(diào)整圖片尺寸、背景顏色和前景文字顏色，格式部分有 png、gif 和 jpg 三種格式，可以將圖片保存后使用，或是利用圖片下的網(wǎng)址來插入圖片。

默認(rèn)情況下 Dummy Image 會在圖片里標(biāo)示尺寸大小，如果想要顯示其他文字，也可以直接輸入在下方「Text」字段（這里可正常顯示中文），文字就會呈現(xiàn)出來，很適合用來對于圖片位置標(biāo)記命名。

透過 Dummy Image 就能快速產(chǎn)生特定尺寸大小的占位圖片。

如果在開發(fā)網(wǎng)頁或應(yīng)用程序時想要預(yù)留廣告字段，測試一下廣告放進(jìn)頁面后的效果，從 Dummy Image 網(wǎng)站就能找到各種標(biāo)準(zhǔn)廣告尺寸（像是常見的 300×250、336×280、468×60 或 728×90 等等），點(diǎn)選廣告名稱就能取得該大小的占位圖或是直接復(fù)制鏈接使用。

其他還有像是標(biāo)準(zhǔn)的屏幕尺寸、影片大小都能找到對應(yīng)的占位圖。

其實(shí) Dummy Image 所有功能都可以通過網(wǎng)址進(jìn)行設(shè)定，舉例來說，網(wǎng)址后方接上的第一個數(shù)值是圖片寬度，使用單一數(shù)字會產(chǎn)生該長度的正方形，直接輸入像是 640×480 產(chǎn)生特定尺寸的占位圖；第二和第三個數(shù)值分別代表背景色和文字顏色，使用 hex 數(shù)值指定色碼。

其他還有設(shè)定圖片格式、自定義文字等等用法，有興趣的話可參考網(wǎng)站說明文件。

值得一試的三個理由：

• 可產(chǎn)生特定尺寸、顏色和格式的占位圖片（Placeholder）
• 利用網(wǎng)址直接調(diào)整圖片大小等各項(xiàng)參數(shù)
• 提供各種廣告標(biāo)準(zhǔn)尺寸、屏幕和影片尺寸

更多網(wǎng)站推薦：