看過水滸傳的朋友應(yīng)該都知道，魯智深在五臺山學(xué)了長老的幾招后，幾乎橫掃江湖，罕逢對手，其實網(wǎng)店裝修也有絕招，只要您用心練習(xí)我這招，保準(zhǔn)您裝修檔次立馬改變，當(dāng)然，我這一招只針對新手或資金有限,學(xué)藝不精的老店家，如果是老手，有可能早就了解了它，或者早就去淘寶旺鋪去淘最新的最美的模板去了。
A.工具軟件準(zhǔn)備:
我剛開店的時候，，連淘寶網(wǎng)精心提供的banner編輯器都不會用 ，更別說PS了，因為店鋪幾乎所有的活動都得經(jīng)過圖片處理，不會一點處理技術(shù)的我只能任網(wǎng)店處于自由狀態(tài)，沒法經(jīng)營。 后來終于鼓起勇氣學(xué)起了PS，經(jīng)過n個月學(xué)習(xí)終于有所收獲，感謝淘寶大學(xué)的大師們，也感謝所有給我指點的前輩。
這里要準(zhǔn)備的工具軟件，也就是傳說中的神器-PS ，它的功能強(qiáng)大得令人吃驚，我估計沒有人能把它全部吃透，但我們不需要吃透，只需要了解他們最基本的功能就可以了。
Ps是photoshop的簡稱，軟件的下載與安裝我們就不講了，大家可以使用搜索引擎搜索一下。
B.做好版面計劃
有計劃的去做某件事，這事才會做得順暢，就像拍電影，那先得有劇本，拍的時候還得有故事板，當(dāng)初學(xué)習(xí)Ps的時候，我做得最多的就是按照書本和網(wǎng)上的實例一步一步來練習(xí)，沒有自己的想法， 一直做不出自己滿意版面。
我們這個實例，我的計劃是做一個主題為“新年促銷第一波”的版面，選擇比較合適做促銷又與供貨商談好了供貨價的五款產(chǎn)品。定好了產(chǎn)品和主題，下面的步驟就是怎樣將這些主題文字和產(chǎn)品分好主次進(jìn)行排列，我們要學(xué)習(xí)的這個絕招其中最大的一部分就是學(xué)會怎樣用PS排列圖片。
C.開始排版
我比較愛新鮮，ps當(dāng)然也就是最新版本了，如果您的版本與我的不一樣，沒關(guān)系，按著步驟操作就沒錯。
第一步.打開ps軟件，然后單擊文件菜單-新建，打開對話框，如下圖所示，填入以下參數(shù)，如下圖所示參數(shù)。因為淘寶店的每個版塊都是淘寶的先輩們幫我們量身打造好了。所以這個尺寸也要牢記在心： 左欄部分寬190（寶貝類目那部分寬度）右欄部分寬750，通欄寬950,如果是左右欄的版面，那中間空隙就是10(如圖所示)高度可隨意設(shè)置不要太離譜就行。下面我們就是750700這樣的大小來進(jìn)行演示。
點擊確定后出現(xiàn)新建的畫布，
第二步.建立背景框架
單擊ps左邊工具欄的拾色器按鈕，打開對話框，在右下方的框中輸入顏色值，可自行更改顏色值，或直接點擊中間的顏色獲取數(shù)值,單擊確定關(guān)閉對話框→同時按下alt+del健將米黃色填充至背景，這樣我們純色的背景制作完畢。
第三步.建立色塊
按F7打開圖層面板，單擊第六個按鈕(如圖所示)新建一圖層：即在背景畫布上增加了一透明的層，系統(tǒng)自動命名為"圖層1".(如右下圖)
→在左側(cè)工具欄中，右擊第一個工具（如圖）彈出下拉菜單選擇矩形選框工具，在畫布的任意處單擊左鍵，建立一矩形選區(qū)。→再次打開拾色器，選取一種灰色，同時按alt+del，立即將鉅形填充成灰色→按下ctrl+D鍵，虛線選區(qū)消失，這樣在米黃色的背景上我們建立了一塊灰色的色塊，這個220220的灰色色塊是我們用來放置我們需要進(jìn)行促銷的內(nèi)容。
第四步.復(fù)制色塊
經(jīng)過第一步第二步的操作，ps的畫布及圖層如下圖所示
→此時我們選擇工具欄第二個工具即移動工具（按v健選擇移動工具）并勾選自動選擇選項→單擊一下畫布中我們剛才繪制的灰色色塊（一定要單擊到色塊的范圍內(nèi)才有效）→按下alt鍵的同時按下鼠標(biāo)左鍵不放移動色塊至其它位置，松開左鍵后松開alt鍵。這樣我們就復(fù)制了一個色塊，以同樣方法復(fù)制五塊灰色塊,可以看到我們每復(fù)制一個色塊后都產(chǎn)生了一個圖層副本，如圖
→現(xiàn)在我們在畫布上單擊任意一個色塊即可選擇此色塊且圖層面板中會有藍(lán)色高亮顯示，（如果需要移動，只需按住左鍵就移動鼠標(biāo)就可以了。）分別單擊各色塊選中所在圖層后，使用健盤的方向鍵對色塊位置進(jìn)行移動，每按一下方向鍵,色塊移動距離為1（這一點與淘寶店鋪的店招內(nèi)元素移動是一樣的,單擊一次移動一個像素點的位置，所以定位很精準(zhǔn)）調(diào)整為圖所示
第五步.調(diào)整色塊大小
剛才我們對色塊的位置進(jìn)行了微調(diào)，接下來我們對色塊的大小進(jìn)行調(diào)整，一個版面如果各個色塊大小一樣，就會缺少主次而效果不好。
單擊左上方的色塊，同時按下ctrl+T鍵，出現(xiàn)調(diào)整框如下圖所示，如果鼠標(biāo)移動到各節(jié)點上，還會出現(xiàn)雙向箭頭→將鼠標(biāo)移動到頂部中間節(jié)點，按住左鍵不放松向上移動鼠標(biāo)，到合適高度，松開左鍵,回車確認(rèn)變化。同樣向右調(diào)整大小如圖所示。(PS系統(tǒng)默認(rèn)在需要對齊的地方有阻滯感，此時放開鼠標(biāo)即可對齊) →將右方色塊按同樣方法調(diào)整,調(diào)整后效果如下圖。
第六步.輸入主題文字
單擊選擇工具欄上T字形工具即文字工具（有的版本可能是中文漢字的“字”），填入相關(guān)的參數(shù)，字體可任意選擇。在畫布的上方輸入文字: 新年促銷第一波→同樣方法，輸入大小為18的文字“真正忙碌的農(nóng)歷新年開始咯” →按第四步中講到的移動色塊的方法，同樣將文字移動到合適的位置。這樣背景為米黃色，色彩代表促銷圖片內(nèi)容的簡單的布局圖就完成了，效果如下圖所示,保存文件為促銷.psd
第七步.設(shè)計促銷內(nèi)容
上面5個步驟我們講的是制做框架，其實促銷內(nèi)容的制作與上面步驟相似，只是色塊換成了需要的素材。如果您需要此課程的素材可以與我的旺旺聯(lián)系。下面我們以其中某一個促銷內(nèi)容(如圖)為例進(jìn)行講解。下面的圖片與我們剛做的灰色色塊大小一致，做好后直接覆蓋灰色色塊。 （有的朋友有可能會問，直接做這個塊不是更簡單嗎，其實不然，灰色塊除了用來定位，還用來體現(xiàn)我們的大概思路，讓做圖有的放矢）
a.單擊文件→新建一個尺寸為220220大小的畫布
b. 單擊文件→新建→置入→選擇好已準(zhǔn)備好的產(chǎn)品圖片(素材1.psd大家可以自己準(zhǔn)備產(chǎn)品圖片)→回車確定→如圖所示
c.按照第三步的方式更改參數(shù)寬為220高為30，建立選區(qū)，填充灰色 (往上看第三步講解
d:新建一個圖層后與上步建立同樣的選區(qū)
e:選取漸變工具，如下圖所示。單擊箭頭所示的漸變編輯器。
進(jìn)入對話框后，如下圖所提示改變每個節(jié)點的色彩，單擊確定返回畫布。
按住鼠標(biāo)左鍵，從虛線選區(qū)的左方向右拖動，
出現(xiàn)效果,同時按下ctrl+D，選區(qū)消失。
f:按下ctrl+T后出現(xiàn)變換框，修改參數(shù)為45度后，回車結(jié)束，使用方向鍵調(diào)整至適當(dāng)位置。
g:在如圖位置輸入文字：限時折扣，參數(shù)如圖所示。
h:單擊選取移動工具，使用ctrl+T對文字進(jìn)行旋轉(zhuǎn),
同樣的方法，繼續(xù)輸入其它文字并調(diào)整位置，即得到最終效 果。
注意此處文字的屬性，需按如下設(shè)置.
位置調(diào)整完畢后同時按下ctrl+shift+G，合并所有圖層,保存為素材1.jpg 按照相同的方法做出其它的產(chǎn)品促銷內(nèi)容如圖所示
第八步:組合促銷內(nèi)容
所有促銷內(nèi)容做好后，保存為素材1.jpg,素材2.jpg............ →打開之前保存的促銷.psd文件。
單擊文件-置入,置入所有保存的促銷內(nèi)容文件，(導(dǎo)入后顯示為選框狀態(tài),回車后消失)置入后將圖片移動到灰色塊位置覆蓋灰色塊，得到如下圖所示效果。
移動完畢，再做微調(diào)后(因為我們做的促銷內(nèi)容為白色，與底色相近，所以重新在背景層上增加了一層深灰色色塊層)得到如下效果。(注：朋友們也可以使用不同的圖片代替，效果是一樣的。希望朋友們能舉一反三)
第九步,整圖分拆
有的新手朋友可能會說，這好不容易組成了一個整體圖，現(xiàn)在又要劃分，真費事。 哈哈,是費了點事，但是，如果不劃分，整圖傳到淘寶網(wǎng)店，會嚴(yán)重影響打開網(wǎng)店網(wǎng)頁的速度，為了加快速度，這一步是必不可少的。
選擇切片工具，我們使用切片工具對圖片像劃豆腐一樣來操作如下圖,操作方法：點選切片工具后，移動鼠標(biāo)至需劃分的位置，按下左鍵不松，拖動選框.畫好后，系統(tǒng)自動會給劃好的塊編號，并以藍(lán)色顯示，下圖我們分了10塊,劃分的原則是將所有促銷內(nèi)容劃分成單獨塊。
D.保存為網(wǎng)頁文件，文件-存儲為web和設(shè)備所用格式
單擊存儲，選如下選項html和圖像.
選擇保存后，存儲的文件夾仙出現(xiàn)兩個文件，一個是html,加一個是圖像文件夾
E.提取有用的代碼
我們使用ie瀏覽器打開html文件。如圖
單擊查看菜單下的源文件
出現(xiàn)使用記事本打開的源代碼，并按ctrl+c復(fù)制<table與</table>及之間的所有代碼
F.將代碼加入淘寶店
進(jìn)入店鋪裝修后臺，在右邊增加新的模，選擇自定義內(nèi)容區(qū)，進(jìn)入編輯頁面，選擇代碼按鈕。
將復(fù)制的代碼粘貼入代碼輸出區(qū)內(nèi)。再次點擊代碼按鈕還原，出現(xiàn)如下效果（所有帶叉叉的說明此處可以插入圖片，我們稱之為圖像占位符）。
G.上傳圖像文件，代替圖像占位符。
將剛才保存的圖像文件內(nèi)圖像全部上傳至，淘寶店的圖片空間。
雙擊剛才編輯框內(nèi)的圖像占位符，用上傳的圖片替代，如下圖，并做好產(chǎn)品鏈接。
全部修改后最到最后效果.
至此的我一招就全部展示完了，做完通關(guān)，用到的全部是ps的操作，當(dāng)然這只是基本的操作。像我等新手。能做成這樣已經(jīng)不錯了，朋友們，這是我第一次寫教程，可能還有寫得不詳細(xì)的地方，歡迎提出寶貴意見，文件素材大家可以向我素取，不懂的地方我們可以相互交流。我會繼續(xù)修改直到完美。更多教程日后再提供
樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則
