IconSplit
Gemini / Nano Banana · 网页素材提取指南

从 Gemini 与 Nano Banana 网页效果图中提取独立素材

把 Gemini 或 Nano Banana 生成的网页图片变成可复用的 Logo、图标与插画。本教程从网页外框裁切开始,介绍素材选择、背景处理和多格式导出。

IconSplit · 更新于 2026 年 10 月 17 日

Gemini 生成的完整网页效果图
Fieldnote Demo 网页设计:一个 Logo、一张主插画和六个功能图标。

1. 下载完整的网页原图

在 Gemini 中生成并下载网页效果图。选择背景清晰、目标素材与文字有一定间距的版本,后续提取会更方便。下面提供本教程的原图和生成提示词,方便跟随操作。

查看案例生成提示词
Create one polished desktop SaaS landing-page mockup as a single raster image, not HTML or code. Use a 4:3 landscape canvas, approximately 1600 by 1200 pixels. The fictional product is "Fieldnote Demo", a small-team project workspace. Include a complete top navigation with a new original abstract leaf-and-note logo, product name, Product, Pricing, Resources, and a Sign in button. Use the headline "Make room for your best work" with a short supporting sentence and a "Start a project" button. Put a standalone editorial illustration to the right of the hero: a notebook, paper plane, and small plant, with generous surrounding space. Below the hero, show six features in a two-row, three-column grid with their own original colored pictograms and brief text labels: Files (folder), Planning (calendar), Messages (chat bubble), Updates (bell), Insights (bar chart), and Security (shield). This must look like a cohesive real website design, not an icon sheet. Use a white content background with restrained emerald, blue, coral and charcoal accents; readable text; generous spacing; clear non-overlapping artwork. Keep the logo, six pictograms and hero illustration visibly distinct from surrounding text. Subtle shading is welcome, but avoid shared shadows between separate assets. No browser window frame, existing brand marks, stock photos, watermarks, or external logos. Generate the image itself.

下载网页原图

2. 裁掉网页外框,保留内容区域

带有灰色展示背景的 Gemini 原图及其检测范围
这张原图先被检测为一个网页容器,需先去掉灰色外框。

将白色网页内容单独裁出,再上传到 IconSplit。这样可以让背景分析聚焦于素材所在的白色页面。本例的裁切范围为左上角 (160, 85)、宽 880px、高 715px,可直接下载裁切后的图片继续操作。

裁掉外框后的 Gemini 网页内容
“试用案例”使用这张已裁切图片。

下载裁切后的案例图

3. 识别素材,调整需要的选区

上传后先预览自动检测结果。本例裁切后的网页检出 18 个区域,其中也包含文字或界面控件。随后使用手动框选,保留 Logo、主插画和六个功能图标,共 8 个素材。

网页图片上的自动检测区域
自动检测结果:检查并排除文字、按钮等非目标区域。
八个素材的手动选区
手动选区:保留每个素材的完整轮廓。

框选时包含日历挂环、铃舌或纸飞机等分离细节,同时避开相邻标签。按 logo、hero、files 等用途命名,便于在项目中查找。

4. 用 Repair 优化背景与边缘

Repair 调整前的文件夹素材
调整前
Light 边缘清理后的文件夹素材
Light 边缘清理后

本例文件夹使用 Light 清理,边缘收缩设为 0px,关闭内部背景清理和平滑。在深色背景上比较结果,再根据素材细线、阴影和白色填充调整强度。

这组图标约 50–64px,建议以接近原始大小使用。JPEG 压缩产生的浅色边缘可能仍需进一步处理。

5. 导出 PNG、WebP 或 SVG

Gemini files PNG
files.png · 下载 PNG
Gemini messages PNG
messages.png · 下载 PNG
Gemini security PNG
security.png · 下载 PNG

PNG 适合透明素材与通用设计交付,WebP 适合网页图片。简单图形可导出 SVG,复杂插画则优先保留 PNG 或 WebP,以保留渐变和纹理。SVG 是重新生成的矢量路径,并非原图中的原始设计文件。

下载盾牌 SVG 示例 · 下载盾牌 WebP 示例

批量交付时,先统一文件名称、导出尺寸与 padding,再将所需素材打包为 ZIP。

下载案例素材包(PNG、SVG、WebP)

6. 将素材用于网页或原型

提取后的素材应用于网页的效果
将 Logo、插画和功能图标作为独立图片用于网页。

查看网页应用示例

按页面中的实际显示尺寸设置宽高,搭配有意义的 alt 文本。预留布局空间,可以减少图片加载时的页面跳动。

常见问题

提取后一定是透明背景吗?

透明效果取决于原图的背景、阴影与边缘。手动框选可以指定目标范围,但不等于所有背景都能自动移除;复杂渐变与融合阴影可能需要进一步编辑。

能把网页图片恢复为代码或设计图层吗?

IconSplit 提取图片素材,不恢复 HTML/CSS、字体文件、隐藏图层或被遮挡内容。导出更大尺寸也不会增加原图没有的细节。

开始提取你的网页素材

上传网页效果图,选择需要的素材,再按项目需求导出。免费账户登录后每天可处理 3 张图片,支持最长边不超过 512px 的 PNG;单图与 ZIP 可用额度以账户显示为准。

需要 WebP、SVG、更大原尺寸或多尺寸导出?查看套餐,选择适合本次项目或长期使用的方案。