Photoshop中改進iOS設(shè)計流程的30個訣竅

2013-12-13 09:58:03來源:飛鳥分享作者:

在本文中我(英文原作者)總結(jié)了在photoshop中設(shè)計ios軟件時所遵守的方法。許多的技巧適用于一般的UI設(shè)計。注意:文中所提到的快捷鍵針對于Windows;Mac 用戶可,Cmd對應Crtl鍵,Opt對應Alt鍵。

在本文中我(英文原作者)總結(jié)了在photoshop中設(shè)計ios軟件時所遵守的方法。許多的技巧適用于一般的UI設(shè)計。注意:文中所提到的快捷鍵針對于Windows;Mac 用戶可,Cmd對應Crtl鍵,Opt對應Alt鍵。

1.保持尺寸為偶數(shù)

你是首先針對Retina屏幕設(shè)計然后再對標準分辨率的進行縮小是吧?為了在標準分辨率下像素仍然保持完美的呈現(xiàn),你需要保證大小和距離為偶數(shù)。具體的做法便是:基于2ps的網(wǎng)格設(shè)計。在編輯(Edit)〉首選項(Preference)〉參考線、網(wǎng)格和切片(Cuides,Grids&Slices)。更改網(wǎng)格線間隔(Gridline)和子網(wǎng)格(Subdivisions)來是使得網(wǎng)格間隔線為2px。例如:設(shè)置網(wǎng)格線間隔為64px,子網(wǎng)格為32。

\

2.混合模式只使用正常模式

在設(shè)置直接處于其他元素上面的圖層效果時,混合模式只使用正常(例如:在混合選項中投影和外發(fā)光)。使用其他的混合模式或許在Photoshop中看起來很好,但是也可能會在在保存為PNG格式之后出現(xiàn)不良的效果。

\

3.更方便的改變漸變顏色

想要更改漸變按鈕的色調(diào)(色相),而不必每次都去改變漸變的起始顏色值?下面介紹兩個方法,均可達到完全一樣的效果。

 

方法1:在漸變圖層混合選項中使用顏色疊加

  1. 創(chuàng)建一個漸變圖層。起始顏色設(shè)為淺灰和深灰色,也可以在之后調(diào)整。
  2. 為按鈕創(chuàng)建矢量蒙版。
  3. 復制矢量蒙版粘貼到漸變圖層(選擇矢量蒙版〉Ctrll+ C〉選擇漸變圖層〉Ctrl + V)
  4. 設(shè)置圖層〉矢量蒙版〉當前路徑
  5. 設(shè)置漸變圖層混合選項〉顏色疊加更改混合模式為顏色。
  6. 現(xiàn)在便可以只是更改此處的顏色來更改漸變。

\

\

方法2:在純色圖層使用漸變疊加

  1. 用你想要的顏色,創(chuàng)建一個純色的圖層。
  2. 和方法1相同。
  3. 和方法1相同。
  4. 和方法1相同。
  5. 在純色模版混合選項〉漸變疊加,設(shè)置混合模式為明度(Luminosity)。
  6. 現(xiàn)在只是改變純色模版的顏色即可改變漸變。

\

\

譯者注:上述使用了矢量蒙版,其實使用剪切蒙版也可達到相應的效果,個人認為還簡單點。

4.更多的使用徑向漸變

在導航條上疊加徑向漸變層,讓導航欄變得更為有趣。

方法1:徑向漸變工具

  1. 在導航條圖層上方新建圖層。
  2. 復制導航條圖層的矢量蒙版到剛才新建的圖層(按住Ctrl + Alt同時按鼠標左鍵拖動矢量蒙版到新圖層)。
  3. 選擇徑向漸變工具(設(shè)置漸變?yōu)橹行陌咨┒巳该鳎?/li>
  4. 在圖層中從中心到邊緣繪制漸變。
  5. 改變圖層混合模式為疊加(Overlay)設(shè)置不透明度為25%。

\

方法2:斜面和浮雕

同樣也可以使用圖層混合選項中的斜面和浮雕?梢园聪聢D所示來設(shè)置。通過調(diào)整設(shè)置來達到你想要的效果。通常調(diào)整的越為精妙效果也越為好看。

\

5.更多的使用陰影變形

Photoshop中陰影(任何的其他圖層效果)和它對應圖層可以分開。這樣便可獨立操作陰影。

  1. 選擇圖層〉圖層樣式〉創(chuàng)建圖層(譯者注:必須在對圖層使用了混合選項中的效果才能使用此命令,此步目的即是將效果和圖層分離)。
  2. 轉(zhuǎn)換圖層為智能對象(在混合選項中勾選透明形狀圖層。右擊圖層〉選擇轉(zhuǎn)換為智能對象),這樣你就可以在之后編輯效果。
  3. Ctrl + T 選擇變形。
  4. 點擊和拖動手柄來改變形狀。手柄不會對其網(wǎng)格,但可以使用網(wǎng)格作為參考對其他的手柄進行重復同樣的拖動。
  5. 往上輕移圖層直到像下圖效果。

\

\

\

\

6.使用內(nèi)發(fā)光更容易的增加精細的紋理

像下圖所示通過內(nèi)發(fā)光快速的增加紋理。

\

7.隱藏路徑

Photoshop cs6中比較惱人的一點是當你選中一個形狀圖層的時候形狀的路徑會顯示出來,并且在你操作該圖層的時候路徑會一直存在,譬如在更改圖層混合選項的時候。你和使用Ctrl + H 來隱藏所有的輔助工具(路徑、網(wǎng)格線和參考線),當然你可以按Ctrl + Shift + H只隱藏路徑。

tip7

關(guān)鍵詞:iOSPhotoshopps