UI教程，UI日歷組件的設計思路。(4)

在思考中看教程——UI日歷組件PS教程

最近在群里和小伙伴們聊天，發(fā)現(xiàn)一些同學（尤其是新手）不善于學習，就算告知了方法還是要來問，最好連具體參數(shù)也說出來，更有甚者，哪怕已經(jīng)手把手的教了，換個東西又不會了。設計的東西那么多，難道一樣樣都要人手把手的教嗎？

TanghuiDesign大神說了：做設計的必定需要掌握兩把刷子：一是技術(shù)，二是思路。跟著教程做東西，其實也是個臨摹，只不過教程是手把手的教你怎么做。跟著教程走，需要注意些什么呢？狼狼認為，一個是學技術(shù)。比如這些效果是怎么做到的，這個圖的配色為什么這么贊。另一個就是總結(jié)思路。比如作圖的順序、規(guī)律、創(chuàng)意、技術(shù)的表現(xiàn)等等，這些東西最終匯成一個詞——經(jīng)驗！

親愛的小伙伴們，要養(yǎng)成善于學習的好習慣，更要把學到的東西運用到實際工作中。軟件的內(nèi)容就那么點，同樣是那么幾個軟件，為什么大神做出來的東西那么棒呢？這都是有必然的原因的。所以，努力吧，越努力越幸運！

今天和大家分享的是一個UI組件——日歷的繪制過程。整個文章不會出現(xiàn)具體參數(shù)，但我會把思路和大家分享。（注：本教程不適合新手入門學習，但可以作為研究對象來研究，思路可以借鑒。）

******************************* 我是華麗的分割線 ******************************

分解一：清新淡雅的背景

STEP1：新建畫布，置入背景素材

制作背景前，我們先來建立一個畫布。多大呢？大概這么大：

然后我們找一張高清五碼的藍天白云（其實其他的圖片也行，關(guān)鍵是得畫面明亮），直接拖進畫布（會自動生成智能對象），調(diào)整下大�。ńㄗh拉的比畫布大，為了后面的效果），比如這樣：

STEP2：模糊效果

確定后執(zhí)行濾鏡-模糊-高斯模糊（具體數(shù)值隨意，自己喜歡就行）

STEP3：用調(diào)整圖層來調(diào)色

在圖層面板添加調(diào)整圖層，我們來給這個智能對象調(diào)個色。啥？還不知道調(diào)整圖層？那請猛戳這里：《讓PSD“逆向行駛”》

