UI设计教程 ｜ 5步快速制作2.5D插画
现在不光是C4D火，2.5D插画也很流行。很多创意插画都采用了这种方式来表现，相比于扁平化的风格，2.5D风格在视觉表现力上更加立体炫酷，使得这种风格的插画活跃在banner、海报、APP和网页设计中。
比如，让人印象最深的“微信跳一跳”的小游戏了，天天守在手机前的动力，除了与朋友圈晒成就感的原因外，也跟简约新奇的 2.5D 风格有关。
那么这种插画如何去着手制作呢？今天，我们就教给大家5步快速制作2.5D插画的方法。
1.构思
首先我们不需要考虑要如何下手，或者如何用工具来实现这个插画效果。先构思一下整一个框架或者小建筑的一些细节，一些有趣的点，用草稿画一下。如果要画一个很大场景的同学就务必要先画草稿再下手，否则你的场景会很混乱。
2.画参考线
2.5D插画最重要的步骤便是骨骼线网格的搭建，再复杂的图形都要乖乖臣服于它的框架之下，可以说解决了骨骼线，你就搞定了2.5D风格的精髓，我们后续的设计创作都是基于骨骼线网格去完成的，那么如何搭建这个骨骼线网格呢。
3.确定光源
为了让物体更加立体，我们需要区分他的受光面和背光面，不同的光源会产生不同的阴影。
4.制作零件，搭积木
有了骨骼线网格我们便可以参考网格线绘制出每一个面，一定要严格按照网格线去绘制，不能有丝毫误差，否则面与面之间的衔接会出现难看的缝隙。将几个大的模块依次拆分慢慢画出来，不要着急。
?
拆分示例：
其实并不复杂对不对，这样把每一个部分都单独做出来，很快就可以完成小房子的搭建了～
拓展：
切斜工具。重复有规律排列的组件，我们用到AI中的“再次变换”“切斜工具”。例如下图中的窗户，绘制一个矩形，复制一个，菜单-对象-变换-再次变化（Ctrl+D）得到另外3个相同矩形，最后全选，使用倾斜工具，倾斜30度。
3D字体。打上文字（字体选择一些较为方正的无衬线体效果会好一些），选择效果-3d-凸出和斜角，根据自己的需求选择位置、厚度等参数。通过“对象-拓展外观”，将文本拓展一下外观，变成零碎的个体，以便修改颜色。
5.ps润色，绘制细节
①新建空白图层，想对哪些元素加细节，就给他②新建一个空白图层，并做个蒙板。
空白图层的模式改为叠加，透明度调整到50%左右，这个看自己喜好，但不建议很高。
③用画笔绘制高光，阴影，渐变（渐变可用图层样式）
这样，一个生动的2.5D小插画就诞生了，最后可以自由发挥加些小效果。
当然，一幅插画的诞生，并不像描述的那么轻松，可能需要在你设计的过程中不断的推倒重来或者改变方向，当作品最后呈现在你眼前的时候，你会充满欣喜，就像是自己的孩子一样，共勉～
UI设计教程 ｜ 5步快速制作2.5D插画相关推荐
- UI设计新手怎么入门 如何制作别具特色作品集
UI设计新手怎么入门?如何制作别具特色作品集?UI设计是当前市场上比较热门的行业之一,而作品集被看做其敲开企业高薪大门的金钥匙.作为一个UI设计新手,如何才能制作出别具特色的作品集.实现就业梦想呢?小 ...
- ai一个线段多个箭头_AI设计教程：艺术笔制作渐变线条海报的方法是什么
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 AI设计教程:艺术笔制作渐变线条海报的方法是什么?来吧,今天我们就来一起制作一张渐变线条数字的海报吧. 如果大家想要 ...
- html网页肯德基设计代码作业,AI快速制作一幅肯德基广告单页教程
这篇AI教程向脚本之家上的朋友介绍AI快速制作一幅肯德基广告单页方法,教程以实例的形式向我们介绍广告单页的制作方法,很实用,也比较简单,喜欢的朋友快来学习一下吧! 首先来看一下最终效果图: 本幅广告页 ...
- UI设计教程分享：PS故障风海报制作教程
1.首先找一张看起来很酷的图(也可以选择自己喜欢的图片): 2. 复制图层,点击添加图层样式,选择混合选项,在高级混合里面的通道选项,有R.G.B三个通道选项,默认是全部勾选的状态,选择其中一个勾掉( ...
- UI设计教程：几步教你如何创建一个漂亮又好吃的饼干
1 . 如何创建渐变背景和文本图层 步骤(1) 创建一个新的1000 x 800px文档, 然后单击 "图层" 面板底部的 "创建新填充或调整图层" 图标以添加 ...
- 用PS制作旋转按钮图标，UI设计教程
每天一篇设计教程分享给你,与你一起成长. 所用软件为:PSCC2018版本,还没有这个软件的小伙伴们可以给我留言! 喜欢的小伙伴记得关注噢.
- 【干货】Sketch+Keynote双剑合璧：5步快速制作移动动效
送给真正的互联网人一顿干货早餐 [小咖导读]2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移 ...
- UI设计教程分享：Ps合成炫酷机械姬
本次给大家分享一个通过PS合成一个炫酷的机械姬,在这个教程里给大家展示图像的色彩处理.人物光影塑造和创意实现及细节处理,教程比较简单,创意十足,看过<机械姬>电影的同学们一定知道这个有多炫 ...
- UI设计初学者应该如何快速入门？
1.UI设计师是什么? 不说UI设计师,就连设计师,很多人都以为只是P图的美工,如果接受过正规的教学知识体系,那么首先第一要素就是明确这个知识是什么,所以这里有必要先明确一下UI设计师的概念. 维基百 ...
- 墨刀教程：如何快速制作一个App首页原型？
墨刀是一个原型设计工具,可以快速构建移动应用原型与线框图,支持云端保存和实时手机预览.今天主要是做一个墨刀的基础使用教程,就不重点介绍和对比各原型工具的优缺点了(有空的话我会单独做一篇原型工具的对比分 ...
最新文章
- CVPR2021|SpinNet：学习用于3D点云配准的通用表面描述符
- ERP的风险及其预防
- 【心情】今天买了YINSH！
- 哈夫曼（Huffman）编码问题（C++）
- Visual Studio 11预览: 新的编程语言功能
- 当post 的字段很多,post的字段并不完全修改(有的值是前端input的值,有的任保留原来原来数据库的值),...
- 奇门对接需求设计_奇门格局详解_-_么学声_张志春
- java玫瑰花代码_程序员最美的情人节玫瑰花，JAVA代码实现的3D玫瑰噢
- python计算两点间距离_用python计算图像中两点之间的距离
- iOS 上架App Store 遇到的坑
- 计算机内存与速度,内存容量与读写速度
- 为什么计算机连不上无线网络,笔记本为什么连不上无线网|笔记本电脑无法连接WiFi的多种解决方法...
- 【b站雅思笔记】Simon‘s IELTS Course - 阅读部分
- mac mini php开发,mac mini主要用来干嘛
- SAP BW4基础入门篇
- gui开头的歌词_首字拼音是gui的成语-以gui开头的成语大全「溜趣成语网」
- java测试类写三角形_软件测试实验一——使用junit判断三角形
- Outlook邮箱满了不用删除清理，快速转移保存到本地
- php对接java验签,PHP教程：php对接java现实加签验签的实例
- 企业如何做好项目管理工作？