摘要：本文主要講解UI設(shè)計師常用的PS工具有哪些？PS實現(xiàn)界面效果的原理是什么？最后結(jié)合網(wǎng)易新聞首頁案例進行PS操作分析講解。目的讓大家對UI設(shè)計師的工作有一個直觀的、深入的認知，方便后續(xù)在學習PS技能時更有針對性、效率更高。?
UI設(shè)計師常用的ps工具有哪些？
對于初學UI設(shè)計的同學來講，無論是自學還是報培訓班，往往一開始都是先從一堆ps基礎(chǔ)功能學起。 這個過程是枯燥的、痛苦的，因為都是術(shù)語理論介紹，而且不知道對UI設(shè)計有什么用？
那么，初學UI設(shè)計者如何高效的學習ps？UI設(shè)計師需要掌握哪些ps功能？
就我的工作經(jīng)驗來講，ps里面有20多個基礎(chǔ)功能，但UI設(shè)計真正常用的功能只有4個：文字、圖形、顏色、移動。
所以，如果你是想做UI設(shè)計師，只需要專注的、深入的研究這4個功能就行了，不需要一開始就研究PS所有的功能。
為什么是這四個？這個是由界面內(nèi)容和視覺元素決定的。
幾乎所有的界面，都是由文字、圖形、顏色這三大視覺元素組成的。
以網(wǎng)易新聞為例，我們來分析一下他們的界面內(nèi)容構(gòu)成。
PS實現(xiàn)界面效果的原理是什么？
前面分析了，界面內(nèi)容由文字、圖形、顏色三大視覺元素組成。
UI設(shè)計師的工作是界面內(nèi)容的排版、文字、顏色、圖形的設(shè)計
更簡單的來講，就是設(shè)計文字的大小、粗細、顏色，圖形的形狀、大小、顏色，然后在通過一定的組合原理，進行排列和組合。
這個過程怎么通過ps來實現(xiàn)的？
1.文字功能，設(shè)計文字類型、大小、粗細、顏色、行間距等等
2.圖形功能，通過圓、矩形等基礎(chǔ)圖形，運用布爾運算，設(shè)計出復雜的、新的圖形形狀
3.顏色功能，給字體、圖形賦予顏色變化
4.移動功能，通過移動字體、圖形的位置，達到舒適的排版、組合效果
5.圖層，所有的文字、圖形的設(shè)計，都是基于圖層來實現(xiàn)的，
簡單來講，圖層是盛放文字、圖形的容器，不同的文字或圖形，放到不同的圖層里面，方便復雜設(shè)計的管理。有點像居家的收納柜，
網(wǎng)易新聞首頁PS實際操作
前面講的理論邏輯，為了加深大家的理解，接下來以網(wǎng)易新聞首頁為例，看看用ps是怎么實現(xiàn)的
第一步，分析界面內(nèi)容組合邏輯
然后打開ps，新建畫布750x1334px，分辨率72，背景色白色。
第二步，繪制頭部模塊內(nèi)容
本文主要講設(shè)計思路，工具具體步驟細節(jié)可能不會很細致，如有疑問的地方，可以百度查看相關(guān)工具的教程，或者私信我。
1.新建分組，雙擊重命名-頭部，（不分組也行，但是對于復雜圖層來講，分組方便后續(xù)的管理和修改，以及同事之間的協(xié)同）
2.選中矩形工具，新建寬度750px、高度128px的填充矩形，（為什么高度是128，這個是蘋果系統(tǒng)規(guī)范），雙擊色板，修改填充色色值#d13c35，然后頂對齊。
3.新建圖層，選中文字工具，輸入網(wǎng)易 logo，打開文字面板，調(diào)整文字大小36pt，顏色白色，字體類型圓體-簡（網(wǎng)易logo是特殊字體，這里隨便找的一個字體類型），選中文字圖層，移動文字，使其距離畫布左邊距離34px，距離紅色底部-容器距離24px。（為什么是這個距離，看著舒服就行，當然這個舒服的前提是大量的實驗的結(jié)果，剛開始練習，可以不用考慮太多細節(jié)）
4.新建圖層，選中圓角矩形工具，畫出一個圓角矩形，調(diào)整圓角矩形參數(shù)：寬度w=540px，高度h=64px，圓角半徑32px，顏色調(diào)整為白色，調(diào)整圖層不透明度，由100%調(diào)整為20%，移動矩形位置，使其距離網(wǎng)易文字左邊距30px，距離紅色底部-容器距離14px。
5.選中橢圓工具，畫出26x26px大小的圓形，雙擊圖層，調(diào)出圖層樣式，選擇描邊-樣式，設(shè)置大小3px，位置內(nèi)部，然后點確定，修改圖層填充度，從100%改成0%。
新建圖層選中圓角工具，畫出10x3px大小的圓角矩形，圓角半徑1.5px，同時按ctrl+t，激活變形功能，旋轉(zhuǎn)45度，然后移動位置至圖示處，完成放大鏡圖標繪制。
6.直播圖標的繪制原理也是一樣，先新圖層，選中圓角矩形工具，繪制44x49px大小，圓角半徑8px的矩形，然后設(shè)置填充為無，描邊3px，選中鋼筆工具（關(guān)于鋼筆工具，網(wǎng)上有教程詳解），分別在左、右兩邊各添加一個錨點，然后選中這兩個錨點，按delete鍵刪除，然后選擇描邊選項-端點-圓角，最后輸入直播文字，居中對齊。
下面是過程示范和圖層樣式說明
第三步，繪制TAB導航
這個不再詳細說明步驟了，最后附件有源文件PSD，大家可以根據(jù)過程示范和PSD圖層查看。
主要應用到的技巧有：文字等分，遮罩
下面是過程示范和圖層樣式說明
第四步，繪制頭圖
主要應用到的技巧有：遮罩
下面是過程示范和圖層樣式說明
第五步，繪制內(nèi)容列表
主要應用到的技巧有：文字行高，遮罩，投影
下面是過程示范和圖層樣式說明
第六步，繪制底部圖標
主要應用到的技巧有：橢圓和矩形，結(jié)合布爾運算，然后描邊，
下面是過程示范和圖層樣式說明
最后效果和圖層展示
源文件PSD百度網(wǎng)盤地址：鏈接:?https://pan.baidu.com/s/1p0cI9LaaTzoXsNKMOcKf2Q?密碼: tmbx
希望能幫助初學者，對PS制作界面有一個直觀的了解，知道自學的PS技能，怎么應用到界面設(shè)計里面。
至于PS技能方面的教程，后續(xù)會專門更新
如果有疑問的地方，歡迎留言評論。
如果覺得對你有幫助，歡迎點贊支持一下。
其他UI設(shè)計文章鏈接
