恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
Color Fonts:初学者指南
0.0°
2017-06-05 好文转载 经验/观点 原作者: 南隼互动 举报 1244 1 2 0

刚接触这个概念你可能会问,什么才算是一个含有彩色元素的字体呢?这是一个不断被提及和应用并开始获得不小的影响力的术语,尽管在大型的网站建设项目或其他类型的设计项目中,它的使用还处于起步阶段。

像Adobe公司推出的Typekit这样的字体供应商已经开始发布一些支持浏览器引用的Color fonts选项,所以,基于这种形势,这个流行趋势日后会被更广泛的使用,有些设计师甚至称Color fonts是“网页设计的下一件大事”。

今天,在这里,我们将看看这个趋势,让你最终想清楚并决定这个概念究竟将会有多大的“用武之地”。

1.什么是Color fonts?

Image title


Color fonts,其最基础的概念就同他的名称一样——包含多种颜色,阴影或渐变,纹理或透明度的字体。这些时髦的设计选项不仅仅是添加了文字的颜色,它们是包含所有细节的特定字体。

Color fonts可以是字体文件中的矢量形状,位图图像或两者都具备,这可以使这些字体比标准的字体包更大。Color fonts的常见示例包括表情符号或图标的字母。这种风格的单色字体通常被称为chromatic fonts,因为它们只包含一个色调或灰度。

Color fonts目前的最大问题是它还没有真正的标准格式。并且所有这些文件格式都可以很容易捕获——矢量和SVG图像可以轻松扩展,但位图版本可能在大小上会受到一些限制。

实际上有五种格式要处理:

· SBIX(Apple):在Mac和iOS系统上具有原生支持的位图版本;

· CBDT(Google):Android系统上的本地支持的位图版本;

· COLOR(Microsoft):在Windows 8.1+系统上具有本机支持的矢量版本;

· SVG(W3C):矢量和位图版本;

· OpenType SVG(Adobe / Mozilla):将SVG形状放在OpenType字体中的向量和位图版本。

另一方面,主要的这些“玩家们”正在开始为接下来的走向制订相关的使用指南。Mozilla(Web浏览器Firefox的骨干)和Adobe已经达成共识,它们以OpenType SVG是作为这种趋势的首选格式。当他们作出决定时,其他人仍然在缓和。

如果你想要了解这些字体的工作原理以及所有文件格式的规格,Fontself可以为你提供一个很好的基础知识。

2.你将如何使用Color Fonts?

Image title


当你第一次看到颜色字体时,会发生两种想法:

· 哇,太恶心了!

· 酷!我很清楚我应该如何使用!

无论你在哪个阵营里,都有非常适合彩色字体的应用程序。但是你需要在理性之中使用它们(Color fonts是所有字体样式中需要被尽可能最少使用的一种样式)。

你可以试着这样使用它:

· 将它作为可以短暂引起用户注意力的设计技巧;

· 作为图标或logo中的样式元素;

· 作为接下来是一长串文本的标题;

· 对于网页设计中的其他以最简风格的设计,可以将它用作大胆的标题而起到突出作用;

· 可以使用它将重点集中在大范围文字中的某个特定单词或字母中;

· 当设计中的其余部分很简单;

· 当排版将成为你的主要艺术元素时;

· 当项目需要一些有趣和不寻常的东西来吸引用户的注意的时候。

3.在什么情况下不要使用Color Fonts?

Image title


比起你可能已经计数的案例,这里有更多不要使用Color Fonts的情况。你不会想将网站设计恢复到20世纪90年代的一些闪烁和具有视觉压倒性的疯狂色彩样式。

当你在一下情况出现时,不要使用color font:

· 你的设计需要使用图像或文字将置于图像之上;

· 你所使用的背景已经很复杂了;

· 设计中将使用大量的文本内容;

· 设计中已经包含了许多其他的设计技术,如动画或动态效果,颜色通常足以产生视觉冲击;

· 与其他新奇或特殊字体一起使用。

4.不断发展的趋势

Image title


Color Fonts趋势开始从一些主要的“设计玩家”的排版中获益并引起关注。Adobe和Mozilla采用的OpenType SVG格式可能是帮助这一趋势真正迅速发展的诱因。Adobe甚至最近向Photoshop添加了颜色字体(你可能已经注意到PS的字体选项中有一些emoji突变元素了)。

对于OpenType SVG,Adobe的官方说明如下:

OpenType-SVG是一种字体格式,其中所有的OpenType字体或只是其一些字形表示为SVG(可缩放矢量图形)的图形。这允许在单个字形中显示多种颜色和渐变。由于这些功能,我们还将OpenType-SVG字体称为“Color Fonts”。

OpenType-SVG字体允许以这些图形质量显示文本,同时仍允许文本被编辑,索引或搜索。它们还可以包含允许字形替换或替代字形样式的OpenType功能。

像Trajan Color Concept和EmojiOne Color这样的Color Fonts会像程序字体菜单中的典型字体一样出现,但是由于许多程序尚未完全支持颜色组件,因此可能无法显示其全部潜力。如果你的软件程序不支持字体中的SVG图稿,则字形将恢复为纯黑色样式。颜色仍然可以应用于这种后备样式,因为它将像典型的OpenType字体一样工作。

此外,Web Type的状态有一个专门用于更新彩色字体的浏览器支持的部分,因此您可以确定何时适合您进行下降。

在Color Fonts的演变和使用方面,两件事将发挥主要作用:

· 使用性和兼容性,这与所有的网页设计项目和浏览器的最终目的是一样的(由于兼容性问题,现在很多的Color Fonts设计实际上更多的出现在打印项目中)

· 整体风格以及更华丽多彩的设计技术是否趋于整体。

5.在你的实际设计项目中尝试Color Fonts

Image title


如果这种字体类型正是你缩需要的一种元素的话,你可以下载Color Fonts以便开始使用或创建自己的颜色,具体取决于你的设计项目类型。

>创建你自己的

你创建的Color Font类型取决于你的软件技能。Color Font可能包含从你最喜爱的照片到美丽的气泡和渐变颜色的笔画的图像。你可以完全自己完成或使用工具来帮助设计自定义的Color Font。

· Fontself是Adobe Illustrator和Photoshop插件,可帮助你创建自定义的Color Font;

· 你可以从Glyphs的教程中从头开始绘制和设计所有内容;

· FontLab有一个视频教程,你可以通过一步一步的学习来掌握。

总结

你准备好在你的网站设计中使用Color Fonts的趋势吗?

就个人而言,我发现这个趋势是很有趣的,并且在诸如活动海报或传单之类的打印项目中具有真正的实际用途。但是,当谈到网站设计项目时,我仍然不太相信这可以使用的很好。时间会说明这个趋势是否真的成为“网页设计的下一件大事”,或者是另一回事。

更新:2017-06-05

收藏

1人已收藏

  • 44

    作品

  • 9

    粉丝

  • 0

    关注

  • 提升移动端用户体验的7种方法
  • 10个很棒的下载免费矢量图形的地方
  • 在网站设计中有效使用微文本的6种方法
  • 如何安装&应用Lightroom预置

    猜你喜欢

      2017-06-05 好文转载 经验/观点 原作者: 南隼互动 举报 1244 1 2 0

      Color Fonts:初学者指南

      0.0°

      你确定要举报Color Fonts:初学者指南

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年06月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录