當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>UI設計教程>教程內(nèi)容

UI設計的PS配置技巧(3)

來源:優(yōu)設網(wǎng) 作者:不詳 學習:7183人次

超實用!UI設計師的Photoshop配置技巧

如果你是設計移動UI界面又是Photoshop新手,那么今天分享的技巧教程很適合你,雖然說是移動界面設計,但同樣適用于其它設計工作,比如網(wǎng)頁設計、平面設計等等,讓我們開始吧。

Photoshop新建文檔設置

操作:菜單 → 文件 → 新建

寬度:640像素
高度:1136像素(4英寸iPhone設備)
分辨率:72像素/英寸(ppi)
顏色模式:RGB顏色
背景內(nèi)容:白色(可選)
顏色配置文件:不要色彩管理此文件(更多顏色設置后)
像素長寬比:方形像素

配置如下圖:

超實用!UI設計師的Photoshop配置技巧
對齊設置

這個處就是當你使用圖層、形狀等操作時自動對齊網(wǎng)格,畫矢量圖不怕模糊邊緣,確保每個像素保持清晰。

設置:

菜單 → 視圖 → 對齊

菜單 → 視圖 → 對齊到 → 全部

超實用!UI設計師的Photoshop配置技巧
首選項設置

操作:菜單 → 編輯 → 首選項 → 常規(guī),建議按下圖設置

啟用輕擊平移

僅僅是一個滑移效果,占內(nèi)存又不能提高操作效率,建議關掉。

根據(jù)HUD垂直移動來改變圓形畫筆硬度

功能挺好用的,按Alt+右鍵左右/上下移動可以分別改變畫筆的大小和硬度。

將矢量工具與變換與像素網(wǎng)格對齊

強烈建議開啟這個功能,這個讓你不會產(chǎn)生半像素虛邊,十分好用。但在需要微調(diào)整時可暫時關閉它。

超實用!UI設計師的Photoshop配置技巧
文本設置

字體我一般把字體設置為犀利,如果你是Photoshop CC版本,它有一個Windows LCD/Mac LCD抗鋸齒功能,文字可以為網(wǎng)頁一樣效果了,所以建議升級到Photoshop CC吧。

操作:首先選定文本 → 字符工具(AA)選擇Windows LCD/Mac LCD

超實用!UI設計師的Photoshop配置技巧
全局光

繼蘋果iOS人機界面指南,你應該把燈光設置為90°。

操作:圖層 → 圖層樣式 → 全局光 → 90°

超實用!UI設計師的Photoshop配置技巧
網(wǎng)格設置

現(xiàn)在設計iOS界面都要兼容視網(wǎng)膜(Retina),所以我把每個網(wǎng)格設置為2像素,這樣我就不怕圖像在視網(wǎng)膜設備下變得模糊了。

操作:菜單 → 編輯 → 首選項 → 參考線、網(wǎng)格和切片,網(wǎng)格線間隔:4像素;子網(wǎng)格2。或者網(wǎng)格線間隔:2像素;子網(wǎng)格1。我喜歡前者^_^

超實用!UI設計師的Photoshop配置技巧
導出設置

不管我們是做網(wǎng)頁不審設計iOS APP應用程序時,導出圖像最好是使用”存儲為Web所用格式”來導出。

這里通過”存儲為Web格式…”導出PNG-24為例,其中默認設置比較重要,如下圖:

操作:菜單 → 文件 → 存儲為Web格式所用格式

預設:PNG-24
透明:勾選
交錯:未勾選
嵌入顏色配置文件:未勾選 (Photoshop CC版本才有)
轉換為 sRGB:未勾選
質量:兩次立方

超實用!UI設計師的Photoshop配置技巧
Retina顯示器設置

如果你是使用帶Retina視網(wǎng)膜的MacBook Pro,你應該確保你是使用2800×1800像素(1440×900點)

操作:Apple菜單 → 系統(tǒng)偏好設置 → 顯示 → 最適合顯示器

超實用!UI設計師的Photoshop配置技巧
顏色配置

顏色配置是極為復雜的一個操作,如果你不是這領域的大神,那么還是老老實實的用推薦的配置吧,這里我選擇了Marc Edwards(http://bjango.com/articles/photoshop)的顏色配置選項。

超實用!UI設計師的Photoshop配置技巧

總結

本指南針是針對UI設計的Phtoshop基本設置介紹,除了以上這些,大多數(shù)設計師都會有自己使用的自定義設置,所以如果你有一些技巧設置,歡迎在下方留言處分享給我們。

 

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
鍋里的嘻哈魚2019-01-18 06:56
學習
早餐配送2014-04-28 04:57
好像很厲害的額樣子
早餐配送2014-04-28 04:57
好像很厲害的額樣子
705122014-04-27 01:13
學習

關注大神微博加入>>

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