微软雅黑的设计

2016-02-19 14:10 7 1 收藏

下面这个微软雅黑的设计教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - 设计 】

一.雅黑设计理念

雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更是用途广泛。这副字可以说是科技进步的产物,是人类社会的需要,在设计上也有所突破。

首先打破传统结体方式,采用大字面设计,字怀放开,增大内白,使文字方正,布白匀称。由于字体中宫放开,使文字的适用性也随之增强,不但适合小级数文字的使用,更适合屏幕显示。

在笔型塑造上去除喇叭头。为防止文字笔划缺乏美感、没有精神,在撇、捺、点、勾的处理上使其粗细有略微的变化,使之富有弹性。

在制作上,力求精良,笔划间尽可能少搭笔,使文字清新、爽朗、易读。

追求字体的整体形式美,强调文字设计的审美性和文化性,朴实大方,典雅端庄。

下面从字体设计理论方面与实际字体应用的角度来阐述一下雅黑是用什么方法和字体设计技巧来完成和完善设计目标的。

二.按用途来设计字体

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

1.字体设计类型

字体设计可细分为平面美术字体设计和印刷活字设计。在这所要谈的字体设计是指在印刷活字范畴内的字体设计,主要研究字在缩小后的清晰度、可读性以及整体效果。在字型的处理上它不能象美术字和书法字那样,可以无视大小地尽情抒发情感,而要受到一定规矩的约束,讲究共性和个性的关系,来达到一种机械的美观。这种设计也是一门比较冷僻的视觉艺术。近年来,随着科学技术的不断发展,印刷活字设计又可分为出版印刷用字设计和屏幕显示用字设计这两个大类。

雅黑是属于屏幕显示用字,设计时更要注重研究字在低分辨率下的清晰度和可读性,尽可能做到小字号显示时的清晰易读,要达到这一目标,关键在于设定字面大小、笔型塑造和严谨合理的结构处理。

2.字面大小的含义

我们有必要先来搞清楚两个不同的概念:字面大小和字身字面比。字体设计专用方格都有两个方框,外框称字身框,内框称字面框。

图1

字面大小:就是在字面框不变的情况下,可以把字设计成大小不同的字,大字称字面大,小字称字面小。

图2

字身框和字面框之间的距离就是半个自然字距。能正确地运用好他们之间的关系,是字体设计的基础。

字身字面比:简单说就是在字身框不变的情况下,两者之间的百分比值,比值大字就大,比值小字就小,说白了就是把字放大和缩小。

图3

现在有许多用户,为了能挤排,图省事,不惜把字缩小,造成字与字距之间的关系失衡。这样使用,即使有再好的字体也排不出完美的版面来,这是非常不科学的用法,与其这样,还不如缩小字号来用显得完美。

3. 字面的可测量大小和视觉大小

字面大小又可分为可测量的字面大小和视觉上的字面大小。已故字体设计大师谢培元老师在1962年归纳总结的第二中心线理论已表明,汉字由形声组合的字都是可以测量的,形旁和声旁这两个部件的中心距离越大,字面就越大,反之,字面就越小,我们只要测量这两个部件的中心距离就可以得到相应的字面大小值。同时,这也是控制整副字大小的有效工具。

图4

雅黑在保持文字个性的基础上,尽可能的扩大形声这两个部件的中心距离来增大字面。同时,运用这种方法使得80%以上的字,大小保持一致。对于那些不能测量的字和一些易见小的字,雅黑又是如何处理呢?

从几何形角度来看,汉字形状众多,最典型的可分为四种类型:方形、圆形、三角形和菱形,从面积上看方形最大,菱形最小,要想把图形面积变得一样大小,就必须按菱形大小走,这样设计出的汉字才能在视觉上保持一致。

图5

要想做大字面的字,我们首先要考虑面积最小的菱形,那么,怎样才能把菱形字做大?很简单,只要适当调整改变菱形的形状,那么,我们就能得到比原来菱形面积大的形变图形,用这种方法来设计,就可以得到在视觉上比原先字面大的字。

图6

雅黑在设计初期就是用视觉大小这种方法来定字面大小的。

4. 字面大小和屏幕显示的关系

字面大小和屏幕显示又有什么关系呢? 为了说明问题,用少点阵图来比较说明。

图7

从上面两图比较中我们可以看出,左图字面大,占像素多,内白均匀舒适、清晰易读。右图字面小,占像素少,因此,内白不匀称、识读效果变差。

