淘寶店鋪裝修 讓新旺鋪完美再現(xiàn)旗艦版旺鋪的全屏海報(bào)效果

轉(zhuǎn)眼新旺鋪已經(jīng)測試到了尾聲，已逐步開放共公測試，總的來說，新旺鋪相比以前的幾種旺鋪版本，功能更更加強(qiáng)大，只要你想，打造一個(gè)獨(dú)立的網(wǎng)站也能做到，與拓展版不遑多讓。

但是新旺鋪默認(rèn)是不能使用通欄海報(bào)功能的，這對于一些追求完美效果的用戶來說，不能不說是一種遺憾，不過還好，它提供了背景地圖更換功能，這樣就可以讓我們通過拼接的方式，實(shí)現(xiàn)全屏海報(bào)的效果。

下面我們一起來看看具體是如何實(shí)現(xiàn)的：

第一步：首先要做的就是設(shè)計(jì)一張全屏海報(bào)效果圖，其寬度最好是1920（1920×1080是高清分辨率，27英寸顯示器都能使用，所以基本不用擔(dān)心有顧客不能完全看清我們的背景海報(bào)），如下圖所示。

第二步：需要注意，新旺鋪中設(shè)置的背景圖像尺寸，是要包含店招區(qū)域在內(nèi)的，也就是店招默認(rèn)高度150，那么我們?yōu)榱送暾@示圖像效果，就需要在當(dāng)前高度基礎(chǔ)上，在加上150像素的高度，如下圖所示。

第三步：現(xiàn)在我們的圖像在最上方增加了150高度的空白圖像，但是為方便更多主流用戶觀看海報(bào)效果，這里還需要處理一下圖像的寬度（1920太寬了。。一般主流顯示器都在筆記本14寸、臺式機(jī)22寸之間），因此，這里需要在當(dāng)前圖像中，在圖像正中區(qū)域處理一塊1450像素寬度的區(qū)域出來，這個(gè)區(qū)域?qū)⑹俏覀兒?bào)的主要顯示區(qū)域，而這個(gè)區(qū)域以外，則主要是進(jìn)行過渡處理，這樣做的后果就是，能夠讓所有使用不同顯示器的人群都能完美看見我們的最終效果。

 

第四步：確定區(qū)域以后，在當(dāng)前圖像層新建一個(gè)圖層蒙版，同時(shí)在其下方新建一個(gè)空白的白色圖層，如下圖所示。

第五步：設(shè)置畫筆大小和不透明度、流量，最后將前景色設(shè)置為黑色，如下圖所示

 第六步：選擇“畫筆工具”，對第三步中紅色框區(qū)域外的圖像進(jìn)行涂抹，使其漸變過渡，最終保留區(qū)域內(nèi)的圖像內(nèi)容，如下圖所示。

第七步：進(jìn)入新旺鋪裝修后臺，選擇“裝修-樣式編輯-背景設(shè)置”，然后切換到“頁面設(shè)置”，單擊右側(cè)的“上傳圖片”按鈕，如下圖所示。

第八步：上傳圖像成功，背景顯示設(shè)置為“不平鋪”；背景對齊設(shè)置為“居中”，如下圖所示。

第九步：最重要的來了，這里上傳完背景圖像后，我們需要處理一個(gè)與背景圖像完全吻合的圖像，它將作為自定義模塊插入店鋪，形成海報(bào)圖像。這里提供一個(gè)小技巧，使用抓圖工具，在當(dāng)前裝修頁面中，抓取自定義模塊外側(cè)的背景圖像，如下圖所示。

第十步：將復(fù)制的圖像粘貼到PS的背景海報(bào)里，讓它和背景圖像完全吻合后，進(jìn)行裁剪，這樣處理的自定義圖片就能完美匹配背景圖像，同時(shí)需要注意，在制作前景圖像的時(shí)候，還需要在最上方預(yù)留10像素高度的空白區(qū)域，不然導(dǎo)入到自定義模塊后會變形，如下圖所示中，矩形框內(nèi)就是我們準(zhǔn)備裁剪導(dǎo)出的自定義前景圖像。

第十一步：做好上述步驟后， 直接進(jìn)行拆建，獲得前景圖像效果，并進(jìn)行保存，如下圖所示。

 

第十二步：在裝修后臺“頁面管理”中，最頂部創(chuàng)建一個(gè)自定義模塊，然后將這個(gè)前景圖像上傳到自定義區(qū)，入下圖所示。

第十三步：預(yù)覽當(dāng)前效果，發(fā)現(xiàn)還是有細(xì)微的落差，這樣前景圖和背景圖就沒有完全重合，入下圖所示。

第十四步：參照前面介紹的步驟，重新進(jìn)行修正，這個(gè)過程可能有點(diǎn)慢，需要仔細(xì)、慢慢調(diào)動，確認(rèn)前景和背景完全一致后，進(jìn)行發(fā)布，最終效果如下圖所示。

 后記：整個(gè)過程不是很好敘述，實(shí)際操作一遍后，可能更能夠理解這里的含義，當(dāng)你做好完成海報(bào)效果以后，記得保存，并用標(biāo)尺進(jìn)行位置記錄，以后更換海報(bào)，直接換圖到這里就可以直接應(yīng)用了。