收下这个占位图生成器,让你的原型图更精致!

占位图占位图生成器神器推荐
最美UI小编收集整理的收下这个占位图生成器,让你的原型图更精致!教程,供你快速学习设计工具

在设计网页或是配置版面时经常会需要预先保留图片位置,让开发或示范时使画面更接近最终样貌,如果手边的图片还没处理,我们可以通过占位图片呈现出特定大小的图片范围。简单来说,占位图片生成器利用网址直接调整、产生特定尺寸范例图,省去必须自行裁切图片的麻烦,因为是以网址形式加载图片,即使没有下载图片依然能在网页上显示。

本文要推荐的「Dummy Image」算得上是占位图片生成器翘楚,Dummy Image 让开发者在线产生特定尺寸大小、背景色、文字色、文件格式或带有文字的范例图,除了利用网页界面调整各个选项,亦可通过网址进行设定,快速制作出开发或设计版面时会用到的占位图。

Dummy Image 是一个开放源码(Open Source)项目,相关信息可在 GitHub 找到,也有不少开发者将它制作成不同程序语言版本。值得一提的是网站收录许多常见的广告尺寸、屏幕和影片大小,通过链接快速带入某个你想使用的范围大小,就能达到预览效果。

Dummy Image

网站链接:httPS://dummyimage.com/

使用教学

开启 Dynamic Dummy Image Generator 占位图产生器后,会有一个预先显示的占位图,从下方选项调整图片尺寸、背景颜色和前景文字颜色,格式部分有 png、gif 和 jpg 三种格式,可以将图片保存后使用,或是利用图片下的网址来插入图片。

收下这个占位图生成器,让你的原型图更精致!

默认情况下 Dummy Image 会在图片里标示尺寸大小,如果想要显示其他文字,也可以直接输入在下方「Text」字段(这里可正常显示中文),文字就会呈现出来,很适合用来对于图片位置标记命名。

收下这个占位图生成器,让你的原型图更精致!

透过 Dummy Image 就能快速产生特定尺寸大小的占位图片。

收下这个占位图生成器,让你的原型图更精致!

如果在开发网页或应用程序时想要预留广告字段,测试一下广告放进页面后的效果,从 Dummy Image 网站就能找到各种标准广告尺寸(像是常见的 300×250、336×280、468×60 或 728×90 等等),点选广告名称就能取得该大小的占位图或是直接复制链接使用。

其他还有像是标准的屏幕尺寸、影片大小都能找到对应的占位图。

收下这个占位图生成器,让你的原型图更精致!

其实 Dummy Image 所有功能都可以通过网址进行设定,举例来说,网址后方接上的第一个数值是图片宽度,使用单一数字会产生该长度的正方形,直接输入像是 640×480 产生特定尺寸的占位图;第二和第三个数值分别代表背景色和文字颜色,使用 hex 数值指定色码。

其他还有设定图片格式、自定义文字等等用法,有兴趣的话可参考网站说明文件。

收下这个占位图生成器,让你的原型图更精致!

值得一试的三个理由:

  • 可产生特定尺寸、颜色和格式的占位图片(Placeholder)
  • 利用网址直接调整图片大小等各项参数
  • 提供各种广告标准尺寸、屏幕和影片尺寸

如果觉得最美UI所整理的设计内容对你有所帮助,欢迎将最美UI网站推荐给身边设计好友。

本设计资源来源于网友网络收集整理提供,主要用于学习设计之用,请勿直接用于商业化设计。

猜你在找的设计工具


又发现一个!摄影师出品的免费可商用图库!
大家平常都习惯去哪些免费图库网站找图呢?虽然有一些老牌、图片数量充足的图库,像是 Unsplash、Pixabay、Pexels,但后来经过人工智能和大数据学习的搜寻工具更深得我心,也能通过算法将质量较低、不适合使用的图库
Adobe 2020全家桶更新全解读,设计师直呼:也太智能了吧!
2020年开始Adobe公司进行了全方位的更新,先是Adobe公司Logo改为了单一颜色的全红Logo,并对这个标志性的红色也进行了更新,使它看起来更温暖、更有时代感。
图片不够大?用这个在线神器放大两倍不失真!
本文要推荐的「Upscale」是一个来自 Sticker Mule 公司的免费图片放大 工具,和更早之前介绍的 Trace by Sticker Mule 相片去背工具相同开发商,透过这项服务可立即提高任何图片或照片分辨率和尺寸大小,而不会有失
大牛出品!上千个流畅设计风格图标免费下载
在一些大公司推动的产品开发都会有「设计语言」(Design Language),简单来说就是将设计的表达方式、偏好或风格系统化,写成明确规范,让设计师和开发人员间能够沟通运用,另一方面也可重复使用设计组件,避免重复开
想提高作品档次?这里有上千个展示模型免费用!
上面这张图看起来是不是很有质感呢?不过这可不是我自己摆设的布景,而是运用合成方式将适当的画面合成到图库素材中的,也被称为「Mockups」,对于要展示一些画面来说非常有用。