像素重构-让位图清晰的小技巧

原创文章 分类: 经验/观点 版权:
1377 8 8 1
更新于:2017-05-24
0.0
编辑推荐

作为每天面对矢量图的设计狮,每每看到马赛克的位图,就是一脸嫌弃,高清无码才是人生不懈追求的方向。可惜现实太残酷,不是人人都是5K屏,更不是没张图都叫SVG,然而作为万能的设计师,总会脑爆的想着为世界带来光明和清晰。


我们知道位图其实是由一个个像素格构成的,如果我们的内容是按照像素格填充和呈现的话,那视觉上那岂不是就变得清晰明了。


What,就这样,裤子都脱了你就让我看这个!


别急,毕竟不拿案例的文章多少都有些耍流氓,再说,咱又不是这样的人!


以下结合一个小实例和大家分享分享,说说如何让小幅图片可以最大化的高清呈现。

一般设计稿中,有一些小尺寸的图像,因本身包含一些文字或图形,当通过Sketch导出后则会变的模糊不清不易识别,如下所示:

Image title

那么问题来了,怎么在不改变现有图形尺寸及文件格式下,如何做到更加清晰的呈现?

此时我们可以在现有图稿的基础上,采用“像素填充重构”的方式,具体如下:

在sketch中,将浏览模式改为“显示像素”(快捷键:control+p)

Image title

这样我们就能看到图像在导出后具体呈现效果,并在此基础上填充方形色块,慢慢让虚化的图形清晰化。

Image title

*注意:在有曲线的图形,填充时要注意在色彩上的过度和衔接,避免过于生硬


就这样导出后的图形在清晰度上会有明显提升,更易识别,不失为一种用户体验在感官上的提升!想想虽是小物,但需到之处却有实用,Get到了记得不要忘了点赞与分享奥!


欢迎关注微信公共号:int-PD

Image title


Wiiii

微信公共号:int-PD

976粉丝/0关注

老马识途小有名气首页达人收藏家lv.3
开始设计的 3 条建议如何构建 SaaS 网站

Wiiii

Wiiii

微信公共号:int-PD

老马识途小有名气首页达人收藏家lv.3

扫描二维码
去手机端查看海报

Wiiii

TA已经获得8枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN