【完美的像素】旋轉時會發生的災難

By

September 1, 2012 視覺設計 Comments

blur bird

「如果你不夠小心,在 Photoshop 中旋轉圖像時,可能會毀了你辛苦完成的作品!」

~ Marc Edward

在 Photoshop 中旋轉圖像時(這邊指順時鐘或逆時鐘旋轉 90 度的情況),如果你的圖像的長跟寬都是奇數,或者都是偶數時,並不會發生什麼問題。但是當你的圖像只有一邊為奇數時,你會得到預期之外的結果,如下圖:

 

為了更清楚的瞭解發生什麼事情,我們取一張 3X4 像素的圖形,可以發現由於旋轉中心在兩像素的鄰邊,當我們對此圖形做 90度旋轉後、原本的圖形並沒有完整落在像素範圍(灰色格線)內,因此系統就必須重新計算格線內像素的色彩(我們稱之為重新取樣),這麼一來你原本的圖形就會遭受破壞:

 

解決方法

一個快速的解決方式是,不要直接旋轉你的圖像,而是使用 Photoshop 的旋轉工具做一個方型範圍的選取,並且旋轉這個方型範圍,如此一來由於旋轉中心在像素交會處,可以得到確實填滿像素的結果:

 

更好的解決方式

在執行變形工具的時候,將旋轉中心選擇在左上方(或者任何一個角落都可以)perfectPixel_06-1,如此一來即可解決這個問題:

 

對於網頁以及 UI 介面設計師而言,一邊考慮設計之餘還得小心處理像素實在令人覺得枯燥乏味,要不斷的檢查每個像素的位置、紋理是否準確,是否被重新取樣造成模糊邊緣等等。但是如果在工作習慣上開始做一點點的小改變,就可以確保你辛苦繪製的圖形不會化為烏有。

 

參考資料:
Pixel perfect rotation by  Marc Edward

延伸閱讀:《為什麼又多了一個像素?》

網頁設計中,切圖輸出是指設計師將手邊繪製完成的原始圖稿轉換成網頁用的圖片格式、並交由下一位人員網頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯...
許多的網站都會採用標籤系統來讓使用者自己管理自己的分類。而通常,標籤系統為了讓使用者使用得更順利,會採用一種「標籤推薦系統」來幫助使用者快速的選擇自己所希望輸入...
我們的眼睛和大腦在觀察事物、接收影像刺激的時候,會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物,有時候也會產生所謂的「錯覺」。完形心理學重要的概念便...
還記得表單就像溫柔的店員嗎?我們回顧了許多設計表單要注意的概念。表單是由許多細小的元素所組合而成的集合體,標題和輸入框的排列方式有著重要的地位,標題要放在輸入框...
很久以前有一個邪惡的國王,他會將他的每個死刑犯都關在陰暗的地窖中。直到行刑的那天,國王的劊子手會將死刑犯帶到刑場中,國王會給他兩個選擇:「你可以馬上就死在劊子手...
RGB 與 CMYK 是大家很熟悉的色彩描述系統,在許多地方我們都可以發現使用這兩種方式標示色彩的色彩碼,雖然這兩種系統的組成原理不一樣,但是是可以透過轉換取得...
© 2013 Desiring Clicks. All Rights Reserved.
Top