艺术专业

名校申请攻略领取

  • 姓名(称呼)*
  • 联系方式*
  • 意向国家
  • 意向专业
  • 申请学历
申请攻略领取

最新资讯

Popular universities


作品集灵感|网页设计中的个性插画风格大盘点,快速get新技能!

插画具有辅助文字叙事的功能,在书籍、杂志等平面中已然并不罕见,然而由于过去WEB技术发展的原因,网页设计中运用插画的情况却不多见,随着技术提升,插画越来越被网页设计师重视。今天为大家带来网页设计中常见的4种个性插画风格,给艺术留学的小伙伴们借鉴参考。


网页的插画其实无须一定要细节毕现,往往它传递的是一种价值、理念主张,而非具备叙事的规模。

 



扁平的画风非常适合网页端的展示,插画的对象也许可以是抽象的,模糊的,有的旨在塑造品牌氛围。





网页中插画的风格选择是依赖于品牌内容形象的,这里我们只总结较为普遍的现象。简单来看,如果我们把插画的风格放在一个滑块里,这个滑块的左边一端是写实,右边一端是抽象的话,那我们的插画风格是在这两端中游移。因此,才有了各具特点的风格化插画


学院派


笔触、纸纹,这些传统的学院派绘画所带来某种底蕴深厚的氛围,能结合网页自身的特点,传递出品牌的价值。尤其表现了一种“人为”的过程,不仅从视觉上还从触觉上激发观者的想象。这一类风格往往比较写实,细节也相对丰富


素描的特点有某种分析式的古典意味,在下面这个珠宝设计的网页里表现一种匠心。




具有水彩画纹理的插画,在下图这个度假中心的酒店展示页面里是一笔非常温馨、更贴近人的存在,酒店不再高高在上的奢华感,而充满了人文精神。




而如下这个联系表格的左侧采用一张速写作为配图,是想表达一种亲近感,设计师并不希望网页呈现这个时代冷冰冰的距离感,而是通过笔触就制造亲和感。



扁平化


扁平化可以说是网页设计中用到的最大的画种,它的扁平特质即失去阴影和高光,从“形”的方面去表达网页的内容。因此,扁平化插画绘制起来相对写实的学院派的插画更为简单。它们的表达重点是在于颜色,运用鲜艳的颜色能让扁平化插画丰富起来。


将动物的形象绘制出来就能表现一种活泼可爱的感觉。下面这个网页展示内容原本和技术有关,加入了这些可爱的插画,就能增加一种轻松的情趣。



另外,扁平化也可以是抽象的表达。



你也可以将一整张网页当作创作对象,整个页面的元素都像是浮动在整个画面的上方。



由于扁平化失去了细节,如果想要带来更多“触感”,可以后期增加一些细微的纹理。


风格线条

线条是表现插画内容又一种极具风格特征的形式,线条的风格也决定了整个画面的风格。这个类别和扁平化非常接近,因为它们都并不在刻画细节,而是类似一种速写


具有几何特征的线条可以作为插画配图,还可以作为背景,即使是小小的几何线条围绕成形,都能作为背景使用,而这类风格目前正大行其道。



下面这类具有简笔画特征的插画,充满了整个网页,人物极具诙谐感



插画和网页其他组件的整体风格都同时采用线条,风格一致



画影合成

所谓画影合成就是既有绘制的成分也有摄影的部分,它融合了摄影的“真实”和手绘的“想象”,完成来源生活又超越生活之上的跨越。然而这毕竟是比较少见到的表达形式,除了本身不好驾驭以外,画面也会因此而变得更复杂。


如果想要用画影合成作为焦点图形,可以选择一些简单的几何形。利用人像与几何造型、文字的合成,略增加空间感的办法是相互形成一定的遮挡



无论哪一种类型的绘画,在运用到网页前都必须思考与内容的关联性,适合才是最重要的,而非一味寻求好看的原则。



就像摄影作品需要设备和模特布景,传统的插画源自手绘或者数码绘画,这些我们已熟悉的知识无需赘述,还有很多创意的变体需要设计师的进一步探索。看着网上风格各异的插图,往往想学习却又无从下手,该怎么办?不用担心,下面为大家带来两大绝招,助你快速掌握风格各异的插画,为作品集制作添彩。





仿型


仿型,可说是一个模仿、练习的过程。选择喜欢的插画作为学习对象,拆解画面构成元素,总结代表性特征,了解其思考方式,是一种理解原作者绘画思路和想法的过程。


我们从形式上来说可以将一张插画拆解为5个构成元素:构图、造型、素描关系、配色和肌理





01

构图


构图是一张插画的骨架,各个元素按照设计的位置、大小排列在画面中,就能形成一张画最基础的模样。概括来说,最基本的构图有如下这么几种:


环型


环形构图是非常常见的一种形式感很强的构图,往往画幅中心存在一个视觉焦点,围绕视觉焦点发散/聚拢元素。





