Why is your picture "sticky"?

8px that has caused a lot of responses, I think it has to be explained from several angles. There is a difference between the "paste" in the UI and the "paste" in RD eyes. The reasons for the picture being pasted are divided into several:

1. Small image amplification will paste. < This is nonsense, BJ4.

2. Large image shrink will paste. < There must be someone who wants to ask why.

3. Even a vector file, as long as the pixel is not aligned will paste.

4. PX non-integer. < Pixel does not have 0.x of this value.

Big picture shrink will paste

The picture of the mouse, shrinking the hair color of the butt side of the paste into a group. This is why Desktop icon in the production will suggest not to put words, the more simple and clean picture, the better. 512PX of exquisite design to 72px there is nothing left.

For example, this record is good, very beautiful, a lot of details, after narrowing the texture of the text, the words on the lower left can not see clearly, the background portrait of the coin is only the color block, details are missing. This is also a vague way.

The picture vector will be pasted

My BLOG readers should be RD number more, so this part of the trust you very little contact. (Even a lot of the UI doesn't notice that). Even if it's made of vector mapping, it will be sticky! For example:

You can see that the moment on the left seems to have long edges and sharp edges on the right.

The left and right two rectangles are actually the same one, only the difference is that there is no snap to the pixel grid line.

To keep the sharp edges of vector graphs, you can set this: Photoshop > Preferences > Interfaces.

As long as it is a shape layer, make sure to hook up the edges of the alignment. Even if it is from the illustrator affixed to the hook, will obviously see the edge has become clean.

This paste in the drawing of the big picture is not obvious, all the pictures will be easy in the small size of the icon on the problem. So small figure amplification is the safest, but enlarge the picture and then narrow the screen exquisite, see how to choose.

The conditions on the WEB to be designed with 8px

8px article a lot of people ask me why not web,8px design method is to solve the "picture will paste" problem, based on the Web, 8px two points for the premise to make a statement.

If you put 4px on a 640px screen, he needs to take up 0.625% of the screen width, so the width of the image will be 1.5px in the 240px screen. But 1.5px does not exist, so the performance must be 1px or 2px, resulting in ambiguity. This is the situation that 8px design wants to avoid.

However, it is difficult to design the 8px method in the reponsive designing practice. Pictures on the web have two types, fixed feet and variable inches. You don't have to lift a foot in the same way. But the change in feet is the size of the parent element, which is problematic if it is mixed with a fixed-inch setting.

For example, in 640px HTML, put a div,padding set about 8px, and put a div inside, and in this div put a picture of 100% wide. So the 640px width of the picture will be 624px, but it will become 224px when the HTML width becomes 240px. From the 8px design concept, 624px is a multiple of 8px (640px base) Yes, but 224px is not a multiple of 3px (the base of 240px), which violates the principle of the design.

To put it simply, it is not no good to do a graph on the responsive web with 8px units. But the condition is all margin, border, padding, width, height all have to use% to set, and% also must calculate just, otherwise also can break work.

(This Part thanks husband Description: 8px used in Web design ...) Why bother ...)

App

IOS attention to the dual problem, attention to pixel alignment, basically not very paste. Android is more trouble, cut the map before you home RD ask how to Chettu and mark the document how to mark, do 9-patch words, the bottom of the picture and the text is not to separate cut? The picture is to use fixed px or equal parts and so on all ask clear make notes. Note that due to screen size output of a variety of sharpness, or simply output 3 sets of different sizes of PSD files, individual adjustments and then cut the map.