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

超全面!设计师必须了解的美术基础

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

本文主要包含历史,基础知识,素描技巧,经验分享,色彩心理学,色彩理论等相关知识,郗鉴希望在学习及工作中可以帮助到您

编者按:文章总结了想要提高审美和设计感,设计师必须要了解的美术基础。

一、美术的重要性

任何类别的设计师都需要有一定的美术基础,甚至也要有一定的手绘能力。我们在用电脑设计图形的时候其实也潜移默化地在使用我们储存在大脑中的美术知识和审美,即使再先进的人工智能,也不能代替设计师的审美和美术知识。说到底软件仅仅是工具而已,要想提高你图形的审美和设计感,那么就需要补一下美术基础的课了。手绘在互联网设计中占的比重也在逐渐增多,对于我们 UI 设计师来说手绘也成为一个绕不过去的技能,但是不要紧张,我们不需要成为手绘大神或者插画师,只需要掌握一定的美术知识再加练习即可。那么如果我们掌握了美术知识并可以画出还可以的画,对我们会有什么好处呢?

△ 「Outlaws」Playing Cards by Mike

1. 美术在草稿中的优势

在作品创作的初期,草稿对我们构思起了很关键的作用。比如在 APP 项目、运营图、图标绘制以及一些图形化的设计中,首先很多设计师会打开电脑直接开始作图,然后就陷入了对工具选择的困惑中:我是该用钢笔工具勾形状还是用画笔工具呢。不要纠结这些,你只要拿出纸笔,手绘出脑海中思考的图形就好了。等草图完成后,再打开电脑完善这个作品。

△ 「Outlaws」Playing Cards by Mike

2. 美术在提案中的优势

在提案之前通过手绘将自己的想法画出来,和上司或者客户讲解自己的提案方向,这种方法会避免上司对电脑图形设计细节的不满意,毕竟我们还没时间完成细节。如配图中的一个图标,从最初提案到最终定稿,中间经历20多版的手绘稿件,如果每次提案都是以 PS 输出效果提交,在电脑绘制时要考虑的色彩细节会更多,同时也会浪费大量的时间。

△ 手绘完成的原型图 作者:Anne

3. 美术在原型图中的优势

开始视觉设计前,原型图的沟通可以节省双方很多时间。用软件设计出的原型图有些抽象,会让大家不了解具体内容搭配下的情况。而手绘的原型图可以帮助我们有更多的思考,不仅可以用于沟通方案,还可以后期包装展示时放入,让自己的作品区别于他人。

△ 手绘风格的运营图设计 作者:valiant_kwok

4. 美术在实际项目中的优势

越来越多的视觉稿都将手绘插画运用在当中,增加视觉冲击感,给用户带来全新的体验。比如 H5、网页、APP 等项目,「walk up」APP 更是运用了大量的插画表现。然而我们浏览某些设计的时候,总会看到并吐槽一些用到烂大街的素材,到了自己工作的时候依然会选择那些素材。再精致的素材有时候不如一些手绘原创的图形,手绘的图形插画能减少素材感,给用户耳目一新的视觉展现。尤其是现在闪屏、弹窗、运营图,手绘图表现形式已经是常态化,它们可能没有很精细,没有很美观,但是很独特、很有氛围感、很吸引眼球。如果你总是运用素材,不如尝试一下自己手绘原创一个图形,这样它的分量与价值会更大。在你尝试手绘之前,让我们先具体了解绘画的一些原理再开始动手吧。

△ 手绘在实际项目中的使用 作者:甘地xi

二、三大基本关系

首先我们要了解的是在美术里最重要的三个主要关系,他们是:结构关系、素描关系、色彩关系。

结构关系是物体的透视关系(也就是近大远小的空间关系)和物体的基本结构(可以把一个复杂的物体拆解成基本的圆形、三角形、正方形、长方形等简单容易描绘的结构)等,结构关系是我们如何理解形体的基础。

素描关系主要是研究光影的关系,一个物体在光源下肯定会产生如黑白灰等不同的明暗变化就是素描关系了。素描关系中最重要的就是三大面和五大调,我们下面会详细讲。

色彩关系则是要研究不同的色彩互相融合产生的影响,比如对比色、互补色、邻近色等,两个物体的颜色不一样也会产生环境色、固有色等。

所以我们为了用手绘或者电脑绘图来描绘物体时,可以从这三个关系中来审视对象,就会描绘地更加准确了。

1. 结构关系

透视

在结构关系中最重要的知识点就是透视了。透视是绘画理论术语,「透视」(perspective)来源于拉丁文「perspclre」(看透),是一种在平面绘画物体的空间关系的方法。物体由于近大远小的空间关系所以在我们观察者视角就出现了变化,这种变化和空间位置正相关。能够准确描绘出近大远小就能暗示出空间关系了。所以透视是画准结构的必要前提。

