AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

本篇文章主要是AIGC在图标安排上的一个应用,希望对各人有所帮助。 更多落地教程:一、Midjourney 生成 APP 活动弹窗1. 花瓣网找参照图,处理不必要的元素 这个弹窗安排我尝试了很多方法,发现还是需要垫图才能生成符合我想要的成效,所以这个方法还是得去找参照图才行,以下这张图来自花瓣网。 用 ps 处理下文字,别偷懒~(百度直接搜“花瓣网”即可,然后搜索“弹窗安排”)。尝试了图生文功能,这里没能如愿生成合适的,不过也给了我写关键词的灵感,突然发现图生文还可以这样用,牛~2. 关键词形容并垫图生成 然后我开

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

本篇文章主要是AIGC在图标安排上的一个应用,希望对各人有所帮助。

更多落地教程:

一、Midjourney 生成 APP 活动弹窗

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

1. 花瓣网找参照图,处理不必要的元素

这个弹窗安排我尝试了很多方法,发现还是需要垫图才能生成符合我想要的成效,所以这个方法还是得去找参照图才行,以下这张图来自花瓣网。

用 ps 处理下文字,别偷懒~(百度直接搜“花瓣网”即可,然后搜索“弹窗安排”)。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

尝试了图生文功能,这里没能如愿生成合适的,不过也给了我写关键词的灵感,突然发现图生文还可以这样用,牛~

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

2. 关键词形容并垫图生成

然后我开始尝试写关键词,以下是完整关键词:

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

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

上面这个写关键词的网站还挺好用的,也内置了一些常用关键词,分享给各人:https://moonvy.com/apps/ops/

接下来就简单了,垫图+关键词组合。参数命令用 –iw 2(增加图片权重,出图更接近原图)。–v 5.2 这个模型是最新的,用 v5 和 v5.1 模型生成的成效也差不多。

3. 挑选图片并抠图

Midjourney 的随机性各人知道,多跑几次图准有你想要的图:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

选好图片之后就需要处理图片了,抠图和修部分细节,这一点也很简单。这里用到两个工具,Clipdrop 和 PS Beta。

我是利用 Clipdrop 抠图的,PS Beta 也可以,不过我感觉 Clipdrop 抠的更好点,这个是它的网址: https://clipdrop.co/

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

接下来就要用到 PS Beta 了,这个需要各人安装下,真的很好用。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

4. 案牍排版+UI 规范

为什么会用到 PS Beta 呢,是因为我需要处理这个卡片上的元素,我需要有一块空白的地方填写案牍,框选不需要的元素,使用“内容填充”和“创意式填充”,根据最终的成效来合理运用。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

最后一步,写上案牍并进行 UI 规范安排一下~

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

来看下最终成效:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

二、Midjourney 生成 3D 运营活动弹窗

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

1. 找参照图,确定安排气概

我们在接到安排需求之后,各人是否会跟我一样,根据需求来去找对应的参照图片。需求分析我就不介绍了,我们直接开始视觉安排篇。

首先就是去找到与需求形容相符的参照图片,注意的是我们下面的操作不会用到“/describe”功能(咱也不能老是用垫图的方法是不,这多没技术含量,虽然很好用…)。老办法,素材网站找参照图,这里还是我们的老朋友:花瓣。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

我们先确定主体元素样式,这里我找到了这个礼物盒的图标,就它了,接下来我就会根据这个礼物元素进行关键词形容。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

我会根据以上这个格式去写关键词,其实这个格式的顺序不是太重要,因为你会发现网上很多博主写的格式都不太一样,我建议各人按照自己的习惯形容就行,不要太久纠结到底是什么顺序,切记不要转牛角尖~

2. 根据需求及参照图,写出关键词

画面主体:礼物盒,3D 图标,粘土,卡通,任天堂

修饰词:可爱,光滑,光泽,红色和黄色,渐变颜色

细节词:白色背景,最高细节,等距视图,高清,最佳质量

参数后缀:–niji 5 –q 2(质量)

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

