介紹好用的產圖工具 Fake images ,快速產出示意圖讓版面更完整!

閱讀時間約 1 分鐘


前言

今天是2023年的最後一個工作天,來跟大家分享一些好用的工具,當設計正在努力製作圖片尚未產出時,又需要先DEMO版本的話,你可以先用Fake image來協助你讓版面更加完整。


使用方式

假設你今天需要一個800*300的Banner,那你可以輸入

<img src="https://fakeimg.pl/800x300/">

產出結果,這樣你就會獲得一個「符合尺寸」的預設圖

raw-image

那如果今天你想要「自訂文字」,告知這個是什麼用途,你可以這樣做

<img src="https://fakeimg.pl/800x300/?text=Banner(800*300)">

產出結果

raw-image

值得注意的是,如果你要打中文字的話,要改字型才可以使用

The support for japanese, korean and chinese text is available with the use of the Noto font (font=noto)

<img src="https://fakeimg.pl/800x300/?retina=1&text=輪播圖&font=noto">

使用方法非常快速簡單好懂!快去試試看吧~


其他延伸

假設你今天不是寫網站的人,單純想要獲得指定尺寸的圖片也是可以的,在網址設定你需要的資料後,點開網址按「下載」即可

實際演練如下

假設你設定的條件是800*300尺寸的圖,那網址會長得像這樣

https://fakeimg.pl/800x300/

接著把網址點開來,直接下載就可以獲得圖片了!

raw-image



來源資料

https://fakeimg.pl/

開發之路有你有我有卡比,收錄各種開發的技術分享與疑難雜症解★☆
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
NPM 時遇到版本相依的衝突,原因是什麼,提供四種解決方式
NPM 時想要固定套件安裝版本,有兩種方法可以達成目的
VSCode 好用的輔助開發工具 i18n Ally
Axios 如何處理陣列數組資料的傳遞,使用qs套件快速完成吧!
NPM 時遇到版本相依的衝突,原因是什麼,提供四種解決方式
NPM 時想要固定套件安裝版本,有兩種方法可以達成目的
VSCode 好用的輔助開發工具 i18n Ally
Axios 如何處理陣列數組資料的傳遞,使用qs套件快速完成吧!
你可能也想看
Google News 追蹤
Thumbnail
如果你也跟Gerald一樣想要自行定義運動時手錶的顯示資料與界面, 那你就一定要來體驗一下Coros的這個功能!
Thumbnail
本篇介紹妙角回春第一把設計的梳子『大牛角梳』,利用牛角的原型設計成柱狀,立體好握,有一些重量,可以梳的比較深入。用來梳頭、梳全身。❤️
Thumbnail
序-接觸產品的原因 去年年中的時候第一次接觸到這個保養品其實本身就是一個膚質不怎麼穩定的男生混合肌皮膚,所以對產品的選擇一直以來都是換來換去,比男朋友還要常換的概念,但自從遇到的塔卡米 我覺得我整個皮膚就像是強制打上了鎮定劑一樣,服服貼貼安安穩穩,不知道大家有沒有去看最近剛上映的「可憐的東西」我就
Thumbnail
如果你也跟Gerald一樣想要自行定義運動時手錶的顯示資料與界面, 那你就一定要來體驗一下Coros的這個功能!
Thumbnail
本篇介紹妙角回春第一把設計的梳子『大牛角梳』,利用牛角的原型設計成柱狀,立體好握,有一些重量,可以梳的比較深入。用來梳頭、梳全身。❤️
Thumbnail
序-接觸產品的原因 去年年中的時候第一次接觸到這個保養品其實本身就是一個膚質不怎麼穩定的男生混合肌皮膚,所以對產品的選擇一直以來都是換來換去,比男朋友還要常換的概念,但自從遇到的塔卡米 我覺得我整個皮膚就像是強制打上了鎮定劑一樣,服服貼貼安安穩穩,不知道大家有沒有去看最近剛上映的「可憐的東西」我就