placehold-it-image-generator-1

設計網頁時常常需要找寬度、長度合適的圖片來填充區塊,或是測試不同大小圖片的表現。這往往可能浪費很多時間,甚至還要自己動手制作某些特殊尺寸的圖片,相當麻煩。透過方便的在線工具Placehold.it ,可以快速產生任何大小的占位圖片,且能自定義圖片的格式、顯示的文字、顏色等等。

Placehold.it

6hhhhh20151218

舉例來說,Placehold.it 首頁左側就提供了最基本的使用方式,直接在http://placehold.it/ 后面填上你要的圖片尺寸,例如 http://placehold.it/350×150 ,然后以 <img > 卷標來將圖片貼入網頁,就能夠自動生成 350×150 的圖片。

變更圖片格式:

5hhhhh20151218

在 Placehold.it 默認的圖片格式為 gif, 如果你想要使用 .jpeg / .jpg / .png 等圖片格式的話,僅需要在網址后面加上擴展名,例如 http://placehold.it/350×150.png ,這樣就能夠產生 png 格式的占位圖。

變更圖片文字:

4hhhhh20151218

默認的圖片內顯示的是圖片尺寸,不過你可以將它設定為其他文字(不支持中文),目前僅能使用大、小寫的 A-z 、數字及大部分的符號,使用的方法很簡單,只要在網址內加上 &text= 后面接入文字就可以了,例如:http://placehold.it/336×280&text=FreeGroup.org+Cool! 。

設定圖片背景、文字顏色:

3hhhhh20151218

默認圖片使用灰色色系,如果你有需要將圖片的背景、文字顏色做變更,只要在網址后面分別加入背景及文字顏色的 hex codes 即可(#ffffff 是白色),例如:http://placehold.it/250/000000/ffffff (前面被景色、后面文字顏色)。

快速產生正方形圖片:

2hhhhh20151218

Placehold.it 圖片高度是選用的。如果你直接在網址后面加入一個數值,例如http://placehold.it/100 ,那么就會產生一個 100×100 的正方形圖片,非常簡單。

這個服務真的非常的方便且實用,尤其對于常常制作網頁的朋友來說,省去找范例圖片的麻煩,而且 Placehold.it 也幫你處理了圖片儲存的問題,甚至不用自己上傳、儲存圖片,直接從遠程以網址調用圖片就能使用。

Dummyimage

如果你覺得 Placehold.it 不夠直覺、簡單的話,那么可以試試看 Dummyimage,它一樣是個占位圖片產生器,不過可以設定要產生的圖片尺寸、背景顏色、文字顏色、文件格式及顯示的文字,使用上較 Placehold.it 簡單一些。

1hhhhh20151218

【優設近期神器+酷站十四連發!】

LOGO生成網站:《5分鐘搞定!簡單三步幫你在線快速設計精美LOGO的神網站》
直方圖生成網站:《小白也能做圖表!幫你免費在線生成精美直方圖的網站》

《酷站兩連發!在線圖片壓縮神器+在線配色工具COLOURCO》
《酷站兩連發!寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
《酷站兩連發!游戲配色網站+免費美女素材特供網站》
《酷站兩連發!在線配色神器+英文字體推薦網站》
《酷站兩連發!用代碼呈現DRIBBBLE作品+16進制顏色網站》
《酷站兩連發!專注無縫紋理素材站+多邊形背景生成器》

原文地址:free.com.tw

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量106萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