请选择 进入手机版 | 继续访问电脑版
搜索
Hype中国社区 首页 学习 教程 查看内容

Mike手把手系列之 (四) 如何在hype中导入图片不模糊

2015-8-26 21:58| 发布者: MIke| 查看: 5810| 评论: 1|原作者: Mike

这个问题在我们的学习交流群中频频有人问及,那在下面的文章中,我就给大家介绍一下具体的解决方法把

最近群里时常有人问:为什么在hype中导入的图片,预览的时候会模糊呢?

于是在晚上的时候,我尝试了用不同尺寸倍数的图片导入到hype中,然后在电脑浏览器和手机中都预览了一遍。得出了一个结论:如果要在hype中导入的图片不模糊,图片必须为hype内置尺寸的2倍基准图(为了支持retina的屏幕),后缀需要以@2x结尾(这里需要注意一点,图片不能用中文命名)。如果你觉得图片比较大,tinypng.com中压缩一下大小(很好用的在线图片压缩工具)。

这里我们都知道hype和sketch一样都是用的一倍基准图来设计的。也知道,导入到web代码的尺寸刚好是实际设计尺寸的一半。因为大家后面是需要把动效以html5输出的,所以导入到hype中的尺寸需要为2倍的基准图。这个和平时大家切图给程序员是一样的(就相当于你切图给了hype)。

考虑到使用不同软件的设计人群,这里我们可以分两种(sketch/photoshop)情况来讲。(一)1.当你在sketch设计界面的时候,就拿手机页面交互动效来说吧。在新建画板的时候,我们就可以发现sketch各类手机的设计尺寸,很明显他是以一倍图作为设计基准的。例如我们在iphone6的尺寸上做设计(375*667px),那么按照之前得出的结论的方法,我们需要导入到hype的尺寸为750*1334(iphone6的实际尺寸),并且后缀以@2x结尾。不过在sketch中有方便的切图导出工具:

我们只需要将size(尺寸)的下拉选项中选择2x-也就是2倍的尺寸,我们发现后面紧跟着的suffix(后缀)自动会命名成@2x。那么format(格式)就大家根据自己需求选择吧。2.如果你在sketch中是按实际尺寸设计的,那么切图导出时候的选项应该是这样的:

尺寸保持1倍不变,但我们的后缀名还是需要设置成@2x。

(二)当你在photoshop中设计的时候,因为我们知道,ps中设计界面,一般都是用的实际尺寸(比如iphone6,我们就直接在新建的时候将尺寸设置为750*1334)。如果你安装了ps的切图插件(cutterman)那么你可以很方便地导出@2x的图。因为我们是按实际尺寸设计的界面,所以这里的@2x图也就是我们需要的实际尺寸图.

那么如果你没有安装cutterman的话,就需要手动来命名了。不过其实也简单,我们将导出的的实际尺寸图片的名字后面加上后缀@2x就ok了。例如一张名为bg的图片,我们的命名方式为:bg@2x.jpg

那么我们怎么看导入的@2x图片是否已经生效呢?打开资源库,在以123命名的图片下面会有2种图片型号,一种是标准的@1x图,另一种是retina@2x。然后我们发现,我们导入的图片已经覆盖在了retina@2x上,而且名字的后缀也刚好是@2x。那就说明已经成功生效了。

按照以上的几种设置方式,你可以在浏览器种预览一下图片效果,这时你会发现图片不再模糊了,那就这样愉快滴解决了。

过程中如果遇到问题的话可以在hype社区中(hypechina.com)发帖留言,或者在hype3学习交流群(455806127)中留言。

欢迎关注微信公众号design_bar,第一时间得知hype的最新动态和hype教程的更新

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 壁花demon 2015-10-1 19:19
我遇到个问题:首页点击菜单按钮跳转到设置菜单B(成功),设置菜单B页面上点击首页按钮跳转回首页A(成功),但再次点击重复刚才操作时(点击菜单按钮)会重复执行刚才的时间线动画但就是不会跳转到设置菜单B页面,这是什么原因 是需要加一个暂停的帧吗

查看全部评论(1)

为广大Hype爱好者提供一个学习交流的平台

正在努力制作Hype教程,尽可能为大家带来最新的体验!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回顶部