网页设计 » 视觉设计 » 城市渐变风格插画教程,未来科技感十足!

城市渐变风格插画教程,未来科技感十足!

发表于: 视觉设计. 评论
Sponsor

前言:今天给大家分享的是科技感插画教程,这类风格达人认为很实用的,比如插画、APP UI、WEB Banner都可以用到,实用性高,值得学习。本次教程使用工具是 PS 或 AI 均可(推荐用AI画矢量图哦)。

本教程作品灵感来源于@Romain大佬的城市渐变风格插画。

城市渐变风格插画教程,未来科技感十足!

作者:Romain

城市渐变风格插画教程,未来科技感十足!

作者:Romain

先来展示最终效果图(坐标深圳)

城市渐变风格插画教程,未来科技感十足!

Jack 2heng 效果图

分析难点:1.城市建筑风格 2.色彩把控 3.控制好建筑比例 4.突出前后背景 5.场景构思

城市渐变风格插画教程,未来科技感十足!

教程/步骤

第一步

首先找到几张建筑群的照片作为参考对象(照片清晰,无云彩遮盖,多找城市规划鸟瞰图,和灯光秀有关建筑照片),这一步的目的是确定建筑类型,与场景布局思路。

城市渐变风格插画教程,未来科技感十足!

第二步

确定好建筑的透视点,开始在草稿纸上画好建筑草图。

注:本人推荐平面展示的目的是为了更好的上手

城市渐变风格插画教程,未来科技感十足!

第三步

建一个黑色背景的画板(大小随意,本人使用1200*800), 并在草图上的建筑图形在软件中变为线稿图(记得打好组)。可以在小画板中画,将建筑组件化,最后再合在一起。当然对每栋建筑描绘越详细越好(建筑比例要注意一下)。这一步的目的是确定场景布局。

注:ps,ai均可选择描边

城市渐变风格插画教程,未来科技感十足!

第四步

确定明暗关系,受光面与背关面。(素描基础)并把层级分好,前景(建筑群)为重点,中景(小建筑)为辅助,背景(大山与背景)为装饰。

城市渐变风格插画教程,未来科技感十足!

第五步

不受建筑本身颜色创作,对以分明建筑进行HSB进行配色(尤其在高光面,要突出亮点),此部分可多参考灯光秀的配色,吸取相关颜色。配色的目的是为了铺上基础颜色,确定建筑颜色饱和度等,后期由渐变优化建筑本体。

注意前中后的差别,背景不能抢前景的亮点。

城市渐变风格插画教程,未来科技感十足!

第六步

1.在前面基础上给每栋建筑添加渐变,从通过对色相之间进行变化,使用HSB中S进行调色练习。还可以照顾一些受光影响的建筑。

2.对建筑本身结构进行渐变层次分明。

城市渐变风格插画教程,未来科技感十足!

第七步

对每栋建筑刻画添加高光线,建筑纹理线,玻璃灯… 当然对建筑的刻画可以多参考建筑的细节。

城市渐变风格插画教程,未来科技感十足!

第八步

在每座建筑后添加对应色相的氛围灯,让每栋建筑物生动起来。

城市渐变风格插画教程,未来科技感十足!

第九步

对背景进行装饰添加星星,对背景进行简单渐变处理,色相要暗。

城市渐变风格插画教程,未来科技感十足!

第十步

对建筑+氛围灯+背景进行层级分析,并合理摆放建筑位置,注意每栋建筑的间隙,不要过于空旷与紧密。

城市渐变风格插画教程,未来科技感十足!

第十一步

最后一步,将所处一个水平面的建筑进行倒影处理。倒影这块需要编辑组后进行透明度调整。

调整完成后就完成啦,当然有很多需要优化的地方,大家可以发挥想象力。进行设计期待你们打卡的内容!

总结

在本次练习中从灵感-参考-线稿-明暗关系-色彩铺色-渐变运用-添加细节-图层背景,

可以作为衍生扩展,运用到banner,插画作品上…

作者 | Jack_2heng
来源 | 站酷 zcool.com.cn/u/22563164

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }