最近又有幾位朋友關(guān)注了秀色可燦，所以我這里再次溫馨提示下：本公眾號(hào)是燦燦給電商設(shè)計(jì)小白寫的免費(fèi)教程，更新時(shí)間是每周五晚上。如遇到身體狀況或者突發(fā)情況，周五未見(jiàn)更新，大家直接跳到下周五即可。不用等待。畢竟我是個(gè)實(shí)在人，不想浪費(fèi)大家的時(shí)間。
好了。上周我們已經(jīng)知道了如何熱點(diǎn)裝修店招，那么這周呢，我們?cè)倭私庀氯绾窝b修異形店招。
所謂異形店招呢，就是跟普通的、我們常見(jiàn)的店招不太一樣。我們常見(jiàn)的店招呢，高度一般都是120p+30px,如下圖所示那樣：
那么這周呢，我們來(lái)嘗試另一種店招的裝修方法：
廢話不多說(shuō)，先準(zhǔn)備一個(gè)異形店招（我隨便找了個(gè)給大家做示范）：以淘寶店鋪店招為例：
首先，第一步，導(dǎo)出整張店招，保存到桌面。
路徑：PS菜單欄“文件”——“導(dǎo)出”——“存儲(chǔ)為Web所用格式（舊版）”——存儲(chǔ)到桌面——存儲(chǔ)為JPEG即可(也可以按快捷鍵：三鍵“Ctrl”+“Shift”+“Alt”+S存儲(chǔ))。
第二步，新建兩條參考線。
“視圖”——“新建參考線”——選擇“垂直”——輸入“485px”；同樣的方法，再新建一條參考線,輸入“1435px”。至于為什么是這兩個(gè)數(shù)值呢，上周的教程里我有寫，不懂的可以點(diǎn)開(kāi)下面的鏈接看下。這里我就不做重復(fù)。
然后PS現(xiàn)在是這個(gè)樣子的：
選擇裁剪工具，裁剪到參考線的位置。
裁好后，如下圖。中間應(yīng)該是950px。（查看方式：點(diǎn)擊菜單欄“圖像”——“圖像大小”查看）。我現(xiàn)在是以淘寶為例，那么寬度是950px沒(méi)錯(cuò)的。
接著選擇切片工具。（我們是用切片去添加鏈接，而不是熱點(diǎn)。）
框選店招切片。(用切片工具框選要特別注意，不要交錯(cuò)，不要在中間留下縫隙）
導(dǎo)出，并且保存為“HTML和圖像”。
“文件”——“導(dǎo)出”——“存儲(chǔ)為web所用格式”——“存儲(chǔ)”——存儲(chǔ)位置選擇桌面——格式選擇“HTML和圖像”——點(diǎn)擊“保存”。
這時(shí)候，桌面上就有這兩個(gè)了。
切完之后檢查下?。ㄟ@個(gè)很重要！)
切好之后打開(kāi)images文件夾是這樣子的：
沒(méi)切好（來(lái)個(gè)錯(cuò)誤的示范），下圖就是切片沒(méi)切好，留下了一堆縫隙，大家千萬(wàn)要注意?。ㄔ趇mages文件夾里查看）
接著登錄淘寶。
打開(kāi)淘寶后臺(tái)，進(jìn)入圖片空間，新建一個(gè)文件夾“秀色可燦全屏店招”，將“images”文件夾里的圖片上傳到圖片空間。
回到桌面。直接把秀色可燦這個(gè)圖標(biāo)拖到DW軟件里。
然后DW現(xiàn)在是這樣的。點(diǎn)擊拆分。
然后找到“table”這個(gè)英文。（這個(gè)單詞是盒子的意思）我們先看前面，我們找到這個(gè)“table”，然后把“table”之前的代碼（不包含"table"）全部刪除。
接著我們滑動(dòng)到最下面，同樣找到“table”這個(gè)英文，然后把“table”之后的代碼（不包含"table"）全部刪除。
接著點(diǎn)擊選中第一張切片。
然后進(jìn)入淘寶后臺(tái)圖片空間，復(fù)制這張切片的網(wǎng)址。（第2個(gè)按鈕就是復(fù)制鏈接）
回到DW，刪除如圖所示紅框內(nèi)所有文字，一定要?jiǎng)h除干凈！
然后粘貼我們剛剛復(fù)制的代碼
接著點(diǎn)擊選中第二張切片。
然后進(jìn)入淘寶后臺(tái)圖片空間，復(fù)制這張切片的網(wǎng)址。（第2個(gè)按鈕就是復(fù)制鏈接）
回到DW，刪除如圖所示紅框內(nèi)所有文字，一定要?jiǎng)h除干凈！
然后粘貼我們剛剛復(fù)制的代碼
其余的切片都是同樣的方法，這里我不過(guò)多的重復(fù)說(shuō)明了。
現(xiàn)在我全部替換完了。（你們慢慢換，嘿嘿！
）
接著選中切片，我們分別給對(duì)應(yīng)的切片添加鏈接（就是點(diǎn)了這個(gè)切片后跳轉(zhuǎn)的網(wǎng)絡(luò)鏈接地址）。比如，我選中“返回首頁(yè)”，那么我就要復(fù)制店鋪首頁(yè)的鏈接：
店鋪首頁(yè)鏈接的獲取路徑：淘寶后臺(tái)——店鋪管理——查看淘寶店鋪——打開(kāi)網(wǎng)頁(yè)后復(fù)制這個(gè)地址即可
進(jìn)入DW，在如圖所示“鏈接”這個(gè)框內(nèi)粘貼剛剛復(fù)制的網(wǎng)址，目標(biāo)選擇＿blank：
接下來(lái)是其他需要添加鏈接的切片，你需要給哪個(gè)切片，就選擇哪個(gè)切片，然后在DW下發(fā)“鏈接”一欄里粘貼對(duì)應(yīng)的鏈接網(wǎng)址。這里我就不重復(fù)啰嗦了，大家自己去操作即可。
我們做店招添加的鏈接，往往是很多的（因?yàn)橛械牡赇亴?dǎo)航分類很多），有時(shí)候甚至比首頁(yè)需要添加的鏈接都要多，這里需要大家多多耐心與仔細(xì)。
鏈接全部添加完成后挨個(gè)點(diǎn)擊下添加了鏈接的切片，看是否有漏掉選擇“＿blank”。然后全選所有的代碼（快捷鍵Ctrl+A），然后復(fù)制所有的代碼（Ctrl+C）。
然后進(jìn)入淘寶裝修后臺(tái)——店鋪管理——店鋪裝修——PC端——首頁(yè)——裝修頁(yè)面——找到店招的位置——編輯。
照片類型選擇“自定義招牌”，再選擇源碼符號(hào)，再粘貼剛剛復(fù)制好的代碼，高度輸入“150px”最后點(diǎn)“保存”即可。
大家看到，保存后，我們看到的店招中間是有縫隙的，那怎么解決這個(gè)問(wèn)題呢？
DW里 按 ctrl+F 查找： alt=""
替換成：alt="" 即可！
替換好后淘寶店鋪裝修免費(fèi)教程，大家看下，代碼是不是就替換好了。接著選擇全部代碼，然后再?gòu)?fù)制（拷貝）代碼，然后進(jìn)入淘寶店招的代碼區(qū)域，粘貼我們的代碼，再點(diǎn)保存。
現(xiàn)在可以看到，中間的縫隙沒(méi)有了。
然后點(diǎn)擊左側(cè)的“頁(yè)頭”，頁(yè)頭背景色不顯示（別打勾就行）淘寶店鋪裝修免費(fèi)教程，頁(yè)頭下邊距10像素選擇“關(guān)閉”，然后點(diǎn)擊“更換圖”（找到我們保存到桌面上的那整張店招：1920*150px的替換即可），然后選擇“平鋪”，選擇“居中”，然后“應(yīng)用到所有的頁(yè)面”。
然后預(yù)覽下，挨個(gè)點(diǎn)擊下你添加鏈接的地方，沒(méi)什么問(wèn)題，再點(diǎn)發(fā)布即可。
好了，到這里我們的《裝修異形店招》就完美結(jié)束了。你是否Get到了呢？
以下是之前寫的淘寶裝修干貨，大家按自己的需要點(diǎn)擊觀看，拿走不謝。
下周呢，先給大家做個(gè)預(yù)告：我們講講如何用代碼裝修動(dòng)畫店招。期待嗎？
喜歡記得關(guān)注我哦！也可以打賞燦燦，畢竟免費(fèi)給大家寫教程不容易呢~~下周五晚再見(jiàn)落！么么噠！
以上內(nèi)容由用戶投稿，彬迪地板進(jìn)行整理發(fā)布，希望對(duì)大家有所幫助，如有侵權(quán)，請(qǐng)聯(lián)系我們進(jìn)行刪除。
裝修材料一站式解決方案商
