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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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