【完美的像素】旋转时会发生的灾难

http://dclick.cc/2012/09/01/%E3%80%90%E5%AE%8C%E7%BE%8E%E7%9A%84%E5%83%8F%E7%B4%A0%E3%80%91%E6%97%8B%E8%BD%89%E6%99%82%E6%9C%83%E7%99%BC%E7%94%9F%E7%9A%84%E7%81%BD%E9%9B%A3/

「如果你不够小心，在Photoshop 中旋转图像时，可能会毁了你辛苦完成的作品！」

～ Marc Edward

在Photoshop 中旋转图像时（这边指顺时钟或逆时钟旋转90 度的情况），如果你的图像的长跟宽都是奇数，或者都是偶数时，并不会发生什么问题。但是当你的图像只有一边为奇数时，你会得到预期之外的结果，如下图：

 

为了更清楚的了解发生什么事情，我们取一张3X4 像素的图形，可以发现由于旋转中心在两像素的邻边，当我们对此图形做90度旋转后、原本的图形并没有完整落在像素范围（灰色格线）内，因此系统就必须重新计算格线内像素的色彩（我们称之为重新取样），这么一来你原本的图形就会遭受破坏：

 

解决方法

一个快速的解决方式是，不要直接旋转你的图像，而是使用Photoshop 的旋转工具做一个方型范围的选取，并且旋转这个方型范围，如此一来由于旋转中心在像素交会处，可以得到确实填满像素的结果：

 

更好的解决方式

在执行变形工具的时候，将旋转中心选择在左上方（或者任何一个角落都可以），如此一来即可解决这个问题：

 

对于网页以及UI 介面设计师而言，一边考虑设计之余还得小心处理像素实在令人觉得枯燥乏味，要不断的检查每个像素的位置、纹理是否准确，是否被重新取样造成模糊边缘等等。但是如果在工作习惯上开始做一点点的小改变，就可以确保你辛苦绘制的图形不会化为乌有。

 

参考资料：Pixel perfect rotation by  Marc Edward

延伸阅读：《为什么又多了一个像素？》