找回密码
 成为55Art会员

QQ登录

只需一步,快速开始

高薪好工作,尽在设计招聘中心
新网站意见/建议反馈
【早知道】每日精选5条
双十一UTT大促
查看: 1424|回复: 4
收起左侧

[界面设计团] iOS使用矢量图的总结【转】

[复制链接]

946

主题

2461

帖子

8688

积分

版主

Rank: 7Rank: 7Rank: 7

积分
8688

最佳新人艺术粉丝团版主团队摄影艺术家热心会员活跃会员突出贡献GUI设计师

发表于 2015-5-7 14:34:21 | 显示全部楼层 |阅读模式

马上登陆/注册,结交更多同行好友,享用更多功能,让你轻松玩转55Art。

您需要 登录 才可以下载或查看,没有帐号?成为55Art会员

x
原理
        苹果最擅长使用障眼法,之前是障用户的眼,现在又来障开发者。XCode6的这个“支持矢量图”,实际上只是编译项目时,根据矢量图自动生成对应的@1x,@2x和@3x的png格式图像。
        不过这也有好处,首先是不用担心运行时扩展尺寸而降低性能,另外可以兼容更早的iOS版本,经实际测试,除了iOS8外,iOS6、7是没问题的,5目前没有条件测试。

For Coding人员

        对于开发者来说,使用非常方便。唯一要做的就是在Images.xcassets目录中将图片Image Set的Type改成“Vectors”,之后你会发现原先左边的一排@1x,@2x,@3x的格子不见了,转而只留下一个“Universal”。此时将美术人员提供的pdf文件,像以往那样拖进来就OK了。


ios_vector_1.png


使用方法同过去一模一样,既可以在xib或storyboard中直接指定,也可以在代码中用
  1. self.logoImageView.image = [UIImage imageNamed:@"logo"];
复制代码

来进行设置。


值得注意的是,它本质上还是个png,所以如果你“机智”地加了pdf后缀,就像下面这样,那么很遗憾,这就就上了苹果的当。


  1. self.logoImageView.image = [UIImage imageNamed:@"logo.pdf"];
复制代码



上面这个样子是无法显示出来的。


编译后,可以清楚地看到,三种大小的图片和以往一样面熟,如图:


ios_vector_2.png


是的,已经没有了,对于开发人员来说,除了使用上更方便外,几乎和过去一模一样。


For UI人员
目前Xcode只支持PDF这和种矢量图格式,无论用AI或PS都可以,只要是可以放大不变形的都可以,比如路径或矢量字体。
存储时设置为PDF格式即可。


ios_vector_3.png


(AI)


ios_vector_4.png


(PS)


不过要注意的是,务必去掉“保留编辑功能”前面的勾,见下图:


ios_vector_5.jpg


另外,虽然矢量图文件一定程度上放大并不会变形,比如这个2×2像素的


ios_vector_6.png


在放大后仍然很清晰:


ios_vector_7.png



但是在编译完成时,却被XCode转成了真的只有2×2像素的png:


ios_vector_8.png


解决的方法是在创建时设置画布的尺寸为@1x的大小基准,也就是假设屏幕分辨率为320*480的大小来做。这一点可能和当前流行的以640宽度或750宽度做有些不同,我这里的方法也不是最终方法,这个还要由设计师来自行评估。


ios_vector_9.jpg



这样当创建一个比如150x150px的pdf时:


ios_vector_10.png


XCode就会以它为基准自动生成适合不同分辨率的@1x,@2x,@3x的png图片了:


ios_vector_11.png


(150×150)


ios_vector_12.png


(300×300)
ios_vector_13.png


(450*450)

转载来自:http://lugede.cn/ios-use-vector-pdf-image


这小伙伴太懒了,什么都没留下~~
发表于 2015-5-7 14:45:33 | 显示全部楼层
这是什么东东啊
这小伙伴太懒了,什么都没留下~~
发表于 2015-5-7 14:55:36 | 显示全部楼层
真是 收益 匪浅
这小伙伴太懒了,什么都没留下~~
发表于 2015-5-7 15:09:46 | 显示全部楼层
没看完~~~~~~ 先顶,好同志
这小伙伴太懒了,什么都没留下~~
发表于 2015-5-7 15:59:56 | 显示全部楼层
支持一下
这小伙伴太懒了,什么都没留下~~
您需要登录后才可以回帖 登录 | 成为55Art会员

本版积分规则