無損圖片的介面製作方式(下)

之前在無損圖片的介面製作方式(上) 提到製作 App 介面時會面臨各尺寸螢幕解析度不同的問題,PSD 需要放大縮小使得最後產出得切圖模糊失真。本文將介紹智慧型物件、智慧型濾鏡、在ai畫好、貼到ps的技巧、遮色片、調整圖層等不同的技巧。

智慧型物件

它可以由單層、或很多層圖層構成,影像資料可能是自點陣圖或是向量影像,或是 Illustrator 所製作的檔案。智慧型物件保留影像的來源內容,包括原先的任何特性或設定。它可以執行非破壞性的編輯,例如旋轉、縮放、扭曲、透視等等,不會因此降低圖象品質或影響原始圖檔,但可編輯的方式會受到限制。

1. 在圖層上點選滑鼠右鍵,「轉換為智慧型物件」。

2. 在智慧型圖層上點兩下左鍵,會開啟這個圖層的新視窗。

3.智慧型圖層的副檔名是.psb,能在這個視窗裡修改,儲存檔案後,原本的檔案也會隨著存檔而改變。

PS. 智慧型圖層的預覽圖會是這樣子的圖示,在圖示上點左鍵兩下可進入編輯。

智慧型濾鏡

可以任何套用到智慧型物件的濾鏡,在圖層面板中,智慧型濾鏡會顯示在所套用之「智慧型圖層」的下方。使用者能夠自由調整、移除或隱藏。

智慧型濾鏡可在「濾鏡」裡找到。

如果該圖層不是智慧型圖層、又要套用智慧型濾鏡,Photoshop 會出現提示視窗。按下確定後就會把圖層轉變為智慧型圖層,此時使用的濾鏡就會自動套用智慧型濾鏡了。

1. 以高斯模糊為例,一般圖層套用高斯模糊後就無法再次修改。但智慧型濾鏡擁有多次修改的特性。

2. 在智慧型圖層下方出現已套用的濾鏡,此時在濾鏡圖層上點2下可再次編輯修改。

3. 利用智慧型圖層和智慧型濾鏡的特性,可以多次修改不怕破壞稿件

在 AI 畫好、貼到 PS 的技巧

如果比較熟悉 Illustrator,也可以先在 Illustrator 畫好再貼到 Photoshop 也是種作法。PS 畢竟不是向量軟體,要畫向量圖在 AI 畫方便很多。拷貝貼上時 Photoshop 會出現選單,如果已經是完整的圖案時請選擇智慧型圖層,若僅是單色圖樣、要在 Photoshop 裡上色彩與材質就選擇形狀圖層。

像這種超過 1 種色彩的圖樣,建議使用智慧型圖層,雖然無法在 Photoshop 直接編輯,但能在不破壞原圖的情況下放大縮小不失真。

如果是這種很單純只有一種顏色的圖案,可以直接以形狀圖層貼上,可使用 Photoshop 的形狀工具修改。

遮色片

使用遮色片隱藏某個圖層的部分範圍及顯現位於下方的圖層。遮色片有兩種,一種是圖層遮色片,另一種是向量遮色片。圖層遮色片是以繪圖或選取工具編輯,受到解析度影響的點陣影像。向量圖遮色片則與解析度無關,由筆型或形狀工具建立而成。圖層遮色片和向量圖遮色片都是非破壞性的編輯方式,也就是說以後還可以回頭重新編輯遮色片,而不會遺失它們所隱藏的像素。

1. 向量遮色片製作方式較特別,使用形狀工具在欲製作遮色片的圖層上繪製,需注意繪製類型要是「路徑」。

2. 在該圖層上選擇圖層、向量遮色片、目前路徑。

3.未來要修改的話,一樣使用形狀工具,在向量遮色片上編輯就可以了。

一般遮色片

這種作法在放大縮小時多多少少會造成圖像邊緣不銳利,但在做大圖縮小的情況下在手機上觀看其實差不了太多,如果偷懶的話可以用這種方式…
1. 一般的遮色片製作方式更簡單,在畫面上框選出範圍。

2. 選擇圖層、圖層遮色片、顯示選取範圍。

3.完成。注意遮色片的特性都是「黑遮白秀」,編修遮色片的時候黑色部份會擋住圖像、白色部分才會把圖像露出來。

調整圖層

如果直接在圖片上執行色彩調整屬於破壞性編輯,為了保持原圖片不被改動,可使用 Photoshop 的「調整」功能。在圖片上新增調整圖層,它會將顏色和色調調整套用到影像上,但不會永久變更像素值。

1. 可以在視窗、調整裡把功能叫出來。

2. 點選調整功能,會出現很多種選擇,點選任一項會在圖層上新增該功能的圖層。

3. 如果需要調整,直接在圖層上點兩下,就會出現調整選單。這種作法無論修改再多次都不會破壞原本的圖案。

以上是我在設計 APP 介面時的各種技巧,最常用的還是形狀圖層,在 iPhone @2x 圖檔要做 Android 的 XXHDPI 時特別好用。(就是有客戶堅持 Android 的介面要和 iPhone 長一樣,講不聽,沒差我也省事。)放大不失真的技巧應該是每位 UI 設計師都該知道的「常識」,除非堅持針對每個不同解析度都要「重做」一套 PSD 檔(iOSx2,Androidx3,最少也是重做 5 次)。反正現在流行扁平化,用形狀圖層非常方便,如果你還是習慣用選取框+填色的方式做圖的話,快改用形狀圖層吧,圖片不會長毛喔!

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close