圖層疊加混合模式在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

很多讀者常會(huì)詢(xún)問(wèn)我類(lèi)似于上圖中的按鈕的光效是怎么做出來(lái)的？其實(shí)非常簡(jiǎn)單，新建圖層，筆刷或橢圓畫(huà)出白色，高斯模糊，再將圖層混合模式更改為圖層疊加就可以了。但是這篇文章里我們不討論具體的技術(shù)，而來(lái)看看如同上面的按鈕通過(guò)白色的疊加創(chuàng)建出按鈕的高光，我們來(lái)了解一下圖層疊加模式在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用，再通過(guò)不同的實(shí)例來(lái)深層次的了解圖層疊加混合模式的基本效果，將其更自由的應(yīng)用于我們的設(shè)計(jì)中。

案例一 圖標(biāo)設(shè)計(jì)中增加色彩的飽和度和明暗對(duì)比度

之所以會(huì)引出要討論圖層疊加混合模式的問(wèn)題，是由于我個(gè)人按照網(wǎng)上的教程在做圖標(biāo)設(shè)計(jì)練習(xí)的時(shí)候，發(fā)現(xiàn)設(shè)計(jì)師有意識(shí)的使用了圖層疊加來(lái)增加明暗的對(duì)比度，創(chuàng)建出了非常好的色彩效果，而如果不了解疊加混合模式的原理的話(huà)，很難想到用這樣的方式來(lái)完成設(shè)計(jì)。下面就是我在練習(xí)中要完成的設(shè)計(jì)，一個(gè)復(fù)古的圓形金色座椅：

在創(chuàng)建座椅的椅背過(guò)程中，設(shè)計(jì)師首先使用了角度方式的漸變疊加來(lái)創(chuàng)建椅背的金屬質(zhì)感。

接下來(lái)，他將此圖層復(fù)制了一層，放置于原圖層的上方，并將圖層混合模式更改為疊加，這里正是值得我們注意的地方，由于這一步，我們可以看到，椅背增加了整體色彩的飽和度，拉開(kāi)了高光部分和陰影部分的亮度，從而讓金色的質(zhì)感更為凸顯。當(dāng)然你完全可以通過(guò)細(xì)微的調(diào)整漸變疊加而直接實(shí)現(xiàn)下圖的效果，略過(guò)圖層疊加這一步驟，但是在初步調(diào)整色彩不太滿(mǎn)意的情況下，要知道通過(guò)圖層疊加的方式也能夠?qū)崿F(xiàn)的方法。

在創(chuàng)建座椅周?chē)蝗Φ母吖庑Ч?，同樣使用了我在前面提到的白色圖層疊加的方法，這里使用了柔軟的筆刷來(lái)完成設(shè)計(jì)效果。

案例二 Logo設(shè)計(jì)中增加元素的質(zhì)感

在這個(gè)主頁(yè)設(shè)計(jì)教程的logo創(chuàng)建中，在紅色上應(yīng)用了從黑到白的垂直漸變圖層疊加，再通過(guò)調(diào)整不透明度，從而讓logo有了鼓出的視覺(jué)效果，通過(guò)添加圖層疊加模式的作舊筆刷，讓logo看上去更有質(zhì)感，這是非常常見(jiàn)的涉及到圖標(biāo)、按鈕以及l(fā)ogo的設(shè)計(jì)步驟。

案例三：創(chuàng)建網(wǎng)頁(yè)背景場(chǎng)景，營(yíng)造整體的氛圍

在這個(gè)魔幻風(fēng)格的頁(yè)面設(shè)計(jì)中，頁(yè)面頂部紅色橢圓框起來(lái)的城堡背景也是用圖層疊加模式來(lái)實(shí)現(xiàn)的。如下圖，設(shè)計(jì)師首先找了一張和魔幻風(fēng)格契合的西班牙古堡的圖片，將其放置于文檔之后，使用通道混合調(diào)整圖層將圖片轉(zhuǎn)為灰色調(diào)，再將圖片的圖層混合模式更改為疊加模式即得到了下圖中的低調(diào)陰郁的背景。之后，設(shè)計(jì)師又給背景添加了不規(guī)則的做舊筆刷來(lái)讓整個(gè)的氛圍更濃郁。

logo左下部的氣球圖片也使用了顏色疊加的圖層模式讓氣球整體帶有背景的藍(lán)色，使其更好的融合于整個(gè)氛圍之中。氣球本來(lái)的圖片是這樣的：

覆蓋上深藍(lán)色后的效果如下圖：

文章題目：圖層疊加混合模式在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用
文章鏈接：http://muchs.cn/news31/211381.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、建站公司、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)