在裝修旺鋪專業(yè)版的個(gè)性全屏頁(yè)頭時(shí)，發(fā)現(xiàn)存在一個(gè)問(wèn)題：插入的全屏頁(yè)頭背景圖與店鋪招牌中的圖片錯(cuò)位，沒(méi)有完美的重疊在一起，如圖顯示。
針對(duì)如何解決這個(gè)問(wèn)題，我有一些心得與大家分享，希望能幫助到碰到這個(gè)問(wèn)題的新手賣家們。
提前說(shuō)明：本人使用的是PHOTOSHOP CS2（簡(jiǎn)稱PS）中，其他版本的PS軟件同樣可以按照?qǐng)D示操作的。
第一階段：關(guān)于制作個(gè)性的全屏頁(yè)頭背景圖片，在這里就沒(méi)有必要多說(shuō)了。大家都是根據(jù)店鋪活動(dòng)制作的。親們可以參考將背景圖片大小設(shè)置為寬度1920PX，高度150PX.
第二階段：在PS 中，將全屏頁(yè)頭背景圖片中的店招部分截取出來(lái)（寬度950PX；高度150PX）。
PS打開頁(yè)頭背景圖片后，點(diǎn)擊工具面板中的‘矩形選框工具“->設(shè)置”樣式“為固定大小，寬度950PX，高度150PX。任選取虛線選區(qū)，創(chuàng)建與選區(qū)同等大小的圖層1.
選中圖層1，填充圖層內(nèi)容為方便操作的顏色。
按CTRL+D快捷鍵取消圖層1的選區(qū)，按CTRL選中圖層1和背景。
點(diǎn)擊菜單欄上的”圖層“->”對(duì)齊“->”水平居中“。這樣可以正確截取背景圖片中店招的內(nèi)容。
在圖層面板中，選中圖層1，按住CTRL鍵不放，再次點(diǎn)擊圖層1，完成對(duì)圖層1的全選，形成寬度950PX、高度150PX的選區(qū)->刪除圖層1.
刪除圖層1后，虛線選區(qū)直接出現(xiàn)在背景中，按住CTRL+C,對(duì)背景中店招部分的圖片進(jìn)行復(fù)制。
點(diǎn)擊文件->新建->在彈出窗口，默認(rèn)設(shè)置，按確認(rèn)->生成新的圖片。
按住CTRL+v快捷鍵，將選區(qū)的內(nèi)容粘貼在新圖片文件中，自動(dòng)生成圖層1.將背景圖片店招部分的圖片截取出來(lái)，
第三階段：利用PS的切片工具，對(duì)店招圖片進(jìn)行切片；編輯切片選項(xiàng)，插入相對(duì)應(yīng)的頁(yè)面鏈接地址。
彈出如下窗口，在URL輸入頁(yè)面鏈接地址，其他默認(rèn)，按確定
對(duì)需要插入頁(yè)面鏈接的切片區(qū)域，重復(fù)第2-4步的操作。
第四階段：在ImageReady中，生成image文件夾和html網(wǎng)頁(yè)文件。
點(diǎn)擊”文件“->”在ImageReady中編輯“，打開ImageReady程序。
在ImageReady打開切片的背景圖片后，點(diǎn)擊”文件->-“將優(yōu)化結(jié)果存儲(chǔ)為（m）。
在彈出窗口中，為方便管理文件，建議如下圖新建文件夾，讓自動(dòng)生成的文件放入該文件夾。（第3步也可以不考慮操作，視個(gè)人需要）。輸入新建的文件名，同時(shí)必須將保存類型設(shè)置為”html和圖像（*.html）。
按保存即可在新創(chuàng)建的文件夾里自動(dòng)生成image文件夾和HTML網(wǎng)頁(yè)。
雙擊打開image文件夾，看到自動(dòng)生成的都是GIF圖片。
第五階段：針對(duì)image文件夾中的每一個(gè)GIF圖片，在PS中，制作與其同等大小的PNG圖片。
在PS中，打開image文件夾里的gif圖片，按住CTRL+A，全選，再按住CTRL+C,復(fù)制選區(qū)的內(nèi)容。點(diǎn)擊“文件”->“新建”。
彈出對(duì)話窗口，背景內(nèi)容必須設(shè)置為透明。按確定后，生成背景透明的圖片。
將圖片存儲(chǔ)為WEB所用格式，保存圖片為PNG圖片。
在彈出的對(duì)話框中， 圖片格式必須設(shè)置為“PNG-8”，按存儲(chǔ)。
彈出“將優(yōu)化結(jié)果存儲(chǔ)為”窗口，建議新建的png圖片命名與同等大小的gif圖片命名一樣，方便后續(xù)網(wǎng)頁(yè)代碼中圖片地址的替換。保存類型必須為：PNG格式。
針對(duì)其他的GIF圖片，重復(fù)第1-11步的操作，生成同等大小的PNG圖片。操作完畢，將新建的PNG圖片都上傳至圖片空間。
第六階段：將網(wǎng)頁(yè)代碼中原先的GIF圖片替換成PNG圖片。
用記事本方式打開網(wǎng)頁(yè)代碼進(jìn)行編輯。
進(jìn)入圖片空間，復(fù)制PNG圖片地址，再返回記事本中替換GIF圖片地址。
第七階段：制作透明店招
所有png圖片地址替換后，復(fù)制整個(gè)代碼。登錄店鋪裝修頁(yè)面，從首頁(yè)進(jìn)去店鋪招牌編輯窗口。
透明店招的效果如下圖：
第八階段：插入頁(yè)頭全屏背景圖片
保存的全屏效果如下；
樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源： 透明個(gè)性店招完美呈現(xiàn)的打造過(guò)程
