• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 为网站定制插画有哪些可供借鉴的方法?

为网站定制插画有哪些可供借鉴的方法?

作者:Tubik Studio 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含插画技巧,插画设计,经验分享,网页插画等相关知识,Tubik Studio希望在学习及工作中可以帮助到您

插画是网页当中最常见的设计元素之一,无论是用是强化视觉,还是传达信息,都是非常不错的,这也是为什么它越来越受到设计师的追捧。通常我们会说一图胜千言并不是没有道理的,图形更容易吸引用户的注意力。Tubik Studio 的设计师常常会基于用户的需求绘制各式各样独特的插画,在这方面经验非常丰富。这次,我们让平面设计师 Yaroslava Yatsuba 来分享一下,她为博客类网站创建插画的技巧和实践经验。

通常的做法

Yaroslava 曾经接到过为IT 博客绘制文章插画的任务,他需要借助插画来表达隐喻,呼应文章,还避免用户注意力被转移。
?
在创作过程中,她逐渐摸索出一套成型的做法。她需要在创作之初就同作者或者编辑进行沟通,了解文章所要表达的主题和思想,然后进行下面的处理:

  • 分析其中的内容,梳理出一般信息
  • 试图定义文章的核心关键字,将它们作为插画的出发点
  • 找出相似的领域或者活动
  • 考虑通过色彩和明暗来表达主题

?
通过实际操作,Yaroslava 摸索出三种具体创作的方法。?
?

搭配法

这种方法是最简单的,但是它并不一定是成功率最高的做法。搭配法简单说来说,就是借助电脑或者手机,直接记录将要绘制图片的具体需求和相关背景,将人物角色和文章的主题元素相互结合起来构成插画。
?
举个例子,下面的插画是为一篇名为《UI设计中的格式塔原理:接近性原则》的文章所绘制的,需求上需要一张静态的图片,通过纹理和明亮的色彩来吸引用户的注意力。这样一来,整个插画的绘制方向就很清晰了。

而在《2017年UI设计流行趋势回顾》的文章当中,需求类似,设计师采用了渐变色彩和动态合成的方式来绘制了相应的插画。
?

组合法

组合法是试图让角色和界面元素之间发生交互,通过夸张的方式来传达隐喻,表现交互。比如在大按钮上绘制出小角色,或者让元素拟人化走出手机界面等等。
?

在这篇关于UI动效的文章当中,其实包含了很多隐喻,仔细琢磨一下,智能手机似乎更像是一个带着帷幔的表演舞台,UI元素像是提线木偶,而设计师则是背后操控这些木偶的操纵者。这样一来,整个插画的构思就非常清晰了。不过和以往的插画不同,这个插画中每个角色的地位是均等的,并无主次之分。插画的背景中,纹理是手工绘制的,加入丰富的色彩,确保能够吸引人的注意力。
?

这篇文章当中的另外一幅插画也是遵循类似的方法来进行绘制的。
??

寓言法

寓言法是最为开脑洞的设计方法,将想要表达的信息,比如IT领域的主题,投射到其他的领域当中,或者借由其他领域的插画内容表达出来。这类插画的绘制,常常会以意想不到的方式来呈现出来,隐喻是它的主体,而诸如数码设备这样的常见元素,反而居于次要的位置。

设计小贴士:可以多借助舞者或者运动员来表达,他们常常更加富有表现力和动感。

上面的插画是基于关键词“目标”来进行设计的。篮球运动员灌篮的这一动作和“抵达目标”在寓意上是完美契合的,因此,结合丰富的色彩,通过控制插画的角度和角色形体,营造出力量感和动感。
?

另外一个插画的案例是为文章《UI设计当中的3C要素:色彩,对比和内容》所制作的。其中设计师基于关键词“色彩”来进行设计,插画中的人物角色在为墙面着色,整个画面也非常富有色彩张力,动感的猫和颜料的黄色赋予了整个画面运动感和醒目的色彩,也使得整个插画更加幽默。
?
设计小贴士:注意一个问题,寓言和隐喻通常都受文化背景的影响,不同的国家和文化背景之下理解会有差异。这些文章是针对更为广泛的国际用户所撰写的,这些插画也应该用更加易于理解的方式来呈现。?
?

