涨姿势!怎样在Xcode 6中使用矢量图形? - 优设网 - UISDC

涨姿势!怎样在Xcode 6中使用矢量图形?

2014/12/28 评论区

vector-images-in-xcode6-1

今天的文章略技术向,之前捣鼓了点东西,要适配6和Plus,自己做切图才发现确实有够烦。基于矢量图生成PNG图形的方法也是事后才知道,学习下,有同样需求的设计师,你的神器到咯!

静电的Xcode教程合集:

  1. 《搞定一像素不求人!为设计师量身打造的XCODE教程(1)》
  2. 《搞定一像素不求人!为设计师量身打造的XCODE教程(2)》
  3. 《零代码搞定交互动画!为设计师量身打造的XCODE教程(3)》

iOS应用的视觉形式通常是以图形元素驱动的。在设计开发一款应用时,你需要不同规格的应用图标,例如不同尺寸的Default.png图片,同时还需要为UI的实现准备@1x和@2x图形资源。所有这些图形元素都会让你的产品看上去更吸引人,但弊端也是很明显的——你需要为每种规格的图形元素单独切图。而随着iPhone 6及Plus的发布,我们又多了一套@3x需要处理,事情变得越来越复杂。

幸运的是,苹果在Xcode 6当中给我们带来了一些很棒的工具用以管理图形资源。更棒的是,新的工具和实现方式可以帮我们从容的应对未来的iOS设备,例如基于Storyboard为iOS 8设备生成启动图片,这样你就无需再为不同的设备类型单独制作。此外还有一个非常重要的新功能,就是在应用构建阶段基于PDF图片文件自动生成各种规格的图形资源。本文中,我们就来一起探索一下这种能帮你节省大量时间成本的方法。

一、使用Illustrator生成PDF矢量图形

首先,我们需要PDF格式的矢量图形。你可以使用Adobe Illustrator或你所熟悉的其他矢量图形工具来生成;@1x规格的即可。

如果你使用Illustrator:

  1. 为即将导出的图形元素创建新文档,使用@1x规格来设置文档的尺寸。
  2. 将需要导出的图形元素复制到新文档当中。
  3. 在“File”菜单中选择“Save”。
  4. 在保存时记得取消勾选“Preserve Illustrator Editing Capabilities”。

01-xcode-6-ios8-vector-pdf-image-asset.png

由此导出的PDF是可拉伸的矢量图形,可以在iOS中被完美的处理为@2x和@3x规格。下一步,我们看看怎样在Xcode当中进行设置。

二、在Xcode项目文件中进行设置

要使用矢量化的图形资源,你需要在Xcode当中通过Asset Catalog来管理图片。不用担心,你仍可以将标准的图形导入方式与XCAssets混合起来使用,不会产生问题。执行以下步骤:

  1. 如果还没有XCAsset文件,那么创建一个。如果已经创建过,就在项目中打开。
  2. 在“Editor”菜单中选择“New Image Set”。
  3. 在新创建的图片集中,选择空的图片集,然后打开Utilities面板。
  4. 选择属性检查器Attributes Inspector。
  5. 在类型下拉列表中,选择“Vectors”。
  6. 图片集会变为只有一个拖放点的“All – Universal”。
  7. 将你的PDF矢量图形拖放到图片集当中。

02-xcode-6-ios8-vector-pdf-image-asset.png

接下来,你可以像以往一样使用Image Catalog中的图形资源,通过代码或Interface Builder均可。例如在代码中使用“imageNamed:”+图片集名称的字符串。

三、见证神奇时刻

Xcode在构建项目时会基于Asset Catalog中的PDF矢量图形自动创建@1x、@2x和@3x三种规格的PNG文件。举例说,你为Xcode提供了一个@1x规格的,尺寸为150px*150px的PDF文件,那么Xcode会自动创建下列PNG图形:

  • @1x规格,尺寸为150px*150px
  • @2x规格,尺寸为300px*300px
  • @3x规格,尺寸为450px*450px

应用运行时,iOS会根据不同的设备类型从上面三种图形资源中挑选出恰当的规格进行输出。另外记得为AutoLayout设置好约束,确保图形不会在大尺寸设备上被拉伸。Xcode所做的是基于PDF矢量图形创建PNG文件;应用运行时所输出的仍然是栅格化的图片,而非可以自动伸缩的矢量图形。

注意

  • 矢量图形的支持只是阶段性的 – 在构建阶段,Xcode会基于PDF生成PNG图片并输出到界面当中。
  • 一旦完成矢量图形的设置,你就无法为其指定新的输出尺寸了。如果需要更大的规格,则需要创建新的PDF图形,否则在使用AutoLayout时原来的图片会失真。
  • 正如前面所说的,iOS 8只能支持基于PDF生成的PNG文件;但OS X却可以真正完整的支持矢量图形,你可以直接通过Auto Layout或代码来缩放矢量图形,不会产生任何失真。
  • 这种方式无法兼容iOS 7之前的系统,因为相关的图形资源都是通过Asset Catalog管理的。
  • 如果你已经使用了类似的脚本或工具来自动生成多种规格的图形资源,那么这种方式不会给你带来太多用处。不过,如果你的应用同时拥有OS X和iOS两种版本,并且会用到一些相同的图形,那么这种方法将会是事半功倍的。

专为毕业生量身打造的三篇好文!帮你迅速找到好工作!

大咖前辈现身说法!亲历者经验!
《毕业生必看!刚入行的设计师如何敲开大公司的门》

有了这个,就不怕遇到黑心老板啦!
《找工作必备!教你一眼识穿招聘公司有木有坑》

朋友挤破头来让你帮个忙?看看这篇!
《人情练达即文章:如何拒绝朋友免费做设计的要求?》

原文地址:martiancraft
译文地址:beforweb

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量88万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/vector-images-in-xcode6

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设大课堂 职场 优设专访 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里