淘寶旺鋪促銷(xiāo)模板詳細(xì)制作過(guò)程（多圖）

紫蝶經(jīng)典生活坊 2010-12-29

展開(kāi)全文

首先看看效果圖。

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

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

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

把人物從背景中摳出來(lái)。

放大到300%后進(jìn)行摳圖。

如圖。人物輪廓的虛線(xiàn)。這樣就選定了人物。然后Ctrl+C復(fù)制。然后Ctrl+N。這個(gè)是PS的新建圖片快捷鍵。彈出對(duì)話(huà)框

新建一個(gè)735x500的圖片，背景內(nèi)容選透明，然后按確定。（735x500是旺鋪促銷(xiāo)欄的尺寸）
新建圖層之后。再?gòu)?fù)制一個(gè)圖層如圖

選擇圖層副本。然后選擇

漸變工具----->

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

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

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

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

得到圖片

接下來(lái)選擇圖層1

右鍵復(fù)制圖

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

然后再次復(fù)制圖層副本2

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

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

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

如圖。在上面

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

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

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

上圖就是這張模板的基本排版方式。讓我們?cè)賮?lái)看看圖層窗口

被選定的6個(gè)圖層就是剛剛做的排版。。（親們?nèi)绻幌矚g這個(gè)排版的話(huà)?？梢宰约簛?lái)排一下。關(guān)鍵要自己喜歡就可以。）下一步。如上圖所示，把這6個(gè)圖層選定后鼠標(biāo)單擊右鍵----->柵格化圖層。得到結(jié)果如下圖：

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

合并之后。剛剛所有的矩形框都合并到一起了。然后點(diǎn)擊工具欄的魔術(shù)棒工具

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

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

然后點(diǎn)擊工具欄

矩形選取框，鍵盤(pán)的快捷鍵是M。然后如上圖。還有虛線(xiàn)的話(huà)就鼠標(biāo)單擊下虛線(xiàn)的選取部位。取消選取。然后鼠標(biāo)右鍵--->混合選項(xiàng)--->如下圖所示設(shè)置

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

看下放大后的圖片

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

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

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

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

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

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

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

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

這樣點(diǎn)綴一下。要好看多了。下一步我們來(lái)做字體。電腦里面裝了各種字體的?？梢灾苯釉诶锩嫣砑幼约?。如果沒(méi)有。又不想裝的。就要用到ISEE這個(gè)軟件。他有一個(gè)在線(xiàn)DIY功能?？梢栽O(shè)置很多種字體。還有動(dòng)畫(huà)效果。不過(guò)。我們這里用不到他的動(dòng)畫(huà)效果。下面我們來(lái)看看。怎么用ISEE來(lái)做藝術(shù)字體。先打開(kāi)ISEE。在首頁(yè)如圖

點(diǎn)擊isee部落

跳出窗口

免費(fèi)注冊(cè)一下就可以登陸了。登陸之后。在首頁(yè)的上方有個(gè)在線(xiàn)DIY按鈕。點(diǎn)擊。進(jìn)入在線(xiàn)DIY網(wǎng)頁(yè)如圖：

點(diǎn)擊后。進(jìn)入DIY網(wǎng)頁(yè)。選取自己喜歡的字樣如下圖

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

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

按上圖步驟。就可以作出自己喜歡的字體了。。很簡(jiǎn)單吧。也不用在WINDOWS里面安裝字體。對(duì)于不熟悉windows的親們來(lái)說(shuō)。。這個(gè)軟件的確很有用。下面我們來(lái)處理做好的字體，用PS打開(kāi)字體圖片。因?yàn)镻S只能讀取GIF動(dòng)畫(huà)的一個(gè)幀。所以。讀取字體時(shí)彈出窗口點(diǎn)擊確定。然后用魔術(shù)棒工具

進(jìn)行摳圖，把字體摳出來(lái)。魔術(shù)棒放在黑色字體上單擊。選定黑色字體。然后鼠標(biāo)右鍵--->選取相似。這樣。黑色字體就全部選出來(lái)了。如下圖：

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

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

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

下一步。在工具欄點(diǎn)擊

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

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

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

o...
好了。。下面我們來(lái)切圖。點(diǎn)擊工具欄上面的切片工具圖標(biāo)

切圖。最重要的部分就是要把寫(xiě)公告和放促銷(xiāo)圖片。逛逛小店。等這些按鈕要單獨(dú)切出來(lái)。如下圖所示：

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

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

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

好了。。到了這一步。模板已經(jīng)完成了90%了。下一步。。我們先把閃閃的星星做好。GIF動(dòng)畫(huà)說(shuō)白了也很簡(jiǎn)單。一個(gè)一個(gè)單獨(dú)的圖片。連續(xù)播放就能產(chǎn)生動(dòng)畫(huà)效果。這種閃閃的星星制作起來(lái)是最簡(jiǎn)單的一種。。下面我們來(lái)看看如和做出閃閃星星。首先。打開(kāi)剛剛上面保存的JPEG圖片。不是切圖的那張。。是在切圖前保存的那張。如下圖：

這張圖片上面原先點(diǎn)的小星星。這時(shí)候要派上用場(chǎng)了。點(diǎn)擊工具欄的筆刷按鈕

選擇上面點(diǎn)小星星用過(guò)的那個(gè)筆刷。在上圖第一次點(diǎn)的小星星上面再次點(diǎn)上小星星。這里要注意，星星是點(diǎn)在原先點(diǎn)的小星星上面。蓋住原先的星星。這次點(diǎn)的小星星的大小。要比第一次點(diǎn)的稍大一點(diǎn)點(diǎn)。（如何調(diào)節(jié)大小。在上文中講過(guò)。可以查看上文。）不要全部都點(diǎn)上。只要隨意的點(diǎn)上幾個(gè)。自己滿(mǎn)意就好。點(diǎn)過(guò)之后。就保存為JPEG格式圖片。然后在歷史記錄窗口點(diǎn)擊打開(kāi)。這時(shí)候。剛剛點(diǎn)的星星就全部消失。回到剛剛打開(kāi)這張圖片的時(shí)候，

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

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

下一步可以保存了。。文件----->另存為------>GIF文件---->選擇你的保存路徑保存就OK了。這樣就做好了一個(gè)GIF的動(dòng)畫(huà)。。很簡(jiǎn)單吧。。。接下來(lái)。把這張GIF動(dòng)畫(huà)圖片上傳到網(wǎng)絡(luò)相冊(cè)，網(wǎng)絡(luò)相冊(cè)必須要支持GIF動(dòng)畫(huà)。百度中搜索下。有很多這種網(wǎng)絡(luò)相冊(cè)。這里就不多講了
這里還要補(bǔ)充一下。。還有3個(gè)圖片也要上傳到網(wǎng)絡(luò)相冊(cè)。在保存切片的文件夾中找到

這3個(gè)圖片。一會(huì)做按鈕的時(shí)候要用到。
好了。下一步。我們要用到Frontpage 2003這個(gè)網(wǎng)頁(yè)制作軟件。首先打開(kāi)Frontpage 2003------>文件--->打開(kāi)---->找到剛剛保存切片的文件夾。里面有個(gè)HTML文件如圖

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

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

然后鼠標(biāo)單擊右鍵---->表格屬性（不是單元格屬性。不要弄錯(cuò)了^_^）----->彈出窗口如下圖：

這里說(shuō)明一下。上圖的地址就是剛剛上傳的GIF的動(dòng)畫(huà)地址。也就是說(shuō)，把剛剛做的GIF動(dòng)畫(huà)當(dāng)做模板的背景用，點(diǎn)擊應(yīng)用。Frontpage 2003會(huì)從網(wǎng)絡(luò)相冊(cè)讀取圖片。得到圖片如下圖：

上圖中的虛線(xiàn)不用去管他。。上傳后就沒(méi)有了。。下一步。制作按鈕。逛逛小店，店鋪收藏，信用評(píng)價(jià)，這些都是按鈕，把光標(biāo)移到逛逛小店的單元格中

然后點(diǎn)擊上面工具欄中

插入圖片按鈕。彈出窗口如下：

這里的文件名填寫(xiě)剛剛上傳圖片的外鏈接地址。注意圖片對(duì)應(yīng)好了。店鋪收藏和信用評(píng)價(jià)的圖片插入方法相同。。按照步驟重做一遍就可以了。完成后。給這3個(gè)按鈕添加超鏈接。方法如下
點(diǎn)擊逛逛小店按鈕

邊上出現(xiàn)小點(diǎn)后。鼠標(biāo)右鍵--->超級(jí)鏈接屬性--->單擊彈出窗口。窗口設(shè)置如下：

添加完成后。點(diǎn)擊確定。就可以了。。。其他2個(gè)也是相同的做法，，只要換下地址就可以了。具體地址?？梢源蜷_(kāi)你的瀏覽器。打開(kāi)相應(yīng)的網(wǎng)頁(yè)。在瀏覽器的地址欄中查看。復(fù)制。粘帖就好了。。O(∩_&cap

o...其實(shí)這也不是很難的。多做幾次就熟練了。下一步。我們來(lái)做公告中的滾動(dòng)字幕。方法也不難。首先，鼠標(biāo)移動(dòng)到寫(xiě)公告位置。點(diǎn)擊上面工具欄的

WEB組件。彈出窗口：

動(dòng)態(tài)效果----->字幕------>點(diǎn)擊完成。彈出窗口如下設(shè)置：

按上圖設(shè)置。完成后確定?，F(xiàn)在的字幕不是向上滾動(dòng)的。在這里需要修改一個(gè)代碼才能讓他向上滾動(dòng)。步驟：?jiǎn)螕粼O(shè)置好的字幕

如圖顯示。單擊后會(huì)有6個(gè)小點(diǎn)在邊上。下一步點(diǎn)擊左下角的拆分

窗口分兩部分顯示。上面的是代碼。下面的是圖片。剛剛單擊的字幕。在上面的代碼中顯示為如下圖

如上圖所示right改為up符號(hào)不要改。字幕就會(huì)向上滾動(dòng)了。
這里補(bǔ)充一下。點(diǎn)擊字幕這里

鼠標(biāo)放在中間的小點(diǎn)上面。按住鼠標(biāo)左鍵，拖動(dòng)小點(diǎn)。放大字幕框到合適的大小。不放大的話(huà)。字幕就只能同時(shí)顯示一行字了。地方太小。想顯示多也不行啊。

看小點(diǎn)的位置。拖動(dòng)到和虛線(xiàn)差不多的位置就可以了。這樣就能多顯示幾行了。^_^好了。。到這里。模板制作的差不多了。。最后別忘了在這里添加上你的聯(lián)系方式

當(dāng)然。你也可以把這個(gè)框里的字設(shè)置成滾動(dòng)字幕。方法一樣。邊上的寶貝促銷(xiāo)欄中可以放2個(gè)170x170的圖片。把你最好的寶貝放上去。一定很搶眼。。。O(∩_&cap

o..
最后點(diǎn)擊

代碼。窗口中顯示的代碼全部復(fù)制。用記事本保存。到這里。模板就算制作完成了。^_^

本帖鏈接

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀(guān)點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：紫蝶經(jīng)典生活坊 > 《╠淘寶交流╣》

舉報(bào)/認(rèn)領(lǐng)