恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【AI+PS教程】教你绘制明星插画
0.0°
2018-06-06 原创文章 教程 举报 3030 71 31 2

本作品为原创作品

最近翻看各大设计网站,发现在UI界面设计这一块兴起了比较火爆的插画设计风格——erics风格,欣赏了一下,感觉这种插画比较简单,没有太大的规范可言,设计全程就是夸张化,不用去考虑太多的肌肉和骨骼走向,这对没学过画画的小白来说简直就是量身订做的设计。废话不多说先来欣赏一波今天要讲解的插画内容:

Image title

这幅作品看起来感觉有点复杂,实际上我们只需要结合两款设计软件(PS和AI)以及掌握其设计构思,那么你以后制作这样的erics插画风格就都不在话下了,其实完成这副作品一共需要四个大的步骤:

1.人物原型的设计(主要在AI里面制作)

2.场景设计(主要在AI里面制作)

3.后期的处理(主要在PS里面处理)

4.界面设计与插画的融合(主要在PS里面处理)

完成这四个步骤你就能做出高逼格的erics插画了。

1.人物原型的设计

1.1寻找真实照片制作原型

因为我个人比较喜欢Eason所以我今天拿他的照片进行插画的制作,先在网上搜索Eason的照片,然后把他保存下来。

Image title

1.2根据照片快速绘制线稿

这里介绍一种简单的方法(适合完全没学过画画的小白):把找好的照片用PS打开,然后新建一个图层,填充白色(这里是为了不破坏背景图层为后面复制背景图层降低透明度作铺垫),再继续复制下背景图层,降低透明度为30%,最后点击画笔选择硬边圆画笔或干介质铅笔画笔(这个看个人喜好,你要选择其他画笔也是可以的,没有硬性要求,),画的时候要学会省略和夸张化,因为这个插画不属于写实插画,只要符合原本的身体结构就好了,画这个线条我使用手绘板画的,如果没有手绘板的同学可以用鼠标绘画;当然你要是有绘画的基础也可以用铅笔再草稿纸上绘画。

Image title

Image title

画好了之后就是导出线稿图片了,我们需要隐藏两个背景图层,

Image title

然后点击文件——导出——导出为

Image title

再点击——全部导出

Image title

1.3对线稿进行勾线(需要运用AI)

打开AI新建大小宽:800px、高:600px、颜色模式:RGB、分辨率:72PPI,点击——创建。

Image title

然后把在PS里面导出的线稿图拖进AI里面,调整好整体线稿的大小。

Image title

然后降低线稿的不透明度(这里是为了后面勾线做准备),锁定线稿,执行:选中线稿图层——对象——锁定——所选对象

Image title

锁定了图层之后开始使用钢笔工具开始勾线了,勾线需要注意所有的线都需要闭合(这是为了保证后面能够填充色块,没有闭合的线是不能够填充色块的),

Image title

画好了头部再画身体,从这里我们就可以看到我所有需要填充颜色的线条都是使用闭合的线,比如说——手腕、衣袖等可以看出来,Image title

接着画腿部,现在我们还暂时不要考虑图层的顺序,所以不用管他,我们在勾线的时候不要100%去照着原图进行勾画,适当的取舍和夸张化;这样主题人物就画好了。Image title

画好主题人物了,我们现在可以开始画陪衬物了。也就是沙发。

Image title

沙发画好了之后我们就需要整体去调整了,衣服不需要那么多褶皱,尽量用弧线来表现,在调整结构的时候也可以试着把阴影块面加上去。Image title

1.4对线稿进行配色(需要运用AI)

首先把锁定的背景删掉,执行:对象——全部解锁——选中背景图层——Delete删除,Image title

现在就开始上色了,如果你对上色没有什么概念,不知道上什么色好看,那么最好的办法就是多参考别人的颜色搭配,这里我在国外网站找了一张Norde大神的作品,拿来作为配色参考,大神的这个作品颜色运用了大量的渐变色,主色调是紫色,红色、黄色为辅色。