对称


对称构图的画面中存在一个轴线,画面元素围绕轴线两边对称。这种对称既可以是追求强形式感的绝对对称,也可以是形成一种视觉平衡的动态对称




平铺


平铺构图的画面往往不存在一个明确的视觉中心,所有的元素均匀的充满着画面,强调整体的统一性






S型


S型构图是非常常见的一种构图方式,形式灵活多变。S型构图重点不在于元素的布局是「S」或是「Z」,而是利用错位布局,营造空间,增强画面的节奏感。往往S型构图有着明显的层次关系,元素在空间上可以分为前、中、后景






02

造型


同样的元素,在不同的设计师手上画出的感觉一定是不同的,一个插画师最明显的风格特征也往往体现在造型的独特性上。造型的类别是无法枚举的,写实或抽象、松弛或硬朗、精细或概括……对造型感的提升需要我们多看优秀的作品辅以大量的练习。






03

素描关系


素描关系这个词想必大家不陌生,严格来说它也是造型的要素之一,单独提出来是方便大家更好的理解。素描关系由高光、灰部、明暗交界线、暗部、反光、投影组成。一个元素加哪几种素描关系,怎么加,加在哪,什么肌理,都能左右一张插画的视觉风格。一般来说,对素描关系处理的越多,画面会有更多的细节,更趋近于写实



04

配色


人类的视觉感知系统,对于颜色是第一位的,其次是形状。插图的颜色往往能决定观者的第一印象。对于配色,我们需要注意两点:


颜色的配比


决定画面整体色调的颜色,一般占画面60%以上,余下有30%的辅助色,10%的点缀色。这并不意味着画面中只能出现三个颜色,但是三个纬度的颜色需要尽量在色相上保持接近





颜色的对比


一张插画中,一定蕴含着色彩的对比。我们知道颜色三要素是:色相、明度、纯度。相应的对比也分为色相的对比,明度的对比,纯度的对比,当然更多时候是混用的。对比的作用有很多,较强的对比可以使得你的画面更富层次感和视觉冲击力,较弱的对比则营造一种柔和自然的感受。






05

肌理


肌理本是指物体表面的组织纹理结构,即各种纵横交错、高低不平、粗糙平滑的纹理变化,是表达人对设计物表面纹理特征的感受,是一种三维的概念。在这里,肌理所指的含义与质感相近,是一种二维概念。我们可以通过刻意制造的笔触感、噪点、纹理等,使得画面蕴含丰富的细节,更加耐看。





破型


破型,就是在充分理解学习对象构成的基础上,结合自己的风格痕迹和需要表现的内容,形成新的插画画面。好的插画是形式与内容的完美结合,优秀的表现形式是为了传递信息,你应该明确插画需要传递何种信息,并且让所有的元素为之服务。如何更好的结合内容呢?


01

理解各个元素的视觉表意


环形构图更聚焦,对称构图更具形式感;曲线的运用会让画面更柔和,贴近自然,直线与几何则更具现代感和科技感。先要理解各个元素所隐含的视觉语言,再通过你想传达的内容去挑选合适的呈现方式。


02

构建一个故事


想象一个故事,谁(who),在哪(where),什么时间(when),做什么事(what),怎样在做(how)?然后我们再问自己一个问题:这个故事要传达什么情绪(有趣、温馨…)。不断思考这样的问题,完成从故事到画面的转变,画面里物境-情境-意境的搭建。


03

视觉转译


故事是文字,我们需要将文字视觉转译为图形。一点点的细化你的故事,将每一个词转化为可见的图形和颜色,并且快速的反馈到你的草图中去。当然,这个过程对于每个人来说都会得到不同的结果,自信一点,这才是你创作中最与众不同的部分。




几个建议


01

关上电脑


在自主创作的阶段中,我们一定会遇到想法不够,不知该如何进行下去的时候,此时应该避免回过头去看学习的对象,这样会让自己的创作变的局限,从而越来越像原作。


02

足够细致的草稿


很多人对待草稿是不够用心的,粗糙的草图意味着你并没有真正做好独立创作的准备。请尽量保证从投影的造型到人物脸部的配色,每一个元素的细节都能在草稿画完之后心中有数,这样才能使你避免你对着 AI/PS中的半成品不知所措。


03

向经典学习


dribbble 上固然能提供许多新鲜的想法和创意,但是不妨去了解一下新艺术运动的插图,席勒的速写,达达主义和立体主义的海报等等,你会发现艺术史上如此多大师和流派,都是取之不尽用之不竭的灵感源泉。




想要得到专业的艺术留学作品集指导,欢迎来我们UBAT体验学习!我们的专业顾问导师团队,会为每位学员打造私人订制的、更有针对性的学习内容,以协助大家顺利拿到心仪国外艺术院校的offer哦,欢迎大家前来咨询~