创意简单ui排版图片素材-ai怎么做插画步骤图?AI插画基础教程，教你简单搞定UI小插画

2020009 |PPT设计思维提升

俗话说:“一图胜千言”,在 PPT 制作中,图片的重要性不言而喻,优质的图片可以迅速提升幻灯片的品质。可往往在日常工作中,我们遇到的图片普遍存在质量粗糙、尺寸太小、画面元素杂乱等等问题,在找不到可替代的优质图片的情况下,我们可以尝试结合当下流行的8种图片排版风格,让渣图变废为宝,而且还能创意十足。

理想情况下我们希望找的图片是有美感的,有一块大的留白区域,方便书写文字内容。比如这样的图片:

但很多时候我们的素材都有这样或那样的问题,以至于没有地方放文案。当然,你可以将图片进行裁切,或者添加一个色块,但是这都会打破原图本身的意境。这时候在图片上覆盖一层蒙版就可以解决问题了。

所谓蒙版,其实就是在图片的上一层,放置一个设置了透明度的板子,在视觉上,形成一种蒙版的效果。

有时候我们可能只想遮挡住图像的一部分。比如这两张图片,如果想保留右侧的图像,遮挡图像的左侧,方便显示文案,可以使用带透明度的渐变蒙版来达到部分遮挡的目的。

蒙版除了可以降低整体图片的可见度,增强图文对比度,以及遮挡图片的局部,方便显示文案的这个作用之外, 还有一个非常重要的功能,就是凸显图片中的重点内容。 将蒙版做成镂空蒙版的效果,就可以突出图片中的重点内容。

‍

图文穿插的排版形式,能够使得画面层次感更强,立体感更强。

下面这一页PPT是我在给本田公司培训的时候,在设计案例的时候,在本田公司官网看到的产品介绍的页面,我尝试利用图文穿插,做成了一个动图的效果。

实现图文穿插的窍门,就在于图片必须是透明背景的。 想要去掉图片背景,可以利用PowerPoint自带的“删除背景”功能来实现,还可以利用一款在线的抠图工具:来轻松实现。

作为一种设计趋势,渐变色已经流行了相当长的一段时间。在页面的背景加入渐变的色彩叠加,可以让它们的整体感更强,从而让观众注意到其他的更加重要、关键的元素,强化页面的可读性。

比如小米发布会的这一页的PPT中,背景色块就是用了渐变色填充。相较于纯色而言,渐变背景在视觉呈现上更具层次感。

再比如现在我们看到的这一页PPT的半透明明亮色彩的图片渐变蒙版和渐变色箭头,让画面看上去非常精致有设计感。

还可以将文字的填充颜色设置为明亮渐变色,让文字看上去色彩亮丽,惊艳无比。

很多企业的官网,也可以看到明亮渐变色的身影:

如果担心自己己对色彩没感觉,调不出来漂亮自然的渐变色,别担心,因为好看的渐变色从来都不是自己配的,接着我们来分享两个网站,这两个网站提供了多种渐变配色方案,每一种都特别好看。

这是一个设计师们经常需要用到的UI背景渐变颜色组合,目前提供180个渐变色彩,可以作为PPT任何部分的内容背景。

使用的方法是把喜欢的颜色截图,插入到PPT当中,再用PPT当中的取色器提取颜色。

这个网站以分享美丽渐变色彩为主的分享站,里面接近上百种渐变配色方案,你可根据自己风格来选择搭配。

所谓图片叠加,就是在一张背景图片上再叠加一张图片。这种设计可以解决图片尺寸太小,不适合作为全图背景的问题。

我们可以将图片放大模糊处理作为背景,再顶部在叠加原图。在很多广告、海报的设计中都可以看到这个设计的身影。我曾经出差去到昆明,在昆明机场的广告牌中就看到了这个设计的海报。

我之前帮客户定制的PPT作品中,就用到了这个技巧。这是修改前的效果,配图比较小。

