教程文章

中级

3 分钟

创建完美像素设计

了解如何在 UI/UX 项目以及 Web、界面和其他数字设计中创建清晰线条和图稿。

您需要什么

彻底摆脱图标边缘柔化和图稿边缘模糊问题 - 创建可与像素网格自动对齐的路径,或一键实现像素网格对齐。操作方法如下。

1

设置像素对齐

首先,选择“View”(视图)>“Pixel Preview”(像素预览)。放大到 600% 或更高,将会看到像素网格。

注: 可使用“Pixel Preview”(像素预览)功能预览图稿栅格化后的效果,有助于您在栅格化的图形中控制对象的位置、大小和边缘外观。

在未选中画板任何内容的情况下,点击“Properties”(属性)面板“Snap Options”(对齐选项)中的“Snap to Pixel”(像素对齐)按钮。

2

绘制完美像素图稿

绘制图稿时,带有直边的路径和矢量形状会自动对齐像素网格。可以从一开始就确保您绘制的线条干净清晰,为您节省大量时间。

3

即使移动,图稿像素也能始终对齐

移动时,路径和形状可以始终对齐像素网格,不必担心外观发生改变。您还可以通过移动图稿,修复柔化边缘。

提示: 如果柔化边缘仍然存在,请选择“Direct Selection Tool”(直接选择工具),并将受影响的锚点或路径移至最近的像素网格。

4

大胆缩放图稿

缩放图稿时,锚点、路径和形状会自动对齐像素网格。

5

一键使任何图稿实现完美像素

对于边缘柔化的图标和边缘模糊的图稿,只需右键单击鼠标并选择“Make Pixel Perfect”(完美像素)即可实现完美像素。

:图稿中的直边看起来会更清晰,但曲线和对角线不会改善。

就是这么简单!现在就尝试一下,让您的 Web 图稿和图标变得更清晰吧。


Adobe Stock Contributors

alekseyvanin

2019年9月4日

使用 Illustrator 尝试这些教程

用矢量创建插图和其他图形。