Cropping of IOS apps

There are two implementation methods for graphics in the graphic user interface. One is to draw the image using code, such as quartz 2D technology. The other is to use OpenGL ES.

The Code painting method consumes the programmer's mental power, CPU or GPU; the image consumes disk space and increases the app size. Generally, the app will focus on using images to build user interfaces.

Designers usually use PS to design the interface. Therefore, before using it directly, there is an image slicing process from PSD to PNG. The following are some notes that may be paid attention to during the cropping process.

1. Repeatable Elements

The graphic elements on the user interface are repeatedly everywhere. Therefore, we use the interfaces provided by the framework to create a user interface with high cost effectiveness.

1. Color Pattern

Color Pattern in the web design also often encounter such as the background of the web page, and even the network can find a dedicated collection of all kinds of repeated texture pattern site, such as http://subtlepatterns.com. below this is a small image Template

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

In this way, you can obtain a color template. When you use this color to draw or fill an area, the template image will be tiled in the specified area. for example, if you set the background color of a view to the above color, the following result is displayed:

2. resizableimage

In addition to the overall tile, we often want the partial Tile of an image, while the rest remain unchanged. for example, common buttons, bubble background of chat, or shadow border of images. here is an example of a button. Generally, you can directly split the button background for convenience. If you look at it yourself, you will find that most of the buttons in the middle are horizontally duplicated, therefore, you can use the IOS image interface to achieve the same effect with smaller images.
First, use the PS cutting tool to cut the image. The cutting logic in the Section is to cut 14 pixels on the left (13 pixels plus 1 pixel, 1 pixel is the middle repeating part), and cut 13 pixels on the right.

The next unit of the Retina screen corresponds to two pixels. The example here is not in the case of retina. Please note that

After splitting the image, merge the left and right into the final image.

The image width is 27 pixels in width, and 14th pixels in the middle are duplicated in the middle.

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

Resizableimagewithcapinsets: the parameter is a struct type of uiedgeinsets. The areas covered by capinsets will remain unchanged, and those not covered will be used for tile.

This method was not used before IOS 5.0, but another method used.

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

This method has limitations, it can only specify leftcapwidth and topcapheight, and then only one pixel can be repeated, that is, the rightcapwidth is the imageWidth-leftCapWidth-1, while the bottoffapheight is imageheight-topcapheight-1, so the repeat is always the middle pixel.

2. Image Edge and anti-aliasing

1. Anti-sawtooth

Sometimes you need to use an image in a rotating animation, such as button rotation and image rotation. To avoid the image rotation, we need, leave at least one pixel of transparent pixels on the edge, because IOS does not perform anti-sawtooth processing on the outer edge while processing the image, but anti-sawtooth processing is performed on the interior edge of the image.

2. The anti-aliasing effect needs to be removed.

When the origin of the frame of an imageview. X or origin. when Y is not an integer, it will show the anti-sawtooth effect you do not want. At this time, the clear image edge will become blurred, and this is not what you want, in this case, we need to set the starting point of the frame.

From: http://geeklu.com/2012/06/image-slicing-for-ios-app/