详细解析网页设计中的手绘应用

2016-02-17 01:20 8 1 收藏

下面是个简单易学的详细解析网页设计中的手绘应用教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - 平面设计 】

手绘元素通常是用在纸上的,但是它们被越来越多的用在网站设计上面,这些速写元素令网站极具个性并能为访问者提供有趣的体验。手绘风格的引入,对于互联网应用作品起到了一个积极的影响。不同的主题和绘画风格,使其表现形式具有原创性,给设计带来了多元化,人性化的特征。

我们先来看一些网络中的案例:

节庆主题插画

详细解析网页设计中的手绘应用,PS教程,图老师教程网

GOOGLE每一次节日活动的banner设计都别出心裁,这很大程度要归功于应景且独特的的手绘风格作品。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

QQ浏览器中的闪屏设计,另一种视角展现节日主题。

网页中的插图

详细解析网页设计中的手绘应用,PS教程,图老师教程网

韩国保险类网站,五张插图使不同的保险内容一目了然。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

韩国智能生活网站首页,信息量大的首页使用手绘素材比起真实素材来说更容易统一风格。

电商的品牌延伸

详细解析网页设计中的手绘应用,PS教程,图老师教程网

韩国电商网站,结合标志把卡通形象场景化,运用在网页每个类目中,增强品牌识别性和趣味性。

虚拟服务电商网站中的手绘应用

跟随网络世界蓬勃发展起来的是虚拟产业,将我们的数字化生活变得方便快捷。设计来源于生活,QQ网购充值中心主营虚拟服务业务,如话费,网游,保险,彩票等,常规的设计受到素材的限制,局限性很大。如何传播品牌形象,令消费者轻松愉悦的体验虚拟服务,这就需要我们的设计更加个性化,将情感因素溶入视觉形象中,借助虚拟形象来作为充值中心的情感载体,宣传和强化卡通形象,不管是大众传播、人际传播,还是组织传播,都可以互相渗透,综合运用。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

生动化传播卡通形象

生动化传播的要点在于形象生动、轻松互动,它能拉近卡通形象与受众间的距离,全方位带动受众的视觉和思考。卡通形象传播诉求的重点是引起形象联想,既以外在形象标准为核心,又有着内在本质内容。一套以卡通形象为核心的系统,能增强品牌传播效果。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

充值小人胸口的充字为标识性的特点,根据不同的主题搭配表情和道具。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

平台tips中的运用,增加一些趣味性。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

运营活动tips中的运用,虚拟形象组件化,节省了创作步骤提高了工作效率。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

运营活动中的运用,如节日、卡通角色家庭系列、情景主题、flash小游戏等等。

事件化传播节庆插图

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

卡通形象的事件化传播是围绕卡通形象利用具有新闻价值以及社会影响的人物或事件,吸引受众关注。有利于培养卡通形象爱好者对该形象的忠诚度。我们以节日主题为创作了一系列的插图,对节日的美好祝福和情感表达,让用户自然而然的产生亲近感,激发共鸣。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

详细解析网页设计中的手绘应用,PS教程,图老师教程网

充值中心首页的广告位、登录框以及每日精选中的运用

故事化传播四格漫画

这不是一个故事的时代,而是一个讲述与表达的时代。多格漫画是现在网络中最流行的一种宣传手段,画面分格来完成一个小故事或一个创意点子的表现形式对于品牌的建立起到很好的带入作用。画面不需很复杂,角色也不要太多,对白精简,让人容易轻松阅读,强调叙事,可以吸引用户连续的关注。

详细解析网页设计中的手绘应用,PS教程,图老师教程网

在互联网高速发展的今天,网络文化也越来越看重自我个性和情感的表达,这与插画的内在特质不谋而合,最终促进网页在表现形式上的丰富与更新。

来源:http://www.tulaoshi.com/n/20160217/1577218.html

延伸阅读
多重字体混合使用不管在哪个行业都是有难度的,尤其是网页设计领域。尽管字体种类成千上万,但是合理的在网页中使用它们不简单呐,所以在面对成千上万的字体时,保持冷静是你应该保持的职业操守,就好比摄影师看见美女一样。有些人说,那我在一个网页中只是用一种字体不就一了百了了吗~错!即使你只是用一种字体那些常见的问题还是会存在。今天...
在网页设计中,横向和竖向的直线非常常见,利用整齐的线条可以打造出有序的视觉路径以及信息层级。当然,有些时候,可以不按理出牌,设计一些倾斜的线条,让你的网站不拘一格,更加与众不同。 打破传统布局,创造动态的自由视感,让构成更加复杂无论是利用简约的几何图形,或是精致的倾斜图像。让你的设计更具吸引力,不妨试试斜线。 Paseo I...
网页设计中使用轮廓框元素的案例不多。但实际上,这些纤细的、整洁的轮廓框效果极佳。为了保证效率的最大化,轮廓框一般采用纯色线条,这样便能产生前景与背景的明显对照。黑和白,是最传统的配色,以其对比强烈,效果突出而著称。因此很多轮廓框采用了白色线条。除了颜色,线条的粗细也是一大考量,纤细的线条让人感觉精致细腻,粗厚的线条显...
很多读者常会询问我类似于下图中的按钮的光效是怎么做出来的?其实非常简单,新建图层,笔刷或椭圆画出白色,高斯模糊,再将图层混合模式更改为图层叠加就可以了。但是这篇文章里我们不讨论具体的技术,而来看看如同上面的按钮通过白色的叠加创建出按钮的高光,我们来了解一下图层叠加模式在网页设计中的应用,再通过不同的实例来深层次的了解图...
一个成功的专题页面,大部分会具有以下几个出彩的要素:色彩、构图、风格创意,细节等。一个页面从无到有,设计师需要对整个页面有全盘的设计和把控,良好的画面分割能够让用户第一眼看到这个页面就能被视觉吸引,甚至不用浏览具体内容就能了解这个页面的很多信息。 同样的素材,同样的配色,不同的构图能够让页面出来的效果有天壤之别。如果...

经验教程

337

收藏

19
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部