用PS設(shè)計(jì)APP過程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣

來源:優(yōu)設(shè) 作者:kingtent 學(xué)習(xí):5810人次

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

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

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

用PS設(shè)計(jì)APP過程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣,PS教程,16xx8.com教程網(wǎng)

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

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

用PS設(shè)計(jì)APP過程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣,PS教程,16xx8.com教程網(wǎng)

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

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

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

創(chuàng)建一個(gè)漸變圖層。起始顏色設(shè)為淺灰和深灰色,也可以在之后調(diào)整。

為按鈕創(chuàng)建矢量蒙版。

復(fù)制矢量蒙版粘貼到漸變圖層(選擇矢量蒙版〉Ctrll+ C〉選擇漸變圖層〉Ctrl + V)

設(shè)置圖層〉矢量蒙版〉當(dāng)前路徑

設(shè)置漸變圖層混合選項(xiàng)〉顏色疊加更改混合模式為顏色。

現(xiàn)在便可以只是更改此處的顏色來更改漸變。

用PS設(shè)計(jì)APP過程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣,PS教程,16xx8.com教程網(wǎng)

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

用你想要的顏色,創(chuàng)建一個(gè)純色的圖層。

和方法1相同。

和方法1相同。

和方法1相同。

在純色模版混合選項(xiàng)〉漸變疊加,設(shè)置混合模式為明度(Luminosity)。

現(xiàn)在只是改變純色模版的顏色即可改變漸變。

用PS設(shè)計(jì)APP過程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣,PS教程,16xx8.com教程網(wǎng)

譯者注:上述使用了矢量蒙版,其實(shí)使用剪切蒙版也可達(dá)到相應(yīng)的效果,個(gè)人認(rèn)為還簡單點(diǎn)。

4.更多的使用徑向漸變

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

方法1:徑向漸變工具

在導(dǎo)航條圖層上方新建圖層。

復(fù)制導(dǎo)航條圖層的矢量蒙版到剛才新建的圖層(按住Ctrl + Alt同時(shí)按鼠標(biāo)左鍵拖動(dòng)矢量蒙版到新圖層)。

選擇徑向漸變工具(設(shè)置漸變?yōu)橹行陌咨┒巳该?。

在圖層中從中心到邊緣繪制漸變。

改變圖層混合模式為疊加(Overlay)設(shè)置不透明度為25%。

用PS設(shè)計(jì)APP過程中改進(jìn)IOS設(shè)計(jì)流程的30個(gè)密訣,PS教程,16xx8.com教程網(wǎng)

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
紗筱夜2019-05-06 07:50
很不錯(cuò)
過幾番ii2018-07-30 09:36
絕對(duì)好看
qq9297318122018-01-06 11:45
1保持尺寸為偶數(shù)
每人都是雙面蝶2017-05-29 01:39
回復(fù)一下
陪你聽風(fēng)1192017-05-28 04:20
努力學(xué)習(xí)

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!