5.1 文字的意义 5.2 字体与版式设计 5.3 超文本与超媒体 5.4 计算机图形学简介 5.5 数字色彩与设计 5.6 数字绘画 5.7 Photoshop与数字图像处理 5.8 插画与图表设计 本课学习重点 讨论与实践 练习与思考 第5课 文本、图形与图像 第5课 91 5.1 文字的意义 在人类发展史上，文本和符号的交流方式很晚才出现。大约6000年以前，在地中海肥沃的新 月形土地周边，包括美索不达米亚、埃及、苏美尔和巴比伦等地出现了最早的楔形文字。只有统治 阶级成员和僧侣才被允许阅读和书写这些图形化的符号和楔形文字。公元前3000年左右，居住于 古代美索不达米亚的闪米特人把它们刻写在泥板上（图5-1，左上），此后埃及人进一步发展了该象 形文字（图5-1，左下）。公元前1775年，希腊人开始使用音标字母文字。公元前725年，中美洲 的玛雅神庙出现了石灰镶泥板的象形符号（图5-1，右上）。公元前1400年，中国商朝出现了刻在 龟甲上和兽骨上的象形文字（图5-1，右下）。此外还有铸造在青铜器皿上的金文和镌刻在天然山石 上的石刻文字。中国殷周时期以青铜器（钟、鼎、盘、盂等）为载体的青铜文字（图5-2，左）内 容包括纪念先祖、记述战功、册命赏赐、誓盟订约。从战国开始，绢帛与竹简、木简一道成为中国 长期的书写文籍的主要材料（图5-2，右）。此外，石碑、羊皮、小牛皮和树皮等也曾经作为文字记 录的载体。这些早期文字通常包含与礼仪、祭祀、管理人民、政治和税收有关的信息。 图5-1 楔形文字、埃及象形文字、玛雅文字和甲骨文 约公元前2500年，古埃及人就发明了莎草纸。埃及是世界最古老的文明国家之一。古埃及人 在尼罗河三角洲长期栽培一种叫作纸莎草的禾草水生植物。人们将这种植物茎杆中心的髓茎压制成 纸，制成卷轴式的书籍或文件，如《死者书》（图5-3，左上），内容包括丧礼的戏曲、诗歌、祷文、 咒语、神话等，主要是期盼死者获得死后的幸福生活。13—15世纪，欧洲国家大多仍然以羊皮或 小牛皮作为文字书写的载体（图5-3，左下）。当时，修道院中的修道士要抄写一部完整的《圣经》 （图5-3，右上），需要宰杀200~300只羊或小牛。早在公元7世纪的唐代，中国人就发明了雕版印刷。 公元1045年，中国宋代的布衣毕升发明了胶泥活字印刷术。1457年，德国工匠古腾堡发明的金属 活字排版技术和最早的印刷机械吹响了印刷时代的号角（图5-3，右下）。 数字媒体技术概论——创新实践十二课 92 公元1400年前后，欧洲出现了木板印刷品，并有了最早的木刻插画。随着古腾堡印刷机的普及， 这些早期带有彩色插图的《圣经》开始流传。这些图书不但设计极为精致，画法异常细腻，而且色 彩也艳丽动人，具有很高的艺术性（图5-4）。与采用人脑记忆的方法不同，随着文字与图书的出现， 这些信息就不会随着王朝更替而湮灭。历史上阅读、书写和封建王朝的统治总是密不可分的。除非 属于某一特权阶层或者被统治者认可，否则掌握阅读技能将会被视为对社会规则的公然挑衅。早在 战国时期，仓颉造字的故事就开始流传。《淮南子·本经》中记载：“昔者仓颉作书，而天雨粟，鬼夜哭。” 这个神话故事生动地说明了文字的发明对于人类文明进步的重要意义。 图5-4 早期带有彩色插图的《圣经》（木版印刷） 图5-2 殷周时期的青铜文字和战国时期的竹简文字 图5-3 埃及《死者书》、羊皮书、手抄《圣经》和古腾堡印刷机 文字的出现也促进了人的个性、才能、智慧的发展，使个人从集体中脱颖而出。麦克卢汉认 为，由于使用的主要媒体不同，人类社会经历了“部落化—脱部落化—再度部落化”这样3个阶段， 而文字的普及，特别是文字印刷物（如图书）的出现，则是导致个人超越他所处的部落或群体、环 境，发展独特个性和人格的主要原因，文字促进了知识的代际传播。伴随着读写能力的普及，印刷 业开始在社会变革和社会生活中扮演越来越重要的角色。到19世纪末，印刷业已经高度繁荣，图书、 报纸和刊物成为人们每天获得信息、知识与娱乐的基本渠道之一。今天，数字媒体技术已经借助互 联网将图文信息传遍了世界的每一个角落。但今天文本阅读仍然是人们获得知识和力量的源泉。阅 读和写作在现代成为人们生存与发展必要的素质。随着网络媒体的成熟，人们获取和利用信息的方 式更加丰富。智能手机提供了更加生动的用户体验，也使得数字图文设计成为新的设计领域。界面 设计、交互设计与多模态（多感官）体验设计共同推动了视觉传达设计的创新与发展。 5.2 字体与版式设计 5.2.1 字体设计基础 文字，无论是东方的象形文字还是西方的拉丁字母，从外观上看都是有规律的视觉图形符号， 同时也是信息的载体，充当人们交流的媒介。所谓字体（typeface）或字型（font）都是排版与书法 领域的专有名词。传统上“字型”是指一个具有同样样式和尺寸的字集，如方正粗宋体、汉仪粗黑体、 微软雅黑体等；字体则是一个或多个字型所属的类别，如上面的宋体、黑体。但在屏幕阅读时代二 者的区分已经不大，通常人们用字体指称文字的外观与结构。 汉字字体博大精深，从古到今大约可分为6类：小篆（秦）、隶书（汉）、楷书（魏晋）、行书、 草书、宋体。西方将字体分为Serif（衬线体）和 Sans Serif（无衬线体）两类。Serif字体的开始和 结束笔画有额外的装饰，而且笔画的粗细有所不同，常见字体有 Times New Roman、Georgia。Sans Serif是无衬线字体，各个笔画粗细一致，无其他装饰，常见字体有 Verdana、Arial、微软雅黑。国 内常见的衬线体汉字是宋体。宋体起源于宋代，发展完善于明代，后传至日本称为“明朝体”。当 时雕版印刷术的应用已经十分广泛，由于用来制造活字的木板中纹路大多为水平方向，在刻字时就 自然形成了横笔画细、竖笔画粗的特点。由于当时印刷技术还不是很成熟，容易造成字体磨损。为 了防止字变得模糊不清，就在横笔画的两端加粗并增加三角形装饰。使用宋体印刷的文字因其有粗 有细的特点，使得阅读起来很连贯。典型的宋体，如方正大标宋体、方正风雅宋体棱角分明，结构 严谨，整齐均匀。宋体笔画横平竖直，有极强的笔画规律性——“横细竖粗撇如刀，点如水滴捺如 扫。钩似鹅头横似管，横为小山弯带角。”能够使人在阅读时感觉舒适醒目，所以被广泛用于报纸、 刊物和图书（图5-5）。 5.2.2 计算机字库设计 除了宋体外，国内常见的印刷字体还包括楷体、仿宋体和黑体。常见的无衬线体汉字是黑体。 黑体是现代字体，没有宋体的横细竖粗的笔画变化，而是横竖粗细一致、方头方尾的字，能够很好 地适应手机等电子设备，顺应了互联网时代的阅读要求。在信息化发展的今天，各种专业的计算机 字库提供了丰富多彩的创意字体，如微软字库、方正字库（图5-6）、汉仪字库、文鼎字库、汉鼎字库、 长城字库、金梅字库等。这些计算机字库成为设计师普遍参考的字体设计模板。目前简体中文字符 集的中国国家标准（GB 2312）包含6763个汉字，另外还有200多个符号。 图5-6 方正字库提供的几种商用设计字体（字加App） 字体设计可以使用FontForge、FontLab Studio和Typetool等字体设计软件，也可以使用Adobe Illustrator、Photoshop、InDesign、C4D、3ds max、CorelDRAW等数字绘图软件。虽然不同的软 件操作方法不一样，但功能大同小异。设计师需要导入前期手绘或计算机设计的字体，通过字体 软件调整字型，然后生成TrueType（简称TT）格式的字体文件，就成为个性化的计算机字库。 TrueType是由美国苹果公司和微软公司联合提出的一种数字化字形描述技术。该技术采用几何学中 的二次B样条曲线及直线描述字体的外形轮廓，抛物线可由二次B样条曲线精确表示，更为复杂 的字体外形可用二次B样条曲线的数学特性以数条相接的二次B样条曲线及直线表示。TrueType 字体文件（内含字体描述信息、指令集、各种标记表格等）通用于Mac和PC平台。 计算机字库设计和创意字体设计不同。创意字体是字体设计的艺术化呈现，通常只设计几个 字用作商标、标志、企业名称等；而字库是设计几千个字后再编码，是文字字体集合库，供使用字 体时调用。但二者所用的软件工具、设计方法有很多相似的地方。创意字体设计首先应该从字义出 发，有明确的目的性和功能性。形义结合与易于辨识是字体设计需要遵循的两大原则。设计之初， 设计者首先便要明白因何设计、为何设计，要在脑海中想象出与字义相关的抽象画面，或联想到与 之相关的设计关键词，才能执行操作。同时，设计字体时同样要把握好可读性与艺术审美的关系。 过于注重艺术造型，从而使得字体变得抽象、无法辨别，就算表现得再美，也失去了字体设计的 意义。 图5-5 方正大标宋体、粗宋体和小标宋体广泛用于报纸、刊物和图书 5.2.3 创意字体设计 创意字体设计要注重可识别性原则、独特性原则、艺术性原则、形式与内容统一性原则。可识 别性原则要求字体设计在组织结构上有严格的规范与标准。独特性原则强调字体设计的原创性，并 能够传达独特的内涵。Adobe设计师创意社区Behance为全球设计师提供了设计作品的交流平台， 其中的字体设计栏目展示了各地设计师独具匠心的创意字体设计作品（图5-7，图5-8）。创意字体 无论笔画结构怎么变，最终目的都是让字体变得更美。字体的艺术性是形态、组织、节奏、韵律和 色彩等因素的综合体现。把理性思考得来的内容抽象化、图形化、具象化和可视化，并且被用户广 泛地接受，是设计师体现设计价值之处。学习字体设计需要掌握多种知识，需要对字体的图形、结 构、色彩等多方面进行了解。字体设计基础知识包括网格和辅助线、字体结构剖析、字体设计技巧、 字体设计色彩等内容。 图5-7 Adobe设计师创意社区Behance字体设计栏目 图5-8 设计师创意社区Behance展示的部分创意字体 5.2.4 版式设计 从中世纪早期的手抄本中的彩页到精致的现代杂志和商品目录，再到基于电子屏幕的媒体设计 布局，各个时期的设计者都会把版面设计作为一个考虑因素。版式设计是指设计人员根据设计主题 和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要， 对文字、图片（图形）及色彩等视觉传达信息要素进行有组织、有目的的组合排列的设计行为与过程。 版式设计的应用范围涉及报纸、刊物、图书（画册）、产品样本、挂历、展架、海报、易拉宝、招贴画、 唱片封套等平面设计各个领域。自个人计算机问世以来，页面布局技术已扩展到数字媒体，如网页、 手机页面、电子书、PDF文档等。除了静态页面外，数字媒体内容还包括动画、视频等动态设计和 页面交互性设计。交互式媒体的页面布局与界面设计和用户体验设计等内容相互重叠，因此也被称 为图形用户界面设计（图5-9）。 图5-9 版式设计是交互式媒体页面布局的重要内容之一 版式设计决定文本和图像的整体布局及媒介大小或形状。这一级别的设计需要智慧、感知力和 创造力，设计者不仅要对文化、美学和心理学有较深的了解，还要能根据文档作者和编辑的意图传 达并强调特定的主题。版式设计的基本原则包括简洁性、艺术性、整体性、趣味性与独创性。简洁 性原则是指版面信息需要合理排列，体现内容的简练与清晰。同字体设计一样，版式设计也要把握 好可读性与艺术审美的关系。过于注重艺术造型从而使得版面信息无法辨别，就算表现得再美，也 失去了版式设计的意义。版式设计的艺术性原则就是要符合视觉审美的基本规律，版式具备点、线、 面的构成要素（图5-10），在图形与字体的排列过程中要有一定的对比关系，如大小对比、疏密对比、 明暗对比、虚实对比、正反对比、曲直对比等。 版式设计特别强调整体性原则。这主要体现3个方面：一是视觉上的整体性，主体形象突出并 成为视觉中心，以表达主体思想；二是分类编排上的整体性，对文本信息进行分类编排，监理信息 登记分区和导向，使信息传达清晰连贯；三是设计元素处理上的整体性，将设计元素抽象化。版式 设计本身并不是目的，而是更好地传播客户信息的手段。设计师往往自我陶醉于个人风格以及与主 题不相符的字体和图形中，这是造成设计平庸甚至失败的主要原因。一个成功的版式设计必须明确 客户的目的，并深入了解、观察、研究与设计有关的方方面面。版式离不开内容，更要体现内容的 主题思想，引导读者的注意力与理解力。图表、图标、插画与照片的穿插不仅有助于丰富版面，而 且也提升了读者的阅读兴趣与视觉体验（图5-11）。只有做到主题鲜明突出、版式生动活泼、色彩 搭配合理、信息一目了然，才能达到版式设计的最终目的。 图5-10 版式构成具备点、线、面的构成要素 图5-11 图表、图标、插画与照片的穿插有助于丰富版面和提升体验 5.3 超文本与超媒体 超文本（hypertext）是用超链接（hyperlink）的方法将各种不同空间的文字信息组织在一起的 网状文本，也就是由若干信息节点和表示信息节点之间相关性的链构成的一个具有一定逻辑结构和 语义关系的网状结构（图5-12，左）。超文本是一种按信息之间关系非线性地存储、组织、管理和 浏览信息的计算机技术，可以用来显示文本及与文本相关的内容。现地超文本普遍以网页或电子 文档方式存在，其中的文字包含可以转到其他位置或者文档的链接（下画线），允许读者从当前阅 读位置直接切换到超文本链接所指向的位置。我们日常浏览的手机或网页上的链接都属于超文本。 每一个网页则是由超文本标记语言（Hypertext Markup Language, HTML）组成的（图5-12，右）。 HTML是一种描述性的页面标记语言，该语言用来定义HTML文档中的信息或功能，它控制着互 联网页面中的文本、图像和其他信息在浏览器中的显示方式。任何一个网页的基础结构和基本组成 部分都是HTML。没有HTML，就没有现在人们所见到的丰富多彩的互联网页面和移动媒体的应用 页面。 图5-12 超链接、超文本与超文本标记语言（HTML） 超媒体（hypermedia）是一种采用网状结构对块状多媒体信息（包括文本、图像、声音、视频 等）进行组织和管理的技术。超媒体在本质上和超文本是一样的，只不过超文本技术在诞生的初期 管理的对象是纯文本。随着多媒体技术的兴起和发展，超链接技术的管理对象从纯文本扩展到多媒 体，为强调管理对象的变化就产生了超媒体这个词。 超媒体的另一个含义就是隐喻了整合资源的新型商业模式，是新媒体意识与新商业思维的有机 聚合。随着以4G网络为代表的宽带技术的普及，传媒业也突破了传统媒体的单一形态，朝着超媒 体方向发展，即实现报纸、广播、电视、杂志、音像、电影、出版、网络、电信、卫星通信等媒体 形式深度融合、系统开发、信息跨媒共享、资源跨行配置、文化跨域交流，并且凸显以媒体为核心 的关联产业涟漪式发展。因此，超媒体不仅仅是一个技术词汇，它是新媒体与新商业思维的交融， 是网络技术与全球化经济的有机聚合。事实上，从个人最常用的微信、微博，到像欧特克公司专门 为设计师打造的交互设计平台，从比尔·盖茨的“信息高速公路”到谷歌地球的三维城市，都是不 同层面、不同量级的超媒体产品。我们日常应用的笔记本计算机、平板计算机、智能手机以及VR、 AR等拓展现实的产品都属于超媒体（图5-13）。超媒体可以提供比超文本链接层次更高的响应，实 现更为便利、直观的人机双向交流。 图5-13 笔记本计算机、平板计算机和智能手机都属于超媒体 超文本的概念提出距今已有近80年的历史。早在1945年，被誉为“信息时代的教父”的科学 家万尼瓦尔·布什首次提出了被称为“存储扩充器”的概念，这是具有开创性的信息组织方法并形 成了超文本的基础。1945年7月，布什在美国《大西洋月刊》上发表了一篇著名的论文——《诚如 所思》（As We May Think）。布什设想了一种能够存储大量信息，并能在相关信息之间建立联系的机 器——“麦麦克斯系统”（Memex）。该系统可以使任何一条信息直接自动地选择另一条信息，这就 是超文本的最初概念。布什认为，文本间的交叉引用类似于人类思维的方式——也就是说，通过联 想而不是直线顺序。为了制造这些“联想”链接，单个的因素会被标上标签，从而可以得到打开系 统的动态链接。 在布什发表的另一篇论文中，他又提出这种机器（媒体）能够把视频和声音集成在一起，而这 也恰恰是Web的核心思想。设计师的任务是创建内容，决定链接，用非线性组织信息的方式做出简 易而明确的引导。虽然当时由于技术条件所限，布什设想的这些机器最终没能制造出来，但是他的 思想在此后的50多年中产生了巨大影响。1963年，信息技术专家泰德·纳尔逊（Ted Nelson）创 造了术语“超文本”。1981年，纳尔逊在他的著作中使用术语“超文本”描述了这一想法：创建一 个全球化的大文档，文档的各个部分分布在不同的服务器中。通过激活称为链接的超文本项目就可 以跳转到引用的论文。由此，超文本与超媒体的概念成为互联网发展的理论基础之一。 5.4 计算机图形学简介 计算机图形学（Computer Graphics, CG）是研究怎样用计算机生成、处理和显示图形的一门学科， 是一种使用数学算法将二维或三维图形转化为计算机显示器呈现的点阵形式的科学。简单地说，计 算机图形学就是研究如何在计算机中表示图形以及如何利用计算机进行图形计算、处理和显示相关 的原理与算法。国际标准化组织对这个术语的定义为：计算机图形学是研究通过计算机将数据转换 为图形，并在专门显示设备上显示的原理、方法和技术的学科。目前，计算机图形学已经成为计算 机科学中最为活跃的学科分支之一，并在众多领域，如汽车和飞机的设计与制造、机械产品的计算 机辅助设计和制造、电影特技和CG动画、商业、广告、娱乐、政府部门、军事、医学、工程、艺术、 教育和培训等，得到广泛应用，重点应用领域包括图形视频处理、数字娱乐、工业建模、影视制作、 动画设计、生物信息、医药医疗等（图5-14）。 图5-14 计算机图形学在众多领域广泛应用 5.4.1 位图与矢量图 计算机图形学关注用图形和图像表示和表现现实世界。它所研究的图形是从客观世界物体中抽 象出来的带有颜色及形状信息的图形和图像。矢量图形（vector graphic）指计算机绘制的画面或由 直线或曲线组成的图形，如直线、圆、圆弧、任意曲线和图表等。矢量图记录生成图的算法和图上 的某些特征点，并根据图形的几何属性（如方向、长度、曲率）描述图形，因此很容易对矢量图进 行移动、缩放、旋转和扭曲等。矢量图的变形和属性的改变（如线条变宽、变细或颜色改变）也很 容易做到。矢量图主要用于表示线框、图案和表现类的插图、绘画、技术型的图画、工程制图和美 术字等。 常用的矢量图文件格式有EPS、人工智能、CDR等。矢量图只保存算法和特征点，相对于位图 的大数据量来说，它占用的存储空间也比较小。此外，矢量图为无限分辨率，因此无论放大或缩小， 通常不会变形失真（图5-15）。然而，当矢量图变得很复杂时，计算机就要花费很长的时间执行绘 图指令。此外，一幅复杂的彩色照片很难用数学方法描述。矢量图和位图之间可以用软件进行转换： 一般由矢量图转换成位图采用光栅化（rasterizing）技术，而由位图转换成矢量图可以用跟踪（tracing） 或描图等技术，通常Adobe Photoshop、Adobe Illustrator、CorelDRAW等软件均可以实现矢量图和 位图之间的相互转换。人工智能技术可以通过照片的扫描、定位与矢量化快速实现人脸的三维建模 以及虚拟人建模或者三维景观的重现，这些技术的核心也是计算机对图像的识别以及仿真重构的过 程，这个过程同样属于位图转换成矢量图的过程。 位图（bitmap）也称为点阵图或栅格图像。它是由计算机屏幕上网格状的点组成的，这些点称 为像素（pixel）。位图就是由像素的排列实现其显示效果的，每个像素有自己的颜色信息，在对位 图进行编辑操作的时候，可操作的对象是每个像素，可以改变位图的色相、饱和度、明度，从而改