今天給大家分享的是能直觀運(yùn)用于電商設(shè)計(jì)里的一些技法。

?

接下來，就以“大促海報(bào)中，這種充滿質(zhì)感的首頁UI是如何制作的”為方向，分享一些小技巧。

之前也分享過一些方法，不過幾乎都是用手繪板隨意畫兩筆就完成了，看完總給人一種腦子會(huì)了手不會(huì)的錯(cuò)覺。

?

那么今天讓困叔僅用PS自帶的基本圖層設(shè)置，給大家解密這種充滿質(zhì)感的首頁UI如何制作。

教程有點(diǎn)細(xì)，請(qǐng)?jiān)谖輧?nèi)關(guān)好門窗仔細(xì)翻閱。

?

未成年請(qǐng)?jiān)诩议L(zhǎng)陪同下觀看。

首先我們進(jìn)行，一個(gè)圓角矩形的繪制。

?

我們確定好色彩，在這里，我選擇了更符合我氣質(zhì)的少女粉。

小編插一句：傳下去，困叔喜歡芭比少女粉！

?

接下來，進(jìn)行立體感的塑造。

?

雙擊圖層，打開圖層樣式，選擇斜面浮雕。

?

在斜面浮雕里面把亮部和暗部進(jìn)行調(diào)色處理，確定好立體面的角度數(shù)值，大家不用刻意記錄每項(xiàng)參數(shù)數(shù)值，以畫面內(nèi)最終效果為導(dǎo)向。

這樣，一層基礎(chǔ)的亞克力材質(zhì)底板效果就做出來了。

我們還可以在此基礎(chǔ)上通過圖層樣式增加一個(gè)投影，增加畫面的細(xì)節(jié)。

新建曲線，適當(dāng)壓暗，做出明暗過渡的感覺。

如果想進(jìn)一步強(qiáng)化立體感，怎么辦呢？

新建圖層，圖層模式改為柔光，強(qiáng)化邊緣轉(zhuǎn)折感。

為了增加UI細(xì)節(jié)，我們采用重復(fù)的手法，復(fù)制一個(gè)ICON，適當(dāng)縮小，疊加放在上方。

多層次的效果設(shè)計(jì)不僅運(yùn)用于標(biāo)題特效處理，在這些細(xì)小的UI處理上適當(dāng)?shù)卦黾訉哟?，可以很好地?qiáng)化整個(gè)頁面的立體質(zhì)感。

我們繼續(xù)強(qiáng)化UI細(xì)節(jié)。

?

既然是看完就直接學(xué)會(huì)的UI制作教程，我們就秉承著絕不用手繪板，絕不靠手繪的原則進(jìn)行設(shè)計(jì)。

?

打開實(shí)戰(zhàn)利器圖層樣式，勾選內(nèi)陰影，混合模式選擇正片疊底，我們強(qiáng)化UI右下方的陰影效果。

點(diǎn)擊內(nèi)陰影旁邊的加號(hào)，再增加一個(gè)內(nèi)陰影，調(diào)整顏色，進(jìn)一步強(qiáng)化陰影層次。

處理受光區(qū)也是同樣的手法，新建內(nèi)陰影，不過混合模式改為柔光或?yàn)V色，生成按鈕受光的立體感。

最后，再加一個(gè)內(nèi)陰影，混合選擇線性減淡，制作按鈕的高光區(qū)。

再勾選投影，強(qiáng)化背光區(qū)細(xì)節(jié)，你看，僅靠圖層樣式的參數(shù)調(diào)整，就能完成一個(gè)立體感按鈕90%的效果制作。

接下來，再處理一點(diǎn)點(diǎn)小細(xì)節(jié)，這次真的是一點(diǎn)點(diǎn)，比如對(duì)高光的過渡處理，以及左側(cè)的反光反射效果制作。

由于圖層樣式的添加，按鈕中缺失了一些少女粉的姿色。

?

做設(shè)計(jì)最不能忘的就是初心，如此符合我形象的少女粉怎么能褪色？

?

新建圖層，僅對(duì)頂部受光區(qū)進(jìn)行加色處理，圖層模式可以選擇正常或顏色模式，按個(gè)人喜好就好。

我們?cè)诶锩孀鲆粋€(gè)圓形的點(diǎn)擊按鈕，同樣的方法，通過增加斜面浮雕進(jìn)行調(diào)整處理，并在底部進(jìn)行加陰影處理，做好畫面的受光面。

適當(dāng)調(diào)整顏色，讓按鈕與背景差異明顯一點(diǎn)。

用多重內(nèi)陰影的調(diào)整方法，增加按鈕的高光層次感。

增加一個(gè)打勾的UI，增加購物的引導(dǎo)性，在圖層樣式中勾選內(nèi)陰影。

我們對(duì)這個(gè)按鈕編組，進(jìn)行整體的潤色處理。

還可以找一些光暈特效，用濾色模式添加到輪廓邊緣，增加UI的鮮亮效果。

最后，打上文字，同時(shí)把文字在背景板上的陰影做出來，復(fù)制一層，改為正片疊底模式，調(diào)整不透明度，略微移動(dòng)即可。

一個(gè)充滿立體感的UI就設(shè)計(jì)完成了~

放入整個(gè)畫面中來看，一個(gè)立體感的UI可以讓單調(diào)的機(jī)制區(qū)顯得更有層次，凸出的按鈕設(shè)計(jì)也能更好地聚焦消費(fèi)者的視野。

很多萌新設(shè)計(jì)師或許看不起這些細(xì)小的UI設(shè)計(jì)，但真正進(jìn)入工作中后，大家應(yīng)該都感受到了，優(yōu)秀的首頁與詳情頁中對(duì)功能UI的設(shè)計(jì)把控絲毫不遜色于主圖的制作。

對(duì)發(fā)揮空間的限制、對(duì)質(zhì)感與主圖呼應(yīng)的需求，這種UI設(shè)計(jì)有時(shí)候甚至比執(zhí)行主圖更難。

如果大家感興趣，我們可以循序漸進(jìn)，分享我們?cè)谶^往項(xiàng)目中接觸過的各種疑難雜癥式的高難度UI設(shè)計(jì)。

?

從設(shè)計(jì)理念到技法執(zhí)行，就看大家優(yōu)先更想聽哪個(gè)了~