`

关于iOS App的切图

    博客分类:
  • ios
ios 
阅读更多

图形用户界面中的图形有两种实现方式,一种是用代码画出来,比如Quartz 2D技术,狠一点有OpenGL ES,另一种则是使用图片。 
代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则耗费磁盘空间,会增加app的体积.一般的app我们会偏重于使用图片来构建用户界面. 
设计师一般会使用PS来设计界面,所以在直接使用之前,有一个PSD到png的切图(Image Slicing)过程.下面是切图过程中可能要注意的几点. 

一.可重复元素

在用户界面的图形元素中,重复随处可见 ,所以我们利用好框架提供的接口, 以比较高的性价比创建用户界面。

1.Color Pattern

Color Pattern在Web设计中也经常会遇到比如网页的背景,甚至网络中可以找到专门收集各类可重复的纹理图案的站点,比如 http://subtlepatterns.com. 下面这是一个小图片模板


circles


UIColor *circleColorPattern = [UIColor colorWithPatternImage:
[UIImage imageNamed:@"circle_pattern.png"]];

这样便可以得到一个颜色模板,用这个颜色画或者填充某个区域的时候,模板图片会在指定的区域中进行平铺.比如把一个View的背景颜色设置成上面这个颜色,便会得到如下结果


circles_fill


2.resizableImage

除了整体平铺之外,很多时候我们希望某个图片的局部进行平铺,而其余部分则保持不变. 比如常见的按钮,聊天的气泡背景或者图片的阴影边框. 这里举个按钮的例子,一般情况下为了方便做按钮就直接切个按钮背景,如下图button-blue但是自己看,你会发现按钮中间大都数像素都是横向重复的,所以可以使用iOS的图片接口来使用体积更小的图片实现相同的效果. 首先使用PS的切图工具进行切图,下图中的切图逻辑是,左边切14像素(13像素加1像素,1像素为中间重复部分),右边切13像素.

Retina屏幕下一个单位对应着两个像素,这里的例子是非Retina下的情况,请注意


button-blue-slicing



切图后将左右合并,变成最终所需要的图片


button-blue-sliced


图片宽度为27像素宽,中间第14个像素为中间重复的部分.

UIImage *buttonBackgroundImage = [[UIImage imageNamed:@"button_bkg.png"] 
resizableImageWithCapInsets:UIEdgeInsetsMake(0,13,0,13)];
[button setBackgroundImage:buttonBackgroundImage 
forState:UIControlStateNormal];

resizableImageWithCapInsets:的参数是一个UIEdgeInsets的结构体类型,被capInsets覆盖到的区域将会保持不变,而未覆盖到的部分将会被用来平铺.

在iOS 5.0之前并没有这个方法,而是使用的另一个方法

 - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth 
topCapHeight:(NSInteger)topCapHeight;

这个方法有局限性,它只能指定leftCapWidth和topCapHeight,然后只有一个像素能够重复,也就是rightCapWidth为 imageWidth-leftCapWidth-1,而bottomCapHeight为 imageHeight - topCapHeight -1,所以重复的始终是中间的那一个像素.



二.图片边缘锯齿和抗锯齿问题


1.需要抗锯齿

有时候需要在旋转的动画中使用到图片,比如按钮的旋转,图片的旋转,为了避免在旋转的过程中出现边缘锯齿,我们需要在切图的时候,在边缘上多留至少一像素的透明像素,因为iOS在处理图片的时候对于外边缘是不做抗锯齿处理的,但是对于图片内部的边缘则会做抗锯齿处理.

2.需要去除抗锯齿效果

当某个imageView的frame的origin.x或者origin.y 不为整数的时候,会出现你不想要的抗锯齿效果,这个时候本来清晰的图片边缘会变得模糊,而这不是你想要的,所以这个时候我们就要对frame的起点进行取整。

分享到:
评论

相关推荐

    基于iOS-GPUImage的图片处理app设计源码

    本项目是一款基于iOS-GPUImage技术的图片处理应用源码,包含553个文件,其中包括216个PNG图片文件、163个Objective-C头文件、144个Objective-C实现文件、8个XIB界面文件、3个Property List文件、3个JPG图片文件、2个...

    iOS端UI设计文档

    ### iOS端UI设计文档知识点详解 #### 一、概述 iOS端UI设计文档主要涵盖了针对苹果设备的应用程序界面设计标准和指南。这类文档通常包含了设计准则、风格规范、排版规则以及具体的切图命名和输出标准等内容。这些...

    ios-高仿购物帮.zip

    自己写的电商版购物的APP,切图随便找的,接口自己抓取,不是很完善,适合初学者学习研究。支持IOS9最低版本。项目中采用MVC架构写的。因为项目中页面重复的东西很多所以用的继承的比较多。希望初学者们能够快速学习...

    公司开发App的流程.pdf

    同时,设计师还需要进行切图工作,为不同平台(如iOS、Android)准备相应的图片资源。 5. **编程**:程序员开始编写代码,分别针对iOS和Android平台进行开发。在此过程中,他们需要与后台开发人员沟通接口数据问题...

    数字APP设计规范和工作流程.doc

    数字APP设计的工作流程通常包括需求分析、原型设计、视觉设计、交互设计、切图与标注、开发配合及后期测试优化等阶段。设计师需充分理解用户需求,遵循各平台的规范,以创造出既美观又实用的APP界面。在整个过程中,...

    基于教育资源共享APP界面的可用性研究 资料.pdf

    页面展示级别元素则关注视觉效果,如配色、图标按钮和UI切图,它们共同塑造了APP的整体风格,影响着用户的感官体验。 总之,教育资源共享APP的界面设计直接影响了用户的学习效率和满意度。猿题库的成功在于它巧妙地...

    photoshop智能手机app界面设计

    总结来说,使用Photoshop进行智能手机App界面设计需要掌握基本的Photoshop技能,理解设计原则,熟练创建和编辑界面元素,注重文字排版,以及进行切图和适配工作。设计师还需要具备良好的沟通能力,以便与开发团队...

    提案APP项目需求方案.doc

    APP将覆盖Android和iOS平台,并包含一个WEB后台管理系统,以便管理员进行数据管理和操作。 一、需求原型设计 需求原型设计是APP开发的起点,它包括了对各个功能模块的初步规划和用户交互流程的设计。设计应注重用户...

    完整的令人惊叹的iOS_UI主题包_psd&sketch素材下载.zip

    标签中提到的“app界面设计”,意味着这些素材适用于移动应用的界面构建,无论你是新手还是资深设计师,都能从中受益。对于iOS应用,设计时需要遵循Apple的Human Interface Guidelines(人机交互指南),确保界面...

    安卓app设计规范整理和Android APP设计篇.pdf

    有时,也可以从iOS的分辨率(960*640)开始,调整比例以适应安卓。 2. 字体与字体大小: 自安卓4.0起,系统默认字体是Roboto。对于中文,常用字体是方正兰亭黑体。在720*1280的基础尺寸下,最小字体推荐12sp(24px...

    sketch素材

    本资源包"sketch素材"中包含了丰富的Sketch UI设计素材,适用于iOS 11的设计需求,同时也可为Sketch App和Adobe XD用户提供便利。接下来,我们将深入探讨Sketch在UI设计中的应用以及这些素材如何提升设计效率。 1. ...

    仿ios的点击变暗效果的按钮

    作者SundayGao,源码UIImageView,这是一个比较简单好用的仿ios的... 一般Android中实现一个ImageView的点击效果需要两张图片,每次美工切图麻烦不说, 也会增加app的体积,该控件只需一张图片就可以实现点击变暗效果。

    iOS中如何使用iconfont图标实例详解

    1.什么是iconfont iconFont拆开来看,就是 Icon + Font,这样估计大家应该都能理解是什么,那两者结合是什么呢?...如果使用切图,这对于设计和开发来说无疑是增加了工作量,而且ipa的体积也会增大。 使用iconf

    iOS平台应用开发的敏捷设计流程

    如果需要,还需对PSD进行切图,生成PNG文件,以便开发人员可以直接使用这些资源。 在整个iOS平台应用开发的敏捷设计流程中,设计师需要不断地与开发人员沟通,以确保设计的准确性和可行性。设计师和开发人员应该...

    UIDesigner(UI设计软件) v2.5.5.1 Beta1 官方安装版

    可以让你的原型运行在iOS真机设备上,通过iTunes把 .uidp 文件复制到“文件共享”内即可运行。 移动上的设计:针对APP设计,打造iphone,安卓等多套原生态控件,更符合移动设计体验. 快速原型,想动就动:通过便捷的...

    2018版UI设计分析

    【UI设计分析】2018版UI设计主要聚焦于APP的设计流程,从设计稿到切图的转化。在这个过程中,设计师需要选择合适的工具,并掌握基础的手机屏幕概念,同时遵循设计规范,尤其是针对iOS系统。 1. **设计工具选择**: ...

Global site tag (gtag.js) - Google Analytics