大年夜厂落地实战若何用Stable Diffusion完成B端和C端图标设计

伴随着 AIGC 非常火爆，各种各样的 AI 工具如雨后春笋般呈现，除了各位设计师知道的 Midjourney（以下简称“MJ”），同样还有十分亮眼的 Stable Diffusion。

以是本日我们紧张教大家如何利用 Stable Diffusion（以下简称“SD”）来进行 B 端图标和 C 端图标的创作，充分将 AIGC 灵巧的利用在项目的事情流程之中。

那首先我们先来看看 B 端图标，有哪些特点？

从上图可以创造紧张特点为：立体块面感、轻科技、材质多为毛玻璃、光泽金属、轮廓光源。

UI 的利用场景多为功能模块赞助装饰、官网开屏页等……

以下图的数据云图标为例：

制作同等设计质量的图标，从三维建模到渲染末了到后期调度，均匀须要 2.5 小时制作周期。
而且设计师须要有一定的三维软件设计能力。

我们先看看 MJ 的利用效果，这里我们利用常规的操作流程，直策应用关键词天生，这里我利用了两种不同的关键词：

第一种：

A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, white background, sense of technology, --ar 1:1

对照翻译：一朵云 Ul 图标，蓝色磨砂玻璃白亚克力材质, 白色背景, 科技感, 影棚灯光, 蓝色磨砂玻璃白色亚克力材质, 白色背景, 科技感, --ar 1:1

第二种：

Cloud icon, blue, frosted glass, transparent technology sense, white background, studio lighting, 3d, c4d, high detail, --ar 1:1

对照翻译：云朵图标，蓝色，磨砂玻璃，透明科技感，白色背景，影棚灯光，3d，c4d，高细节，--ar 1:1

我们可以看出上图直接天生的图标，偏差较大，且形式、角度、质感、颜色无法很好的掌握，基本不能利用。

首先利用垫图的第一种办法，将想要天生图标的参考样式上传到 MJ，接着合营关键词进行操作：

图片链接 + A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, sense of technology, --ar 1:1

右边便是天生的效果（下图中右边）：

MJ 学习了参考图片后，在质感的利用和色彩上也比较靠近想要的风格了，由于参考的图片和须要天生的图像，在造型上有一定的不同，只是用关键词来进行生产，随机性比较强，以是造型不足可控。

接着我们采取垫图的第二种办法，将想要天生图标的造型样式上传到 MJ，合营关键词进行操作：

图片链接 + A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, sense of technology, --ar 1:1

右边便是天生的效果（下图中右边）：

MJ 学习了参考图片后，在造型上靠近了想要的造型，但是在颜色和质感上，就无法学习到了，不太能够利用。

接着我利用组合垫图法，将两张素材都上传到 MJ，接着合营关键词进行操作：

图片链接 1 + 图片链接 2 + A cloud Ul icon, blue frosted glass white acrylic material, white background, sense of technology, studio light, blue frosted glass white acrylic material, sense of technology, --ar 1:1

得出的结论便是：MJ 学习了两张参考图片后，在想要的造型上靠近了一些，在颜色和质感上也靠近了，但是在细节的把控上还是有一定的随机性，还是不能直策应用。

小结一下，MJ 在进行 B 端图标设计的利用中，紧张有以下不敷之处：

下面我们来看看 SD 的效果如何？

我这边利用的 SD 版本是：秋叶 V4；

Checkpoint 大模型利用的是：DDicon；

Lora 模型利用的是：Playstation5DesignAI。

更多SD模型：

“选用适当的模型，随随便便出个图，都要比打上一堆提示词的效果要好。

阅读文章 >

利用的流程我已经在上图标记出来了，大家可以根据步骤进行操作。

这里的正向提示词：

best quality, many details, 4k, blender, octane render, C4D, transparent glass texture, DDicon, blue, frosted glass, transparent technology sense, industrial design, white background, studio lighting, sunshine, flat, minimal, quasi-object, axisymmetric, Data, cylinder, file,

反向提示词：

lowers, bad anatomy, ((bad hands)), (worst quality:2), (low quality:2), (normal quality:2), paintings, sketches, lowres, bad anatomy, bad hands, text, error, missing, tingers,

直接输入进 SD 即可。

这里要提前准备好两张图：线稿图和黑白造型图，同时须要在 ControlNet 里启用两个种别，分别是 lineart 与 canny，将准备好的两张图分别导入进 ControlNet，并设置好参数；

首先采样方法选择“DPM++ SDE Karras”选择 Canny 的 invert 预处理器 以及对应的 Canny 模型，最后记得勾选“完美像素模式”。

然后我们就可以点击天生了，选好天生后以为比较 OK 的图片，发送到图生图中，接着再进行一次 ControlNet 的设置。

上图便是天生的效果啦。

后面可以将符合预期的效果图发送到图生图的局部重绘，涂鸦选择效果图须要重新优化的小细节点。

天生出来的效果图有更好的设计兼容性，末了我们再进 SD 的后期处理进行放大就可以利用啦～

采取 SD 工具赞助 B 端图标的设计，全体设计过程只须要 0.5 小时，紧张事情量紧张在于前期的黑白线稿绘制，大大降落了设计本钱与制作门槛。

二、C 端图标

C 端图标与 B 端图标最大的差异点在于视觉风格更为多样，整体风格配色与造型更为年轻化。
视觉表现形式目前主流为 2.5D 与 3D 类型较多，通过同色系轻渐变塑造表示体积感。

接下来我们再看看 C 端图标该当如何用 SD 进行创作绘制。

