技術(shù)資訊
網(wǎng)頁(yè)設(shè)計(jì)中的圖層疊加混合模式
2012-06-26 09:49:05
大家知道下圖中的按鈕的光效是怎么做出來(lái)的嗎?其實(shí)非常簡(jiǎn)單,新建圖層,筆刷或橢圓畫(huà)出白色,高斯模糊,再將圖層混合模式更改為圖層疊加就可以了。但是這篇文章里我們不討論具體的技術(shù),而來(lái)看看如同上面的按鈕通過(guò)白色的疊加創(chuàng)建出按鈕的高光,我們來(lái)了解一下圖層疊加模式在青島網(wǎng)站制作與青島網(wǎng)站建設(shè)中的應(yīng)用,再通過(guò)不同的實(shí)例來(lái)深層次的了解圖層疊加混合模式的基本效果,將其更自由的應(yīng)用于我們的青島網(wǎ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)建出了非常好的色彩效果,而如果不了解疊加混合模式的原理的話,很難想到用這樣的方式來(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)整色彩不太滿意的情況下,要知道通過(guò)圖層疊加的方式也能夠?qū)崿F(xiàn)的方法。
在創(chuàng)建座椅周?chē)蝗Φ母吖庑Ч希瑯邮褂昧宋以谇懊嫣岬降陌咨珗D層疊加的方法,這里使用了柔軟的筆刷來(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)色后的效果如下圖:
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網(wǎng)品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網(wǎng)站建設(shè)公司,高端網(wǎng)站定制,一站式網(wǎng)站服務(wù)——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網(wǎng)站建設(shè)——從滿足預(yù)期到走向卓越
- [2023-04-11 09:17:49] H5頁(yè)面設(shè)計(jì)開(kāi)發(fā)——移動(dòng)端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網(wǎng)站服務(wù)支持
- [2021-05-18 10:14:11] 青島網(wǎng)站建設(shè)的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網(wǎng)建設(shè)項(xiàng)目
- [2021-03-05 10:34:45] 移動(dòng)互聯(lián)時(shí)代房地產(chǎn)行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢(shì)?為什么要開(kāi)發(fā)微信小程序?
- [2021-01-08 17:28:04] 網(wǎng)站建設(shè)最容易忽略的人性化設(shè)計(jì)
- [2020-12-16 16:55:32] 建設(shè)一個(gè)常規(guī)的公司網(wǎng)站建設(shè)成本大概是多少?
延伸閱讀
- [2014-06-05 21:55:20] 如果允許此操作 網(wǎng)頁(yè)可以訪問(wèn)剪切板 并讀取最近剪切或復(fù)制的信息(已解決)
- [2011-09-29 00:31:55] 如何選擇一家好的青島網(wǎng)站設(shè)計(jì)公司
- [2015-02-09 08:56:17] 即興創(chuàng)作需要有效的設(shè)計(jì)溝通與探討
- [2014-11-10 09:27:35] 一名優(yōu)秀設(shè)計(jì)師的準(zhǔn)則及要求
- [2011-12-20 18:45:53] 網(wǎng)站PR值與網(wǎng)站內(nèi)容收錄的關(guān)系
- [2015-01-12 19:15:27] 網(wǎng)站基礎(chǔ)優(yōu)化首先學(xué)會(huì)site命令!
- [2014-09-28 10:39:40] 了解和運(yùn)用網(wǎng)頁(yè)設(shè)計(jì)中的GRUNGE
- [2011-11-08 11:03:59] 一個(gè)網(wǎng)站的基本設(shè)計(jì)原則
- [2015-01-19 09:15:54] 軟文推廣的技巧
- [2011-12-27 20:26:55] ucenter整合記事狗微博、新浪微博Xweibo、騰訊微博iweibo教程
- [2011-10-17 09:52:27] 如何解決服務(wù)器虛擬化帶來(lái)的五大難題?
- [2011-12-06 16:12:06] 新站如何快速的增加網(wǎng)站外鏈?
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島網(wǎng)頁(yè)制作 程序開(kāi)發(fā) 如何做網(wǎng)站優(yōu)化 微官網(wǎng)帶來(lái)的好處 青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) 青島網(wǎng)站營(yíng)銷(xiāo) 互聯(lián)網(wǎng) 網(wǎng)頁(yè)設(shè)計(jì) 青島開(kāi)發(fā)區(qū)建站公司 微官網(wǎng) 網(wǎng)站視覺(jué) 網(wǎng)站規(guī)劃 網(wǎng)站的速度 網(wǎng)站品牌 robots 審美 企業(yè)建站 搜索引擎蜘蛛 html和css 網(wǎng)站建設(shè)的步驟有哪些 青島IT資訊 視覺(jué)靈感 網(wǎng)站動(dòng)畫(huà) 良好的導(dǎo)航 蘋(píng)果系統(tǒng) 力圖 青島網(wǎng)絡(luò)公司 企業(yè)網(wǎng)站為什么要備案 響應(yīng)式設(shè)計(jì) 青島抖音小程序開(kāi)發(fā)