這裡介紹各種範例圖片產生器,可以讓網頁設計師在設計版面時,快速產生任意大小的範例圖片。
當我們在設計網頁版面時,常常會因為調整版面而需要不同大小的圖檔來測試整體的視覺效果,在整個設計過程中,通常會不斷地反覆變動版面與圖片大小,如果每次測試都要針對不同的大小來切圖,是一件很費工的事情,以下我們介紹一些好用的工具,可以幫助我們克服這樣的問題。
Placehold.it
Placehold.it 可以讓您直接以 URL 的方式產生指定大小的圖檔,而其圖片上會標示其尺寸大小。例如:
<img src="http://placehold.it/350x150"/>
結果會像這樣:
另外,也可以指定顏色,例如:
<img src="http://placehold.it/350x150/A00000/FFFFFF"/>
產生的圖形為:
名稱:Placehold.it
網址:http://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/
網址: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/
網址:http://lorempixel.com/