How to keep pixel perfect in Photoshop

When designing Web pages and program interfaces, most designers are worn out to ensure that each pixel's color, texture, and position are accurately presented. Accidentally, some of the most commonly used operations such as moving, rotating and pasting will make your hard work to naught. However, if you can make some small changes to your workflow, you can always keep the quality of the work in the project.

　　Pixel Perfect Rotation

If you're not careful, rotating layers in Photoshop can cause the pixels to be significantly corrupted and blurry.

When you use the Free Transform tool (or other tools) to rotate the layer exactly 90 degrees or 270 degrees, the final display of the pixel depends on the size of the layer. If the width and height of the layer are even, you can survive. If the width and height of the layer are odd, there is no problem. But if the width of the layer is odd, the height is even or the width is even, the height is odd, then you will see the following scenario:

In this example, the original layer is 20x9 pixel: even x odd. Although bitmaps and vector layers do not have the same effect after rotation, they become unusable. This is caused by the fact that the center point of the layer rotation does not fall on a pixel boundary.

　　One way to solve this problem

When the height of the layer is odd x even or even x odd, the problem occurs after the rotation. Therefore, we need some way to ensure that the width of the layer is even x even or odd x odd. Perhaps the solution you've come up with is to add a square bitmap mask to the layer you want to rotate or more pixels. In addition, you can solve this problem by drawing a square on another layer and then rotating the original layer at the same time.

All in all, as long as the layer's width is even x even or odd x odd.

　　A simpler way

When using the free transform tool, moving the center point of the rotation to the upper-left corner (or any of the other corners) ensures that it falls on the edge of a pixel, ensuring that the result is perfect each time it rotates. To do this, you will need to select the Free transform tool and then rotate it by clicking on any of the top corners on the reference point Settings button. This is by far the simplest and most effective method.

Bitmap masks and vector masks can also be affected by this problem, so be careful to use them. But in fact it only affects those layers that rotate through the "free transform" or "transform" in the Edit menu. This problem does not occur if you rotate the entire canvas by using image → image rotation.

To make the job easier, I've crafted some Photoshop actions and workflows for you.

　　Pixel Perfect vector pasting

If you draw a pixel-aligned image in the illustrator and paste it into Photoshop as a shape layer, you may have noticed that the results are not just as expected (an absolutely clear picture), but bad. Here's how to solve the problem.

The image below is the perfect structure in illustrator, with pixels aligned to the grid, and the size is exactly what we want to use in Photoshop.

Here's how the same path is pasted several times to Photoshop. Obviously, only the upper left figure is clear, and the pixels of the other graphs are offset by half a pixel either along the x-axis or along the y-axis or two directions.

　　Where did it go wrong?

Photoshop is pasted in two different ways. If you draw a selection in advance, the contents of the Clipboard are pasted and the center aligns with the center of the selection. If no selection is drawn, the paste is aligned with the center of the view. The extent to which your document is scaled and where the view is located in the document can affect the final effect.

　　One way to solve this problem

The test in this example is 32 pixels wide and 12 pixels high. Drawing a rectangular selection of 32x12 pixels in Photoshop and pasting it can force pixels to be positioned exactly where we need it and to align the grid. This method worked.

　　A simpler way

In fact, the rectangular constituency does not need to match the size of your original image. In this case, a 2x2 pixel-size selection is also valid because the center of a rectangular selection with an even number of rectangles with an even-high number of contents of the Clipboard is accurately landed on the edge of a pixel, which is exactly what we want. If the original width and height of the same is odd, then a 1x1 pixel rectangular selection is OK.

If you're not too busy with the original size you want to paste, draw a rectangular selection of the right size, such as a 2x2 pixel selection and paste. If the image only blurs along the x-axis, change the selection to 1x2 pixels and paste. If you only blur along the Y axis, change the selection to 2x1 pixels and paste. If a blur occurs along the x-axis and y-axis, change the selection to 1x1 pixels and paste.

This may sound complicated, but it's very fast in practice, and you can get a clear, sharp vector path from the illustrator by pasting up to two times.

　　Smart objects

Pasting an element into a smart object does not appear as a problem (at least not in Photoshop CS5). But I like to use shape layers because they allow for more manipulation and editing as well as better anti-aliasing.

　　Pixel Perfect Vector trimmer

When you fine-tune anchor points, Photoshop behaves strangely and is related to how much you zoom in on the view. When scaled to 100%, using the direct selection tool for fine-tuning will make your vector points move exactly one pixel. When zoomed to 200%, fine tuning will move the vector point half a pixel. When zoomed to 300%, move 1/3 pixels.

This behavior seems purposeful, but it's not what I often want. Most of the time, I need pixels to be fine-tuned in an integer-scale way. Here's how you can do this without shrinking the window to 100%.

Open your document and create a second window by opening the window → arrange → for xx new window. You can adjust the size and position of the new window.

Edit in the new window as you normally would, and enlarge the view randomly. Now you can press CTRL + ' cut to the window where the view is scaled to 100%, select the direct Selection tool, and press CTRL + ' to trim it back. Because the view is indented to 100% in another window, fine-tuning in a new window only moves the selected vector point one pixel.

Note that if you hold down the SHIFT key and fine-tune with the direct selection tool, the anchor will move at 10 pixel levels, no matter how much your view is magnified. Also, in most cases, dragging an anchor point with the mouse allows the pixel to snap to the grid, but not always.

　　Take control of your pixel

Using the right techniques makes it easy and simple to place pixels in a precise way. Remember, you're the one who's in control. You are the one who commands the pixels and makes them neat. Reject pixels that are not perfect.

Note : More attention to Photoshop tutorial section, triple PS tutorial Group: 181754111 welcome you to join

Category:

• PS Getting Started Tutorial