# 前言
不知道大家在搭建博客的过程中有没有一种想法:博客不仅仅是保存和分享自己文章的载体,其本身的设计也是表达自己性格、爱好甚至是理念的一种方式,而一个标志性的图像则是对整个站点的一个艺术性的总结。当然,本站作为一个爱好 ACGN 的温馨小窝,做一个看板娘正好符合总结 ACG 的元素以及本人自身的喜好。并且大多数与 ACG 文化相关的网站(如早期的 bilibili 和萌娘百科等),使用美少女形象的看板娘一直都是这些网站的标志性形象。而对于大多是一般网站来说,使用独特且美观的吉祥物也是相同理论的设计。
AI 在最近的蓬勃发展早已让许多事情都变得更加简单。原本由于各个个人网站的站长技术能力,特别是向我这种没有绘画基础的站长想要设计一个看着不错的看板娘是十分困难的。但现在在 AI 生成绘画的加持下,加上自己的一些 PS/AI(Adobe Illustartor)小技巧,就可以做到像这样的效果:
这是我专门为看板娘设计的展示海报,主要是为了展示人设图和一些 Q 版表情,海报设计思路来源是来自 bilibili 的平面设计 UP 主剋珞迦。与此同时,海报中的 Q 版形象也已经在友情链接中和友链装饰卡片组合使用了。在未来你可能会看到更多有关看板娘 “趣乃” 的元素出现在小站,丰富小站的整体设计并替换一些外来素材。
所以,这篇文章将会由我制作看板娘的流程中提取一些经历,讲解从使用 Stable Diffusion 生成基础角色立绘形象,到简单 PS 处理以及配套的海报设计思路等步骤,带您了解这一切是怎么实现的。
# 使用工具介绍
以下是这次文章介绍中可能会使用到的工具:
工具 | 用途 |
---|---|
Stable Diffusion(主要) | 主要图像生成工具,可使用其他工具替代。 |
Adobe Photoshop | 修图工具,或可作为平面设计工具。 |
Adobe Illustrator(可选用) | 可选用的更专业平面设计工具,可使用 PS 代替。 |
# Stable Diffusion
Stable Diffusion 是一个文生图深度学习文本到图像生成模型。优点是其开源且可以在本地部署,相较于 DALL-E 等模型更加自由开放,有很多来自社区训练的 Checkpoint 和 LoRA 提供更高质量且自定义程度极强的创作环境。缺点便是对本地的 GPU 和内存以及硬盘的存储空间要求高,最低要求至少 NVIDIA 20 系 GPU 和 16GB 内存起步,存储空间依据您下载的模型和工具而定(特别是在 Checkpoint)。尽管如此,在我的使用经验来看,至少要在英伟达高端显卡和 32GB 以上的内存条才能使用的比较顺心。
例如我使用的是 RTX4070Ti(12GB 运存)和 32GB 的内存条,在正常的 sd、sdxl、Pony 和 NoobAI、Illustrious 训练模型上生成时间最多在 20 秒以内,但是在 Flux 训练模型上则需要比其他模型花费更多的时间和硬件占用。所以如果硬件太低的话,也可以尝试使用 OpenAI 的 DALL-E 模型在 ChatGPT 中来生成图像,但代价则是自定义程度低且需要一些开销。又或者去找寻一些托管 Stable Diffusion 的网站,代价也是削减一些自定义程度,但靠谱的托管服务并不好找。
如果您有继续使用 Stable Diffusion 的意愿,可以参考以下有关 Stable Diffusion 的工具和术语:
- WebUI:WebUI 是 Stable Diffusion 在本地化部署中所使用的可视化工具。其在 Stable Diffusion 模型在本地部署的环境中给用户带来了最简单便捷且快速的交互方式,也是我在本次制作看板娘流程中使用的工具。推荐使用其分支 Stable Diffusion WebUI Forge,在原版的基础上旨在简化开发、优化资源管理、加快推理速度并研究实验特性,并且支持其作者 lllyasviel 为 Stable Diffusion 开发的各种实用插件(例如生成透明背景的插件)。
- ComfyUI:同样是在本地化部署中所使用的可视化工具,但相较于 WebUI 简单快速的交互设计思路,ComfyUI 更注重于在 Stable Diffusion 中搭建类似于虚幻引擎的工作流交互平台。通过将工具显示为一个个节点,用户可以将其连接在一起搭建工作流来完成更加自定义的交互方式,并且在设置变量和生产图片来说更加专业化。ComfyUI 在图形化上也更加专业,其在使用上更像一个专业的生产软件,设置和更新也比 WebUI 更容易理解且方便。在工作流产生错误时会精确地提出错误和解决方案(比如当工作流缺少插件时,ComfyUI 会精准给出错误原因和插件的下载以及更新)。对于大多数不会设置工作流的用户来说,通过在 ComfyUI 导入由 Stable Diffusion 生成的图像文件(png)也可以自动生成其文件的工作流。
请注意由于在本次制作流程中并未使用 ComfyUI,本文将不会涉及有关 ComfyUI 的使用方法以及工作流。但如果您有时间尝试学习 ComfyUI,您可以获得更加专业的生产环境。 - Civitai:Civitai 是一个大型 AI 模型社区网站,许多大佬会选择在此处发布自己训练的 Checkpoint、LoRA 和其他有关 AI 图像生成的模型。但请注意该网站(civitai.com)也有发布 NSFW(不适合工作场所俗称涩涩或者暴力)的相关内容,如果您对该内容比较介意请访问他们的 SFW 站点(civitai.green)。
- Checkpoint:Checkpoint 是人们通过 Stable Diffusion 开源模型训练的模型数据,对于我们来说可以将其认作为在某一方面更加专精的精炼模型,目前市面上主流的 Checkpoint 基本上都是从 sd、sdxl、Pony、Illustrious、NoobAI 和 Flux 这几个基础模型训练而来。对于在本次的使用场景中,我更加推荐 NoobAI 和 Illustrious,这两个基础模型训练的模型在 2D、动漫领域中有更加优秀的表现。在下载 Checkpoint 时请注意一些优秀模型的至少会有 6GB 的存储占用,甚至有些未修剪的模型会占用 22GB(特别在以 Flux 为基础训练的模型上尤其明显),需要留意硬盘的剩余空间来保证正常使用。
- LoRA:LoRA 是用作微调的微调模型,相较于需要好几台 GPU 来训练的 Checkpoint 来说更加容易训练且轻量化(通常只占用 10~500MB 的大小)。通常会与 Checkpoint 一起使用来让图像更加风格化:例如在一款二次元风格的 Checkpoint 中,使用一些 Q 版风格的 LoRA 来保持图像能够稳定生成表情包(本次制作流程中就使用了 LoRA 来生成表情包)。你也可以使用一些专注于生成人设图的 LoRA 来生成多视图和表情差分。
# Adobe Photoshop
相信大家都知道 PS 的大名,Photoshop 在修图方面有着非常专业和细节的功能。我在这次流程中由于先生成的 Q 版形象,导致在之后依照 Q 版形象来生成完整人设也只生成了上半身,所以用 Photoshop 钢笔工具画了大腿的一部分。
但其实在绝大部分情况下,Photoshop 基本都是用在抠图或者平面设计上。像绝大部分不了解情况的人们认为的什么六根手指畸形种的情况在现在训练的模型数据下几乎很少出现,并且也可以通过负面提示词来减少出现错误的可能性。在极端情况下(例如一张图里有一群人或者大规模人群)才会出现错误,但对于我们用来生成人设图和表情包的情况下,我们不必担心会出现这种问题。
# Adobe Illustrator
相较于 PS 来说,Illustrator 并没有 PS 那么出名。Illustrator 更加注重于在平面设计中完成排版,在排版上能做到比 Photoshop 更加精细的操作。如果您有多余的资源,可以尝试使用 Photoshop 完成图像处理,再配合 Illustrator 完成排版。
# 人设生成
当你已经下载好了需要的工具后,您就可以启动 WebUI 正式开始生成人设了。
当你下载好 Checkpoint 后,在 \webui\models\Stable-diffusion
路径下放置 .safetensors
后缀的模型文件。同样,下载好 LoRA 后,在 \webui\models\Lora
路径下放置 .safetensors
后缀的 LoRA 文件。尽管两者使用的都是相同的后缀,但是一般您可以通过文件命名以及文件大小来区分两者。
在 WebUI 中,顶部会显示一个有关 Checkpoints 的下拉栏,在此请选择自己已经下载好的 Checkpoint。如果您是在启动 WebUI 后放置的 Checkpoint 文件,可以点击下拉栏旁的刷新按钮刷新显示。其次在下拉栏下方的主菜单中可以切换 “文生图 txt2img”、“图生图 img2img”、和 “LoRA” 等各种页面,我们选择 “文生图 txt2img” 即可。
紧跟着也是最明显的是两个输入栏,分别是 “Positive Prompts” 正向提示词输入栏以及 “Negative Prompts” 负面提示词输入栏。您需要在此处写入有关图像的提示词来帮助模型生成您希望绘制的图像,也需要填入一些负面提示词避免模型绘制您不希望看到的图像。以下是我在制作流程中使用输入的提示词以作参考:
# 以下提示词用于生成哭泣Q版表情包 | |
# 正向提示词 Positive Prompts | |
chibi,chibi style,honkaiemote,cute anime girl,short white hair,pink highlights hair,fluffy hair,pink eyes,short hair,ahoge,white clothes,midriff,off-shoulder_shirt,t-shirt,short_shorts,looking_at_viewer,blushing,adorable,soft shading,pastel colors,crying,upper body,cropped torso,centered,clean background,<lora:emote_honkai_v1:1>, | |
# 负面提示词 Negative Prompts | |
realistic,photorealistic,ugly,bad anatomy,extra limbs,blurry,text,watermark,long hair,adult,nsfw,mature,low quality, | |
# 在实际生成时,会在生成图像时添加或删除部分提示词。 | |
# 大多数提示词可以通过翻译软件来填写,或者通过搜索引擎查找特殊的提示词。在B站上也可以找到中文用户制作的与提示词相关的WebUI插件。 |
一些重要的提示词例如 clean background
可以不生成复杂背景方便抠图, upper body
用于仅生成上半身保证不让表情包生成上半身以外的内容(全身像请使用 full_body
)。负面提示词中的 ugly, bad anatomy, extra limbs, bad hand
等都是防止模型生成一些奇怪图像的提示词, long hair
类的提示词则用于防止模型生成预定人设之外的人物造型, text, watermark
等防止生成文字和水印。如果比较在意图片画质(特别是在于真实类图像的生成),可以在正向提示词中输入 “高画质,超清画质” 之类的提示词,负面提示词写一些 “低画质,模糊” 之类的即可。如果害怕模型生成不良内容,也可以在负面提示词中填写 nsfw
。
在填写提示词时使用 <lora:lora的名称:权重数字>
即可调用您下载的 LoRA,LoRA 的具体使用方式和权重设置也请参考 LoRA 作者提供的说明。例如我的提示词中使用了星穹铁道 Q 版表情包的 LoRA,使表情包生成风格表现一致。如果您在启动 WebUI 后添加了 LoRA,则需要在主菜单中切换到 LoRA 页面后点击刷新按钮刷新 LoRA。
同样在普通的提示词中,您也可以为其添加括号 ()
来增加它的权重,每增加一个括号即代表增加了 “1.1” 数字的权重。使用 (提示词:权重数字)
的格式能更加精细地表达提示词的权重,例如 (1girl:1.2)
即代表图片中一个女孩的提示词有 1.2 的权重。模型会按照提示词的先后顺序,其次会更注重生成权重更高的提示词来生成图像。
接着就是有关生成前的设置,如图所示,一般都会在输入栏的左下方:
其中 Sampling method
, Schedule type
, CFG Scale
和 Sampling steps
请按照您下载的模型相关说明进行设置。 width
和 height
分别对应图像的长与高,虽然可以按照您的需要生成不同尺寸的图片,但也请尽量根据您选择的模型所选的训练图片的尺寸来分配(例如训练图片尺寸的是 1024*1024
,那么您最好将长或高的其中一个设置为 1024
),通常模型作者会告知您他们所选用的训练图片分辨率。 Seed
则是模型生成时所使用的随机字符用来产生图像的随机性(俗称 “种子”,默认为 - 1,意为随机),图像生成后所随机的种子一般会显示在右侧图像下方的详细信息中,生成出来的图像文件名也包含所生成出来的种子。
其他设置保持不变,您就可以点击输入栏右边的 Generate
开始生成图像了,如果您的配置和我相似的话,通常只需要 10s-20s 即可生成出一张图像。一般来说生成单人物图像时不会出现很大的画面错误,但想要生成满意的图像也需要多生成几次,有时也需要根据要求修改提示词。生成人物在图像中占比很小的图片时(或者生成脸部手部出现错误时),可能需要类似 ADetailer 的插件来二次绘制部位。其会在图像生成完毕后自动开始在图像中捕捉部位并进行二次绘制,但也因此将会花费更多地时间出图。
如果您生成出了一张非常满意的人设后,就可以保存图像生成时的种子以及您的提示词和所有设置。将 seed
的 “-1” 修改为您保存的种子时,只要您同时使用了相同的设置、提示词、Checkpoint 以及 LoRA,就可以让模型生成出一模一样的图像。在生成差分图像或者修改部分内容的时候,您也可以直接使用保存的种子,仅修改部分提示词的情况下来生成相似的图像。在修改期间务必注意保持提示词的顺序,否则极大可能会改变图像的生成风格!您也可以使用 ControlNet 插件,根据您最满意的一张图片来保持生成图像的风格。
请注意一些模型可能会要求设置 CFG Skip
(通常为 2)来增加生成速度和创造性,通常需要在 WebUI 设置页面设置后才会将其显示在 Checkpoint 下拉栏旁边。你可以在这个 GitHub 讨论中了解如何设置 CFG Skip。尽管如此,个人使用感受下 CFG Skip 在大多数情况下并不会影响图像生成,但在一些复杂画面下可能会有所帮助。
# 后期处理
当您获得了一张或多张满意的图像后,您可以在 \webui\outputs\txt2img-images\
路径下看到按照日期排列的文件夹,其中就有您生成的所有图片。或者在图片生成结束时,您也可以直接通过 WebUI 中生成图像展示框下方的文件夹按钮直接跳转到图片所在的文件夹中。之后就可以将他们转移保存到其他文件夹中,导入 Photoshop 做二次处理:比如去除背景或者修改内容。
# 平面设计
由于本文的主题以及长度问题,在此不会过多提及 Adobe Photoshop/Illustrator 的使用方法,主要将着重于设计思路。
首先非常感谢 bilibili 的 UP 主 @剋珞迦 提供的设计思路以及开源精神,这对我设计这张海报提供了很多灵感。其次就是在选课时选了一节叫 “Graphic Design” 的水课,虽然是水课但确实讲了许多普通人不会注意的干货,也算是补充了我对平面设计的理解。
在我参考的剋珞迦大佬视频中展现的思路是先确定好海报中的文案,再开始试验排版。但在我们这次有着明确以人设海报为目标的情况下,我们可以先大致规划出海报的排版,然后再尝试用文案填充内容。
一开始我只确定了海报的大致形状,图中所包括的图形装饰、人物剪影以及背景中的渐变色都是后面才添加的。但在此过程中确定好的人物立绘所在位置将会是整个设计中的重要锚点,你会发现截图中的其他元素都是围绕着人物立绘补充的。为了让人物剪影在整体画面上看起来更加平衡,我在右边添加了一条几何形状,它是由原本我准备放在海报上的 “2025” 字体组合而成的。在刚开始的设计中想要放在海报中但最后被弃用了,之后又惊奇的发现把字距拉到最低拼凑齐来意外地效果不错,就保留在这里了。这也算是某种展现 2025 年份的意义吧,只不过不是很容易发现就是了(笑)
在此之后我们就可以开始考虑海报的文案了。在插入文案时我们首先需要注意的是文案的阅读顺序,例如我的海报阅读顺序如下:
- 100% 元気な少女
- 字重最大,字体占据画布画面大。
- 作为海报的主要标题,也是引导读者能够第一时间看到的内容,应当与图片结合以体现海报的主要内容。但标题最好尽可能地不要详细描述主要内容细节,且尽可能简洁而不过长,吸引读者阅读次要信息。
- 在一些宣传海报上这尤为重要,例如一些促销广告并不会把 “xxx 促销节” 作为主要标题,而是会使用一些短语(或者模因)吸引读者阅读,然后在次要标题或者次要信息中提及促销节活动。对于我们的人设海报,相当于不要尝试把角色名称作为主标题,也不要直接形容图形,而是用符合贴近的引导词来吸引读者。最大 “100%” 将是读者最先看到的,其次读者将会跟寻寻找第二大的 “元気な少女” 来获得 “什么东西 100%” 的答案。
- 大多数主要标题同时也能做到约束作用:在 PS 和 Illustrator 中通过辅助参考线标记标题位置,使其次要元素不超过标题长度。同时也使内容和边界产生距离,使海报看起来更加规整且不杂乱。
- 推荐将海报缩小到一定程度来观察标题是否吸睛。
- Shuno Haku
- 角色名称作为次要信息但属于仅次于标题的重要性,尽量放置在离标题较近的地方并用颜色或者形状区分。
- Paint The Fragments of Dreams
- 字体占据画面空间较小,但应该能在海报中清晰可见。
- 小站的次要标题,同时也是海报想要表达的次要信息,作为看板娘海报,您可以写一些有关角色的台词或者站点的宣传语,作为次要信息来传递。
- 通过阅读完主要信息后,从上到下最优先级就是它。
- 真っ白な想いに 夢のかけらを描いて 動き出す未来
- 丰富次要元素所使用的装饰性文案,同时文案描述了 “Paint The Fragments of Dreams" 的日文原案,作为对次要信息的补充。
- 一开始并没有确定是作为聊天气泡存在与海报之中,在之后配合表情包展出而改编成类似于聊天软件的样式。
- 2025 与海报底部文案
- 这些作为填补海报空白部分所用,通过低透明度填充使文案既能填补空白也不会抢夺其他文案的优先级。
- “2025” 同时也兼具补充画面平衡性的效果。图中人物剪影明显使整体图案偏向右侧,而将 2025 的一部分藏在图像左侧并从此衍生填补左侧达到画面平衡。
在规划好文案信息优先级后,您就可以开始尝试将文案填入排版当中了。遵循优先级的情况下您可以尝试改变和尝试不同的风格并找到最适合图像内容的决定。正如我之前提到,也许随着更多元素的加入,字体的排版和装饰也会做出改变。但只要遵循优先级的状况下,这能更加轻松的排版甚至决定增加或删减信息。
在编排文案的过程中尽可能选择相同的字体风格,例如保持整体使用的字体都是衬线字体或者非衬线字体。或者将其中一个作为唯一的标题,其他信息则使用另一个字体。切记不要将不同风格的字体混用在同一个地方,这会增加排版的割裂感。在选用字体的时候也请注意字体的质量,一般来讲一个好设计的字体会非常注重字体外观的同时考虑到不同字重以及每个字母之间的字距,这能在排版时帮助你减轻很大的负担。最负面的例子就是 Comic Sans 这个字体,尤其避免使用这些被全世界追杀的字体!
其次就是信息的可读性,这会被多发面因素影响:例如字体的颜色、背景的颜色、字体大小、字体间距、行距、字体位置等。请尽量保持字体与背景的颜色对比度,以及按照优先级合理搭配字体大小。字体间距和行距对阅读的影响取决也取决于你的设计:不同的间隔既能做到合理的分段,也会做到难以阅读的极端。
最后就是激发你的创造力的时间了,尝试用图形或者多余内容来填充你的海报。例如在我的海报中,添加了社交软件元素,将 Q 版表情包这个次要信息填充在空白部分,并将其他次要信息文案的外形设计统一在一起。其次便是通过一些图形将立绘和标题变得更加具有立体感,让标题和人物立绘看起来不那么突兀且无聊。最后适当地留白:将画面完全填充内容会使信息过于爆炸,反而让读者难以阅读。通过适当的与海报边界做出边界,既能让信息集中,也能让读者有一个合适的休息区。
如果要将成品进行商用,请注意避免使用非商业许可的字体和素材,或尝试去得到相应的许可。
# 后话
一开始在产生制作站点看板娘的想法是维基萌的站长广树大佬使用 AI 生成了一个博客 LOGO,当时就有想法给自己做个看板娘了。但学业原因,直到拖到现在才被剋珞迦大佬的平面设计唤回初心了,或许这就是平面设计的力量吧,总会激起人心去做自己想做的事情(顺带一提前几天比较火的高考家长 cos 高松灯接考生时使用的海报也是大佬设计的)。
如果您对平面设计感兴趣的话,我比较推荐这个大佬的这几个个视频,可以去了解下大佬的设计思路。他的设计思路在这次看板娘的制作流程中起到了很大的帮助!
- 本文参考视频:https://www.bilibili.com/video/BV1QdLPzsE29/
- 推荐视频:
- 短的解析:https://www.bilibili.com/video/BV1AedBY8Eer/
- 长的解析:https://www.bilibili.com/video/BV1SzT6zYEzH/
- 设计入门:https://www.bilibili.com/video/BV171TrzEEL2/
最后不知道大家有没有发现,其实在海报的表情包中,有两个看起来不太一样的角色。这其实是给我自设头像用的,自己对大 NEP 的执念还是太深了,干脆再做一个给自己当头像用。设定就是姐姐辣!
海报的完整图像就等到时候姐姐的海报做完再出一篇文章水文发出来给大伙鉴赏(笑)。