这是修改后的效果,右侧的文案内容比较少,为了让右下角的区域看上去不会太空,添加了一个象征着成长的发芽的图标。

如果有大量的图片需要展示在页面中,可以做成这种规规矩矩的表格式拼图。

还可以在页面中堆积大量的图片作为背景,以烘托页面氛围,表现数量丰富的概念。在很多发布会的PPT中,都可以看到拼图的设计。要实现这种大量拼图的设计, 有一款神器可以轻松搞定: Collagelt,利用这款拼图神器,借助预设的拼图样式 ,简单拖拽鼠标,就可以完成各种不同风格的拼图排版了。

当你的图像宽度不够填充整个画面时,可以采用翻转图像的方式,比如左右翻转,上下翻转,从而依旧将聚焦点留在画面视觉中心处。同时,相同元素的镜像处理往往也会带来意想不到的惊喜感。

借助到笔刷,将图形填充其中,打破了传统的矩形形状的图片的四平八稳,感觉就像用毛笔画出来的图片一样有艺术感。笔刷其实就是一个特殊的形状,像矩形、椭圆一样可以填充颜色和图片, 在快乐享用Office公众号后台回复: 笔刷 就可以获得一份笔刷的素材。

所谓图片字,就是将文字的填充颜色,由传统的颜色填充,变成了图片填充。直接在文字颜色填充的功能中,选择图片填充,就可以将图片填充到文字当中作为图片字了。

我做的《乔布斯魔力演讲》一书的读书笔记的PPT的封面,就是使用了图片字来作为封面文字的标题,让文字看上去更精致更有设计感。

这就是8种PPT中极具创意的图文排版风格,有空不妨把每种风格都尝试做做看。

从本周开始,接下来时间里,会和大家分享如何创建精致的UI界面,共五部曲,为什么要做这个分享?

曾经我学习UI设计时,网上资料很多,但是参差不齐,对于新人而言,这是很痛苦的,进步慢。因此我想通过之前踩过一些坑,集合自己的工作经验,把一些知识点分享出来。

分享的最终目的是沉淀自己,同时也希望能给有想要提升排版能力的设计师带来一些帮助与启发!所以本系列文章并不一定适合所有人。

那么本周就先从排版篇幅开启……

排版是界面设计中最难的部分,也是非常重要的一部分,它以各种形式存在界面中,纯文本排版,图形文排版,图片文本排版等等,这是我们在做设计时候,经常会面临的问题。好的排版能有效地向用户传递关键的信息,同时也能提升产品使用体验。

在我们日常生活中,离不开设计排版,包括经常见到的各种广告与电影宣传海报,如果不能让用户在短时间内记住关键信息,这个设计就是失败的。因此我希望通过今天这篇文章,能够让你对排版有一些新的认识。

在界面设计中,影响排版设计的因素有很多,我总结归纳了7个维度(当然还有其他更细的,在这里就先暂时不讲),它直接影响整个排版质量,这些方法当然不是绝对,但是如果能巧妙综合得运用到界面中,能保证大部分界面设计感得以提升,当然也是需要不断刻意练习来提高的。

分别是:

下面我会集合一些案例来和大家讲解下

空间即我们常说的留白,当设计元素紧紧地聚集在一起时,界面看起来没有重点,因此需要和谐的运用它,空间的运用规则直接影响产品的性格,小空间和大空间在视觉感受上,两者完全不同,那么我们在界面设计中如何去更好的运用空间来设计排版。

有一个很好的方法就是可以运用网格去搭建空间,在平面设计中,运用得非常多,那么在用户界面中,同样也可以运用网格去搭建,下面看一个案例:

如上图作者把一个界面分为4Gird,通过搭建好的网格来进行界面中元素排版,右侧是我拆解的图(备注:网格的搭建并没有任何强制性的规定需要搭建多少列,最终的搭建列数需要根据这个产品内容复杂程度去定义的),比如:我最近在做车载HMI设计语言,同样也运用了网格,那么我会根据整个车载HMI产品复杂程度去搭建,同时也运用了几种网格配合使用。

上面两个例子我们可以发现 设计师运用了大空间来设计界面,这使得整个界面呼吸感更强,更透气,因为也是 娱乐 类偏杂文产品,所以设计会偏艺术化一些。

韩国29cm产品是我比较喜欢的一个app,整体设计呼吸感很强,留白空间大,视觉焦点清晰。

我们都知道大的物体更吸引眼球,更容易引起我们的注意,那么在设计中,我们一般都会将重要元素放大,突出显示。

a和b那个更吸引你?

答案是a. 因为a类型排版看起来很大,更具有吸引力。

上面案例中算是大小方法上运用比较好的,我们可以看出视觉层次非常清晰了。首先我能快速知道哪些重要信息,肯定是封面图,接着左上角logo,然后就是导航和标题了,最后就是针对每个内容块的一些详细文案解释。

简单示例,重要的信息一定要大,次级信息弱化。

颜色在排版设计中起着很大的作用,能起到点睛之笔,又或者为画面带来活力,又或者代表着品牌,当然我们在UI界面中字体颜色一定要慎用,因为不同颜色含义是不同的。合理恰当运用颜色, 能够瞬间提升设计品质感。

上面这个web设计中,设计师通过红色来强调重要信息,同时也让灰白的画面有了些许不同之处。

对某些文本使用辅助颜色,例如链接文本,图1 使用方式正确。图2将颜色大量使用在正文,严重影响视觉体验。

避免像图2那样使用对比度低的颜色。

对齐是界面设计中我们经常提到话题,也是提升界面品质感最重要的一个隐形的力量,也许有时候我们会忽略他,有时候会不经意间就没做好。

对齐的界面比不对齐的要整齐很多,视觉流也符合用户阅读习惯。

我们可以借用前面所学的网格来对齐,这样不仅设计有节奏感, 同时画面很整齐美观。

我们界面设计中可以有三种思路对齐方式,当然根据业务板块去选择合适的对齐方式,三种对齐方式都有一个隐形的轴(看我标的线),然后围绕这个去排版设计,自然形成一个规则的视觉流。

上面案例中作者整体偏左对齐,这样形成以左为中心一个轴展开视觉流走向。

我们在做界面设计时候,会经常遇到有人说你的设计,要么是这边太重了,要么就是太轻了,或者这边要不加点东西进去,不然太空了,为什么?

这就是平衡定律,如果同一个环境下的物体没有保持平衡关系,我们视觉感受上是很不舒服的。

下面我们看几个例子:

图1和图2 我们可以看出,图2 给人第一感受就是不平衡的,整体视觉重心偏左。

上图案例,设计师通过按钮来平衡整个画面视觉重心,因为左侧内容多,如果按钮很弱或者很小,是很难平衡画面的,因此我们做界面时候,定义一些按钮大小也是非常考究的。

左边视觉界面,右边拆解原型出来,我们可以看到设计师也是通过元素合理分布使得界面整体平衡。

字体选择对界面排版非常至关重要,这也是所有界面排版中必要的一步,不同字体有不同的性格属性,我们需要根据产品来选择恰当的中英文字体。同时,也需要记住,一个产品APP界面设计中,字体最好不要超过两种

推荐一些我认为2019比较好用的英文字体,大家做概念设计时候或者提案方案包装时候是可以用到的哦(吐血推荐)。

分别是:Montserrat 和 Nexa 字体。

分别是:Futura 和 Playfair_Display 字体

中文好用的字体,大家应该都知道,平方字体,思源黑体,汉仪旗黑,兰亭纤黑,我就不做示例了。

终于到最后一趴了,最后这点是整个设计排版的核心之一,为什么?

