UI設計提速祕笈:Photoshop CC使用技巧

騰訊ISUX發表於2013-12-12

20131211175510136-630x360

作為工作繁忙的設計師,我們一直追求高效、敏捷地完成設計任務,那究竟要如何提升UI設計效率呢?本文將從軟體、習慣、技巧等三個方面來闡述筆者的一些心得總結。

軟體篇

工欲善其事,必先利其器。UI設計要更有效率,捷徑就是從最常使用的Photoshop(下文簡稱PS)軟體出發。

PS軟體更新很快,但出於對版本穩定性的追求,筆者並沒有新版本出來就馬上更新的習慣。而PS CC版本的出現,卻改變了筆者的看法。用好PS CC,會在設計效率方面帶來很大提升。

2013savsdv1210173701962013121dvdv0173726914

 

1.Photoshop CC精彩新功能

  • 多重形狀和路徑選擇

使用Photoshop CC提供的多重形狀和路徑選擇,可以同時選取多個路徑、形狀和向量蒙版,不需按多次滑鼠即可完成更多工。即使在擁有許多路徑的多圖層複雜影像檔案中,也可以使用新的濾鏡模式,直接在畫布上鎖定路徑 (及任何圖層)。

2013dfabb1210173827418

  • 簡易繪製虛線

PS CC不需要手工計算畫素來進行繪製虛線,虛線繪製變成基礎控制元件。

201312101savsbdb7392875

  • 文字優化

舊版本的PS在使用微軟雅黑字型時,無法清晰顯示。而PS CC 增加了WindowsLCD的文字選項,編輯文字時選擇WindowsLCD,就可在PS中獲得文字外觀的真實預覽效果。

201312dsvsbdfb1017390220

  • 背景儲存與自動復原

使用PS CC,能夠在背景儲存大型的 PS 檔案,同時還可繼續工作;也可透過全新的自動復原選項保留所做的編輯,而不會中斷工作進度。

20131210sdbhbe174102314

  • PS軟體效率更高,大型檔案處理更快

PS CC對程式碼進行了優化,軟體算效率有了很大的提升。

201312dfbfnb10174128395

  • 可編輯的圓角矩形

PS CC可以生成4個不一樣圓角的矩形,圓角設定更加精準。

2013121fsdvbdbheh0174147202

  • 更精細的描邊

描邊能精確到0.x,能做更加精緻的效果。

20131210174fdbb244904

2.簡單設定Photoshop CC

說了這麼多好處,也談談問題。在使用PS CC的過程中,筆者經常遇到假死、閃退、崩潰的問題。出現這些問題的主要原因是目前大部分使用者使用的都是機械硬碟,而從PS CS6開始就增加了一個後臺儲存的新功能,該功能的好處是定時給你的psd檔案進行儲存,但這個功能在設計的時候並沒考慮到目前大部分使用者使用的都是 7200轉速的機械硬碟。我們平時做設計稿很有可能同時開啟多個甚至數十個psd檔案,如果當前執行的十個psd檔案都同時儲存,而剛好我們也在進行PS 操作,那出現假死、閃退、崩潰的機率就非常大了。

所以為了使用更穩定,可以在使用PS CC前先做一下如下設定,關閉後臺儲存功能。

201312tntyjsew10175352302

3.Photoshop CC bug一覽表和解決方法

除了關閉後臺儲存來降低軟體崩潰的問題,這裡筆者還根據工作經驗,彙總了一些PS CC的常見問題。部分問題可以解決,但仍有部分問題只能留待下個版本的更新優化。

20131dfbhsr210175725949

習慣篇

1.同一個專案儘量在一個psd裡

在專案中統一功能塊、功能儘量儲存在同一個psd裡,日後使用會更加方便,節約在不同psd檔案裡查詢時間。

20131sdbhrt210180029172

 2.時刻保持圖層命名、歸類

良好的歸類、圖層、命名習慣,在團隊合作中psd原始檔可用度效率更高,日後修改也會節省時間。

20131dfnfn21018011225

3.儘量使用智慧物件

智慧物件好處在於合併物件後不破壞物件,同時可以讓這個合併後的物件具有可編輯特性,同時具備同步更新功能。

20131dvdbdb210180225377

4.在資料夾中加蒙版,操作一步到位

在資料夾加蒙版,再次修改的時候只需要把圖片放入資料夾即可,可以減少重複調整蒙版等工作。

2013121018dfbvdfbn0316357

 5.輸出儘量簡單

如果專案有命名標準建議以標準來命名,如專案沒命名標準建議用簡單易懂的中文命名方式命名。

2013gfnfnm1210180352162

6.安裝psd縮圖補丁

安裝PSD縮圖補丁,一目瞭然PSD檔案的內容,提高效率拒絕猜測。

201fdnfgn31210180502968

技巧篇

 1.精簡快捷鍵

如果你肯花一點點時間來練系這些快捷鍵,騰出你閒置的左手放到鍵盤上,相信這會讓你的工作更加快捷高效。

20bdbbn131210180641416

 2.設定隔離圖層快捷鍵

設定隔離圖層快捷鍵,好處在於進入了隔離圖層後不會對其他圖層進行誤操作。

技巧:進入隔離圖層後,按Ctrl可以進行對畫布中的其他圖層加入此隔離圖層。

2013121018104sdbfdn3911

 3.色階的解決辦法

我們做效果圖的時候經常會使用大面積漸變,時常會出現比較嚴重的色階問題,通常出現這些明顯色階的時候,可以通過使用高斯模糊對色階進行模糊化處理。

2fdbfgb0131210181118797

4.文字框的好處

當你需要處理一大段文字時,文字框的好處就會體現出來,它會永遠保持你字型的寬度整齊展現。

2013hmhg,1210181230662

5.對齊畫素

平時畫icon的時候會常常使用到二分一、三分一或者其他比例的線條,所以一般會對網格對齊功能進行關閉。而做介面的時候我們要求更加精準的介面,所以通常會開啟網格對齊功能。

開啟與關閉網格對齊方法:Ctrl+K 勾選“將向量工具與變化和畫素網格對齊”

201312dvdfb0181349693

6.圖形可以合併

PS CC圖形圖層集體合併後,仍然是可編輯圖形。

技巧:合併圖層快捷鍵Ctrl+e,能把選中的圖層快速合併。

2013121018drhfh1445964

說了這麼多,PS CC確實是一個有助於提升UI設計效率的好軟體。當然,以上所述僅為筆者個人經驗總結,如有錯漏歡迎指出,願與大家交流!

相關文章