Web Image Design Tips: Make clearly visible pixel images

Article Description: Everyone in the design of the interface and Web page, is not often encountered PS in the drawing of the icon, although it is a vector, but there will be a lot of imaginary edges, in magnification, shrink? ⑿ 笮 to Kill Lai  now Qi play  ant to steal win I draw the exquisite vector icon glued to PS in the false, we work hard design of this change "paste", This is not allowed in our eyes, we want to make every pixel

Everyone in the design of the interface and Web page, is not often encountered in the PS painted icon although it is a vector, but there will be a lot of imaginary edges, zoom in, zoom out, rotate after the virtual edge become more serious, or in the AI to draw the exquisite vector icon glued to the PS in the false, we work hard to design the works so changed "paste", This is not allowed in our eyes, we have to make each pixel clear and distinguishable. 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, which produces a vector-shaped layer, the advantage of which is that we keep the vector property regardless of the magnification, but when we zoom in on the view or have a virtual edge (above), these imaginary edges, while drawing large graphics, do not affect too much, but when we draw small pixel-level icons, it will be 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? We know 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!

Original address: Ued.focus Author: xiaoning