生成web中圖片陰影效果技術(shù)研究

施艷昭

（安徽電子信息技術(shù)職業(yè)學(xué)院，安徽 蚌埠 233000）

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)絡(luò)資源在個(gè)人的學(xué)習(xí)生活中所占比例越來(lái)越大，筆者在本?！禔SP.NET動(dòng)態(tài)網(wǎng)站設(shè)計(jì)》省級(jí)精品課程網(wǎng)站開(kāi)發(fā)中深刻體會(huì)到頁(yè)面作為一個(gè)站點(diǎn)構(gòu)成的主體，它的美觀與否直接能影響用戶的使用體驗(yàn)，進(jìn)而影響站點(diǎn)的訪問(wèn)量.

讓二維網(wǎng)頁(yè)上顯示的圖片元素有立體效果，其本質(zhì)就是在圖片的右邊和底部添加深色的線條，看起來(lái)像是圖片受到光照，產(chǎn)生的陰影；利用視覺(jué)誤差產(chǎn)生立體效果.那么下面我們就來(lái)簡(jiǎn)單討論一下web頁(yè)面中使用的圖片有哪些辦法可以添加陰影效果.

1 傳統(tǒng)的photoshop處理圖片陰影技術(shù)

這種方法適用于（1）需要處理的圖片數(shù)量較少.（2）圖片在網(wǎng)頁(yè)中顯示位置及大小相對(duì)固定的情況下使用.

photoshop處理步驟如下（以下photoshop簡(jiǎn)稱為PS）

首先，我們準(zhǔn)備一張需要處理的圖片例如cup.jpg，先調(diào)整好圖像大小如300*300像素.

（1）打開(kāi)PS把原圖添加進(jìn)來(lái)

（2）新建一個(gè)比原圖高和寬都大5像素的新文件.使用圖層拖動(dòng)工具將cup.jpg拖動(dòng)到新建的圖層中后，讓左頂點(diǎn)對(duì)齊.然后在ps工具欄選擇：圖層->圖層樣式->投影，選擇投影，然后調(diào)整投影顏色、大小和角度到合適即可；然后用ctrl+e合并圖層.最后另存圖片即可得到一個(gè)帶有陰影的圖片，用html標(biāo)記將圖片添加到web頁(yè)面中后，使得web中使用的圖片帶有陰影效果（圖1）.

圖1 ps添加陰影效果圖

這種處理方法的優(yōu)點(diǎn)：（1）只要掌握ps的使用，就可以處理圖片.（2）不用修改任何代碼.

缺點(diǎn)：（1）修改了圖片原樣，增大圖片體積，如果用戶下載圖片后將獲得帶有黑邊的圖片.（2）如果web中有很多圖片需要添加該種效果的話，處理工作量大.（3）需要開(kāi)發(fā)者掌握第三方軟件ps的簡(jiǎn)單使用.

2 純css處理的陰影技術(shù)

這種方法的原理就是，利用css盒子模型，給不同網(wǎng)頁(yè)元素添加邊框，利用邊框的粗細(xì)不同和位置控制，產(chǎn)生黑色的底邊.純css圖片陰影效果，這種方法適用于：（1）圖像陰影效果要求不高；（2）網(wǎng)頁(yè)中有大量圖片需要集中處理.

該種方法步驟1.給所需要添加效果的圖片添加一個(gè)層div標(biāo)記，并且設(shè)置該標(biāo)記的class為shadow.具體代碼如下：

步驟2.給div和img兩個(gè)標(biāo)記分別設(shè)置css，實(shí)際就是添加邊框，讓div的邊框粗于img的邊框.

并且img和div中進(jìn)行填充.具體代碼

頁(yè)面顯示效果如圖2：

圖2 css方法添加陰影效果圖

該種方法還有改進(jìn)的代碼：

這種處理方式優(yōu)點(diǎn)：（1）不修改web圖片本身.（2）可以在網(wǎng)頁(yè)中批量添加圖片，完成陰影效果.這種方式缺點(diǎn)：（1）陰影效果不是的那么明顯.（2）右上頂點(diǎn)和左下頂點(diǎn)細(xì)節(jié)位置沒(méi)有陰影過(guò)渡.（3）是如果web中多個(gè)圖片大小不同，還要為每張圖片修改css代碼中width值，增大了維護(hù)成本.為了克服上述兩種方法的缺點(diǎn)，我們引入第三種處理方法.

3 ps+css處理web圖片陰影技術(shù)-洋蔥皮技術(shù)

