• 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

本文主要包含字体设计,设计经验分享等相关知识,希望在学习及工作中可以帮助到您

@刘柏坤KUN?:假期大家忙着游山玩水去远方,或是因为熟悉的地方没有风景。道理挪到字体设计中来,设计一款艺术字如果和平日常见的字体一样,那也就不觉得有什么特别,所以说想要让字体有足够的魅力与吸引力有必要用点「小手段」。

处理字体的「手段」有很多种,今天就和大家聊聊字体设计的断舍离,听名字挺诗意其实断、舍、离是字体设计中非常基础常用的三种不同的处理形式,三者和字体笔画有密切的联系,下面就具体看看这断舍离到底该怎么用。(以下部分案例图片引自网络)

一. 断

两个字解释就是「断笔」,这里讲的断笔不是字体本身笔画与笔画之间自然的间断,而是刻意将本来相互连接的笔画进行裁切,完整封闭的笔画有了新的间断。这样做可以很大程度上产生新的空间秩序并打破原有字体的阅读节奏,结构空间会变得更加透气,断笔也会产生一定的层叠关系,普通的文字也就多了些层次和变化。

方法技巧

断笔可不是随随便便的裁切,一般是在两个相交的笔画处做断笔的处理。这里我们可以根据笔画的走向分为横断、竖断、斜断,叫什么无关紧要也不需要记牢,简单上个图大家区分一下便可。

通过此图也可看出横断的手法是最容易出效果的,也是平时使用最为频繁的。要注意这三种断法不是排他使用的,可以相互配合使用。

断面一般是有两种处理形式,一种是比较直接的平行处理,再一种是异型处理方式(如上图)。

其中图中的异形处理方法同上,只是断面做了斜切,和相邻的竖笔有一定的角度,当然如果你的笔画起笔收笔有弧度或是其形式,断面也可以相应的进行统一。

不论字体笔画是面构成还是线构成,都有可以进行断笔的处理,沉闷简单的字也可以变得透气活泼。

这组字的笔画比较简单,如果没有进行断笔处理的话就会显得比较平庸没特点。主要还是横笔做裁切,断面和竖笔的角度保持平行,断点的位置其实也是有规律的,都是在每个字的偏左的位置。

笔画即便是不规则的也可以做断笔处理。上图中的文字结构笔画都是比较轻松的,整体做了一个对角的断笔处理,断口大小、断面角度都有所不同,更符合整组字轻松的气氛。

需要注意什么?

试想一下如果把迷宫中的每个封闭的墙面都给通开,那么也就失去了迷宫的可玩性。在字体设计中要切记断笔勿贪多,如果把每个笔画都断开那么整个字定会七零八乱,要知道断笔起到的仅仅是一定的装饰作用。

二. 舍

舍即是舍弃,再简单点说就是给字体做减法。汉字本身就是很复杂的图形,具有很强的辨识性,即使是舍弃其中的一两笔甚至更多也不会影响字体的识别性,舍的巧妙反而会让字体更具个性。

前面讲的「断」只是给字体动动小手术,「舍」就是在动大手术,它能够释放更多的留白空间,让字体更有想象空间和趣味性,即便是普通的字库字体,尝试舍弃其中一两笔也会发现效果果然不一般。

方法技巧

加法容易减法难,舍弃笔画是要有选择性的,有这样一个小规律:舍弃的笔画尽量不要选择影响字体外部轮廓的笔画,下面这个图会告诉你为什么。

同样的一组字,一个是用正圆遮挡内部笔画,一个是遮挡外部笔画留下同样面积的正圆部分,你会发现虽然两组字都能够被识别出来,但第二组的辨识要比第一组吃力许多,所以「舍内不舍外」显然要划算的多,当然汉字结构千变万化,一些比较常见常用汉字即使内外都舍弃一部分笔画也同样可以辨别,所以大家还是要依据不同的字形结构有选择性的进行取舍。

看个小例子,上面这组字有选择性的去掉横笔,但也有选择性的保留一部分横笔,仔细观察你就会发现其中的规律,舍弃的横笔大都是局内并不影响字体外部轮廓的,这样就能够在不影响识别性的前提下最大限度的删除“多余”横笔。

我们仔观察一组字的时候,眼睛就会不自觉的跟着汉字本身的书写笔顺进行阅读,所以在进行笔画的删减时还要注意:尽量不要删除连续的多个笔画,即便是内部笔画也是如此,保持字体笔画的连贯性也能够很大程度上保证字体的识别度。

宋体字本身具有很强的书香气如果舍弃部分笔画会多了份「仙气」,这组字就是非常典型的宋体字的舍弃笔画的处理形式,去掉横笔部分但保留字脚也是为了保证外部轮廓的完整性。

