返回
苏州UI设计培训培训
置顶
该校与厚学网暂未合作,平台不保证课程的真实有效性,如有侵权等争议,请及时与厚学网联系处理
招生热线:400-800-2181

学校地址:苏州市金阊区广济南路258号百脑汇1307/1309室

教你绘制静谧夜晚下温暖的庭院插画

262 2018-07-12 08:54:21

学习笔记


此教程使用软件为 AI/PS CC2018 版本不同可能部分功能不太相同

  • 步骤1

拿到作品不要慌着先动手做

首先我们需要分析作品

大致来分该插画分为两个部分

AI 中的矢量插画和 PS 中完成的噪点效果

接下来我们来解构 AI 画面

整个画面由三角形、矩形、多边形、椭圆形等基本图形构成草丛 房子 树木 天空

颜色参考



  • 步骤2

分析之后我们开始绘制 记得要分好图层

新建一个画板 1878*1230

矩形工具(M)拉出一个 1878*700的矩形 吸取天空的颜色

矩形工具(M)拉出一个 1878*530的矩形 吸取草坪的颜色



  • 步骤3

接下来开始画房子

用矩形工具拉出一个和房子一样大的矩形 选择直接选择工具选择矩形左上角的点直线下拉 房子的背景形就出来了



  • 步骤4

下一步给房子添加细节

用直线段工具拉出一条直线 按住【ALT+SHIFT】 向右平行复制出一个 【Ctrl+D】 再制出你想要的数量 【Ctrl+G】群组



选择房子背景【Ctrl+C】复制 【Ctrl+F】在原位上层复制一个 【SHIFT+]】置于顶层

将直线段与复制的图形放在一起 【Ctrl+7】建立剪切蒙版

上形下色 顾名思义:上层的形状为剪切后的形状 颜色是下层图形的颜色





  • 步骤5

花丛部分

椭圆工具(L) 拉出一个椭圆

钢笔工具(P) 勾出要减去的形状

路径查找器【shift+ctrl+F9】减去顶层



钢笔工具(P) 画出曲线和部分叶片的形状

按住【Alt+移动鼠标】复制 调整到合适的位置

路径查找器【shift+ctrl+F9】联集



  • 步骤6

房间部分



矩形工具(M)画出一个矩形

直接选择工具(A)选择右上角的点向左移动

钢笔工具(P)勾出抱枕形状



矩形工具(M)画出个矩形

直接选择工具(A)左上的点向右平移 改变上面的圆角度

直线段工具(\)拉出一条直线 描边面板端点、边角改为圆角



矩形工具(M)画矩形

自由变换工具(E) 透视变换 按住下方端点向内拉

直接选择工具(A)选择右下方的点向内直线延长



椭圆工具(L)按住Shift拉出一个正圆

矩形工具(M)画矩形

路径查找器【shift+ctrl+F9】 减去顶层



椭圆工具(L)画出吊椅外形

矩形工具(M)画出一个矩形

直接选择工具(A)上面圆角度小一点 下面圆角度直接拉到大



矩形工具(M)画出大矩形 然后根据阶梯画楼梯小矩形 全选 路径查找器【shift+ctrl+F9】减去顶层



  • 步骤7

AI里做好基础图形、颜色基本调好、调整好位置导出PSD

文件(F)-导出-导出为-PSD-使用画板

  • 步骤8

PS部分





完成了基本图形 我们需要丰富插画的细节给插画丰富颜色和添加噪点效果

同样的做之前先分析

房子部分为暖色的灯光 那么在房子周围的草地树叶都会受房子光的影响 带点暖色的环境色

越靠近光源颜色越暖越亮 离光源越远颜色越冷

  • 步骤9

在添加噪点效果之前我们先来了解噪点的不同表现形式



通过上方对比图可以看出画笔的溶解模式出来的噪点更为细腻

画笔的溶解模式是对画笔画出来的图案进行溶解效果

图层的溶解模式是对该图层上的所有图案进行溶解效果

羽化值越大噪点越分散

根据自己的需求选择相应的效果 这里我选的是画溶解模式

  • 步骤10

PS里勾选自动选择图层

点击要添加噪点的图层,在改图层上方新建一个图层,建立剪切蒙版

画笔工具(B)选择溶解模式 调整不透明度和流量在新图层上涂抹 效果如图所示

第一次没有画到位没事可以多尝试去调整不透明度和流量反复尝试

同理来给其他的图层添加噪点





  • 步骤11

建议一个颜色一个图层方便后期修改

如果感觉噪点画多了可以选择橡皮擦工具(E)来擦涂不想要的部分

拓展:锁定透明像素

锁定透明像素同样可以达到和创建剪切蒙版一样的效果但是锁定透明像素只能在同一个图层上进行绘制不易修改



  • 步骤12

如果感觉颜色效果做出来不太满意怎么办呢

可以通过FX图层样式给图层叠加颜色或者通过添加调整图层改变色相饱和度





  • 最终效果图:



其他上色方法一样需要大家自己动动小手去试一试啦

结语

本期教程到这里就结束了,希望大家在练习过程中多思考、理解制作思路和操作方法,活学活用。


文中图片素材来源网络,如有侵权请联系删除
来源:苏州UI设计培训培训中心
热门课程 全部课程

热门动态

申请免费试听

只要一个电话

我们为您免费回电

立即申请
刷新
图形验证
关闭
>>
拖动左边滑块完成上方拼图