我们找素材的时候，图片主体物材质的质感不须要保持相似，这一步只是确保形状调性同等。
须要把稳的是，找的这一套图标，都须要有共同点，这是为了确保后续天生图标构造造型的同等性，使整套图标形成统一的视觉系列感。

例如我找的这几个，它们的共同点便是：轴侧构图、低多边形、圆润规整；之后我们便可以利用 ControlNet-硬边缘检测功能，从而“锁定”图标的大致外轮廓，用 SD 对这些图标进行风格样式的重绘。

利用步骤 - 打开 SD 后

第一步：点击展开 ControlNet，将图片拖动至预览选取框，（把稳，我们要上传的图片有几点哀求：1.背景干净没多余的元素或笔墨 2.图片尺寸比例 1:1，最好为 512x512 大小 3.图片清晰度不能过于模糊，担保外轮廓清晰）

第二步：选择预处理器 Canny（硬边缘检测）以及对应的 Canny 模型

第三步：勾选启用 ControlNet

关于 Checkpoint（俗话叫“大模型”）、Lora 模型，可以在 C 站进行下载，网址为： https://civitai.com/ ；目前“C 站”的模型不断迭代出新，视觉风格包罗万象，本次将会通过利用不同的 Checkpoint 大模型及 Lora 进行视觉调配，天生我们所期望的 C 端图标效果图。

我们先来说说 3D 直播礼物图标类型的图标，这类的图标可采取真实系大模型 Deliberate，搭配造型圆润可爱、质感材质倾向粘土手办的 Blindbox 盲盒和 3D rendering 风格的 Lora 模型。

接着我们来理解下提示词，这里的正向提示词能更好的帮我们确定想要的风格，这里要把稳的一点是：对词语利用双括号意味着让天生的画面更加聚焦于天生的物体，这里的“Polaroid camera（拍立得相机）”如不该用双括号的话，就可能天生：一个人拿着拍立得相机或者拍立得相机放在场景中，为了避免这样的情形，就可以利用双括号；

而反向提示词也比较通用，紧张是在正向提示词中加入想要天生的风格。

在利用 Lora 模型时候，可以在正向提示词区域调度 Lora 模型的效果权重数值，直接影响天生图的视觉风格比重。
要把稳：Lora 权重默认为 1，最低不能低于 0.2，否则没效果影响。

迭代步数指的是 Stable Diffusion 天生图像所需的迭代步数。
每增加一步迭代，都会给 AI 更多的机会去比对提示和当前结果，并进行调度。

更高的迭代步数须要更多的打算韶光。
但高步数并不一定意味着更好的结果。
当然，如果迭代步数太少，会降落天生图像的质量。

这里以 迭代步数 20 和 迭代步数 40 为例子，可以看出 迭代步数 40 天生的图片细节丰富、高质量，反不雅观迭代步数 20 的造型轮廓模糊，短缺细节。

下图便是我们天生的 3D 直播礼物图标，可以看出生成的图标风格还是十分统一的。

下面我们再看其余一个案例：赛博机器图标。

这类图标我们选用的大模型是：MechaMix Lora 模型为：Real Mechanical Parts。

这里要说的一点是关于触发词，很多创作者在 C 站上传模型时，会带上触发词，我们可以在右边的先容中直接查看，并将触发词加入到正向提示词中，这样能让 SD 更准确的识别模型的预设效果与参数。

有一个知识点要把稳一下叫 canny 权重，由于机器风格每每造型构造相对繁芜夸年夜，这里我们把 Canny 掌握权重从默认的 1 调度为 1.5。
缘故原由是掌握图标形状变革差异不要过大，使得与参考图不符。

这里以 掌握权重 0.6 和 掌握权重 1.5 为例子，可以看出掌握权重 0.6 天生的图片剥离外轮廓造型，造型自由发挥，比较浮夸、反不雅观掌握权重掌握在 1.5 的图片则更看重形状轮廓，天生的比较靠近我们想要的。

下图便是我们天生的赛博机甲图标，可以看出生成的图标风格无论是在造型、配色、视角都十分统一，下面我罗列一些目前市场上比较盛行风格的提示词，按照上面教的步骤就可以天生对应风格的图标了。

描边厚涂手绘图标：

正向提示词：

((图标内容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), jim lee

个中：jim lee 为触发词

反向提示词（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

国风水墨图标：

正向提示词：

((图标内容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), shuimobysim, wuchangshuo,

个中：shuimobysim, wuchangshuo 为触发词

反向提示词（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

扁平轻渐变图标：

正向提示词：

((图标内容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), vector, 2d, geometry, Flat Style, Colorful gradient, game icon institute,

个中：game icon institute 为触发词

反向提示词（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

像素风格图标：

正向提示词：

((图标内容:1)), isometric view, paint material, glossiness, cartoon, clay material, (cute), white background, fine luster, mockup, behance, dribbble, soft circularism, (low poly:1), pixel art, 2d, Low Resolution, pixel, pixel sprite, 16bitscene,

个中：pixel, pixelsprite, 16bitscene 为触发词

反向提示词（通用）：

Grayscale, low saturation, (worst quality, low quality:2), ((character:2)), EasyNegative, bad_prompt_version2

我们可以将 AI 天生的位图通过这个在线网站（ https://vectorizer.ai/ ）工具转换成可编辑的 SVG 矢量图，该网站不须要注册，而且完备免费的，我们将下载好的 SVG 矢量图拖至 Figma 或者 Adobe AI 软件，便可以编辑对应的路径及视觉样式。

末了，文章到此就告一段落了，当然这只是 AIGC 在 UI 实际利用场景中的一部分，本文可以说是给 AIGC 的初学者供应了勾引的浸染，后续我们还会推出更多类似的文章，请敬请期待～

欢迎关注作者微信"大众年夜众号：「ASAK」