• 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

本文主要包含ps参考线,PS辅助线,参考线,经验分享等相关知识,希望在学习及工作中可以帮助到您

@不知语冰?:看完这个教程,你能收获到常用的设计辅助线合集+常用设计辅助线使用方法+常用的设计比例列表。

辅助线(或称参考线),在UI设计中是经常会用到的,无论是用来规范设计还是用来提升“专业观感”都是很用的。一般的辅助线使用PS、AI自带的工具就可以了,另外使用像 guideguide 这样的插件更能事半功倍。而设计中还可能用到一些特殊的辅助线,比如黄金比例、超椭圆等等。 这里提供一个“常用设计参考线合集”的AI文件,包括了设计中常用的辅助线和辅助图形。

下载地址:http://pan.baidu.com/s/1eQ7Wn8e#list/path=%2F

贵重金属比例

贵重金属比例, 由公式推导而来,其中最有名的就是黄金比例,也就是1:1.618。这个所谓的神奇比例在艺术界中一直都有人推崇,但是可能其实只是持续了3个世纪的都市传说和”炒作“,绝大多数所谓神奇的黄金比例,都是人的主观的“既成推定”(几乎任何一张图片都能找到一个近似1.618或者1~2之间的任何比例),比如金字塔啦、蒙娜丽莎啦、海螺啦

但是黄金比例在多年来的渲染、教育下被附上了神秘、高级、专业的印象。即是黄金比例本身与审美没有什么联系,但是现在很多人的已经主观的认为黄金比例是好的,希望看到黄金比例。而且使用黄金比例能为你的设计附上“故事”,增添一个“噱头”,显得神奇、专业、高大上。

△ ?自从PS自带的剪裁工具自带黄金比例之后,黄金比例在设计界更流行了

常用设计比例列表:

黄金比 1:1.618 (5:8)
白银比 1:2.414 (5:12)
大和比 1:1.414 (5:7)
第二黄金比 1:2.618 (5:13)
青铜比 1:3.303 (3:9)
铂金比 1:1.732 (4:7)

△ ?黄金比例设计的图形

常用屏幕比例

△ ?各种屏幕的比例在设计中也是很有用的

黄金比通用格尺

这个看起来十分复杂的线框并非是用来制作黄金比例图形的,而是用来判断一个图形是否符合黄金比例的。

△ ?用黄金比通用格尺可以快速判断图形是否使用了黄金比例设计

黄金比例组合图形

能让你快速的制作出各部件尺寸符合黄金比例的图形:

常用构图框

构图框常常用在:

特殊辅助线

羊角曲线

羊角曲线是数学上的概念,最早应用在道路设计上,其曲率线性增长,所以可以用它作为“缓和曲线”连接直线与曲线,让他们曲率连续,过渡更平滑。

△ ?羊角曲线示例

自然对数曲线

自然对数曲线也就是 In(X),也就是loge(x)的函数图像,它也常常会用在设计中。

八头身比例格尺

这是用来做拟人图形的的,八头身是最常见的人体比例。

蚌线

完美矩形

正方形分割为若干个边长不等的小正方形。如果其中任何一部分小正方形都无法构成一个矩形或正方形,则称为简单完美正方形。

圆角\曲角矩形

在制作图标时,圆角矩形是最常用的,但很多时候由于圆角与直线直接相连,曲率不连续,看起来较为突兀,所以常常使用超椭圆、羊角曲线过渡矩形、膨胀矩形来替代普通的圆角矩形为图标定型。

超椭圆

这里着重讲一下超椭圆,自从iOS 7的图标从普通的圆角矩形改成超椭圆后,掀起了超椭圆热潮,近来很多手机UI、主题设计都大量使用了超椭圆。 超椭圆介于圆与矩形之间,但不像圆角矩形只是矩形与圆的简单拼接,而是一种特殊的图形, 方程:

参数方程:

超椭圆在设计界很早就有应用: 1959年时瑞典斯德哥尔摩提出了其市中心赛格尔广场圆环的设计竞赛。丹麦诗人皮亚特·海恩就提出了一个以n = 2.5,a / b = 6/5的超椭圆为基础的设计。赛格尔广场在1967年完成,而皮亚特·海恩继续在其他的艺术品中使用超椭圆,包括床、碟子、桌子等。 并且在字体设计、工业设计中都有广泛的应用。

超椭圆的制作

超椭圆矩形的外形有方程中的参数n决定(a、b不变的情况下),本文提供的AI文件中是n=4的超椭圆。那要任何制作n=自己想要值的超椭圆呢?

1. 你可以使用数学软件比如Mathlab、Graph等,这里推荐使用Graph,因为它更加简单易用,并且自带导出AI所支持的SVG格式矢量格式图片。

2. 使用在线工具?Super-ellipse Calculator & Plotter,它也可以生成SVG格式的图片。

误区

其实电脑设计中辅助线大部分时间只是用来对齐、居中和约束比例。而看起来很专业的网格、内切圆大多只是用来装样子的,很多都是设计完成后加上去的。这些其实是过去手工设计时代遗留下来的产物,设计师也没有必要发布线框稿,如果一个设计作品要向最终观众/用户展示线框稿,那只能是在装高大上。

「如何提高平面设计的功力」

  1. 《专业科班的方法!设计师在工作中通过哪些方式获取灵感?》
  2. 《专业科班的方法!设计一个LOGO 的常规思路和流程是怎样的?》
  3. 《专业训练方法!如何设计

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

  • 新手科普文!每个设计师都该懂的参考线完全手册

相关文章

  • 2017-08-06.html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别
  • 2017-08-06整洁漂亮的网页设计的4项原则
  • 2018-08-23沪江UED团队出品!用户体验设计师进阶实战指南(下)
  • 2018-08-23视觉设计师如何做竞品分析?来看这份超全面的指南!
  • 2017-08-06网页设计时我们应该注意的一些问题
  • 2017-08-0630款免费高质量的英文丝带字体
  • 2017-08-06网页设计的平面构成排版能力的介绍
  • 2017-08-06HTML中css和js链接中的版本号(刷新缓存)
  • 2017-08-06css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器
  • 2017-08-06浏览器缓存相关http头尽量减少http的请求次数

文章分类

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

最近更新的内容

    • 2017年流行的这些字体排版趋势,你都知道嘛?
    • 用一个实战案例,教你学会复杂界面的布局设计
    • DIV以及图片水平垂直居中兼容多种浏览器
    • VR、AR 的一百种可能性,专访Google Daydream用研负责人张晶华
    • 提高效率!如何避免团队协作中的无效沟通?
    • 我们拿到了InVision Studio 的内测资格,设计师们关心的都在这里
    • 高手帮你学规范!iOS版和安卓的规范解析之底部标签导航
    • 关于像素艺术中的等距图形,这份总结超全面!
    • 给设计师的2018年阅读推荐书单
    • iframe在IE6下出现横向滚动条的解决方案

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

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