讓每一個(gè)像素都清晰可辨
大家在設(shè)計(jì)界面和網(wǎng)頁(yè)時(shí),是不是經(jīng)常碰到PS里繪制的圖標(biāo)雖然是矢量的,但還是會(huì)有許多虛邊,在放大、縮小、旋轉(zhuǎn)后虛邊變的更嚴(yán)重了,或者是在AI里繪制的精美矢量圖標(biāo)粘到PS里就變虛了,我們辛苦設(shè)計(jì)的作品就這樣變“糊了”,這是我們雙眼所不允許的,我們要讓每一個(gè)像素都清晰可辨。要解決這些問(wèn)題就要理解PS像素組成的原理,了解一些設(shè)置選項(xiàng)和使用技巧,下面和大家一塊分享。(PS=Photoshop, AI=Illustrator)
1.繪制邊緣清晰的[形狀圖層]
我們通常在PS里繪制矩形時(shí)會(huì)用 [矩形工具] ,這樣產(chǎn)生的是矢量的形狀圖層,它的好處是我們無(wú)論放大縮小時(shí)都保持矢量屬性,但當(dāng)我們放大視圖看時(shí)還是有虛邊(上圖),這些虛邊雖然在繪制大的圖形時(shí)影響不太大,但當(dāng)我們繪制很小的像素級(jí)圖標(biāo)時(shí),就會(huì)很明顯了。
解決方法是選中下圖列出的 [對(duì)齊像素] 選項(xiàng),當(dāng)我們?cè)倮L制同樣的矩形時(shí),放大視圖看邊緣就清晰可辨了(下圖)。其中的原理是:我們屏幕顯示的圖像是由無(wú)數(shù)個(gè)像素組成的,也就是說(shuō)像素是圖形的最小單位,通常當(dāng)我們繪制的圖形不是整數(shù)像素時(shí),比如寬是20.5像素,那0.5的像素小于1像素,PS就會(huì)以虛邊顯示。當(dāng)選中[對(duì)齊像素]選項(xiàng)時(shí),我們繪制的寬、高將都是整數(shù)了。
2.旋轉(zhuǎn)圖形時(shí)保持邊緣清晰
當(dāng)我們以矩形的中心點(diǎn)90度旋轉(zhuǎn)時(shí),得到的矩形缺失了兩個(gè)邊。這是什么原因呢?得知這個(gè)矩形的長(zhǎng)是奇數(shù)、寬是偶數(shù)。當(dāng)以中心點(diǎn)旋轉(zhuǎn)時(shí)像素不能整分,所以得到這種結(jié)果。解決辦法是,可以選矩形的四個(gè)角的任一頂點(diǎn)為中心點(diǎn)旋轉(zhuǎn),或者使矩形的長(zhǎng)寬都為奇數(shù)或偶數(shù)值。如果我們的操作是旋轉(zhuǎn)并縮放圖形,最好是旋轉(zhuǎn)完按確定,再進(jìn)行縮放。不要連續(xù)操作完再確定,這樣得到的結(jié)果會(huì)比較清晰。
3.AI粘入PS時(shí)保持邊緣清晰
有時(shí)當(dāng)我們?cè)贏I里繪制了圖標(biāo)后,粘到PS里就會(huì)出現(xiàn)如下圖的虛邊,這是有兩種原因造成的,一是在AI里新建文件時(shí)沒(méi)有選中[對(duì)齊像素網(wǎng)格]選項(xiàng)(只有AI CS5以上版本有這個(gè)選項(xiàng)),這樣繪制的圖標(biāo)的各個(gè)數(shù)值不為整數(shù)的情況,粘到PS里就會(huì)出現(xiàn)虛邊。再一個(gè)是選中了 [對(duì)齊像素網(wǎng)格] 選項(xiàng)粘到PS中依然出現(xiàn)虛邊,這是要在粘之前在PS中建一個(gè)與圖標(biāo)大小相同的選區(qū),再粘進(jìn)來(lái)就OK了,因?yàn)镻S中粘貼板中的圖標(biāo)粘入到視圖時(shí),圖標(biāo)是以被粘入視圖的中心點(diǎn)定位粘貼的,這樣粘貼的位置可能不是整數(shù)值,所以會(huì)出現(xiàn)虛邊,這時(shí)我們要建一個(gè)同樣大小的選區(qū),再粘就沒(méi)問(wèn)題了。還有粘貼時(shí)選 [形狀圖層] ,這樣以后的可編輯性會(huì)比較強(qiáng)。
本文地址:http://m.pkvc.cn/tutorial/ps1792.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