Tips for cropping Images

Tips for cropping Images

The product interfaces seen by users are not created by designers, but are separated by the technical implementation of developers. As a bridge between the designer and the developer, the function of the cutting chart is very important. A proper cutting chart and precise position can be used to restore the design to the maximum extent. Exquisite cutting charts have a multiplier effect!


We often make a cut chart commonly known as "". What is? "Point 9" is a special form of processing images on the Android platform. Because the file extension is 2.16.9.png, it is called "Point 9 ". "" Is also a unique technology developed because the Android platform needs to adapt to multiple resolutions. It can stretch the image horizontally and vertically at will, while retaining the pixel fineness, gradient texture, and the original size of the rounded corner to achieve a perfect display effect at multiple resolutions, reducing unnecessary image resources at the same time is a cutting-edge tool.

The production tool of "" is "draw9patch". The specific production steps are not mentioned here. Insert tips Article 1: discard this production tool to reduce the tedious steps, don't drag every image into the tool! You can draw with PS + pencil directly.

"" Is of course a great learning experience, but Android not only needs to understand the "" method, but also a variety of other tips. I will share with you some of my experiences on the cut chart in my work.

(1) cutting the graph from the development perspective

Understanding how technology is implemented is like learning more about a developer, which makes your work smoother.

For example, if you make a "Click 9" chart for the button, some students may do this:

This is a "" image stretching left and right without changing the height. The display area of the content is the entire button range. The text is displayed vertically in the center. After the developer obtains the "" image, the developer will write the center attribute in the code, this attribute is used to set the vertical center of text in the button. Speaking of this, are you aware of any problems? Let's take a look at the effect.

Designers with Pixel eyes will immediately notice that the text is down. Next, ask the developers to adjust the text location and "put the text up n pixels without center". This is a frequent conversation, developers can add code to fine-tune the text location to achieve the effect. Has the problem been solved successfully? Otherwise. We are actually wrong.

When we understand the implementation methods of developers, we can try to use the reverse method to verify whether there is further accuracy in this "" picture.

For example, in the design, the red area is the text typographical area, which is an idealized position. The heights of 1 and 2 are equal, while those of 3 and 4 are equal. The problem has occurred! When we painted the height of the projection, we drew the visual text.

Our general plot should be:

1. Point A pixel point in the blank area without stretching the height.

This is a convention with developers. With tacit understanding, we know that the button height is not stretched, and it is stretched. It is a blank area, and it will not be visually affected.

Comparison:

2. The height of the content display area should be avoided, so that the text visual center can be ensured.

The content display area of the "" image, which I like to refer to as the content layout area. Different Scenes will also be found during the graph cutting process, and you should always think about the results you want. Through careful processing of this area, it can better typeset the content carried by the image. In this way, developers can achieve a precise layout through some simple attribute settings. At the same time, it also reduces unnecessary development, simplifies code, improves product performance, and accumulates less, bringing users a better experience.

(2) Select a better graph Cutting Method

When we encounter a special shape or a more complex cut chart, we often need to leave the inherent thinking program to find a more suitable cut Chart Method. For example, when we cut the float layer, can we still use our tool "Click nine?

First, analyze the characteristics of this floating layer: first, the translucent gradient has a thickness and a projection effect; second, it has a triangular shape and the position is not fixed. When we cut the chart, we first took a detour and used our inherent thinking to divide the float layer into two parts: the upper and lower sections. The lower section is made into a "Point 9", and the above triangle is separated into a cut chart, it is implemented by splicing. This is in line with the developer's atomic splitting design model. It extracts and encapsulates the changed parts so that other parts are unaffected. So developers quickly achieved the goal, but the effect was not satisfactory. We can expect it, because there must be overlapping upper and lower stitching of projection effects, so there will be an obvious line at the stitching.

What should we do? After further thinking, the designer finally found a more suitable way to cut the graph:

Split the left and right into two "" images, which ensures the effect of the connection and flexible triangular orientation. While thinking about how to cut the chart, we also need to communicate with the technical staff to determine whether it can be achieved and how to measure the cost of implementation. In the end, we are happy that there is no difference between the effect and the design.

(3) reduce the resource size as much as possible

Reduce the resource size as much as possible during graph cutting, and reduce the size of the product installation package.

1. There is no difference between the effect of stretching one pixel and stretching 10 pixels for the "" image, so try to reduce the image size as much as possible.

(In the above example, you can pay attention to it in your actual work to keep it clear and minimize .)

2. When we encounter a background or button with a texture, the principle of cropping is to find the texture pattern and tile it with the smallest cut image. You can imagine the principle of overlapping pattern.

The first type of texture background, such as the input interface in the multimedia input method and different letterheads, we use the smallest possible cut graph to achieve tiled implementation. For example:

This is the cut chart of the paper in our input method. We follow the principle of using the minimum cut graph and adjust it to the smallest cut graph according to the pattern of different textures. Therefore, we can see that the cut graph sizes of different textures are different.

The second type of texture button is usually processed as follows:

Our goal is to divide the button into three sections, retain the left and right corner, and find the reusable tile part of the middle texture. Our colleagues ensure that the middle texture can be seamlessly connected with the left and right images, in this way, the button length becomes controllable and can be applied to different scenarios.

First, find the texture pattern. Here, the diagonal line texture only needs to cut the image with a width of 3 px. Then, use the texture image to try the left and right corner and connect the texture to the corner. Other types of texture cropping can be reused.

3. Properly compress the image quality. The image quality can be stored in the png8-bit or index mode in monochrome or with no excessive effect.

I will not give an example here.

Summary

When providing design specifications, designers can try to use some cutting-down techniques to help your design achieve a zero-difference presentation, at the same time, it also helps developers reduce a lot of unnecessary development burden, and has many self-evident advantages for the product itself, such as improving the running speed. Let the designers and our dear developers become more intimate and tacit partners!

The above is a little experience on Android cropping. If you have any mistakes or deficiencies, please correct them. You are also welcome to share more experience and skills on cropping images.


Original connection: http://mux.baidu.com /? P = 3367