這裡介紹各種範例圖片產生器,可以讓網頁設計師在設計版面時,快速產生任意大小的範例圖片。

當我們在設計網頁版面時,常常會因為調整版面而需要不同大小的圖檔來測試整體的視覺效果,在整個設計過程中,通常會不斷地反覆變動版面與圖片大小,如果每次測試都要針對不同的大小來切圖,是一件很費工的事情,以下我們介紹一些好用的工具,可以幫助我們克服這樣的問題。

Placehold.it

Placehold.it 可以讓您直接以 URL 的方式產生指定大小的圖檔,而其圖片上會標示其尺寸大小。例如:

<img src="http://placehold.it/350x150"/>

結果會像這樣:


另外,也可以指定顏色,例如:

<img src="http://placehold.it/350x150/A00000/FFFFFF"/>

產生的圖形為:


名稱:Placehold.it
網址:http://placehold.it/

Dynamic Dummy Image Generator

這個工具跟 Placehold.it 功能差不多,使用方式也相同:

<img src="http://dummyimage.com/350x150/A00000/ffffff"/>

輸出的圖形為:


除了直接以 URL 指定參數之外,您也可以使用他的網頁介面來設定產生圖檔的參數,如果不想花時間研究其語法的人,這個工具倒是很方便。

名稱:Dynamic Dummy Image Generator
網址:http://dummyimage.com/

lorempixel

lorempixel 也是一個可以產生範例圖形的服務,使用方式大同小異,不果他產生的圖形是實際有內容的圖形,例如:

<img src="http://lorempixel.com/350/150/"/>

得到的圖形為:


您也可以選擇想要產生的圖形類別,例如:

<img src="http://lorempixel.com/350/150/sports/"/>

得到的圖形為:


所有可用的圖片類別可以從 lorempixel 的網站上查詢。

您也可以在圖形中加上文字,例如:

<img src="http://lorempixel.com/350/150/sports/GTWang/"/>

得到的圖形為:

在 lorempixel 的網站上也有提供簡單的參數設定介面,讓使用者方便設定自己想要的圖片大小與類型。

名稱:lorempixel
網址:http://lorempixel.com/