From f9137b0c5049648538d5ed5c6f3ef3b689e4e151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=A2=E5=85=8B?= Date: Thu, 7 Jun 2012 02:59:10 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2012-06-07-image-slicing-for-ios-app.md | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/_posts/2012-06-07-image-slicing-for-ios-app.md b/_posts/2012-06-07-image-slicing-for-ios-app.md index 8fdc6b7..2a8f192 100644 --- a/_posts/2012-06-07-image-slicing-for-ios-app.md +++ b/_posts/2012-06-07-image-slicing-for-ios-app.md @@ -8,23 +8,25 @@ tags: - Photoshop --- -图形用户界面归根到底就是图形，图形有两种实现的方式，一是使用代码画出来，比如Quartz 2D技术，狠一点有OpenGL ES，一是则是使用图片。 -代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则比较耗费磁盘空间,会增加app的体积.一般的app我们会偏重于使用图片来构建用户界面. -设计师一般会使用PS来设计界面，所以在直接使用之前，有一个PSD到png的切图(Image Slicing)的过程.下面是切图过程中可能要注意的几点. +图形用户界面归根到底就是图形，图形有两种实现的方式，一种是使用代码画出来，比如Quartz 2D技术，狠一点有OpenGL ES，另一种则是使用图片。 +代码画的方式比较耗费程序员脑力,CPU或GPU; 图片则耗费磁盘空间,会增加app的体积.一般的app我们会偏重于使用图片来构建用户界面. +设计师一般会使用PS来设计界面，所以在直接使用之前，有一个PSD到png的切图(Image Slicing)过程.下面是切图过程中可能要注意的几点.
### 一.可重复元素 在用户界面的图形元素中，重复随处可见 ,所以我们利用好框架提供的接口, 以比较高的性价比创建用户界面。 #### 1.Color Pattern Color Pattern在Web设计中也经常会遇到比如网页的背景,甚至网络中可以找到专门收集各类可重复的纹理图案的站点,比如 [http://subtlepatterns.com](http://subtlepatterns.com). -比如这样的一个小图片模板 +比如这样的一个小图片模板 +
![circles](http://farm8.staticflickr.com/7238/7160467573_a21e1c947b_t.jpg) +
{% highlight objc %} UIColor *circleColorPattern = [UIColor colorWithPatternImage:[UIImage imageNamed:@"circle_pattern.png"]]; {% endhighlight %} 这样便可以得到一个颜色模板,用这个颜色绘画或者填充某个区域的时候，上面的图片会在指定的区域中进行平铺.比如将一个View的背景颜色设置成这个颜色，便会得到如下结果 - +
![circles_fill](http://farm8.staticflickr.com/7085/7160467655_e2806877c7.jpg) - +
#### 2.resizableImage 除了整体平铺之外，很多时候我们希望某个图片的局部进行平铺，而其余部分则保持不变. 比如常见的按钮，聊天的气泡背景或者图片的阴影边框. @@ -32,9 +34,15 @@ UIColor *circleColorPattern = [UIColor colorWithPatternImage:[UIImage imageNamed ![button-blue](http://farm8.staticflickr.com/7219/7345749786_18422b630d_m.jpg) 但是自己看，你会发现按钮中间大都数像素都是横向重复的，所以可以使用iOS的图片接口来使用体积更小的图片实现相同的效果. 首先使用PS的切图工具进行切图,下图中的切图逻辑是，左边切14像素(13像素加1像素，1像素为中间重复部分),右边切13像素. +
![button-blue-slicing](http://farm8.staticflickr.com/7071/7160590813_382d13dcec_z.jpg) +
+
+ 切图后将左右合并，变成最终所需要的图片 +
![button-blue-sliced](http://farm8.staticflickr.com/7227/7160590679_c3ffb29b6e_z.jpg) +
图片宽度为27像素宽，中间第14个像素为中间重复的部分. {% highlight objc %} @@ -49,6 +57,7 @@ resizableImageWithCapInsets:的参数是一个UIEdgeInsets的结构体类型,被 {% endhighlight %} 这个方法有局限性，它只能指定leftCapWidth和topCapHeight，然后只有一个像素能够重复，也就是rightCapWidth为 imageWidth-leftCapWidth-1,而bottomCapHeight为 imageHeight - topCapHeight -1,所以重复的始终是中间的那一个像素. - +
+
### 二.动画边缘锯齿 有时候需要在旋转的动画中使用到图片，比如按钮的旋转，图片的旋转，为了避免在旋转的过程中出现边缘锯齿，我们需要在切图的时候，在边缘上多留至少一像素的透明像素，因为iOS在处理图片的时候对于外边缘是不做抗锯齿处理的，但是对于图片内部的边缘则会做抗锯齿处理.