UD5工具箱
步骤一：选择图片来源
打开工具页面后，首先需要选择图片来源。工具提供 Picsum Photos 和 Lorem Pixel 两个选项。Picsum Photos 提供来自 Unsplash 的高质量摄影图片，风格现代自然，推荐用于大多数网页设计项目。Lorem Pixel 提供经典占位图片，支持更精细的分类控制。如果你不确定选择哪个，建议先尝试 Picsum Photos，它的图片质量普遍较高且加载稳定。选择图片来源后，后续所有设置都将基于该来源进行生成。
步骤二：确定图片尺寸
接下来需要确定占位图的尺寸。工具提供了两种方式：预设尺寸和自定义尺寸。如果你需要的是常见的设备分辨率，可以直接点击预设尺寸按钮快速选择。例如，如果你正在设计一个桌面端的页面横幅，可以选择 1920x1080；如果需要手机竖屏图片，可以选择 375x812。如果预设尺寸中没有符合需求的选项，可以在自定义尺寸输入框中直接输入所需的宽度和高度数值（单位为像素）。尺寸选择是占位图生成的关键步骤，建议根据实际使用场景选择最接近真实展示尺寸的数值。
步骤三：选择图片风格
根据项目的设计调性选择合适的图片风格。工具提供了八种风格分类：自然（风景、山水、植被）、城市（建筑、街道、天际线）、人物（人像、肖像、人物场景）、动物（各类动物特写和场景）、食物（美食、餐饮、烹饪场景）、技术（电子设备、科技产品、数码场景）、抽象（几何图案、色彩构成、艺术图形）和随机（不限主题的随机图片）。如果你的设计项目有明确的主题方向，建议选择对应的风格分类以确保占位图与整体设计协调。例如电商网站可以选择食物或人物风格，科技公司官网可以选择技术或城市风格。
步骤四：设置图片效果
根据需要为占位图添加效果处理。工具提供灰度和模糊两个效果选项。灰度效果会将图片转换为黑白，适用于需要与彩色正式图片形成区分的场景，也常用于表示内容尚未最终确定的设计原型。模糊效果会施加高斯模糊，常用于背景图片处理，能够让前景的文字和 UI 元素更加突出。两个效果可以单独使用也可以叠加使用。如果你不确定是否需要效果处理，可以先不勾选，生成占位图后再根据实际效果决定。需要注意的是，效果处理会在图片生成后实时应用，无需等待额外的处理时间。
步骤五：配置 Seed 参数（可选）
如果你需要在多个位置使用完全相同的占位图，可以启用 seed 参数功能。在 seed 输入框中输入一个任意数字或字符串作为种子值。使用相同种子值生成的占位图将始终返回同一张图片。这一功能的实际应用场景包括：在同一页面的多个组件中使用相同背景图片、在不同页面间保持占位图的一致性、在设计迭代过程中确保占位图位置不变。如果你不需要图片保持一致，可以留空 seed 输入框，每次生成都会获得不同的随机图片。Seed 参数是提升设计一致性的实用功能，建议在团队协作项目中使用。
步骤六：预览与复制代码
完成所有设置后，工具会自动在预览区域展示生成的占位图。仔细检查预览图片的尺寸、风格和效果是否符合预期。如果需要调整，可以随时修改之前的设置，预览图会实时更新。确认满意后，根据你的项目技术栈选择对应的代码格式进行复制：HTML 格式生成标准的 img 标签代码，可直接粘贴到 HTML 文件中；Markdown 格式生成 Markdown 图片语法，适合在文档和博客平台中使用；CSS 格式生成 background-image 属性值，适合将图片作为元素背景使用。点击对应的复制按钮即可将代码复制到剪贴板。
步骤七：下载图片或应用到项目
如果你需要将占位图保存到本地，可以点击下载按钮将图片以 PNG 或 JPG 格式保存到本地文件系统。下载的图片可以离线使用，适合需要在本地环境或内网项目中使用占位图的场景。如果你选择在线使用，可以直接将复制的代码粘贴到项目文件中。使用 HTML img 标签时，确保 src 属性指向正确的图片 URL；使用 CSS 背景图片时，确保 url() 函数中的路径正确。在响应式设计中，建议同时设置图片的 width 和 height 属性或使用 CSS 的 max-width: 100% 来确保占位图在不同屏幕尺寸下正确显示。如果使用了 seed 参数，记得在所有需要相同图片的位置使用相同的种子值。