灭点

灭点指的是立体图形各条边的延伸所产生的相交点。透视点的消失点。灭点透视中,两条或多条代表平行线线条向远处地平线伸展直至相交的一点。平行的线能在灭点上推进而聚合的原则同样是以肉眼观察到的现象为依据的。

△ 灭点

第一种透视:平视

一个物体如果是正面或者没有近大远小的关系,那么该物体横竖对齐即可。

我自己的理解就是,看一个物体,正面去看就是没有透视。和你的视线是平行的,没有任何的偏离。

△ 此图中的物体就是平视,没有近大远小

第二种透视:一点透视

一点透视:透视来源于一个点,形状的变化与该点的距离相关。一点透视可以理解为在一个空间内多个物体产生的近大远小的关系。

△ 一点透视

第三种透视:两点透视

两点透视:通过两个灭点建立透视。就像我们站在一个比较庞大物体的面前,这个物体的两侧都会产生近大远小的关系。把近大远小的线延伸,它们会相较于视平线上的两个灭点。这就叫两点透视了。

△ 两点透视

第四种透视:三点透视

三点透视:通过两个灭点和延长线进行辅助。一个高于观察者的物体除了产生两点透视之外也会在其顶部产生另一个灭点,三个灭点都存在,我们称之为三点透视。

△ 三点透视

练习方法:结构素描

结构素描,又称「形体素描」。这种素描的特点是以线条为主要表现手段,不施明暗,没有光影变化,而强调突出物象的结构特征。 以理解和表达物体自身的结构本质为目的,结构素描的观察常和测量与推理结合起来,透视原理的运用自始至终贯穿在观察的过程中,而不仅仅注重于直观的方式。这种表现方法相对比较理性,可以忽视对象的光影、质感、体量和明暗等外在因素。大家可以尝试在纸上绘制主要表现结构的结构素描作为练习。结构素描对于美术基础不好的同学也可以适用。只要用尺子和圆规等工具搭配合适的自动铅即可上手。

△ 达芬奇的结构素描练习

△ 达芬奇的结构素描练习

2. 素描关系

三大面:黑白灰

有的时候设计师经常会说黑白灰关系,黑白灰关系就是我们要介绍的「三大面」。三大面就是受光程度不同产生的:光打得多就是受光面,光打得少就是侧光面,光由折射或者完全遮住就是背光面了。这么说比较容易理解:就好比是我们的地球,热带地区就是受光面,温带地区就是侧光面,北极南极就是背光面。这与光源的距离和位置有关,越朝向和接近光源越亮。立体形状在光源的照射下都有黑白灰三个面,你可以观察分析一下身边的事物。

△ 三大面

五大调:亮面、灰面、明暗交界线、反光、投影

△ 五大调:亮面、灰面、明暗交界线、反光、投影

五大调同样是分析光影问题的,通过描绘光影我们可以塑造立体感。五大调是三大面的细分,三大面五大调是我们每位设计师都需要记牢印在心里的,在绘制一些拟物造型或者专题的时候,为了塑造更逼真的感觉,我们必须检查自己的造型有没有三大面五大

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

  • 超全面!设计师必须了解的美术基础
  • 1990-2018,可能是最全的 Photoshop 简史科普

相关文章

  • 2017-08-06设计中不可忽略的产品状态之交互设计的分析
  • 2017-08-06css中position属性(absolute|relative|static|fixed)概述及应用
  • 2017-08-06CSS使用技巧总结
  • 2018-08-23轻松看懂规范!详解组件控件结构体系之加载类
  • 2018-08-23关于六一儿童节页面设计,你早就该换个思路了!
  • 2018-08-23提需求前,你要问自己这8个问题
  • 2018-08-23超10万阅读!腾讯设计师在路边摊的“暖心实践” 
  • 2017-08-06条件注释判断浏览器(ie系列)
  • 2018-08-23UI设计当中的3C要素:色彩,对比和内容
  • 2017-08-06缩短页面的渲染时间 让页面跑的更快些

文章分类

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

最近更新的内容

    • 网页中内容显示过多如何从bottom快速回到top
    • 一秒做出8000张海报设计的「鲁班智能设计平台」是怎么工作的?
    • 下拉菜单和滑动菜单设计实例
    • 关于门户网站焦点图设计的一些总结
    • 这10个关键点,让你的搜索结果页看起来足够专业
    • 用Meta 取消流量器缓存实现每次访问都刷新页面方便调试
    • 交互基础小课堂!从五个维度全面分析「下拉刷新」功能
    • 网易设计师:超全面的交互规范设计流程
    • 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
    • 总结了日式网站这4个优点后,我能把中文网站做得高大上了!

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

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