淺談Photoshop在農(nóng)寶網(wǎng)美工設(shè)計(jì)中的應(yīng)用

陸勛

摘 要：2015年12月16日至18日，在浙江烏鎮(zhèn)召開的以“互聯(lián)互通、共享共治——構(gòu)建網(wǎng)絡(luò)空間命運(yùn)共同體”為主題的第二屆互聯(lián)網(wǎng)大會上，釋放了重要信號：跨境壹號助力跨境電子商務(wù)應(yīng)對噴井發(fā)展。農(nóng)寶網(wǎng)，是江蘇南通如皋開發(fā)的一個全國性農(nóng)產(chǎn)品電子商務(wù)平臺，實(shí)現(xiàn)農(nóng)產(chǎn)品可以上網(wǎng)發(fā)布銷售、買賣交易、購買支付的全新平臺。作者作為此平臺的美工設(shè)計(jì)者，親歷了此平臺的制作，目前就設(shè)計(jì)與制作中的一些體會與感受做一些簡單的介紹，希望能與業(yè)內(nèi)從事電商平臺開發(fā)的同行們進(jìn)行交流。

關(guān)鍵詞：Photoshop；農(nóng)寶網(wǎng)；美工設(shè)計(jì)

1 LOGO的制作

LOGO圖標(biāo)是一個網(wǎng)站的形象標(biāo)志。在當(dāng)今品牌時代，一個優(yōu)秀的LOGO圖標(biāo)，不但能點(diǎn)綴界面，而且還可以加深客戶對該網(wǎng)站的印象，提高網(wǎng)站的知名度。Photoshop提供了矢量圖繪制功能。在農(nóng)寶網(wǎng)美工設(shè)計(jì)中，涉及到的LOGO制作主要是店鋪標(biāo)志。

位于農(nóng)寶網(wǎng)店鋪右上角（如圖1所示）。

制作此LOGO時，首先，本人搜集一些比較有創(chuàng)意的店鋪標(biāo)志；然后用鉛筆繪制草圖（如圖2所示）；最后在PS軟件中設(shè)定圖像尺寸為100像素×100像素，圖像模式為RGB模式，圖像分辨率為72像素/英寸，使用PS矢量圖形的制作工具，如鋼筆工具，制作的LOGO輪廓，并填充了R=255，G=0，B=0的紅顏色。最后在混合選項(xiàng)里設(shè)置相關(guān)參數(shù)，得到如圖1所示的完成效果。

2 圖片的選擇、調(diào)整與剪切

在農(nóng)寶網(wǎng)平臺店鋪裝修時，獲取農(nóng)產(chǎn)品圖片的方法可以通過攝影或者網(wǎng)絡(luò)素材庫獲得。在選擇農(nóng)產(chǎn)品圖片時，詳細(xì)挑選，如在挑選草莓圖片時，一般地，包括種植圖，開花圖，結(jié)果圖，成熟圖，包裝圖等。在制作店鋪條幅、產(chǎn)品主圖、產(chǎn)品詳情頁、產(chǎn)品幻燈片等圖片時，所挑選的圖片就可以在其中體現(xiàn)。

以制作店鋪條幅作詳細(xì)說明：店鋪條幅，即店鋪招牌，它是店鋪里第一眼被人看到的，位于農(nóng)寶網(wǎng)店鋪?zhàn)钌戏?，就如同?shí)體店鋪的招牌，店鋪條幅制作在網(wǎng)頁設(shè)計(jì)中占據(jù)著重要的地位。

（1）素材準(zhǔn)備。在制作店鋪條幅之前，首先要搜集產(chǎn)品素材，可以是通過村官拍攝獲得的產(chǎn)品圖片，也可以是網(wǎng)上素材庫里的圖片（包括JPEG、PSD文件等）。

（2）啟動Photoshop軟件，新建文件，設(shè)置相關(guān)參數(shù)，參數(shù)設(shè)置如圖3所示。

（3）參數(shù)設(shè)置完成后，生成一個尺寸為1000像素×250像素的頁面，制作者可以在頁面上根據(jù)自己的設(shè)計(jì)思維進(jìn)行制作。

在網(wǎng)絡(luò)素材庫里獲得的圖片文件，其圖像模式有時不是RGB模式，圖像分辨率也不是72像素/英寸，這就需要對圖片進(jìn)行調(diào)整。假設(shè)，在網(wǎng)絡(luò)素材庫里下載一張草莓圖片，圖像模式為CMYK模式，圖像分辨率為300像素/英寸，調(diào)整方法如下：將下載的草莓圖片在Photoshop軟件里打開，把背景圖層復(fù)制一層，在圖像菜單下的模式里將CMYK顏色改為Lab顏色，再將Lab顏色改為RGB顏色；在圖像菜單下，選擇圖像大小，勾選縮放樣式、約束比例、重定圖像像素，將分辨率改為72像素/英寸，像素大小還設(shè)置為原來大小。

把產(chǎn)品詳情頁傳到網(wǎng)上時，有時會遇到圖片太大，傳不上去的情況。此時，要對大塊圖片進(jìn)行切片，提高網(wǎng)頁下載速度。使用Photoshop的切片工具切片后，存儲時用“存儲為Web和設(shè)備所用格式”命令，切片存儲格式要求一般存為Gif或PNG格式。質(zhì)量要求高的圖片需要存儲為JPEG格式，JPG格式可以顯示更多的圖片細(xì)節(jié)。產(chǎn)品詳情頁切片步驟如下：（1）在Photoshop軟件里打開核桃內(nèi)頁

（假設(shè)尺寸為750像素×6120像素）；（2）選擇工具箱中的移動工具，