上面两组字只是简单的舍弃一两笔,配合其他的一些变化,也能够起到画龙点睛的作用。所以说舍绝不以「多」取胜,而是比「巧」。

三. 离

「离」像是断和舍的中和,其目的是产生空间距离,再直白一点就是笔画的拆分重构。都说距离产生美,这一点果然没错!重点是笔画间有了距离后字体会更具「图形化」,似乎是除了字义本身更能表达难以言表的情感。

方法技巧

首先是距离,其实只要能够保证画面内字体的完整性距离不是问题,最怕的是距离有了但联系没了,这样就像一盘散沙不能成型。

这组字距离是不小,几乎可拆卸的部分都增加了间距,好在有线条的引导让每个部分能够紧密相连,我们在做字体设计的时候其实少有这么多笔画同时进行拆分,多是以局部的拆分为主。

和上组一样的处理形式,如果拆分力度大、距离远就需要一定的(线段)辅助,这样就很好的保证拆分部分的独立性,字体的整体性也不会受到丝毫破坏。

其次比较重要的一点就是局部笔画的选取技巧。一般是选择一些撇、捺、点之类的笔画做分离,相对横竖是比较典型的笔画;拆分后其中单字的稳定性也要适当的注意。

还是看个小例子,观察上图其实拆分的笔画就是「逝」字的走之旁,距离并不太远但呈现渐行渐远的趋势,也是契合这组字的本意。

面对不同的字形结构和风格需求,我们总会有不同的应对方案,断、舍、离不是一种固定的模式,三者间是可以相互协调应用的,除了灵活应用更要结合自己的理解和造字的习惯,多看多练同样少不了。

今天所讲的这三种字体的处理形式虽说都很常见,但有些小伙伴在实际操作中总会有些不够肯定,希望这篇小分享能够帮你梳理的更清晰,做起字来更轻松!

「刘柏坤的字体设计课堂」

  • 《字体丨聊聊中文字体的性格和运用方法》
  • 《字体丨简单两招,快速提升字体设计的质感》
  • 《超实用!简单七招教你打造超有格调的字体设计》
  • 《明明想法和思路都对了,为什么最后效果却不尽人意呢?》


【优设网 原创文章 投稿邮箱:yuan@.com】

================明星栏目推荐================

优优教程网: UiiiUiii.com是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费

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

  • 这篇字体设计教程,可能让你少赔几万
  • 饿了么高级设计师:界面视觉设计 5 要素之字体篇
  • 想营造出80年代的复古风格?下面的建议不要错过
  • 想让文字更出彩?试试通过切割文本来创造视觉吸引力
  • 为了让你用上正版字体,他辞职花了 2 年造字
  • 收藏这个神器,帮你一键生成高大上的艺术字体!
  • 超全面!八种格调超高的PPT文字设计法!
  • 我们观察到,2018年网页文本字体的设计趋势有这7种
  • 网页中这10种字体的运用方式,不会让人觉得Low
  • 这8个字体设计和排版技巧,是2018年的设计趋势

相关文章

  • 2018-08-23给复仇者联盟设计界面是什么体验?来看这篇设计师专访!
  • 2018-08-23作为8年Dribbble粉,和设计师聊聊未来的视觉趋势
  • 2018-08-23提高效率!如何避免团队协作中的无效沟通?
  • 2017-08-06最新18个绿色风格网页设计作品欣赏收集
  • 2018-08-23在可用性测试中,如何做好任务评估模型与计量方式?
  • 2017-08-06修改网页中的FlashSWF文件的方法
  • 2018-08-23AR KIT有哪些玩法?来看这些超好玩的案例!
  • 2018-08-23今年都在学!聊聊有关服务设计的10种工具(方法+案例)
  • 2018-08-23甲方骗我喝了杯奶茶,喝完告诉我这就是设计费?
  • 2018-08-23高手用10分钟,就能让你搭配出好看的颜色

文章分类

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

最近更新的内容

    • 通过这篇文章,帮你彻底搞懂微交互
    • 如何适配iPhone X?来看滴滴出行的实战案例复盘!
    • 设计师没原创灵感?试试这个方法!
    • 条件注释判断浏览器(ie系列)
    • 设计师初学指南(二):审美的三个境界
    • 个性化创意鲜明的网站设计实例(30个)
    • 渐变质感技法入门指南:对比用色
    • 资讯类产品阅读列表的交互设计思考与经验分享
    • 实战案例!滴滴试驾商业B端App 项目设计经验总结
    • 接下来的5月,流行这3种网页设计趋势

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

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