網頁圖片設計技巧:製作清晰可見畫素圖片

大家在設計介面和網頁時，是不是經常碰到PS裡繪製的圖示雖然是向量的，但還是會有許多虛邊，在放大、縮小、旋轉後虛邊變的更嚴重了，或者是在AI裡繪製的精美向量圖示粘到PS裡就變虛了，我們辛苦設計的作品就這樣變”糊了”，這是我們雙眼所不允許的，我們要讓每一個畫素都清晰可辨。要解決這些問題就要理解PS畫素組成的原理，瞭解一些設定選項和使用技巧，下面和大家一塊分享。（PS=Photoshop, AI=Illustrator)

操作方法

（01）繪製邊緣清晰的「 形狀圖層 」我們通常在PS裡繪製矩形時會用 「矩形工具」，這樣產生的是向量的形狀圖層，它的好處是我們無論放大縮小時都保持向量屬性，但當我們放大檢視看時還是有虛邊（上圖），這些虛邊雖然在繪製大的圖形時影響不太大，但當我們繪製很小的畫素級圖示時，就會很明顯了。解決方法是選中下圖列出的 「對齊畫素」選項，當我們再繪製同樣的矩形時，放大檢視看邊緣就清晰可辨了（下圖）。其中的原理是：我們螢幕顯示的影象是由無數個畫素組成的，也就是說畫素是圖形的最小單位，通常當我們繪製的圖形不是整數畫素時，比如寬是20.5畫素，那0.5的畫素小於1畫素，PS就會以虛邊顯示。當選中[對齊畫素]選項時，我們繪製的寬、高將都是整數了。

（02）旋轉圖形時保持邊緣清晰當我們以矩形的中心點90度旋轉時，得到的矩形缺失了兩個邊。這是什麼原因呢？得知這個矩形的長是奇數、寬是偶數。當以中心點旋轉時畫素不能整分，所以得到這種結果。解決辦法是，可以選矩形的四個角的任一頂點為中心點旋轉，或者使矩形的長寬都為奇數或偶數值。如果我們的操作是旋轉並縮放圖形，最好是旋轉完按確定，再進行縮放。不要連續操作完再確定，這樣得到的結果會比較清晰。

（03）AI粘入PS時保持邊緣清晰當我們以矩形的中心點90度旋轉時，得到的矩形缺失了兩個邊。這是什麼原因呢？得知這個矩形的長是奇數、寬是偶數。當以中心點旋轉時畫素不能整分，所以得到這種結果。解決辦法是，可以選矩形的四個角的任一頂點為中心點旋轉，或者使矩形的長寬都為奇數或偶數值。如果我們的操作是旋轉並縮放圖形，最好是旋轉完按確定，再進行縮放。不要連續操作完再確定，這樣得到的結果會比較清晰。

（04）有時當我們在AI裡繪製了圖示後，粘到PS裡就會出現如下圖的虛邊，這是有兩種原因造成的，一是在AI裡新建檔案時沒有選中[對齊畫素網格]選項（只有AI CS5以上版本有這個選項），這樣繪製的圖示的各個數值不為整數的情況，粘到PS裡就會出現虛邊。再一個是選中了 「對齊畫素網格」選項粘到PS中依然出現虛邊，這是要在粘之前在PS中建一個與圖示大小相同的選區，再粘進來就OK了，因為PS中貼上板中的圖示粘入到檢視時，圖示是以被粘入檢視的中心點定位貼上的，這樣貼上的位置可能不是整數值，所以會出現虛邊，這時我們要建一個同樣大小的選區，再粘就沒問題了。還有貼上時選 「形狀圖層 」，這樣以後的可編輯性會比較強。