這陣子課程在講解作品集有關(guān)的知識(shí)，在視覺(jué)實(shí)現(xiàn)的部分上，正好有同學(xué)問(wèn)了下圖這樣的圖例應(yīng)該如何設(shè)計(jì)。

想了想，這種氛圍型用圖的應(yīng)用在作品集中是必要的，同時(shí)還有大量頁(yè)面、組件的展示是需要這種傾斜的。但是目前多數(shù)人只知道如何使用 Mockup硬套，完全沒(méi)有自己獨(dú)立處理界面展示的能力，所以今天我就做一篇分享，如何使用 PS 來(lái)實(shí)現(xiàn)這種傾斜界面展示的效果。

第1步：首先要準(zhǔn)備要相關(guān)的界面

把要實(shí)現(xiàn)的界面得確定設(shè)計(jì)出來(lái)，同時(shí)準(zhǔn)備進(jìn)行切圖。切圖的邏輯即分離出之后所有需要懸浮的組件，然后將背景和這些組件分別進(jìn)行導(dǎo)出。

需要注意的是，切出來(lái)的組件是需要被強(qiáng)調(diào)的部分，也盡量是頁(yè)面中視覺(jué)效果比較突出的，如果最后效果不滿意，可以回來(lái)重新做切圖。

第2步：使用背景圖確認(rèn)傾斜角度

將上面那些切圖導(dǎo)入到 PS中，并將每個(gè)圖層創(chuàng)建成“智能對(duì)象”，確保位圖不會(huì)因?yàn)楹罄m(xù)的操作和有損耗。

選中大圖圖層，然后右鍵 “斜切”，進(jìn)入斜切模式，調(diào)整到你滿意的角度。

如果覺(jué)得自己調(diào)都不滿意，那就建議你們找一個(gè)傾斜的案例出來(lái)疊在后面，對(duì)著它做傾斜。

第3步：記錄傾斜動(dòng)作

前面的傾斜我們只傾斜了一個(gè)圖層，其它圖層還沒(méi)動(dòng)，所以我要保證后面的圖層實(shí)現(xiàn)相同的效果，就要設(shè)置相同的參數(shù)。所以要先在傾斜模式下，查看該圖層最終實(shí)現(xiàn)的傾斜數(shù)值，為了方便可以把它們微調(diào)成整數(shù)。

在這里重點(diǎn)建議大家學(xué)會(huì)使用 PS的動(dòng)作錄制功能，首先打開(kāi)動(dòng)作面板，點(diǎn)擊新建動(dòng)作按鈕，設(shè)置完參數(shù)后，再點(diǎn)擊錄制按鈕，進(jìn)入動(dòng)作錄制的狀態(tài)。

然后讓該矩形進(jìn)入傾斜編輯狀態(tài)，將參數(shù)設(shè)置成和之前想通的狀態(tài)，然后退出編輯。完成這些操作后再在動(dòng)作面板里店停止錄制，就可以保存一個(gè)制作相同傾斜角度的動(dòng)作出來(lái)，用于后面復(fù)現(xiàn)。

第4步：實(shí)現(xiàn)元素的布局

有個(gè)這個(gè)動(dòng)作，下一步就是選中其它畫(huà)面圖層，然后在動(dòng)作面板中選中該動(dòng)作點(diǎn)擊執(zhí)行，就可以生成角度一致的效果，而不是通過(guò)手動(dòng)一點(diǎn)點(diǎn)去拖。

完成所有圖層的傾斜以后，就可以手動(dòng)拖拽它們進(jìn)行排列了。建議先將它們排列出最原有的狀態(tài)（和原圖一致），如果排起來(lái)怕出錯(cuò)，可以生成一完整的成品進(jìn)去做傾斜然后對(duì)照。

