• 欢迎加“百元导航”为主页,windows8风格,0.3s极速加载
  • 王柏元的博客专用搜索引擎:极客人,就用“极客搜”!
  •    1年前 (2015-07-13)  前端与界面 |   2 条评论  107 
    文章评分 2 次,平均分 4.5

    位图和矢量图

    世界上不是所有的事物都适合用审慎的眼光来看待,有的东西只可远观、不可近看。一张图片,放大放大再放大,不论是单反的拍摄的巨照,还是几十兆的数码相片,放大之后便如同大量马赛克一样,显露出图像的本质——点(也就是像素)。我们看到的丰富多彩的照片实际上就是由一个个点组会而成,存储图片只要描述出每一个像素点的颜色,将把像素汇聚一体,抽身远观之下,就是一幅绚丽的图片。

    如上图所讲,我们会想到数学课本上举世公认的定理:面由点组成。这似乎也没什么错,但是今天我说面是由线组成的,你可能会觉得我只是玩一个文字游戏。其实我想讲的是,这两种表述其实代表两种计算机图片格式的思路——位图和矢量图。如果说“面是由点组成的”,我说的是“位图”;如果说“面是由线组成的”,我说的是矢量图。这两种表述在表面上没什么大区别,其实在表示图像上与很大的区别。

    位图使用我们称为像素的一格一格的小点来描述图像.您的计算机屏幕其实就是一张包含大量像素点的网格.在位图中,上面我们看到的树叶图像将会由每一个网格中的像素点的位置和色彩值来决定.每一点的色彩是固定的,当我们在更高分辨率下观看图像时,每一个小点看上去就像是一个个马赛克色块。

    矢量图使用线段和曲线描述图像,所以称为矢量,同时图形也包含了色彩和位置信息.下面例子中的树叶,就是利用大量的点连接成曲线来描述树叶的轮廓线.然后根据轮廓线,在图像内部填充一定的色彩。

    图标字体

    矢量图你之前也许闻所未闻,甚至直到看到这篇文章你才惊悉它的存在。实际上你一直就在矢量图的“此山中”,你所看见的计算机字体其实就是矢量图,证明的途径就是:你不管把word的字体调多大,它都是那么清晰,字的轮廓边缘还是那么圆滑平整。

    使用wordpress让我有缘结识了图标字体,诚如你所见,王柏元的博客导航菜单上所用的图标就是图标字体,因为你会发现它和文字无异可以和文字一样改变颜色、设置大小还永远都是高保真。

    wordpress上fontawesome用的极为广泛,国内也有阿里巴巴矢量图标库。图标字体的使用为网站开发省去许多美工的工作。初见图标字体你一定会惊叹它的神奇,进而你可能追本溯源想知道它究竟是怎么做出来的。

    使用icomoon制作个性图标字体

    当你设计出一个很美观的图形、头像,或者当你对自己的毛笔字很自信,同时你又对书法家字体用到枯燥乏味的时候——你想在网站中使用自己的图案或者甚至将PPT的通篇文字都设置你自己的毛笔字体。那么,使用icomoon制作个性图标字体就是不错的选择。

    制作图标字体的第一步是制作矢量图

    要制作矢量图,一个简便的方法就是将位图转换为矢量图。因为得到位图的方式很简单,你只需要用手机将你设计的图案或者毛笔书法作品拍摄下来就得到位图了。

     

     

    除特别注明外,本站所有文章均为王柏元的博客原创,为了尊重作者的劳动成果,转载请注明出处http://wangbaiyuan.cn/oneself-start-work-make-icon-fonts.html,如果你觉得这篇文章对你有用,可以点击文章下面的“赞助作者”打赏作者!

    关于
    记录生活,镌刻心路;泼洒文墨,分享技术!王柏元的博客致力于IT经验交流,并原创翻译引进外文文章,打开IT国际化视野

    发表评论

    格式
    1. 学习了··

      af 评论达人 LV.1 1年前 (2015-07-20) [0] [0]
    2. 怎么像未完待续的样子?兴味戛然而止了

      ⌒雪莲⌒ 评论达人 LV.4 1年前 (2015-07-17) [0] [0]

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册