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