如何製作個性店招小經驗?

接著上次的簡單店招偷師來講, 這次我們來分享一些更深入的經驗. 怎麼樣才能讓我們的店招生動起來. 不死板, 內容更多呢?下面我們就來看看吧!

工具/原料

首先我們要安裝PS 和DW,這是必須工具!

其次是一個順手的瀏覽器!

方法/步驟

上一篇我們講到,看到好看的店招.我們從儲存整個網頁為圖片. 然後使用PS裁切下來. 這是最簡單的, 也是不加修飾的赤裸裸的偷師. 沒有二次創作對我們來說有害無益. 那麼, 我們如何深入加工. 將這個好的創意變成自己的呢?

如何製作個性店招小經驗

上面的例項.是我已經處理好了自己想要的所有素材. 跟原來它的樣子相差很遠.但是很符合我們自己的需要. 這時候我們就要加入創作了.

如何製作個性店招小經驗

先將只做好的店招上傳到我們的圖片空間. 然後從圖片空間裡面複製圖片到我們的dreamweaver.

如何製作個性店招小經驗

開啟dreamweaver後.我們選擇新建"html"選項, 進入操作介面之後我們點選"拆分"按鈕,得到如下效果.

如何製作個性店招小經驗

這時候我們選擇插入表格. 表格的引數是1行1列. 表格寬度960畫素 ,邊框為0畫素.得到如下程式碼和表格選項.

如何製作個性店招小經驗

如何製作個性店招小經驗

如何製作個性店招小經驗

這時候將我們從圖片空間複製得來的圖片,黏貼進表格框內. 這時候我們就要新增各種超連結了. 這時候將滑鼠移動到圖片上面之後,在介面的左下角我們可以看到一個圖片地圖,我們選擇矩形選框工具.將我們要加入超連結的元素都選框上.

如何製作個性店招小經驗

如何製作個性店招小經驗

如何新增超連結呢? 如下圖所示,我們選好元素之後,點選選框, 在右下角找到連結框. 把我們要連線到的目標地址複製進去. 在目標選項我們選擇 "_blank " 超連結文字.就成功了. 然後我們一次操作.

如何製作個性店招小經驗

最後的完成狀況就是這樣子的!我們可以載入到瀏覽器裡面去預覽一下效果!

如何製作個性店招小經驗

如何製作個性店招小經驗

最後,我們到店鋪裝修頁面. 將程式碼全部複製到店招編輯框裡面. 儲存釋出就好啦!

注意事項

內容, 個性, 店招, 招偷師,
相關問題答案