音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

简单10步教你用AI绘制矢量极简风格的人像插画
日期:2017-03-20 15:02:41   来源:脚本之家

简单10步教你把人物照变成极简风格插画!这类效果一直很受欢迎,不过想实现非常简单,今天这篇教程一步步带你上手。每个艺术家的插画里都有来自他自身创造出的节奏和风格,而接下来的一段时间,我们将学习绘制不同风格的插画,用实际行动去体会隐藏于图案表象下的不可言说的趣味和技巧。学习时尚极简风格插画的目的是运用,而极简风格的插画在UI设计中是非常适宜讨巧的配图对象。尤其是运用在与时尚相关的网页中,大约是最不容易被忽视的亮点。

拿照片当参考

那时我们是按照片给定的轮廓来绘制的,虽然有细节的突破,但仍然没有逃开照片的约束。

这时,我仍然要说,离开照片再远一点!所绘之物和照片实体之间,应该是幻影关系,而非一对一的简单临摹。绘制过程中额外加入我们自己的想象,这将帮助你一步步接近绘画的本质。当然这说得太远,但目标即在,一步一回顾。

符号轮廓:基础形标准化

所绘制的对象,有一种符号化的趋势。就像图标一样,模糊所有个性化细节,使其变得符号化。让外形成就某种“完美”,当然所绘制的主题也并不在表现人物造型细节,而是在于突出某种氛围。让我们绘制的基础形都有趋于某种完美定式的倾向。

先看看效果图

STEP 01

让我们打开AI,创建一个宽1600px高1200px的新文档。

然后将所参考的照片置于其中,锁定照片的图层,再新建一个图层作为绘制层。绘制时可以用钢笔工具,

STEP 02

将钢笔工具所绘制的形状关闭填充,线条设置为红色,将线条大小设置为0.5px。

这里选用红色是为了照顾视觉的可辨性,你也可以选用和照片本身差别大的色彩。

根据照片提示的轮廓进行绘制,并不是一定要完全效仿照片。就像本例中,我们未必要完全效仿模特的发型。基础形里的每一个形状都要封闭完全,这是为了填色的需要。

STEP 03

绘制五官的部分,尤其是眼睛的时候,要注意保持每个形的封闭型,这时你要非常清楚你的填色逻辑,不要被线条误导了。

五官保持最简单的形,去掉一切繁琐细节,而又要保持视觉上的“合理性”。

STEP 04

处理人物剩下的部分。这时可以稍微发挥创意,比如我在这里增加了头发的长度和弧度。也是这时开始,我们就丢弃对照片的依赖。关闭照片可见,完全从线条的角度来审视整个画面。

STEP 05

调整线条,让它变得更为“丝滑”,并对形状进行合并与删减。

其目的是为了填色的需要,因此要谨慎选择合适的形状对象。而保持“丝滑”的前提就是不要过度的歪曲与拐角,你需要放大细节进行调整。

处理形的要义就是要学会趋向简单几何。

简约配色

这里我们将要学会对色彩的节制,注意在绘制人像时,人物的某一五官将作为突出重点,比如我们要在这里突出嘴唇,因此嘴唇的部分和皮肤的部分就在色彩上加以区分。

这时,整体的色彩最好不要超过三种。用颜色作为视觉引导,在人物的重要部分运用不同的色彩对比。

STEP 06

为画面增加背景色,这个背景色与唇色呼应。让色彩显得干净。基本的填色完成后,大致的人物形象就一目了然,在此进行对五官细节的微调,将是更进一步的“符号化”的过程。

阴影的点睛作用

有趣的地方就在于,尽管我们丢弃了所有的阴影细节,然而并不代表我们不需要它。利用阴影,可以起到画龙点睛的作用。比如在这幅画中,我们给脖子上增加头部的阴影,脖子和头就有了视觉上的层次,立体感增强了。

STEP 07

阴影的色彩我们选用和唇色一样的粉红色。将阴影的混合模式改为“正片叠底”,透明度降至30%。

STEP 08

再为眼睛增加阴影,这将增加眼神的力量。“眼影”的混合模式仍然为“正片叠底”,透明度为60%。

STEP 09

为了增加脸部的立体感,我们也要利用阴影进行“润色”。这时,阴影不仅仅是实际的对光线投射的描绘,而是有着某种“装饰”的意味,同时突出脸部轮廓,在关键的部分利用线条的婉转来表现脸部的轮廓起伏状态。

填色后的混合模式仍未“正片叠底”,透明度为15%。

制造焦点

我们曾经也谈到过正负形交错的用法。也就是让背景与所绘制对象主体的色彩有彼此可以融合的部分,根据完形法则,我们人眼能从一些线索中就判断出对象。

STEP 10

将背景变为黑色,与黑色的头发、眉毛相接。又将桃红色背景缩小为更小的圆,用以突出焦点。在焦点处添加上焦点。

手段的目的就是手段本身

说起来,这句话有点绕。换句话说,在目前“唯结果论英雄”的思维方式下,我们更应该焦距在过程本身。不被结果影响是很难做到的,但至少我们可以抽身在享受过程的某一个小瞬间。

其实,最初是想要探讨关于网页设计中插画的方向。做设计的人都深有体会,有时候为了寻找一个好的素材,翻遍各大免费摄影网站都未必合适。精疲力尽的同时还加深了我们对于DEADLINE的焦虑。于是,求人不如求己,我就想到了用插画的方式来自己动手设计素材。

这并不是我自己突然之间的想法,而是在看project runway(一个美国的服装设计大赛,具体请自行百度或谷歌)的时候得到的灵感。在project runway中有一个比赛环节叫做非常规材料赛,具体说来就是参赛选手要用于设计服装的材料不是普通的布料,而是垃圾堆里的或者其他不寻常的废弃材料,比如塑料纸啦、灯泡啦、金属片、鸡毛等。而且,作品的评选标准并不仅仅是把服装做得“美”,而是根据这个设计师在多大程度上改造了原有材料,把这些“废品”做成了可穿着的物料,发挥了衣服的特性和美感。有些难度?但是,大多数设计师都会在这一环节感到兴奋,而且,也只有在这一环节,他们会觉得是比较能充分发挥自己的设计功底和想法的。比起直接从布料里找到好布料进行裁剪,他们更喜欢自己“创造”出“布料”。

好了,说回我们的UI设计,其实也是类似的。当我们在图片的海洋中寻找优质资源的时候,就像要找到一匹好布料,而事实上,即时最终的作品非常优秀,也部分得益于“运气”(找到漂亮的布料的运气),而且这个运气的中奖率往往也并不太高。而比较靠谱的做法就是自己创造“布料”,也就是自己为配图进行取材,这才是能让你的设计功底得以脚踏实地,尽管你也许走得比别人慢,但不依赖于运气的方式,也就是享受过程的方式会让路途越来越开阔。

而插画的风格则五花八门,一个人就能自成一种风格。在没有形成自己的风格之前,就是对每个种类的风格都了解一遍。在轻质风格的网页中,能用得上的插画风格当属扁平风和线条风这两大类,而细分下来每个大类中还有若干的小方向。所以,我们将在以后继续介绍这类风格的绘制方法,而且它们不仅可以作为配图,还可以成为图标或其他更多的UI组件样式。

还是回到我们的主题,插画本身是手段其实也是目的。如果你真的喜欢设计,就无法忽略绘制过程中的美感体验。

相关阅读:

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    photoshop教程CorelDraw教程Fireworks教程Illustrator教程Freehand教程