前言:
大家好呀,近期一直在写“小文章”教程,因为篇幅问题,我第一时间是把这些文章都更新在公众号上,这篇文章也是一个UI设计篇的合集。以下是我在近半个月时间内写的一些教程,本篇文章主要是在图标设计上的一个应用,希望对大家有所帮助。后续我还是会先以小篇幅的文章优先更新在公众号上,然后等内容多了再整理成合集发布到此平台,废话少说,上干货了!
这个弹窗设计我尝试了很多方法,发现还是需要垫图才能生成符合我想要的效果,所以这个方法还是得去找参考图才行,以下这张图来自花瓣网。
用ps处理下文字,别偷懒~(百度直接搜“花瓣网”即可,然后搜索“弹窗设计”)。
然后我开始尝试写关键词,以下是完整关键词:
Use a card as the background, It is surrounded by clover and white flowers, Green base, White trolley, Pale gold coins, Yellow stars, Clouds, Disney style, cartoon style, 3D, behance, dribbble --iw 2 --v 5.2
使用一张卡片作为背景,四周环绕着三叶草和白色的花朵,绿色的底座,白色的小车,淡金色的硬币,黄色的星星,云彩,迪士尼风格,卡通风格,3D, behance,dribbble
接下来就简单了,垫图+关键词组合。参数命令用 --iw 2(增加图片权重,出图更接近原图)。--v 5.2 这个模型是最新的,用v5和v5.1模型生成的效果也差不多。
03 挑选图片并抠图
Midjourney的随机性大家知道,多跑几次图准有你想要的图:
我是利用Clipdrop抠图的,PS Beta也可以,不过我感觉Clipdrop抠的更好点,这个是它的网址:https://clipdrop.co/
为什么会用到PS Beta呢,是因为我需要处理这个卡片上的元素,我需要有一块空白的地方填写文案,框选不需要的元素,使用“内容填充”和“创意式填充”,根据最终的效果来合理运用。
我们在接到设计需求之后,大家是否会跟我一样,根据需求来去找对应的参考图片。需求分析我就不介绍了,我们直接开始视觉设计篇。
首先就是去找到与需求描述相符的参考图片,注意的是我们下面的操作不会用到“/describe”功能(咱也不能老是用垫图的方法是不,这多没技术含量,虽然很好用...)。老办法,素材网站找参考图,这里还是我们的老朋友:花瓣。
02 根据需求及参考图,写出关键词
画面主体:礼物盒,3D图标,粘土,卡通,任天堂
修饰词:可爱,光滑,光泽,红色和黄色,渐变颜色
细节词:白色背景,最高细节,等距视图,高清,最佳质量
参数后缀:--niji 5 --q 2(质量)
完整关键词咱也不能落下,要分享就拿出咱最大的诚意来:
Gift box, 3D icon, clay, Cartoon, Nintendo, Lovely, smooth, Luster, Red and yellow, Gradient color, White background, The highest detail, The best quality, Isometric view, HD --niji 5 --q 2
这套关键词可以作为画这种3D风格图标的一套模板,可替换的关键词为:
开始跑图吧,剩下的事情就好办了,Midjourney的随机性会让你不得不多跑几组图片,这一点要耐心~
下面一步我会用“Figma”这个软件,大家用PS等设计工具也可以哈,都是可以完成最后一步的,接着看:
04 排版出图,真的可落地!
排个版都会吧,打上文案,加点装饰元素,做个按钮,就很简单...
这期B端运营海报的思路跟上期3D活动弹窗的思路基本一致,因为都是用Midjourney生成icons,那我们就开始吧:
第一步,找风格元素参考去,这是我们接下来描写关键词的重点,建议大家不要凭空想象,先看别人做的,我们参考改进,下面还是这个网站(花瓣):
02 根据需求及参考图,写出关键词
画面主体:一个3D 盾牌 图标
修饰词:蓝色渐变,磨砂玻璃
细节词:超简约外观,明亮色彩,工作室照明,光线追踪,蓝白色背景,工业设计,等距视图,丰富的细节,超高清,高质量,16K
参数后缀:--V 5.2
A 3D shield icon, Blue gradient, Frosted glass, Transparent sense of science and technology, Ultra-minimalist appearance, Bright color, Studio lighting, Blue and white background, Industrial design, A wealth of details, Ultra high definition, dribble, pinterest, Ray tracing, Isometric view, blender, c4d, Oc renderer, High quality, 16K --v 5.2
蓝色标注地方为可替换关键词,其它关键词可保持不变,同样这套可作为B端科技风格图标的一套模板关键词。
03 生成合成图片素材,抠出元素
先来看看我最终设计的图片:
我也尝试过关键词直出一张图,但是实际上不管我怎么写关键词,垫图,始终无法达到我的最终设计要求,哪怕我“运气好”生成了一组合适的图片,后面的视觉风格保持统一也很难做到,所以只能把各个元素拆分,后期合成了。
具体怎么做的咱们继续往下看吧~
首先用上面写的关键词跑出以下元素:
主体元素确定了,还缺一个辅助元素,那就是 主体元素 下面的底座。这一步也很简单,垫图+关键词(注意,这里的关键词还是刚刚那组,把 盾牌 关键词改为 pedestal(底座)。
背景素材简单,直接图生文,然后垫图+关键词,看图。
我的宝藏设计工具:Figma!先出个 Demo,把文案排版一下:
我做好的这些文件都会免费开放给大家研究,还有这篇文章中生成的3D素材也给大家下载,怎么获取呢?私信我进群领取吧~
老样子,先找参考图,根据参考图及需求写出关键词,这期的福袋设计会用到垫图+关键词 的方式。
第一步,找风格元素参考去,这是我们接下来描写关键词的重点,建议大家不要凭空想象,先看别人做的,我们参考改进,下面还是这个网站(花瓣):
02 根据需求及参考图,写出关键词
画面主体:福袋,3D图标
修饰词:中国风,卡通风格,粘土材质,可爱,光滑
细节词:红色和黄色,白色背景,3D渲染,最高细节,最好的质量,正视图,高清,8K
参数后缀:--niji 5
Blessing bag, 3D icon, Chinese style, Cartoon style, Clay material, Lovely, smooth, Red and yellow, White background, The highest detail, The best quality, Upright view, 3D rendering, HD, 8K --niji 5
橙色标注地方为可替换关键词,其它关键词可保持不变。
03 生成合成图片素材,抠出元素
然后开始操作跑图吧,垫上前面找的参考,然后加上关键词,然后抠图都知道吧,说了很多期,不重复了:
04 文案排版+UI规范
处理下图片吧,把不需要的元素,效果不好的地方,用“PS Beta”处理下,不用Beta版本也行,我也只用到了“内容填充”的功能。
这个系列的3D元素关键词基本就是通用的模板, 我在往期分享过写这组关键词的过程,这里不再重复。
大家把这套关键词保存好即可,替换部分关键词就可以控制3D元素的形状和风格,一下紫色地方关键词可替换。
汽车,3D图标,粘土,卡通,任天堂,可爱,光滑,光泽,粉色和蓝色,渐变颜色,白色背景,最高的细节,最好的质量,等距视图,高清
上一步生成了下面这些3D元素,接下来就开始抠图了,用PS吗?不,ps抠图老费劲了,我们用这个工具clipdrop。
我们3D元素搞定了,接下来就是做UI设计稿了,把信息和3D元素组合一起就大功告成了。
以上就是这篇AI工具赋能UI设计的教程了,欢迎大家来与我一起交流讨论更多的商业场景。后续我也会持续的探索商业落地的方式,并把这些知识分享给大家~
文章中出现的网站资源,组件素材我放在群公告中了,大家需要联系我获取。
点击下方关注公众号⬇️⬇️⬇️
【AIGC知识学院介绍】
AIGC知识学院,旨在为学员们提供一个学习和交流的平台,分享AIGC相关的知识、经验和资源,并帮助学员们更好地掌握AIGC的理论和实践技能。通过不断学习和讨论,学员们可以相互帮助和成长,提高自己在AIGC领域的专业素养和竞争力。