分類: 網頁開發

各種範例圖片產生器,網頁版面設計的好工具

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

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

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/
G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

3 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago