淘寶旺鋪促銷模板詳細制作過程（多圖）

紫蝶經典生活坊 2010-12-29

展開全文

首先看看效果圖。

怎么樣。還可以吧。這個模板的制作相對來說還是比較簡單的。現(xiàn)在就一步一步的來看看，怎么才能做出這個模板。
首先第一步。制作模板必備的軟件：
第一個：PS地球人都知道，處理圖片離不開他^_^
第二個：GIF Animator v5.05 漢化版，這個軟件是用來制作GIF動畫的。
第三個：ISEE。這個軟件功能很多?？梢?span id="gjpcin8" class="t_tag" href="tag.php?name=%C5%FA%C1%BF">批量處理壓縮圖片。在線DIY字體，批量加水印，
可以說這個軟件對淘寶的賣家?guī)椭艽?。在這里。我們要用到他的DIY字體。因為初學者電腦中不一定安裝了各種字體。所以，用isee來做字體比較方便。
第四個：Frontpage 2003這個是網頁制作軟件。制作模板必不可少的軟件。
以上軟件在百度和各大軟件下載站都能搜索到。在這里就不多說軟件的下載問題了。
下面我們開始制作模板。O(∩_&cap

o..
第一步。到網上去尋找素材。百度搜圖片，找到你自己喜歡的就可以。我在百度上找了這個圖片

找到圖片素材之后就可以開始摳圖了。如下圖。把你選好的素材在PS里面打開，然后放大。在工具欄選擇多邊形套索

把人物從背景中摳出來。

放大到300%后進行摳圖。

如圖。人物輪廓的虛線。這樣就選定了人物。然后Ctrl+C復制。然后Ctrl+N。這個是PS的新建圖片快捷鍵。彈出對話框

新建一個735x500的圖片，背景內容選透明，然后按確定。（735x500是旺鋪促銷欄的尺寸）
新建圖層之后。再復制一個圖層如圖

選擇圖層副本。然后選擇

漸變工具----->

在這里你可以選擇編輯自己喜歡的漸變顏色。然后在圖層副本上進行漸變

得到這樣的圖片。用來作為背景。
接下來。我們回到剛剛摳的人物圖片。把摳好的人物圖片Ctrl+C復制。然后Ctrl+V粘帖到背景圖片，

如圖所示。粘帖到你想要放的位置。然后在圖層窗口中選擇剛剛粘帖的人物圖層

如圖所示。選擇的是剛剛粘帖上去的圖層。然后鼠標右鍵----->混合選項。彈出窗口中選擇外發(fā)光打鉤

得到圖片

接下來選擇圖層1

右鍵復制圖

如圖所示。得到圖層副本2.然后用鼠標拖到漸變色背景上面如圖

然后再次復制圖層副本2

得到圖層副本3.然后。我們開始在這個圖層副本3上面制作公告欄。和寶貝展示欄

這些都是在副本3上面完成的。
下面我們來做這些小框框。首先在工具欄的設置前景色為白色

如圖。然后選擇圓角矩形工具

如圖。在上面

這里半徑填寫60。（具體數(shù)值多少可以自己選擇。數(shù)字越大。做出來的圓角越大）

如上圖所示。在圖層副本3上面用鼠標拖出這樣一個圓角矩形。（大小形狀和位置可以自己隨意選擇。自己喜歡就可以）下一步鼠標放在白色矩形上面，右鍵---->混合選項---->單擊描邊，前面的框選購。如下圖：

如圖所示做好寶貝展示欄。接下來用相同的方法做公告欄。和收藏等如圖所示

上圖就是這張模板的基本排版方式。讓我們再來看看圖層窗口

被選定的6個圖層就是剛剛做的排版。。（親們如果不喜歡這個排版的話?？梢宰约簛砼乓幌隆ｊP鍵要自己喜歡就可以。）下一步。如上圖所示，把這6個圖層選定后鼠標單擊右鍵----->柵格化圖層。得到結果如下圖：

然后繼續(xù)單擊右鍵--->合并圖層得到結果如圖：

合并之后。剛剛所有的矩形框都合并到一起了。然后點擊工具欄的魔術棒工具

用魔術棒把剛剛矩形框的白色部分選出來。。按住Shift鍵不放開。然后用魔術棒單擊白色部分。可以把白色部分都選定。如下圖：

選定之后按DEL鍵把白色部分刪除。得到下圖：

然后點擊工具欄

矩形選取框，鍵盤的快捷鍵是M。然后如上圖。還有虛線的話就鼠標單擊下虛線的選取部位。取消選取。然后鼠標右鍵--->混合選項--->如下圖所示設置

在投影，斜面和浮雕，紋理。3個選項前面的框打鉤就可以。得到如下圖：

看下放大后的圖片

OK。大概的排版就到這里。親們只要按照這個步驟下來。。一定可以做成這樣的?，F(xiàn)在來給背景圖片添加幾朵玫瑰花。。添加玫瑰花。就需要用到PS的筆刷，筆刷在網上有很多地方可以下載的。我的是在PS聯(lián)盟下載的。地址是：http://www./gongju/想要什么筆刷在上面搜下。具體安裝方法在這個網站也有說明。這里就不詳細說明了。下面我們來給背景添加幾朵玫瑰。點綴一下。在圖層窗口中選前面我們復制的圖層副本2如圖：

其實直接用筆刷。刷到背景上面也是可以的。為了方便修改。所以另外復制了圖層副本2.^_^
單擊工具欄的筆刷工具

在圖片單擊右鍵彈出窗口中選取玫瑰花筆刷。如下圖

把前景色設置成自己喜歡的顏色，如圖：

然后就可以在圖層上隨意的添加玫瑰花了?？纯聪聢D的效果：

比沒有玫瑰花要好多了吧。。下一步。我們來給圖片添加上閃亮的星星。這一步也要用到PS的筆刷。閃亮星星的筆刷在PS聯(lián)盟也有下載。親們自己去搜索下。這里不詳細敘述了。和添加玫瑰花的步驟一樣。在窗口里面選取閃亮星星的筆刷

如上圖所示。星星的大小和玫瑰的修改方法一樣。然后把前景色修改成白色如圖

然后在圖片的隨意位置點上閃亮的星星。注意。這里的星星不要點的太大。如下圖：

這樣點綴一下。要好看多了。下一步我們來做字體。電腦里面裝了各種字體的?？梢灾苯釉诶锩嫣砑幼约?。如果沒有。又不想裝的。就要用到ISEE這個軟件。他有一個在線DIY功能?？梢栽O置很多種字體。還有動畫效果。不過。我們這里用不到他的動畫效果。下面我們來看看。怎么用ISEE來做藝術字體。先打開ISEE。在首頁如圖

點擊isee部落

跳出窗口

免費注冊一下就可以登陸了。登陸之后。在首頁的上方有個在線DIY按鈕。點擊。進入在線DIY網頁如圖：

點擊后。進入DIY網頁。選取自己喜歡的字樣如下圖

在這里。我選擇了閃閃字。（在這里我們不需要他的動效文字。只要字體就可以了）進入閃閃字效果選擇。親們可以選擇自己所喜歡的效果顏色。如下圖：

隨意選擇一種。（這里我選擇了黑色的閃閃字，這樣便于在PS中把字體摳出來）進入下一步驟，按照下圖所示就可以作出漂亮的字體了：

按上圖步驟。就可以作出自己喜歡的字體了。。很簡單吧。也不用在WINDOWS里面安裝字體。對于不熟悉windows的親們來說。。這個軟件的確很有用。下面我們來處理做好的字體，用PS打開字體圖片。因為PS只能讀取GIF動畫的一個幀。所以。讀取字體時彈出窗口點擊確定。然后用魔術棒工具

進行摳圖，把字體摳出來。魔術棒放在黑色字體上單擊。選定黑色字體。然后鼠標右鍵--->選取相似。這樣。黑色字體就全部選出來了。如下圖：

選定之后。調節(jié)前景色

調節(jié)出你自己喜歡的顏色。我這里選擇白色，然后Alt+Del填充的快捷命令，將剛剛設置的前景色填充到剛剛選定的字體中。改變字體的顏色。如下圖：

看。。字體變成白色的了。只有虛線還在。下一步。按Ctrl+C復制命令----->Ctrl+V粘帖到剛剛我們制作的模板上面如下圖：

下一步。在工具欄點擊

矩形選取框。在字體上點擊右鍵--->自由變換，如下圖所示。把字體縮小到合適的大小。并拖放到模板的相應位置：

好了。到這一步。相應的字體做法都一樣。親們可以根據上面的步驟。把所需要的字體都做出來。然后放到相應的位置。如下圖所示：

到這里。模板就大部分完成了。接下來就是切圖部分。在切圖之前。先把做的這個模板保存一下。
文件----->存為WEB所用格式--->保存為JPEG格式圖片。圖片質量選擇為最佳，保存。就OK了。保存的這張圖片在最后要要用來做GIF動畫。也就是大家看到的閃閃的星星的動畫。O(∩_&cap

o...
好了。。下面我們來切圖。點擊工具欄上面的切片工具圖標

切圖。最重要的部分就是要把寫公告和放促銷圖片。逛逛小店。等這些按鈕要單獨切出來。如下圖所示：

看一下切圖的細節(jié)部分。這些都是要單獨切出來的?？纯聪聢D：

上面的空白出是用來寫聯(lián)系方式的。下面的店鋪收藏。和逛逛小店。信用評價。都是要單獨切出來。在最后做成按鈕。公告欄和寶貝促銷欄都要單獨切出來。如下圖：

切片完成之后。點擊文件--->保存為WEB所用格式--->點擊存儲，彈出窗口中選擇自己所要保存到的文件夾。如下圖所示：

好了。。到了這一步。模板已經完成了90%了。下一步。。我們先把閃閃的星星做好。GIF動畫說白了也很簡單。一個一個單獨的圖片。連續(xù)播放就能產生動畫效果。這種閃閃的星星制作起來是最簡單的一種。。下面我們來看看如和做出閃閃星星。首先。打開剛剛上面保存的JPEG圖片。不是切圖的那張。。是在切圖前保存的那張。如下圖：

這張圖片上面原先點的小星星。這時候要派上用場了。點擊工具欄的筆刷按鈕

選擇上面點小星星用過的那個筆刷。在上圖第一次點的小星星上面再次點上小星星。這里要注意，星星是點在原先點的小星星上面。蓋住原先的星星。這次點的小星星的大小。要比第一次點的稍大一點點。（如何調節(jié)大小。在上文中講過?？梢圆榭瓷衔?。）不要全部都點上。只要隨意的點上幾個。自己滿意就好。點過之后。就保存為JPEG格式圖片。然后在歷史記錄窗口點擊打開。這時候。剛剛點的星星就全部消失?；氐絼倓偞蜷_這張圖片的時候，

然后重復上面點星星的步驟。這次點的星星要和上一次點的位置不一樣。也是隨意點幾個。然后保存為JPEG格式圖片。圖片質量選擇最佳。這樣重復幾次。作出3--4張不同的圖片就可以了。下一步。我們用這幾張星星位置不同的圖片來做一個閃閃的星星動畫。
首先打開GIF Animator v5.05 漢化版這個軟件。這個軟件是專門用來制作GIF動畫的。很好用的一個軟件。還自帶了多種動畫效果。。不過。這里我們用不到這些動畫效果。
打開軟件--->文件-->打開圖像--->你的圖片保存的位置---->打開剛剛保存的星星圖片其中一張。
下一步是添加幀，也就是要把剩余的幾張圖片添加進去。步驟。
快捷鍵Ctrl+Alt+F，（插入幀的快捷鍵）------>按INS鍵。插入圖片----->Ctrl+Alt+F，（插入幀的快捷鍵）------>按INS鍵。插入圖片。。。重復上面的步驟。直到把剛剛保存的幾張圖片全部添加進去為止。如下圖：

這里我添加了5個不同的閃亮星星圖片。點擊播放按鈕。就可以預覽動畫效果。如果覺得閃動的速度過快?？梢园醋trl鍵。然后點擊鼠標把5個圖片全部選定。在單擊右鍵----->畫面幀屬性
把延遲改為15，具體數(shù)字更具自己喜好。數(shù)字越大。播放速度越慢，如下圖：

下一步可以保存了。。文件----->另存為------>GIF文件---->選擇你的保存路徑保存就OK了。這樣就做好了一個GIF的動畫。。很簡單吧。。。接下來。把這張GIF動畫圖片上傳到網絡相冊，網絡相冊必須要支持GIF動畫。百度中搜索下。有很多這種網絡相冊。這里就不多講了
這里還要補充一下。。還有3個圖片也要上傳到網絡相冊。在保存切片的文件夾中找到

這3個圖片。一會做按鈕的時候要用到。
好了。下一步。我們要用到Frontpage 2003這個網頁制作軟件。首先打開Frontpage 2003------>文件--->打開---->找到剛剛保存切片的文件夾。里面有個HTML文件如圖

雙擊打開這個文件。在Frontpage 2003的窗口中會顯示出切好的模板。鼠標單擊圖片。會發(fā)現(xiàn)。這些圖片是完全分開的。這就是切片的效果。。其實。我們平時上網看到的網頁上的一些圖片都是這種小塊的圖片拼接起來的。

鼠標單擊后。小塊圖片的邊上會出現(xiàn)小點。按下DEL鍵。全部刪除這些圖片。一個不留。全部刪除了。只留下那些虛線的框框如下圖：