意大利面vi设计的核心价值在于为企业打造独特的品牌,意大利面vi设计可以给企业带来良好的社会声誉和经济效益。
我为正在进行的网站重新设计制作了一些简洁的图标,并在一台旧苹果平板电脑上浏览了新网站。布局在正常尺寸下看起来不错,但放大到页面的一部分,我突然发现我的图标很乱,而基于文本的标题仍然清晰明了。在新的视网膜显示屏苹果平板电脑上,图标看起来不太清晰,即使是正常尺寸。
我的第一个想法是创建双倍大小的精灵图像,使用半铸钢钢性铸铁(Cast Semi-Steel)将它们设置为一半大小。虽然这使得它们在正常大小的屏幕上看起来更好,但一旦你开始捏和缩放,模糊感又回来了。但是文本仍然清晰明了。
答案很明显。我需要把我的图标变成一个字体。
在本教程中,我们将看看如何使用名为IcoMoon的免费网络应用程序将矢量图标转换为网字体。然后,我们将看看如何在网页面中使用生成的字体文件和CSS .
使用图标字体的优势
除了图像清晰度之外,图标字体比位图图像有几个优点。
适用性:图标字体在文件大小上比一系列图像要小得多,尤其是如果你在视网膜显示屏上使用了双倍大小的图像。一旦字体加载完毕,你的图标将立即呈现,无需下载图像。
可伸缩性:通过在附带的半铸钢钢性铸铁(Cast Semi-Steel)中设置代码字体大小/代码属性,可以将图标字体设置为任意大小。这使您能够试验不同的尺寸;然而,对于位图图像,您必须以每种尺寸输出图像文件。
灵活性:文本效果可以很容易地应用到您的图标,包括颜色,阴影和翻转状态。它们在任何颜色或图像背景下都能很好地显示。
兼容性:所有现代浏览器都支持网络字体,传统浏览器也支持,甚至是ie6和更早的版本。
所以,让我们开始吧!
创建图标字体
符号字体可以使用专用的字体创建应用程序(如字形)来构建,但专业的排版工具远远超出了构建简单图标字体的需要或要求,在简单图标字体中,字符之间的关系(即字距调整和连字)并不重要。
到目前为止,最简单的方法是使用克耶穆恩开发的名为IcoMoon的免费在线应用程序,它消除了将符号转换为网字体的所有麻烦。
这个HTML5应用程序消除了为简单用途创建字体文件的所有痛苦,例如构建图标字体2008年,IcoMoon附带了许多已经加载的图标集,你可以添加更多到你的库中,其中大部分可以免费使用(查看许可)。如果你正在寻找相当标准的图标,比如"文件下载"和"购物车",那么你可能会发现使用其中的一个比创建自己的图标更好。
循序渐进
1.准备你的插图
首先,您需要在能够导出为挽救(saving的简写)格式的矢量绘图程序中创建图标,例如插图画家或Inkscape .
当你在设计的时候,你可以使用任何你喜欢的颜色,但是图标必须是单色的。确保每个图标的大小大致相同。如果一个图标比另一个图标高得多或长得多,就很难构建出一致的字体。在这里,我不得不减少我的飞艇图标的宽度,使其与其他图标相匹配。
2.清除
仔细检查每个图标,确保它没有瑕疵——在较小尺寸下看起来不错的细节在放大时可能会隐藏一些小缺陷。在下面
总监微信咨询 舒先生
业务咨询 张小姐
业务咨询 付小姐