Image title

在来看下我们自己的原图片,衣服为橙色,裤子为蓝色,橙色与蓝色搭配属于互补色,橙色配色偏纯色,那么我们可以把裤子整体改为深蓝色,那么我们这里就可以确定我们的主色调为蓝色,辅助色为橙色。Image title

定好了主色调颜色就开始上色了,先从主体物开始上色,上色需要考虑黑白灰的关系,黑代表暗面,灰代表颜色过度面,白代表亮光面Image title

在这里我们可以看到脸的图层顺序盖住了头发,那么我们选中脸图层,执行:点击鼠标右键——排列——置于底层,这样就调整过来了,后面还会遇到很多这样图层顺序乱的问题,所以需要大家细心的思考哪一个图层在前面,哪一个图层在后面。还有需要定一个光源的点,本作品的光源定在了人物的左前方位置。Image title

下面这个截图是我大部分的用色取值

Image title

2.场景的设计

现在来看下,我的整个画面感觉有点空,由于我画的是Eason,他是一位歌手,那么我想到了音乐符号、吉他、话筒来作为点缀。

Image title

但是这些东西加上去了之后仔细考虑下,物体放置得有点多,而且在用色上也不是很好,那么继续修改

Image title

最后只保留了这一把吉他,删掉了其他所有的元素,这样就使得左边沙发不至于那么单调了,并且我的主色调为蓝色,那么我把吉他的颜色也改为了蓝色调。

3.后期的处理(在PS里面处理)

3.1添加一些阴影丰富整个画面

打开PS新建文件 宽:800px、高:600px、分辨率72、颜色模式RGBImage title

再切换到AI里面,用选中工具全选插画所有图层,再拖动到PS里面去,选择智能对象,那么图层就生成了智能对象图层。Image titleImage title

为了不破坏原图,那么我们复制一个智能对象图层Ctrl+J,

Image title

再新建一个空白图层,作用是:用画笔在上面画阴影。画笔选择柔边圆,画笔大小看着自己的需求进行调节我这里是10px,调整前景色为暗的阴影色,这里色值为#d36940,Image title

阴影画成这样并不好看,那么我们就需要用橡皮檫去进行修饰,线条修成两端尖中间粗,再把其他的阴影涂抹下。

Image title

Image title

Image title

3.2添加一些杂色点缀整个画面

隐藏背景图层,再盖印图层Ctrl+Alt+Shift+E,再隐藏盖印图层之外的所有图层。

Image title

Image title

选择盖印的图层,复制一个图层Ctrl+J,改名为杂点,

点击滤镜——杂色——添加杂色

杂色的数量建议控制再4%——6%范围左右,数值太大看不出来,数值太大比较模糊。

Image title

Image title

添加好杂点了,看整个画面的杂点比较多,所以我们需要擦出一些高光面的杂点,保留暗部的杂点,

选择柔边圆画笔,调整大小,画笔的不透明度改为50%,

Image title

多用画笔修整下,

Image title

最后的调试结果

Image title

这样后期处理部分就完成了。

4.界面设计与插画的融合(在PS里面处理)

界面的大小看自己的需求进行定义,本教程的大小为1290px*975px。

Image title

如果在设计中有什么问题可以扫一扫加入我们的QQ交流群,里面会有大神带你装X带你飞。Image title

本期的教程就到这里结束了,希望大家能够多多进行练习,学以致用。

更新:2018-06-06

收藏

71人已收藏

柒蚁Design

柒蚁设计交流圈子741530266

  • 12

    作品

  • 340

    粉丝

  • 0

    关注

  • YOGA风格制作LOGO
  • 几何风格制作十二生肖LOGO
  • 四步教你制作抖音风明星海报
  • 02UI设计中的版式原理

    猜你喜欢

      2018-06-06 原创文章 教程 举报 3030 71 31 2

      【AI+PS教程】教你绘制明星插画

      0.0°

      你确定要举报【AI+PS教程】教你绘制明星插画

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      31
      71
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录