上面写的关键词就是根据找的礼物盒来形容的,不信你可以对着看,各人写关键词都可以用这种思路去创作,你会发现,写关键词真的不难~

完整关键词咱也不能落下,要分享就拿出咱最大的诚意来:

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 气概图标的一套模板,可替换的关键词为:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

3. 挑选生成的素材,抠出元素

开始跑图吧,剩下的事情就好办了,Midjourney 的随机性会让你不得不多跑几组图片,这一点要耐心~

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

图跑出来了就开始把咱们的 3D 元素抠出来吧,这次我就不开 PS 了,用 Clipdrop 抠图,简直不要太快。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

看来这次的教程又是 4 步就可以完成了,真的是 泰裤辣!

下面一步我会用“Figma”这个软件,各人用 PS 等安排工具也可以哈,都是可以完成最后一步的,接着看:

4. 排版出图,真的可落地!

排个版都会吧,打上案牍,加点装饰元素,做个按钮,就很简单…

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

最后再配个颜色,就大功告成啦~

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

三、Midjourney 生成 B 端运营海报

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

1. 找参照图,确定安排气概

第一步,找气概元素参照去,这是我们接下来描写关键词的重点,建议各人不要凭空想象,先看别人做的,我们参照改进,下面还是这个网站(花瓣):

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

上面的这个图标就是我找到的参照,接下来我会按照我形容关键词的步骤开始头脑风暴,进行创作

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

这期的成效也不用垫图,可关键词直出图,也可以垫图来控制画面气概,不过注意你如果生成的关键词是 盾牌图标 ,那么你垫的图片也要是 盾牌图标 ,不然会出现灾难现场,自己可以试试

2. 根据需求及参照图,写出关键词

画面主体:一个 3D 盾牌 图标

修饰词:蓝色渐变,磨砂玻璃

细节词:超简约外观,明亮色彩,工作室照明,光线追踪,蓝白色背景,工业安排,等距视图,丰富的细节,超高清,高质量,16K

参数后缀:–V 5.2

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

这组形容词我测试了很久很久,现在我感觉用 AI 绘图最耗时间的事情就是写关键词了,因为需要不断的用关键词来测试成效,这个成效不行就修改关键词继续测试,所以写关键词也很重要!!以下是完整关键词:

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 端科技气概图标的一套模板关键词。

3. 生成合成图片素材,抠出元素

先来看看我最终安排的图片:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

这组安排并不是直接出一张图,然后排版就完成的。是我生成了一共 3 组不同的元素,然后合成为一张场景图的。

我也尝试过关键词直出一张图,但是实际上不管我怎么写关键词,垫图,始终无法达到我的最终安排要求,哪怕我“运气好”生成了一组合适的图片,后面的视觉气概保持统一也很难做到,所以只能把各个元素拆分,后期合成了。

具体怎么做的咱们继续往下看吧~

首先用上面写的关键词跑出以下元素:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

再提醒一遍,前面写的关键词我只改了一个单词,就是把 盾牌 关键词分别改成了:“相机、文件夹、耳机、魔方、地球仪”,其他关键词保持不变,这也是为了保持气概统一。

