Make each pixel clear in PS

When we design interfaces and Web pages, we often encounter graphics drawn in Photoshop, although they are vector graphs, but after amplification or there will be a lot of imaginary edges, blurred place, in the magnification, narrowing, rotation after the virtual edge become more serious, or in the AI to draw the exquisite vector icon glued to PS will become false, The work that we have worked so hard to do is "burnt", which is not allowed in our eyes, and we have to make each pixel clear and recognizable. To solve these problems, we should understand the principle of PS pixel composition, understand some setup options and tips, and share with you. (Ps=photoshop, Ai=illustrator)

First, draw the edge of a clear "shape layer"

We usually draw rectangles in PS using the "rectangular tool", this produces a vector-shaped layer, and the advantage is that we maintain the vector properties regardless of the magnification, but when we zoom in on the view there is a virtual edge (above), these virtual edges while drawing large graphics, the effect is not too large, But when we draw very small pixel-level icons, it's obvious.

The workaround is to select the Snap pixels option listed in the following figure, and when we draw the same rectangle, the enlarged view is clearly distinguishable (see below). The principle is: The image we display is made up of countless pixels, that is, the pixel is the smallest unit of the graph, usually when we draw the graph is not an integer pixel, such as the width is 20.5 pixels, the 0.5 pixel is less than 1 pixels, PS will be virtual edge display. When the Snap to Pixel option is selected, the width and height we draw will all be integers.

Second, the rotation of the graphic to keep the edge clear

When we rotate at the center point of the rectangle by 90 degrees, the resulting rectangle is missing two edges. What's the reason? It is known that the length of this rectangle is odd, and the width is even. This result is achieved when the pixel is not integral when rotated at the center point. The workaround is that either vertex of the four corners of the rectangle can be rotated at the center point or the width of the rectangle is odd or even. If our operation is to rotate and scale the graph, it is best to rotate and then click OK to zoom. Do not continue to determine the end of the operation, the results will be more clear.

Third, the AI glue into PS to keep the edge clear

Sometimes when we draw the icon in the AI, sticking to PS will appear the imaginary edge of the following figure, this is caused by two reasons, one is in the AI when the new file does not select the [Snap to pixel grid] option (only the AI CS5 above version has this option), so that the number of icons plotted is not the case of integers, Sticking to PS will appear imaginary edges. And then one is selected. " Snap-to-pixel grid option sticking to PS still shows a virtual edge, which is to create a selection in PS that is the same size as the icon before sticking. It's OK to stick it in, because when the icon in the pasteboard is glued to the view, the icon is pasted at the center point of the glued view, so the pasted position may not be an integer value, so there will be a dashed edge, and then we'll It's no problem to build a constituency of the same size and then stick to it. You can also select shape layers when pasting, so that later editing is more powerful.

The above methods hope that we can help, let us in the future work of each pixel can be clearly identified, hope to learn more exchanges!

Note : Please pay attention to the triple Photoshop Tutorial section for more wonderful tutorials .

Classification:

• PS Getting Started tutorial