萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Photoshop教程 >> ps入門教程 >> 教你如何使用PS制作淘寶網店自定義區的切片分塊鏈接

教你如何使用PS制作淘寶網店自定義區的切片分塊鏈接

  很多賣家對網頁制作軟件並不熟悉,相對於dremaweaver軟件來說,懂PS軟件的要多一些,那麼,對於我們從未接觸過網頁制作的一些賣家來說,如何去使用PS來制作自定義區的廣告圖片切片分塊鏈接呢,那麼,優優老爸將自己所掌握的東西毫無保留的介紹給大家,希望各位都能制作出漂亮的自定義區,在此祝願大家生意興隆,全家安康!

  言歸正傳,Let's GO!

  一、先要在PS中創建寬度為730像素,高度不限,分辨率為72,顏色為RGB模式的新文檔。

01.jpg

  二、根據自己的設計風格和內容,設計好相關的圖片及版式

02.jpg

  三、點擊工具欄中的切片工具在圖像中根據自己的需要切成完成的片(越簡單越好),方法就是像創建選區一樣使用切片工具在圖像中框選,本圖我是切了三個片。(圖片中三個顏色左上角的01 02 03就是切片名稱)

03.jpg

  四、為切片創建超級鏈接(為了方便客戶直接點擊而進入產品介紹界面)

  1、打開產品的頁面,復制地址。

04.jpg

  2、回到PS中,使用切片選擇工具雙擊要建立的超級鏈接的切片。會彈出切片選項面板

05.jpg

  3、在URL地址中粘貼剛才復制的商品頁面地址,並在“目標”一欄中輸入_banck 表示“從新窗口中打開頁面”

06.jpg

  OK,利用相同的辦法,把其它切片也添加相對應的超級鏈接。

  五、保存文件。

  方法:文件菜單----存儲為web所用的格式,--再在彈出的窗口中選擇存儲---注意在格式中選擇“HTML和圖像”格式,如圖所示

07.jpg

  六、上傳圖片:我們需要將剛才保存的圖片上傳到QQ相冊裡,具體方法如下

  1、打開QQ空間相冊點擊上傳(這個相信大家都知道),找到保存的圖片:注:當我們保存為html和圖像格式後

  你在保存的地方會多出兩個文件,一個是網頁圖標的件,還有一個是images文件夾,那個images文件夾裡的就是要上傳的圖片,將裡面的圖片全部上傳到QQ相冊裡。

08.jpg

  完成後,打開剛才保存的 html格式的文件,點擊“查看”菜單--選擇“查看源文件”

09.jpg

  選中“body”到"body"之間的文字符號,右擊選擇“復制”

10.jpg

  七、打開我的拍拍中“店鋪管理”---選擇“自定義區域”並點擊右側左上角的“代碼”

11.jpg

  將剛才復制的代碼,粘貼到第一行或最後一行(注:如粘貼到第一行,則該圖片會在最上面顯示,如粘貼到結尾,則在最下面顯示)

  再次點擊“代碼”切換至圖像編輯狀態。

  此時,加入的圖片是不能顯示的。圖片顯示紅叉,如圖所示

12.jpg

  好,最後,打開QQ空間相冊,打開剛保存的圖片右擊選擇屬性,把URL地址復制一下。

11.jpg

  切換到店鋪自定義區域,右擊不能顯示的圖片,選擇屬性,然後選擇地址,把剛才QQ相冊裡的圖片地址粘貼一下,圖片就可以顯示啦,您試一下,看可以了嗎。?

12.jpg

  打完收功,保存即可。各位試一下吧,如果不行,加我QQ問我,每天18小時在線,隨時恭候大家!謝謝。

copyright © 萬盛學電腦網 all rights reserved