首页 > 网页教程 > 设计分享 > 为网站创建插画的技巧和实践经验分享

为网站创建插画的技巧和实践经验分享

时间:2018-06-05    来源:优设网

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

通常的做法

Yaroslava 曾经接到过为IT 博客绘制文章插画的任务,他需要借助插画来表达隐喻,呼应文章,还避免用户注意力被转移。

在创作过程中,她逐渐摸索出一套成型的做法。她需要在创作之初就同作者或者编辑进行沟通,了解文章所要表达的主题和思想,然后进行下面的处理:

  • 分析其中的内容,梳理出一般信息

  • 试图定义文章的核心关键字,将它们作为插画的出发点

  • 找出相似的领域或者活动

  • 考虑通过色彩和明暗来表达主题

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

搭配法

这种方法是最简单的,但是它并不一定是成功率最高的做法。搭配法简单说来说,就是借助电脑或者手机,直接记录将要绘制图片的具体需求和相关背景,将人物角色和文章的主题元素相互结合起来构成插画。

举个例子,下面的插画是为一篇名为《UI设计中的格式塔原理:接近性原则》的文章所绘制的,需求上需要一张静态的图片,通过纹理和明亮的色彩来吸引用户的注意力。这样一来,整个插画的绘制方向就很清晰了。

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

组合法

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

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

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

相关推荐
APP设计:什么要在APP当中使用插画?
CSS酷站网页水平条经典设计欣赏
欧美CSS酷站网页背景设计之光影特效赏析
酷站欣赏之欧美棕色调网站设计案例赏析
如何基于心理学设计的目的来制作受用户欢迎的网页
二十款网页图文混排设计样式欣赏
黑色的艺术:三十款暗黑色调的欧美CSS酷站欣赏
35套精美绚丽的创意酷站设计欣赏
网页设计的文字色彩与可读性分析
如何掌握网页广告字体设计的技巧
40款超个性粗糙纸张纹理风格的CSS酷站欣赏
15款富有创意的的html电子名片设计欣赏
国外49款创意型404错误网页欣赏(附演示网址)
手绘风格的15款超级漂亮网站欣赏
网易频道页面的改版过程分享
网页设计师必备的13款国外CSS酷站参考画廊
多款韩国绚丽风格的游戏网站界面设计欣赏
网页设计中的构图技巧分享
网页设计的几何圆之美
网页交互设计的一些理解
网页设计中上一页和下一页的用户体验分析
黄金分割布局在网页设计中的应用
简单而又不单调的网页视觉设计技巧
让用户感觉很糟糕的网页设计之十大原因
淘宝网新年改版之网页宽度最佳尺寸浅析
圆形元素在网页设计中如何应用的25个案例
如何学习才能成长为一名更好的设计师?
淘宝案例分析之商城页面的用户体验
85个优秀的超大字体网页设计欣赏
用实例理解网页设计的80/20规则
寻找应用服务或程序类网站的设计规律
10个国外网页设计领域最具影响力的人物
30个出色的网页设计色彩搭配案例欣赏
10个优秀的网页设计教程与素材博客
网站专题设计的一些细节经验分享
21个值得收藏的转换PSD为HTML的教程

精彩推荐

热门教程