动态插画

动画能够强化插画的艺术表现力,能够提升吸引力,给用户留下更加深刻的印象。?


?
这个插画是为文章《UX设计术语:导航元素》所作,这篇文章是关于导航元素的,动态插画的加入,让文中内容更容易为用户所理解。
?

值得注意的关键

  • 色彩。色彩和纹理能够提升整个设计的图形感知,也能让整个设计更加协调。此外,色彩能够强化插画的心理感知,并且营造情绪和氛围。鲜艳的色彩更加适合娱乐性的内容,而极简的配色则可以和商业类插画更好地搭配。
  • 构成。在创作插画的时候,展现方式很重要,通过一个角色来抓住用户的注意力,或者通过元素交互来强化插画的属性,同文章内容互相呼应,都是要点。
  • 细节。在制作插画的时候,细节不仅仅可以丰富插画本身的内容,它也是强化风格、提升原创性的重要手段。就像正确的标点符号能让句子更加富有表现力一样。
  • 灵感。尽可能多的搜集灵感素材,无论是你喜欢的角色,漂亮的配色方案,有趣的图片,还是插画,都非常有用。最重要的是,你需要从中获得启发,而不是单纯的复制别人的作品。汲取灵感,多思考和打磨,能够为你带来更多想法。
  • ?

    「2018年设计趋势,一个都不要错过」

    • 《2018年,这10个LOGO设计趋势值得你关注》
    • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
    • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
    • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

    ================明星栏目推荐================

    优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

    设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

    优设大课堂

    您可能想查找下面的文章:

    • 为网站定制插画有哪些可供借鉴的方法?
    • 超全面!创意图形中的实用小套路进阶指南
    • 扁平插画绘制进阶指南!新手遇到的六种常见问题解答
    • 超实用!多色彩渐变插画的核心技巧总结
    • 如何画出自己的原创作品?来看高手的完整流程总结!
    • 如何绘制系列插图?收下这份超详细的高手思路总结
    • 用这个简单实用的设计技巧,轻松做出有趣的插画类设计

    相关文章

    • 2018-08-23春节专题!App 设计系列之应用市场截图设计原则
    • 2017-12-27WebPack初步入门
    • 2018-08-23你的设计有依据吗?详解用户体验设计中的规律与逻辑
    • 2018-08-23这些属于未来的UI形态,距离我们已经越来越近了
    • 2018-08-23平面作品太单调?三招提升设计层次感!
    • 2018-08-23腾讯设计师:极速适配 iPhone X 的技巧揭秘!
    • 2018-08-23以手机淘宝为例,看原型图易缺失的交互场景
    • 2018-08-23泛谈商业产品(一):什么是商业产品?
    • 2018-08-236个小技巧帮你从线框仔进阶成UE设计师!
    • 2018-08-232018 UCAN 大会官方全纪录——人工智能和新零售环境下的设计产业升级

    文章分类

    • html/xhtml
    • html5
    • CSS
    • XML/XSLT
    • Dreamweaver教程
    • Frontpage教程
    • 心得技巧
    • bootstrap
    • vue
    • AngularJS
    • HBuilder教程
    • css3
    • 浏览器兼容
    • div/css
    • 网页编辑器
    • axure

    最近更新的内容

      • 网站的视觉设计路径应顺应用户习惯
      • 进阶必读!可能是最全面的组件化开发与设计指南
      • 6个小技巧帮你从线框仔进阶成UE设计师!
      • 高手的后期课堂!聊聊人像磨皮的基础原理
      • 网易设计师:6个技巧让用户参与到你的设计里
      • CSS样式表与格式布局详解
      • 实战五步走!UI设计师如何让设计稿100%还原(上)?
      • 实战经验!如何在公司举办一场设计思维工作坊?
      • 想让作品更有冲击力?来学习设计中的3种构图视角
      • 想提示用户有错误?不会这五个设计方法怎么行

    关于我们 - 联系我们 - 免责声明 - 网站地图

    ©2020-2025 All Rights Reserved. linkedu.com 版权所有