如果不清晰设计目标,那么整个排版风格也许最后产出和你用户群体或者产品性格是两种类型的,不同产品风格会有不同的排版style。

比如:我们产品是奢侈品,那么整体排版设计风格一定是使用大网格,大空间去设计,字体纤细等。如果是简约现代呢?又或者母婴产品, 科技 产品, 娱乐 产品等等,每个会有一些特殊排版思路。所以了解你的设计目标,并确定设计原则。

有了这些原则与目标,那么接下来就是开始找参考,找灵感找到对应产品他们是如何排版,如何控制画面节奏感的,推荐多去使用pinterest或者behance

通过七大点排版思路,可以更好的运用在界面设计中,每个排版原则并不是独立的个体,他们之间是相辅相成的关系,比如大小离不开网格,也离不开对比,颜色等等,缺乏某些元素,那么界面就会缺失灵魂,设计产出质量并不好!

好了本期到这里结束,下期会继续和大家分享如何巧妙运用图形提高界面品质感和增强细节!

题图来自 Unsplash ,基于 CC0 协议

怎样利用ai制作出卡通版乡村插画图?具体操作一些朋友还不会用ai制作出卡通版乡村插画图,下面我就给大家分享利用ai制作出卡通版乡村插画图的具体操作步骤。快来学习吧!

1、用曲线画出乡村的基本轮廓,主要元素有白云的路径,道路的路径,天空的路径。还有道路上面的两棵小树的路径。

2、继续画出大地的细节路径,这里有着泥路,也有着小小的土坡,更有着田地。

3、我们继续画出土地上面的向日葵、栅栏、狗窝的路径。

4、用蓝的渐变填充天空的路径,用蓝白色的渐变填充白色的路径。

5、用绿色的渐变填充田地,用橙的渐变填充沙地,用土填充土路。

6、用与棕色填充向日葵的路径,用棕色填充栅栏,用红色填充狗窝的路径,完成乡村卡通场景设计。

上面就是我为大家带来的利用ai制作出卡通版乡村插画图的具体操作,希望对大家能够有所帮助哦。AI插画基础教程,教你简单搞定UI小插画AI插画基础教程,教你简单搞定UI小插画

我们在使用AI的时候,AI工具的组合步骤不同的时候,出来的效果都会完全不同,本文就来为大家介绍如何配合基础工具,重复使用图形我们可以做出非常多样化的设计,下面我们一起来看看吧。

1、制作花盆基础形.

选择原角矩形工具,通过按住键盘上、下键控制切圆角弧度。

2、选择‘删除锚点工具’,删除掉其中一个锚点后,切换为“直接选择工具”,拖动至中间,再次切换“钢笔工具”---“锚点工具”,按住鼠标左键不放拖出上方贝塞尔曲线,调整好弧度。

3、选择“删除锚点工具”,删除右顶点锚点(切忌不能直接delete,否则会变成非闭合路径).

4、选择“直接选择工具”,拖动两边锚点为以下形状。

5、接下来我们要来制作花盆口,包含花盆外圈和内部土壤。

首先把填充颜色选择为土壤色,描边切换为花盆外圈黄亮色。选择“椭圆工具”,拖出自定义大小花盆口,大小就按自己喜好啦。然后放置为花盆上方。

6、虚线装饰。

制作花盆不是最复杂的,如何利用软件自带装饰做效果同样可以提升工作效率哦。

接下来我们利用AI自带描边款式加花盆的装饰细节。

切换“选择工具”,选中刚刚制作好的花盆雏形,按住Alt键同时点击鼠标左键,往右复制出花盆,切换填充为描边,确保填充为关闭状态哦。

7、调取描边款式。

如果描边选项没有在选择范围内的童鞋,请参考以下图示1-2-3-4步骤,这是隐藏的装饰功能,里面很多都是可以直接调取出来使用。