洋蔥皮技術(shù)（onion-skin）：該種web圖片陰影處理方法，來(lái)自國(guó)外，借鑒了傳統(tǒng)動(dòng)畫(huà)制作方法.在原來(lái)的動(dòng)畫(huà)制作流程中，動(dòng)畫(huà)師經(jīng)常使用一種具有洋蔥皮特性的薄且透明的紙來(lái)繪畫(huà)圖案，這種紙如果是多張疊放在一個(gè)明亮的背景燈上面的話，繪畫(huà)在下層紙張上的圖案就會(huì)顯示在上層的紙張上，動(dòng)畫(huà)師就可以看到前面的圖案，然后按照最上層紙張上的顯現(xiàn)的圖案描繪內(nèi)容即可，提高了工作效率.

該技術(shù)原理用在網(wǎng)頁(yè)中，是因?yàn)閐iv標(biāo)記生成的容器性網(wǎng)頁(yè)元素，剛好是透明的，如果我們給一張圖片嵌套多個(gè)div標(biāo)記，那么每層div標(biāo)記包裹的內(nèi)容最后都會(huì)疊加顯示在一起.

處理步驟如下：

步驟1.我們要用ps制作3個(gè)背景陰影圖片；第一個(gè)圖片叫bg.png.為了能自適應(yīng)更大范圍的圖片自動(dòng)添加黑邊，制作這張背景圖片一般分辨率較大，我們可以使用800*800的格式.具體制作過(guò)程參考第一種辦法.大家在制作的時(shí)候中間區(qū)域可以填充白色或者透明色都可.

步驟2.在ps中分別剪切上圖右上頂點(diǎn)，和左下頂點(diǎn)陰影顏色有過(guò)渡的地方，5*5像素即可.分別叫right-top.jpg left-bottom.jpg.在剪切上面bg.jpg圖片時(shí)候，有技巧，在ps中按住ctrl鍵和“+”號(hào)鍵，直到圖層顯示不再放大，把圖片顯示區(qū)域移動(dòng)到左下頂點(diǎn)或者右上頂點(diǎn)去剪切有顏色漸變的位置的圖片.如下圖3所示：

圖3 裁剪過(guò)渡陰影背景

剪切獲得方框范圍內(nèi)的背景透明有顏色漸變圖片，保存為jpg格式，5*5像素.這兩個(gè)圖最好不要用png格式，因?yàn)閜ng格式支持透明色.透明背景的圖片疊加后不能遮擋下一層背景圖片顯示的黑邊部分.

步驟3.Html代碼部分完成3層div和圖片的嵌套代碼如下和背景陰影位置定位，否則圖片和背景是分離的，就不能使得背景圖片右側(cè)和底側(cè)的黑邊顯示在web圖片的右側(cè)和底側(cè).*/

該技術(shù)的思想：就是在img外層包裹3層div用來(lái)添加組成陰影背景的圖片.

第一層 添加比較長(zhǎng)的右側(cè)和下側(cè)的邊框陰影，使用我們制作的第一張圖片作為div的背景層使用，該背景必須以右邊下頂點(diǎn)作為對(duì)齊條件也就是設(shè)置css對(duì)齊為right bottom.

如果能接受該種效果的圖片陰影，那么就可以不繼續(xù)了.如果你覺(jué)得又頂點(diǎn)和左下頂點(diǎn)陰影效果比較生硬；那么繼續(xù)添加第二層右上的陰影過(guò)渡圖片right-top.jpg，對(duì)齊right top.第三層添加左下的陰影過(guò)渡圖片left-bottom.jpg，對(duì)齊left bottom.

這些設(shè)置完成后，只要把圖片包裹在三層div中就可以完成自動(dòng)添加圖片陰影效果.如:圖4就是在web頁(yè)面中添加了3張不同大小圖片后的效果.

圖4 “洋蔥皮”技術(shù)自動(dòng)匹配圖像陰影效果

這種技術(shù)組合運(yùn)用，1.解決了網(wǎng)頁(yè)中大量圖片陰影成批生成的問(wèn)題，提高效率.2.該方法還不破壞原圖大小和結(jié)構(gòu).3.解決不同大小的圖片陰影自動(dòng)適應(yīng)的問(wèn)題.是我們快速給網(wǎng)頁(yè)大量圖片添加陰影效果的一種便捷辦法.4.在web頁(yè)面內(nèi)添加大量的帶陰影效果的圖片后，網(wǎng)頁(yè)的體積不會(huì)像方法一種增大這么明顯；有較好的代碼重用率.

以上通過(guò)三種圖片陰影呈現(xiàn)技術(shù)的介紹，我們了解了各自的優(yōu)缺點(diǎn)，可以在具體的項(xiàng)目中靈活選擇.

〔1〕陸凌牛.HTM L5與CSS3權(quán)威指南上[M].北京：機(jī)械工業(yè)出版社，2013.150-151.

〔2〕神龍影像．Photoshop CS6中文版平面設(shè)計(jì)實(shí)戰(zhàn)從入門(mén)到精通 [M].北京：人民郵電出版社，2013.122-123.

〔3〕張良彩.淺談Photoshop印前圖像處理技巧之扣圖[J]．電腦知識(shí)與技術(shù)，2014.