主体元素确定了,还缺一个辅助元素,那就是 主体元素 下面的底座。这一步也很简单,垫图+关键词(注意,这里的关键词还是刚刚那组,把 盾牌 关键词改为 pedestal(底座)。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

垫图注意:一定要与我们生成的主体元素差不多气概的图片,不要随便放一个底座图片上去!!!

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

这一步完了之后再来一张背景素材就搞定了,背景素材简单,直接图生文,然后垫图+关键词,看图。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

怕你们看不懂,我再啰嗦一遍,找一张合适的图片参照,然后用“/describe”命令,找一组大致符合这个图片的关键词,然后垫同样的图片,把关键词加上,跑图即可。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

最后就是把主体元素,辅助元素抠图:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

4. 合成排版出图,可落地!!

我的宝藏安排工具:Figma!先出个 Demo,把案牍排版一下:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

然后配上颜色,把背景素材合成上,剩下的路得你们自己走了,整个流程已经走完,希望本篇文章对你有帮助。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

四、Midjourney 生成福袋活动弹窗

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

1. 找参照图,确定安排气概

老样子,先找参照图,根据参照图及需求写出关键词,这期的福袋安排会用到垫图+关键词 的方式。

第一步,找气概元素参照去,这是我们接下来描写关键词的重点,建议各人不要凭空想象,先看别人做的,我们参照改进,下面还是这个网站(花瓣):

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

上面的这个福袋就是我找到的参照,接下来我会按照我形容关键词的步骤开始头脑风暴,进行创作

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

这组关键词其实就是用的之前做 3D 元素弹窗的关键词,属于比较通用的一组关键词,适用于任何此类型的 3D 图标。

尝试了关键词直接生成的图片,很难生成符合国内的福袋气概…

2. 根据需求及参照图,写出关键词

画面主体:福袋,3D 图标

修饰词:中国风,卡通气概,粘土材质,可爱,光滑

细节词:红色和黄色,白色背景,3D 渲染,最高细节,最好的质量,正视图,高清,8K

参数后缀:–niji 5

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

基本上我就修改了前面的关键词,后面的关键词都可以被固定,作为生成 3D 元素的关键词,改变主体元素即可,然后改下颜色关键词,以下是完整关键词:

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

橙色标注地方为可替换关键词,其它关键词可保持不变。

3. 生成合成图片素材,抠出元素

然后开始操作跑图吧,垫上前面找的参照,然后加上关键词,然后抠图都知道吧,不重复了:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

我们再来看看不垫图生成的成效,这种成效也很不错,但是这个并不是我们最终落地的成效,之所以垫图,就是控制图片的整体气概,再配合关键词,基本上就能很好的控制最终的成效,把“命运掌握自己手中吧”:

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

还有个小知识,可以多垫几张图,但是气概需要是一致的图片,这样通过 垫图+关键词 的操作,生不出合适的元素,你可以化身“东北锤王”来捶我,我不反抗

4. 案牍排版+UI 规范

处理下图片吧,把不需要的元素,成效不好的地方,用“PS Beta”处理下,不用 Beta 版本也行,我也只用到了“内容填充”的功能。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

完了之后排个版,加点装饰元素,这福袋活动弹窗不就完成了。

那个周围的金币元素也是用同样的方式生成,把 福袋 关键词 ,改成 金币 即可。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

五、Midjourney 生成直播礼物元素

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

1. 关键词生图

这个系列的 3D 元素关键词基本就是通用的模板,各人把这套关键词保存好即可,替换部分关键词就可以控制 3D 元素的形状和气概,一下紫色地方关键词可替换。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

car, 3D icon, clay, Cartoon, Nintendo, Lovely, smooth, Luster, Pink and blue, Gradient color, White background, The highest detail, The best quality, Isometric view, HD –niji 5 –q 2

汽车,3D 图标,粘土,卡通,任天堂,可爱,光滑,光泽,粉色和蓝色,渐变颜色,白色背景,最高的细节,最好的质量,等距视图,高清

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

2. 快捷一键抠图

上一步生成了下面这些 3D 元素,接下来就开始抠图了

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

3. Figma 排版出安排稿

我们 3D 元素搞定了,接下来就是做 UI 安排稿了,把信息和 3D 元素组合一起就大功告成了。

AIGC如何赋能UI安排?5篇简短教程帮你快速入门!

写在最后

以上就是这篇 AI 工具赋能 UI 安排的教程了,欢迎各人来与我一起交流讨论更多的商业场景。

欢迎添加作者微信交流:

给TA打赏
共{{data.count}}人
人已打赏
应用

效率出图!5 种效果超好的 Midjourney 优质提醒词(三)

2023-7-14 7:48:43

应用

设计师狂喜! 用 Stable diffusion WebUI 快速制作中文立体字效

2023-7-17 7:23:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
搜索