我們只需要適當?shù)恼{(diào)整下色相，降低點飽和度，再增加點明度就行了，調(diào)整后是這樣的：

分解二：主體開始

STEP1：畫個簡單的軸

用矩形工具畫一個矩形的形狀圖層，注意是形狀圖層哦！然后用圖層樣式添加“漸變疊加”：

STEP2：再畫個矩形

用圓角矩形工具給日歷畫個框，圓角半徑不用很大的，小點好了。

STEP3：圖層樣式

然后添加漸變（漸變方式為“對稱”）、內(nèi)陰影（白色的陰影哦，更改混合模式就能辦到，猜猜看，怎么做？）、投影還有描邊（這個不多說了哈，純色的），新建圖層添加高光；效果如下：

STEP4：層次感來啦

復制該圖層，用鋼筆工具選中左邊的所有錨點（鋼筆，按ctrl鍵能自動切換到白箭頭，所以按住ctrl的同時框選一下就OK），往里縮一點；選中右邊的所有錨點，往里縮一點（或者直接更改寬度，然后居中一下）；再往下挪一點；復制出來的圖層挪到原圖層的下方。重復上述步驟一次，看起來有3層就差不多了。注意了！根據(jù)近實遠虛的透視原理，復制出來的圖層的投影要調(diào)整下，看起來一層比一層暗。

just like this!

STEP5：分割線

這個分割線啊，其實是很簡單的，一個深色的矩形（顏色比中心顏色稍微深點就好了），高度為1個像素，寬度和這個最上面的矩形等寬即可。然后添加圖層樣式，就是白色的投影（方法和前面的白色內(nèi)陰影一樣，內(nèi)陰影和投影可通過更改混合模式變成高光；同樣的，發(fā)光/高光也能變成暗色）。因為這個分割線比較清晰，所以投影的大小為0，距離為1（做這樣的線方法有很多，大家自己去總結(jié)）。

附：這里和大家分享一個PS的隱藏技能：雙擊形狀的路徑可以把這個形狀圖層單獨隔離開來進行編輯，從而不影響其他圖層，以防不經(jīng)意間的誤操作：

（箭頭所指的部分顯示紅色表示該功能被激活）

STEP6：添加連接軸A

其實我也不知道這玩意叫啥，暫且叫“連接軸A”吧。畫一個小小的矩形，形狀圖層哦！添加漸變疊加（盡量和分解二STEP1中的主軸貼近），加高光（還是內(nèi)陰影）和描邊。用鋼筆框選一下，選中這個矩形的所有錨點，然后鋼筆+alt+方向鍵→，復制這個矩形（在同一層中，類似布爾運算，哈�。�，位置就是這樣滴：

是不是覺得哪里和以前不一樣？對了，是左右的描邊沒了。那是怎么做到的呢？沒有柵格化用蒙版還是會有描邊吧？打開圖層樣式，勾選這個就OK 了：

然后添加蒙版，把多余的描邊蓋住就OK了。怎么樣，神奇吧！啥？你早就知道了？你不戳穿我能死��？

STEP7：連接軸B

這部分的制作方法和連接軸A類似，不同的是它有2層描邊。這個怎么做呢？首先這個還是形狀圖層。關(guān)于形狀圖層（建議使用CS6及以上版本）我們知道可以自帶描邊（描邊可以自由設置類型），一般默認為內(nèi)描邊。嗯，我們就先調(diào)整大小，然后加個形狀自帶的內(nèi)描邊，然后打開圖層樣式，添加漸變疊加，再加個外描邊。怎么樣，兩層描邊出來了吧！圖層樣式的外描邊為白色，調(diào)整描邊大小和不透明度就行了。哇哦，原來嗖依賊��！死鍋一！

用和“連接軸A”同樣的方法，在同一層里復制一個出來，調(diào)整下位置就好了。

分解三：數(shù)字及說明

STEP1：數(shù)字

選一個較粗的英文字體，調(diào)整字號及位置，添加圖層樣式：斜面和浮雕、漸變疊加及投影：

STEP2：添加蒙版

給數(shù)字添加蒙版（這里就不要勾選“圖層蒙版隱藏效果”了），大小自定，但注意要以分割線為基準，上下兩部分等距離，用鉛筆或矩形工具來把數(shù)字“攔腰斬斷”：

STEP3：標注一下

在適當?shù)奈恢糜眠m當?shù)淖痔�、字體寫上“MONTH”：

（想想這個凹進去的效果怎么做的）

STEP4：老板，打包！

我們把除去背景和最底下的主軸外，所有的圖層都選中ctrl+g整個圖層組。復制一下，移動到適當位置，更改下文字：

STEP5：老板，都打包！

做完這些后，基本上也就做完了。我們把除了背景外的所有圖層/圖層組都打包放在一個圖層組里，給這個最終的圖層組添加投影：

分解四：添加文字

然后我們寫上一些文字啥的，就全部做完了。當然了，文字不加也行。

最終效果：

想想這個視頻組件是怎么做的？

寫在最后的話：

不過，有的時候作者會犯迷糊，寫的和實際做的有出入。小伙伴們明明發(fā)現(xiàn)了這個現(xiàn)象，卻不去思考，還跟著作者去做，那怎么能成的出效果呢？這個時候就應該好好想想找方法去解決這個BUG，不管成功與否（能力問題），至少我們努力了，去思考解決問題了（態(tài)度問題）。

最后我想對伸手黨說：學會自主學習，提問歡迎，但要轉(zhuǎn)換成自己的知識；對于無恥的伸手黨，我只能說：白給你吃棗還特么嫌核大，還要臉不要臉！

最后的最后，狼狼祝愿大家早日成為學霸，登上大神的光輝寶座！