這個(gè)操作是為下一步做準(zhǔn)備的，那就是等距地移動(dòng)不同的圖層。以為要實(shí)現(xiàn)懸浮效果，意味著這些圖層的水平位置和底部圖層是不一致的，如果手動(dòng)操作，那么每個(gè)組件和背景的位置關(guān)系就是不一致的，看起來(lái)會(huì)很奇怪，所以我們需要在這里對(duì)它們進(jìn)行統(tǒng)一的位移。比如往上往左移動(dòng)同等像素（Shift+方向鍵）。如果出現(xiàn)了比較不和諧的地方，再另外優(yōu)化即可。

之后，就是對(duì)需要強(qiáng)調(diào)的組件做放大的效果，使用 Ctrl/Com + T 進(jìn)入縮放模式，然后再對(duì)長(zhǎng)寬的輸入框中輸入 1.1 - 1.3 倍的數(shù)值，統(tǒng)一放大的比例。

第5步：實(shí)現(xiàn)投影的效果

懸浮的效不僅僅是位置的問(wèn)題，也需要用投影來(lái)強(qiáng)化氛圍。而優(yōu)秀的投影不是簡(jiǎn)單的雙擊圖層，在屬性欄里添加投影設(shè)置。

自然的投影需要我們手動(dòng)去處理，例如繪制一個(gè)近似的幾何圖形做模糊再疊加，或者使用原圖做模糊再疊加不同顏色作為投影，可以參考我們以前做過(guò)的這篇投影的說(shuō)明。

文章鏈接：UI 視覺(jué)教程 | 一篇教會(huì)你 APP 中的投影是如何設(shè)計(jì)的！所以，我們可以看看前后投影使用的對(duì)比：

第6步：添加背景的透明和模糊

這里可以添加背景圖了。背景圖的選擇盡量使用和當(dāng)前色系接近的，或者一些黑白灰的色系，避開(kāi)使用對(duì)比色或者大紅大綠特別刺激的。放完圖就可以把原有的圖層拖拽到合適的位置完成最終的排版。

然后，就要將主背景做透明和模糊的效果。這個(gè)效果不算必須得，但如果要實(shí)現(xiàn)，就要做幾步操作。首先原有的圖層導(dǎo)出中，刪除背景圖層。然后在PS內(nèi)獨(dú)立創(chuàng)建個(gè)同等尺寸的矩形做傾斜當(dāng)背景置于下方。

再將背景圖復(fù)制一層添加到上面這個(gè)矩形上方進(jìn)行蒙版操作，然后給出較低的透明度并模糊它，就可以實(shí)現(xiàn)毛玻璃的效果。想要效果更好可以再在上面疊加一層雜色效果。

第7步：最終的優(yōu)化和升華

以為上面那部調(diào)整完就結(jié)束了？ NO，NO，NO！

最后還可以使用一些其它的騷操作增加氛圍，你可以選擇將整個(gè)畫(huà)布導(dǎo)出成位圖，然后發(fā)手機(jī)。再在你的手機(jī)中打開(kāi)神器美圖秀秀、Snapseed、Vsco 等工具（墮落了）……

對(duì)它添聚焦或者叫模糊的效果，將對(duì)焦中心對(duì)準(zhǔn)畫(huà)布某些重要的區(qū)域，再設(shè)置模糊的參數(shù)。模糊的參數(shù)一定不要設(shè)太大，營(yíng)造一個(gè)輕微的模糊感即可。

除此之外，也可以再添加一些簡(jiǎn)單的效果，如對(duì)比度控制、銳化效果等等，這個(gè)就靠你們自己判斷了。下面是我們最后的產(chǎn)出結(jié)果。

結(jié)尾

這些技巧可以有非常多的應(yīng)用，想要讓作品集包裝質(zhì)感上的去，就一定要自己動(dòng)手去熟悉這些操作，然后就可以應(yīng)用在作品集的不同展示中去。

這兩天還在準(zhǔn)備一篇萬(wàn)字長(zhǎng)文，明晚會(huì)更新上來(lái)！

我們下篇再賤~

B端產(chǎn)品設(shè)計(jì)課程招生預(yù)約中，有提升需要的就來(lái)找我~