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