雅黑设计时考虑到这一因素,不但采用大字面设计,同时,在字距较合理的范围内调大了字身字面,多争取到了每一点宝贵的像素,为小字号使用的清晰易读奠定了基础。

5. 去掉影响屏幕显示效果的喇叭口

现用黑体字的笔锋过大,成喇叭状,我们戏称为喇叭头或喇叭口。传统手写的黑体本应没有这么大的喇叭头,只稍微有点笔锋。那么,这喇叭头又是从何而来?有两个原因,第一,可能是个别写字人员认为喇叭口稍大些精神,故意写大些,第二,在把照相字模版的字翻制成电脑字库时,做字人员在不明白黑体字应有笔型的情况下,把原本制作照相字模版时,为防止在拍照缩小的过程中笔划变得虚弱、变圆走型而装上的小辫给融进了笔划,形成现在这样的喇叭口。

图8

过大的喇叭头,不但失去了黑体字应有的品格,在屏显时,喇叭头能在笔划两头多出一块,如果两笔离得较近,头就有可能连上,使笔划交代不清,可读性变差。

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

图9

雅黑属无装饰风格的字体,少了不必要的累赘,自然避免了这类问题的出现,使文字清晰易读。

三.雅黑设计中的要点

1.雅黑是根据我在90年代初期设计的黑体系列样张改进设计的。

图10

从上述样张中可以看出,字体符合屏显字体的基本要求,字面大,无喇叭头,属无装饰风格的字体,可以作为雅黑的设计基础来改进提高。

2.雅黑设计上主要改进了字的粗细,钩的僵硬和八字点的写法,使其符合规范要求。同时,更注重线条的刻画,使其柔和挺拔富有弹性。

图11 部分笔划笔型图

3.为了使正文字的阅读效果更好,对所有的口和带框的部件加脚,也就是口下面出头,其目的是为了给眼睛以适量的刺激,来提高阅读速度,这是正文用雅黑设计的一次新尝试。

图12 口和带框的部件加脚

4. 为适合屏幕显示用,在字结构的处理上计白当黑,严格控制白在各部位所占的比例,使其舒朗匀称。

图13 黑白处理示意图

这种处理方式不但使字稳重大方,而且使字撇捺舒展、飘逸潇洒、富有姿态。

5. 采用独创的手法对笔划进行特殊处理,减少交错连笔处的黑度,使字的整体灰度更好,更清晰,更适合屏显。

图14 特殊笔划处理示意图

6.避免笔划交代不清,粘连过多

图15

这些字笔划交代不清,粘连过多,既降低了识、读的速度,又有错字嫌疑 。雅黑在设计时就尽量避免这种问题的发生。

图16

四.笔划粗细与结构、留白、重心之间的关系

这是活字设计中的一个综合问题,并非一朝一夕就能掌握的,它不但对字的个性要有深刻的理解,而且还要具有非常敏锐的观察力。做字的过程其实就是练眼的过程,眼睛练凶了,字自然越做越好。

下面通过调整统一字体的粗细,来了解笔划粗细与结构、留白、重心之间的

来源:http://www.tulaoshi.com/n/20160219/1606351.html

延伸阅读
最近在准备Windows Phone 8的设计工作,寻找资料时看到这篇文章,感觉有点像是MSDN里design guide的总结,是快速入门WP设计的绝佳文献,由于本人对WP的理解还不够深,而文章中有很多WP的专有词汇和描述,所以翻译难免有误,希望大家指正。 这段为文章引言,可以直接无视 我很羡慕Windows 8的团队,他们有自己专属的设计指南,指引人们构建出...
标签: 软件教程
微软雅黑字体很漂亮(某些朋友是这样认为的),但中文双引号不能分出左右也就是我们常说的直引号,那么如何既不放弃漂亮的微软雅黑字体,又能使用宋体的双引号,从而使其能够分辨左右呢?下面有个不错的方法与大家共同见证具体的实现过程。 简要概述 首先打开要出来的文档,调出“查找”对话框,在“查找内容”中输入[&l...
标签: PS PS基础
微软 Silverlight 是微软主刀开发的一个类似于Adobe Flash的浏览器插件,虽然没有Flash那么主流,但相信大家也都有所了解。银光的Logo可谓属于那种看一眼就忘不掉的类型( 当然我也看到过蛮多盗版的 )。并且我比较关心它的创意和制作过程,这个Logo已经很多年了,所以也想尝试着制作一下,网上找了一大圈未果,主要是想看看有没有什么简单的实现...

经验教程

860

收藏

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