這次給各位賣家?guī)?lái)一個(gè)新的店鋪設(shè)計(jì)裝修，一旦學(xué)會(huì)，不敢保證一定會(huì)有訂單成交，但是流量大大提升是絕對(duì)沒(méi)有問(wèn)題的。如何用PS標(biāo)尺參考線 打造專業(yè)淘寶模板？下面請(qǐng)仔細(xì)看清每一個(gè)步驟。用的還是photoshop CS2(簡(jiǎn)稱PS)。

第一步、打開PS，點(diǎn)擊左上角的“文件“，新建一個(gè)白色背景，如圖：

然后點(diǎn)擊“好“，如圖：

第二步、嘿嘿，關(guān)鍵來(lái)了---調(diào)出標(biāo)尺!快捷鍵Ctrl+R(是Ctrl鍵加上字母R)，即可調(diào)出，或者是點(diǎn)擊在PS的最上方的工具欄(即是剛開始的“文件“一欄)的”視圖“，會(huì)在彈出的下拉菜單中看到”標(biāo)尺“，點(diǎn)擊。背景圖變化如下：

下面為了讓大家看清楚一點(diǎn)，我會(huì)把白色背景改成其他顏色。

第三步、關(guān)鍵又來(lái)了---調(diào)出參考線!

把鼠標(biāo)移動(dòng)到標(biāo)尺上，按住鼠標(biāo)左鍵，往右邊(下邊)拖動(dòng)，即可調(diào)出咱們可愛(ài)的參考線;或者是通過(guò)“視圖“，可以在”標(biāo)尺“的下方看到”新參考線“，點(diǎn)擊。彈出一個(gè)框框，選擇所需要的取向，在”位置“那里設(shè)置距離，我設(shè)置為5cm，如圖：

新參考線

參考線設(shè)置

參考線模樣

呵呵，采用在“視圖“那里點(diǎn)擊稍微有點(diǎn)麻煩，下面我用鼠標(biāo)拖動(dòng)的方式來(lái)操作。哦，忘了重要的一點(diǎn)，肯定會(huì)有人問(wèn)如何取消參考線和調(diào)節(jié)參考線?

方法：

1、“視圖“的就在那個(gè)下拉菜單里有”消除參考線“的(注：按這個(gè)取消參考線是將全部參考線都取消的哦，要注意了。如果要取消剛弄錯(cuò)的一條參考線，可以點(diǎn)擊”編輯“的”返回“。);

2、鼠標(biāo)拖動(dòng)：按住Ctrl鍵，把鼠標(biāo)放到參考線上，會(huì)出現(xiàn)一個(gè)圖標(biāo)，額，截取不了圖，我畫一個(gè)：，就是這個(gè)樣子。然后就可以往左往右(往上往下)拖動(dòng)了。把參考線一直往兩邊拖到最邊上就是傳說(shuō)中的取消。使用鼠標(biāo)拖動(dòng)的好處就是可以任意調(diào)節(jié)參考線和取消參考線，想不要那條參考線，就可以很快的操作。是不是很簡(jiǎn)單!

第四步、好啦，標(biāo)尺和參考線都會(huì)了，那么接下來(lái)就可以制作模板了，我做的是750像素的三欄效果，先把參考線做出三欄的效果，如圖：

然后點(diǎn)擊PS左邊的工具條中的“矩形工具“，如圖：

顏色設(shè)置

點(diǎn)擊顏色設(shè)置，選擇顏色，確定。然后快捷鍵按Alt+Delete鍵，會(huì)發(fā)現(xiàn)我們用矩形工具框住的范圍變成了我們剛才設(shè)置的顏色，如圖：

其他的也是如此操作。