TIP:这里还有个技巧,自带的虚线默认设置是黑色的,无法吸取自定义颜色,那么我们也有办法进行设置。

首先双击“虚线”选项,随后出现如下面板,在面板中找到着色--方法--色调,点击确定,就可以自定义选虚线颜色啦!

8、制作更多细节。

沿用步骤7中做法,复制一个花盆口,关闭填充,更换描边为虚线。在这里我想要的款式为只有下半圆,点击选中上方节点,选择delete,就得到下半圆弧形咯!

9、花盆暗面制作。

选择椭圆工具,按住Shift键,拉取出一个正圆形。同时选中花盆和正圆,选择“窗口”--“路经查找器”,选择第二排第一个“分割”,接下来把剩余不要的边角料delete就ok啦。

10、勾勒仙人掌和小花。

用钢笔工具勾勒出如下图形,也可以自己设计哦,外形不用太规则,大自然的产物有些不规则才是最美的!此外注意制作仙人掌暗面时建议也用复制的办法,这样可以保证和原本亮面完美重合。

11、俄罗斯风花盆制作。

因为这种配色出现在俄罗斯教堂中很多次,花纹是极简的,所以我命名为俄罗斯风。

复制红色花盆,更改为喜欢的配色,以下是教程提供配色参考和色值。

12、选择“钢笔工具”拉出水波纹般弧度,切换描边为虚线。

仙人球部分可以直接选择椭圆工具,再选择锚点进行变形。

13、接下来要制作第三个日式和风花纹花盆。

第一步钢笔工具绘制出单个仙人掌造型,然后复制出大小五个,错落拼在一起。

14、制作一个单位和风花纹。

选择椭圆工具,按住Shift键拉取出正圆圈,关闭填充。复制几个同心圆---以圆圈中心放大。

接下来,选择“矩形工具”拉取矩形块,放置在圆圈中心处,顺序在圆圈上层形成遮挡。

然后,选择“窗口”---“路径查找器”--“分割”,删除掉不需要的下半部分。一个花纹的基础单元制作完成。

15、选择颜色,描边为纯白色,蓝色与花盆本身颜色一致,色号参加下图。

接下来复制单个花纹一层一层叠加上去。如何让多余花纹去掉,完美绕排在花盆周边呢?

同样采用“路径查找器”--“分割”,但是这里需要注意,我们需要分层次来分割。

首先参考下图step1中,选中底排两边花纹、花盆外框,然后分割--删除不需要的边角;再次重复以上动作,选中第二排两边花纹、花盆外框,分割--删除不需要的边角,图示请看step2。

至此我们三盆不同的仙人掌就制作完成啦!为了突出效果,我们可以用相同的素材搭建不同的插画效果哦!一种沙漠风,一种星空风,还有其他风格期待来交作业咯!ai插画怎么做AI插画可以这样做:

首先打开桌面上的AI,点击新建,接着点击图稿和插图,选择画布大小,点击创建,右键点击矩形工具,选择椭圆工具,按住SHIFT键拖动鼠标,可以画出一个正圆形,点击填色,在拾色器下选择,点击确定;

选择钢笔工具,创建一个锚点,拖动出一个弧形,在右侧的外观设置下,更改描边宽度,选中刚刚创建的弧形,复制并粘贴,挪动到合适位置,再次复制出一个弧形,移动并旋转为开口向上,一个笑脸插画就做好了。

AI格式文件是Adobe公司发布的Adobellustrator制作生成的矢量图文件。它的优点是占用硬盘空间小,打开速度快,方便格式转换专用文件矢量软件ilustrator格式。一般的看图软件都打不开ai文件,所以我们要下载专业软件去打开。

后辍为AI的文件是illustrator软(在广告、印刷包装方面使用的软件)制作的矢量图文件,而矢量图的优点是如何放大图像都不会产生马塞克现象,即不会虚。因此,AI文件不会在图像放大的情况下产生马赛克。