您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> ps教程 >> 瀏覽設(shè)計教程

網(wǎng)頁P(yáng)S教程:切圖那點事兒

 

切圖的目的就是把設(shè)計圖轉(zhuǎn)化成網(wǎng)頁代碼,不用理解代碼的含義也可以操作,所以獨立一篇來講。

早年間我學(xué)切圖的時候,網(wǎng)上就沒看到過什么教程的,只能靠自己摸索學(xué)習(xí),挺簡單的東西還是繞了點彎子。這次寫出來應(yīng)該會幫助其他人學(xué)會切圖的。

先說下軟件,我用的是PhotoShop CS5 這個版本,你要用其他版本也行,反正對切圖這個功能影響不大。

12 切圖那點事兒

如上圖紅框所示,我們要用到的切圖工具有兩個,一個是切片工具,另一個是切片選擇工具。左邊有個小按鈕,你按住它這三個選項就會顯示出來。

115 切圖那點事兒

上圖是我等下用做示范的圖片。

13 切圖那點事兒

在切圖之前有一點需要說明的是,如果你需要輔助切圖,你可以先添加參考線。在PS上方的菜單欄,你可以在視圖里找到新建參考線選項。如上圖,我已經(jīng)添加兩條參考線,因為參考線在鼠標(biāo)靠近的時候有吸附功能,所以切圖不容易切錯位置。

14 切圖那點事兒

好了現(xiàn)在我們開始切圖,我用切圖工具先裁一個框出來,我們可以看到圖片上已經(jīng)有01的框,但是右邊02顯示為灰色。

15 切圖那點事兒

我繼續(xù)用切圖工具裁第二個框,記住01和02的框一定要貼合,否則會出現(xiàn)一個03的框。如果你這次切圖位置沒切對,可能給后面帶來麻煩的是換圖片會比較麻煩。這個時候切圖的框是可以移動的,你可以把鼠標(biāo)放在邊框上試著移動下,看下效果。你只能移動02,不能移動01。

17 切圖那點事兒

當(dāng)我發(fā)現(xiàn)切圖的位置出現(xiàn)錯誤,開始調(diào)整,剛才我把02位置往右挪好,它從02變成了03。

16 切圖那點事兒

然后我用切圖選擇工具選擇01,這樣我就能把01的位置調(diào)整正確了。

18 切圖那點事兒

切好圖之后就到最重要的步驟了,如上圖所示,選擇文件下面的存儲為WEB和設(shè)備所用格式,最好能記住快捷鍵。

19 切圖那點事兒

圖片格式為JPEG,它就是JPG,一樣的。關(guān)鍵是品質(zhì)的設(shè)定,我們都知道如果一張圖片越大它在網(wǎng)上打開的速度就越慢,當(dāng)我們把圖片的品質(zhì)設(shè)的越小,它的大小就越小,但是如果品質(zhì)太差,圖片會變模糊,所以一般情況下如果是網(wǎng)上使用的圖片,品質(zhì)可以設(shè)置60,既保證圖片較小也不會模糊。這個數(shù)值由你自己設(shè)置,是大是小,具體看你的要求,試試就知道了。這里有個問題是你只是對其中一個切片設(shè)置品質(zhì),其他切片又要重新設(shè)置,所以存的時候最好檢查一下。

110 切圖那點事兒

前面設(shè)置好后點擊存儲會顯示以上界面。格式選項選擇HTML和圖像,默認(rèn)是圖像的,這樣我們就能得到網(wǎng)頁代碼了。

111 切圖那點事兒

存好后得到一個圖片文件夾和一個網(wǎng)頁,你看到的網(wǎng)頁圖標(biāo)可能跟我這個不一樣,這個沒有關(guān)系,因為我們的瀏覽器不一樣。

112 切圖那點事兒

用DreamWeaver軟件打開這個網(wǎng)頁看到如上界面,如果不懂DreamWeaver的設(shè)置,請參考我前篇 做淘寶的也該懂點代碼 那里有講到一點DreamWeaver的使用技巧。我們需要的就是大紅框中《table … 《/table》這段代碼,待會拷貝到淘寶頁面里去的??截愔耙劝褕D片地址換一下,先把剛才那個images文件夾里的圖片上傳到淘寶圖片空間里去,再復(fù)制圖片的網(wǎng)絡(luò)地址替換上圖小紅框里的那個地址。替換的原因是,PS存的圖片地址是你電腦上的,在網(wǎng)絡(luò)上無法使用,只有你把圖片上傳到網(wǎng)上別人才會看的到。

至此,大功告成。希望這個教程會對生手有所幫助。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1453.html
學(xué)習(xí)Photoshop CS6必備的40個教程?
一個設(shè)計師的基礎(chǔ)PS經(jīng)驗技巧及設(shè)計心得
圖趣網(wǎng)微信
建議反饋
×