PS切網(wǎng)站的技巧講解

PS切網(wǎng)站的技巧講解

　　今天我們要來講解一下如何用PS來制作一個網(wǎng)頁效果圖并對其進(jìn)行裁剪，即使你不懂任何的HTML語法和原理，只要你看完本期教程，那么離獨立完成自己的個人網(wǎng)站的目標(biāo)就不遠(yuǎn)了。

　　會有朋友說是不是用FIREWORKS比較好，筆者的意見是先學(xué)好PS再用FW便會得心應(yīng)手，PS是個基礎(chǔ)的東西，先打好基礎(chǔ)。

　　一、 網(wǎng)頁布局理論

　　再精美的網(wǎng)頁，它也是有個大概布局的。比方說新浪網(wǎng)的首頁，它的布局就是圖1中右邊灰色部分的樣式，網(wǎng)頁設(shè)計師用網(wǎng)頁制作工具（如DW、FP）畫好相應(yīng)的表格，然后填充表格的顏色，加如相應(yīng)的字和一些網(wǎng)頁特效，就形成了一個網(wǎng)站的首頁。如圖1。

　　可是自己不會網(wǎng)頁制作工具，是不是就不能做出精美的網(wǎng)頁呢？答案是可以的，我們用PHOTOSHOP的“保存圖片的WEB功能”就可以輕松實現(xiàn)。不會畫表格？可以在PS上做表格，總之自己想象中的的網(wǎng)站是什么樣的、什么顏色的、什么風(fēng)格的等等，我們把這些想法當(dāng)一張效果圖制作出來，裁剪好，只需要一個步驟，PS就會幫我們自動生成一個網(wǎng)頁，無需懂得HTML代碼。那么教程正式開始！

　　二、 制作網(wǎng)頁效果圖

　　每個人的想法是不一樣的的，設(shè)計理念也是不一樣的，在本教程中的圖片例子，引用北極的個人網(wǎng)站文字版網(wǎng)頁效果圖進(jìn)行講解，不論什么樣的效果圖，步驟都是一樣的，要做到舉一反三。先看看這個網(wǎng)頁的效果圖。如圖2。

　　觀察效果圖我們可以看出，該效果圖總體上分三行一列：最上面標(biāo)題為一行；中間的內(nèi)容部分為一行；最下面的相關(guān)信息為一行；整體為一列；細(xì)分的話最上面一行又可以分為三列；中間內(nèi)容部分可以分為兩列；最下面相關(guān)信息部分又可以分為兩行。整體的布局應(yīng)該如圖3樣式。如圖3。

布局分布出來以后，一些制作網(wǎng)頁的老手該開始啟動網(wǎng)頁制作工具勾畫表格了。那我們初者要做什么呢？下一步就要用PS的圖片裁剪功能，根據(jù)圖3的布局分布樣式，對網(wǎng)頁效果圖進(jìn)行裁剪。

　　三、裁剪效果圖

　　1、打開網(wǎng)頁效果圖，點裁剪工具，一般選擇切片工具，這個時候鼠標(biāo)就會變成裁紙刀的樣子。如圖4。

　　2、為了裁剪的精確進(jìn)行，在裁剪開始前按CTRL+R打開標(biāo)尺，圖象周圍就會出現(xiàn)標(biāo)尺為裁減提供參照。按照布局分布，對效果圖進(jìn)行裁剪。如圖5。

　　還需要注意的是，在裁剪效果圖之前要確定好哪些地方需要進(jìn)行預(yù)留，比方本效果圖上的“草原部分”是預(yù)留給文字內(nèi)容的，而旁邊的“石板”是預(yù)留給文字標(biāo)題的，這兩個部分是要進(jìn)行嵌入式框架處理的。

　　3、適當(dāng)調(diào)整下各個切片之見的匹配問題，確認(rèn)無誤后，點菜單―文件―儲存為WEB所用格式。如圖6。

　　在之后的彈出對話框中，讓選擇圖片質(zhì)量。因為圖片質(zhì)量過高的話，影響網(wǎng)頁的瀏覽速度；圖片質(zhì)量過低的話就會色彩失真影響美觀。這里要點四聯(lián)顯示，PS會自動給出四種不同顏色，選擇又不太大又沒有明顯失真的樣式。圖7上顯示我們可以發(fā)現(xiàn)第2種是最符合網(wǎng)頁圖片要求的，所以在確認(rèn)沒問題后點“儲存”選擇好儲存位置，會提示“儲存的某些文件為包含拉丁字符，可能會與某些瀏覽器不兼容”不用管它，點確定。之后PS就自動生成了一個網(wǎng)頁，網(wǎng)頁的名字和效果圖的名字一致。

　4、瀏覽器中的效果。如圖8

　　總結(jié)

　　有些朋友會問，在瀏覽器中的效果和效果圖一致，為什么還要費勁將其裁剪呢？這是因為一張整的效果圖大小可能在200K或更高，瀏覽器下載就會變慢，要知道訪問速度太慢的網(wǎng)站是會被瀏覽者放棄的，所以要把整圖裁剪成小塊，加快下載速度；其次，網(wǎng)站是要進(jìn)行更新的，根據(jù)布局裁剪在以后的更新過程中會很方便的。有時間的話，給大家?guī)�來一個網(wǎng)頁效果圖從布局創(chuàng)意到上傳網(wǎng)站空間全過程的教程。

目前比較流行FLASH像冊，固定的網(wǎng)頁像冊是不是不夠時髦？下次，筆者將給大家?guī)�來DW的實用特輯，即使不懂FLASH知識，也能做出FLASH像冊，敬請期待！,