第五步、接下來(lái)就可以把已經(jīng)弄好的圖片還有需要的文字放上去了，這里為了避免廣告嫌疑，我隨便用一張圖片來(lái)處理。打開圖片(PS左上角“文件”中的“打開”)，然后點(diǎn)擊“矩形工具“旁邊的“移動(dòng)”工具，，然后拖動(dòng)調(diào)整到需要放置的位置上，需要注意的是，拖動(dòng)的時(shí)候圖片會(huì)被參考線吸引，老是往參考線上黏糊。所以我們可以使用快捷鍵來(lái)調(diào)整，按ctrl+T，會(huì)發(fā)現(xiàn)圖片四周有所變化，可以發(fā)現(xiàn)圖片四個(gè)角和中間部分都有一個(gè)很小的正方形，把鼠標(biāo)放到正方形上，可以調(diào)節(jié)圖片的大小的，當(dāng)然啦，那是不規(guī)則的變形，如果要等比例的改變圖片大小，鼠標(biāo)拖動(dòng)前先按住Shift鍵，那就可以隨意調(diào)節(jié)圖片大小了。http://www.tbxt.com/

額，說(shuō)多了。轉(zhuǎn)回正題，我們按ctrl+T后，就可以用鼠標(biāo)拖動(dòng)圖片了，放到適合的位置，還不滿意的話，拖動(dòng)后放開鼠標(biāo)，然后用鍵盤四個(gè)方向鍵來(lái)調(diào)節(jié);也可以在按ctrl+T后，按住ctrl+鼠標(biāo)拖動(dòng)。效果如圖：

其他的也是按照如此方法來(lái)進(jìn)行，最終效果如圖：

然后在圖片下方輸入文字，點(diǎn)擊工具中的這個(gè)(如圖)即可輸入文字，最后效果如圖：

第六步、處理完圖片和文字后，接下來(lái)是比較重要的環(huán)節(jié)---切片。這里我們將用到切片工具。嗯，先把參考線消除，其實(shí)不用消除的，這里我為了讓大家看清楚切片的效果，就消除，呵呵。

因?yàn)槲易龅氖侨龣谛Ч模晕覀兛梢杂?ldquo;切片選取工具”，把鼠標(biāo)放到選區(qū)內(nèi)，鼠標(biāo)右鍵，點(diǎn)擊“劃分切片”，在彈出的選框中選擇“垂直劃分為”填寫3，可以明顯的看到我們的選區(qū)分為了無(wú)限接近相同大小的三個(gè)區(qū)域。如圖：

然后點(diǎn)擊“文件”中的“存儲(chǔ)為web所用格式”，彈出選框，點(diǎn)擊“存儲(chǔ)”，保存格式為“HTML和圖像(*html)”，然后按確定即可。

第七步、保存在桌面的，然后打開那個(gè)images文件夾，將里邊的所有圖片上傳到圖片空間。

第八步、打開dreamweaver(簡(jiǎn)稱DW)，打開另外一個(gè)文件，點(diǎn)擊一個(gè)圖片，然后復(fù)制圖片空間相對(duì)應(yīng)的地址，在DW屬性欄找到“源文件”，

刪除里邊的內(nèi)容，然后粘貼地址。另外“源文件”下方有個(gè)“鏈接”，把店鋪的這款產(chǎn)品的鏈接粘貼進(jìn)去。其他的也是按照這個(gè)步驟操作，最后點(diǎn)擊保存。

最后鼠標(biāo)右鍵點(diǎn)擊保存好的文件，選擇“打開方式”中的“記事本”,復(fù)制記事本內(nèi)的所有代碼，在店鋪新建一個(gè)自定義內(nèi)容區(qū)，把代碼復(fù)制進(jìn)去，即可收工。

看看我店鋪的效果：

總結(jié)：其實(shí)店鋪裝修在于用心，哪怕你不會(huì)photoshop，不會(huì)dreamweaver，沒(méi)關(guān)系!只要你拿出百分百的努力用心做好，相信有一天，在你的店鋪首頁(yè)，會(huì)有一個(gè)嶄新的變化!

樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 用PS標(biāo)尺參考線打造專業(yè)淘寶模板