网页设计中手工绘制的图标和元素的方法

尽管在日常的设计工作中，网页设计师们经常更关注于拥有近乎完美像素的设计元素，但有时候，它们并不适合所有类型的设计，有时你或许想要更多，有点偏向真实的元素。

手工绘制的图标或元素可能正是你要寻找的适合的、正确的设计元素，可以帮助为你的项目增添一些特别的视觉元素。大多数设计师不会疯狂地使用看似手绘的元素(这是正确的)，但在你的网站设计中使用一些看似手绘的元素会增加用户的个人感受。

这在网页设计中也很流行。从草绘风格的图标，到具有同等可用性和艺术性的完整的手绘元素，这是一个正在流行的设计选项。今天，我们将来探讨一下以下8种方法来使用这一趋势。

1.创建分离

网页设计中手工绘制的图标和元素的方法,PS教程,

手绘设计元素可以和几乎任何类型的视觉表现形式混合搭配，它们可以与照片或视频一起工作，独立应用于空白的空间中，或者在文本元素附近。不要因为你担心它可能不适合于整体的设计模式而消除使用这种类型的元素的想法。

尝试一下，谁真的知道呢?

Digital Visitor在其网站设计中使用这些元素来创建元素和内容之间的分隔。尽管主页上的元素只是简单的点和线的组合，但手绘的元素永远可以给页面增添一丝活力与个性。

每个元素的放置都是为了确保用户能够查看正确的内容。在上面的例子中，元素位于屏幕的中心，用于创建两个内容区域之间的分隔。在设计中，类似的元素被用在小文本框上，以展示公司的实际业务。

2.互动的涂鸦

网页设计中手工绘制的图标和元素的方法,PS教程,

手绘元素同样可以在设计中进行有趣的互动。从加载动画(这篇文章中的许多网站示例使用这种风格)到一个完全交互式的体验，这种设计技巧足够有趣，可以激起用户的兴趣。

Real Estate Stained Glass是一个使用该技巧的形象的例子，它结合了网站设计的趋势和创意元素，允许用户按照自己的想法给屏幕上的手绘元素着色。通过手绘，你可以很自然的把这两者联系在一起，元素可以很精确和无缝的产生效果。

3.近乎真实的手绘字体

网页设计中手工绘制的图标和元素的方法,PS教程,

有时，效果最好的手绘元素实际上并不是被写出来的，通过模仿笔迹或印刷样式从而创造出矢量的手绘元素尤其受欢迎，这种类型更多的使用于以显示为目的的项目中。

这种类型的元素具有更轻、更人性化的感觉，用户可以很容易的产生关联感(关键是要确保字母是高度可读的)。

Tradewinds Hotel的网站设计在这一方面做得很好，它使用了一个简单的、草书式的字体，足够大，足够清晰，可以一眼就能读懂。一个简单的无衬线样式，它可以帮助增加字体的重点，同时也使用户易于理解。

4.设计草图

网页设计中手工绘制的图标和元素的方法,PS教程,

有些手绘元素纯粹只是为了视觉目的。它们的存在是为了创造一种可能难以在其他方面建立起来的设计流程或感觉。这些草图类型在设计的小地方使用时可以特别有趣。

Mother’s Brewing在其网页设计上使用的恰到好处。它的主页上有个大心脏——很明显。但是，几乎所有其他页面上都有一些很小的元素，有些很明显，有些会比较隐蔽。每个按钮都有手绘的感觉和缎带元素的设计，元素出现在背景或覆盖在可滑动的图层上，填补了设计中的比较呆板的空间。整体效果很巧妙，视觉上也很有趣。

5.营造气氛

网页设计中手工绘制的图标和元素的方法,PS教程,

手工绘制的设计元素通常可以营造一种更轻松、更有趣的基调。它们可以将这种氛围带给几乎任何类型的设计项目。使用的手绘元素越多，项目给人的感觉可能会月轻松(但是，我们并不建议使用过多，度很重要)。

Signs for Science是一个很好的例子，它展示了如何用手绘的元素来设计一个有趣的，几乎专门为儿童准备的设计美学(配色当然也是重点之一)。通过使用手绘元素，整个页面的设计都充满一个特定的情绪，富含创造性的，轻松的，鼓励用户与之交互。

6.展示创造力

网页设计中手工绘制的图标和元素的方法,PS教程,

一组手绘设计元素对于一个展示型的网站设计来说是一个很好的机会，因为它可以强调创造力。这些元素更侧重于设计的过程，以及能够很好的表达项目的思想以及它们将如何工作。

另外，这是一种有趣的方式来锻炼你的创造力和思维。

在上面的例子中，The Feebles在其网页设计中使用手绘的元素来表示主形象，并与左上角的手绘标志相结合(如果你不仔细看的话，你可能会错过它)。

7.图标或Logo

网页设计中手工绘制的图标和元素的方法,PS教程,

因为这是手绘元素最流行的用途之一，所以我们没有把它放在列表的顶端(主要是为了帮助你思考其他可执行的想法，然后再去做一些更常见的事情)。

手绘元素可以是一个图标或Logo，从弯弯曲曲到不太圆的形状，不完美会增加个性和魅力，而完美的元素风格很难做到这一点。

Higher Ground使用方形的字体，将字母与图标的图标分开。极简的风格展示出来醒目和有效，而手绘元素赋予它一些个性，这是仅仅一条直线所不能表达的。

8.作为动画效果

网页设计中手工绘制的图标和元素的方法,PS教程,

用动画将手绘元素带进你的设计中。

在屏幕上绘制的图像可以通过有趣的形式进行动态化。这么做有一个明显的好处，那就是娱乐性，因为用户可以更生活化的体验元素和信息。这对网站所有者也有好处：增加了用户在网站的停留时间和提升潜在的转换率。

Long Story Shor在主页上就使用了这个概念。首先，他们选择手绘印刷风格的绘制标志，然后将其动画化。这个动画的效果很柔和顺畅，并在过程中包含多个手绘。整个循环只持续几秒钟。

总结

即使你对手绘还不太熟悉，在设计项目中模拟手绘元素也可以增加用户的个人感受。从印刷设计到游戏到加载动画，这些元素可以展示创造力和个性。

虽然手工绘制的元素并不适用于每个项目，但下次你如果需要在设计中添加一些可以放松心情或添加一些可以帮助留住用户的元素的话，你可以考虑一下。保持想法简单，并将其贯穿到整个设计的主题中这就是这些元素的意义所在。

创新互联专注于企业成都全网营销、网站重做改版、古冶网站定制设计、自适应品牌网站建设、HTML5建站、商城网站建设、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为古冶等各大城市提供网站开发制作服务。