Photoshop另類實用技巧:切網(wǎng)頁

Photoshop另類實用技巧:切網(wǎng)頁

作者：北極 教程來源：pconline

　　在上期教程中，我們用PHOTOSHOP CS的“WEB照片畫廊”功能制作出了網(wǎng)頁像冊，不知道大家有沒有將制作好的網(wǎng)頁像冊上傳到網(wǎng)站空間中，圓了自己制作網(wǎng)頁、建立網(wǎng)站的愿望呢？
　　這次，我們要來講解一下如何用PS來制作一個網(wǎng)頁效果圖并對其進行裁剪，即使你不懂任何的HTML語法和原理，只要你看完本期教程，那么離獨立完成自己的個人網(wǎng)站的目標就不遠了。
　　會有朋友說是不是用FIREWORKS比較好，筆者的意見是先學好PS再用FW便會得心應手，PS是個基礎(chǔ)的東西，先打好基礎(chǔ)。
　　一、 網(wǎng)頁布局理論
　　再精美的網(wǎng)頁，它也是有個大概布局的。比方說新浪網(wǎng)的首頁，它的布局就是圖1中右邊灰色部分的樣式，網(wǎng)頁設(shè)計師用網(wǎng)頁制作工具（如DW、FP）畫好相應的表格，然后填充表格的顏色，加如相應的字和一些網(wǎng)頁特效，就形成了一個網(wǎng)站的首頁。如圖1。

可是自己不會網(wǎng)頁制作工具，是不是就不能做出精美的網(wǎng)頁呢？答案是可以的，我們用PHOTOSHOP的“保存圖片的WEB功能”就可以輕松實現(xiàn)。不會畫表格？可以在PS上做表格，總之自己想象中的的網(wǎng)站是什么樣的、什么顏色的、什么風格的等等，我們把這些想法當一張效果圖制作出來，裁剪好，只需要一個步驟，PS就會幫我們自動生成一個網(wǎng)頁，無需懂得HTML代碼。那么教程正式開始！
　　二、 制作網(wǎng)頁效果圖
　　每個人的想法是不一樣的的，設(shè)計理念也是不一樣的，在本教程中的圖片例子，引用北極的個人網(wǎng)站文字版網(wǎng)頁效果圖進行講解，不論什么樣的效果圖，步驟都是一樣的，要做到舉一反三。先看看這個網(wǎng)頁的效果圖。如圖2。

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

布局分布出來以后，一些制作網(wǎng)頁的老手該開始啟動網(wǎng)頁制作工具勾畫表格了。那我們初者要做什么呢？下一步就要用PS的圖片裁剪功能，根據(jù)圖3的布局分布樣式，對網(wǎng)頁效果圖進行裁剪。
　　三、裁剪效果圖
　　1、打開網(wǎng)頁效果圖，點裁剪工具，一般選擇切片工具，這個時候鼠標就會變成裁紙刀的樣子。如圖4。

本新聞共5

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

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

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

本新聞共5

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

本新聞共5

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

　　
　　總結(jié)
　　有些朋友會問，在瀏覽器中的效果和效果圖一致，為什么還要費勁將其裁剪呢？這是因為一張整的效果圖大小可能在200K或更高，瀏覽器下載就會變慢，要知道訪問速度太慢的網(wǎng)站是會被瀏覽者放棄的，所以要把整圖裁剪成小塊，加快下載速度；其次，網(wǎng)站是要進行更新的，根據(jù)布局裁剪在以后的更新過程中會很方便的。有時間的話，給大家?guī)硪粋€網(wǎng)頁效果圖從布局創(chuàng)意到上傳網(wǎng)站空間全過程的教程。
　　目前比較流行FLASH像冊，固定的網(wǎng)頁像冊是不是不夠時髦？下次，筆者將給大家?guī)鞤W的實用特輯，即使不懂FLASH知識，也能做出FLASH像冊，敬請期待！

簡單的,我們教你,深奧的,你來分享
photoshop,ps,photoshopjiao cheng ,psjiao cheng ,photoshopxia zai ,pslun tan ,fei zhu liu psjiao cheng ,fei zhu liu psruan jian ,fei zhu liu tu pian ,fei zhu liu kong jian ,qqkong jian ,qqkong jian dai ma ,qqkong jian liu yan dai ma ,qqkong jian mo kuai ,QQkong jian FLASHmo kuai ,PSzi ti ,PSbi shua