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

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

作者：北極 教程來源：pconline

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

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

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

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

本新聞共5

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

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

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

本新聞共5

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

本新聞共5

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

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

簡(jiǎn)單的,我們教你,深?yuàn)W的,你來分享
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