顯示界面中的標(biāo)尺，用移動工具拉出參考線，將產(chǎn)品詳情頁劃分成均勻小片；（3）劃分完成后，選擇工具箱中的切片工具，點(diǎn)擊界面中的基于參考線的切片；（4）選擇文件菜單下的“存儲為Web和設(shè)備所用格式（D）”命令，設(shè)置相關(guān)參數(shù)，點(diǎn)擊存儲，完成產(chǎn)品詳情頁的切片。

3 網(wǎng)店主題色彩的搭配

一般來講，一個網(wǎng)頁上只采用一個色系，通過調(diào)節(jié)色系中顏色的深淺來達(dá)到整體的網(wǎng)頁風(fēng)格。但是，如果把平面設(shè)計(jì)中的整體設(shè)計(jì)思想搬到網(wǎng)站設(shè)計(jì)上來，可以達(dá)到很好的平面設(shè)計(jì)效果。如純色的色塊結(jié)合淡色線條的設(shè)計(jì)：用色塊對網(wǎng)頁進(jìn)行間隔，用線條把網(wǎng)頁中的相關(guān)內(nèi)容連接起來可以增強(qiáng)網(wǎng)頁的層次感，顏色的合理搭配，網(wǎng)頁就令人賞心悅目了。

4 店商PS制作的特點(diǎn)

4.1 圖像模式不同

圖像模式指圖像所在的工作顏色空間。在制作產(chǎn)品圖片時，圖像模式設(shè)置為RGB模式，而不是CMYK模式。所有的網(wǎng)絡(luò)圖像在開始時都在RGB模式中被開發(fā)出來，RGB圖像適合于在計(jì)算機(jī)顯示器上觀看，計(jì)算機(jī)在顯示器上的再現(xiàn)顏色是通過紅、綠、藍(lán)光來實(shí)現(xiàn)的。RGB顏色空間是用色光三原色來描述物體顏色特征的。在圖像處理軟件的色彩管理系統(tǒng)中，RGB顏色模式是數(shù)字照相機(jī)、掃描儀、顯示器所使用的顏色系統(tǒng)，是一個與設(shè)備相關(guān)的顏色空間。也就是說，它們產(chǎn)生的顏色是與具體使用的設(shè)備有關(guān)的，不同設(shè)備可能使用不同的RGB三原色，混合出的效果也不會完全相同。

在RGB模式下工作，具有節(jié)省內(nèi)存，提高性能的優(yōu)點(diǎn)；此外，在RGB模式中具有更大的設(shè)備獨(dú)立性，因?yàn)镽GB色彩空間并不依賴于顯示器或油墨。不管使用的是顯示器、計(jì)算機(jī)，還是輸出設(shè)備，對圖像進(jìn)行的校正都被保留。

圖像的編輯往往要經(jīng)過許多細(xì)微的過程，比如可能要將幾幅圖像中的內(nèi)容拼合在一起，并且由于各組成部分的原色調(diào)不可能一樣，需要對它們進(jìn)行調(diào)整，也可能要使各部分以某種方式合成，并進(jìn)行過濾器處理等。

用Photoshop軟件進(jìn)行圖片制作時，使用RGB色彩模式作為其圖像處理的首選模式，其圖像擁有更多調(diào)整工具與操作指令，從而更便于彩色圖像的處理與編輯。而與之相對，采用CMYK色彩模式的圖像則有許多調(diào)整功能不能實(shí)現(xiàn)。因此，RGB色彩模式更有利于圖像的調(diào)整與處理。

4.2 圖像分辨率不同

圖像分辨率指單位長度內(nèi)包含的像素數(shù)，將決定存儲為圖像文件時的數(shù)據(jù)量，常以每英寸像素數(shù)ppi表示。像素是可在屏幕顯示的最小元素，像素與屏幕無關(guān)。在美工設(shè)計(jì)中，圖像分辨率以ppi來度量，它和圖像的寬、高尺寸一起決定了圖像文件的大小及圖像質(zhì)量。

在農(nóng)寶網(wǎng)店鋪裝修時，所制作的圖像用于屏幕上顯示，顯示屏無論多大，都是以分辨率為前提的，其分辨率只需滿足典型的顯示器分辨率（72ppi或96ppi）即可。圖像分辨率設(shè)置的越高，圖像文件越大，顯示速度就會越慢。與印前制作的圖像則不同，印前制作一般設(shè)置為300像素/英寸。

ppi值作為對顯示器像素密度的表示單位，在圖像處理軟件中普遍采用72ppi作為默認(rèn)值，因?yàn)?pt=1/72inch，這是點(diǎn)（Point）這個單位的定義，在邏輯上用一個點(diǎn)對應(yīng)一個像素，是最自然不過的事情了。

5 結(jié)束語

文章主要結(jié)合現(xiàn)實(shí)電商平臺，講述了Adobe Photoshop軟件在網(wǎng)頁設(shè)計(jì)制作中的應(yīng)用。主要講述了軟件的部分功能，主題色彩的搭配，以及軟件制作特點(diǎn)。作者作此文，主要想和印刷行業(yè)印前制作人員以及電子商務(wù)行業(yè)美工設(shè)計(jì)人員交流心得體會，以達(dá)到共同學(xué)習(xí)的目的。歡迎讀者提出意見和建議。

參考文獻(xiàn)

[1]丁瑜.Photoshop在網(wǎng)頁美工設(shè)計(jì)中的應(yīng)用研究[J].管理視窗 商業(yè)文化，2015，8.

[2]周穎梅，姜中敏.平面設(shè)計(jì)在網(wǎng)頁中的應(yīng)用[J].福建電腦，2006，4.