photoshop網(wǎng)站切圖高級(jí)教程

《photoshop網(wǎng)站切圖高級(jí)教程》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、photoshop網(wǎng)站切圖高級(jí)教程一，基本概念1,切圖，是…種網(wǎng)頁制作技術(shù)，他是將美工效果圖轉(zhuǎn)換為頁面效果圖的重要技術(shù)。Fireworks也提供了切圖技術(shù)，F(xiàn)lash則直接提供了網(wǎng)頁格式輸岀技術(shù)（不需要切圖）。2,切片，是切圖的直接結(jié)果，切圖實(shí)際上就將圖切分為一系列的切片二，切圖操作過程1,切圖工具圖標(biāo)的識(shí)別ICJdobrPhotoshop?文代0m（i）sea）sffap金鼻①頤o）mos■口?bop當(dāng)然，在切圖之前，還要將要切切分的原圖裝養(yǎng)進(jìn)來2,切圖基本操作1）基本操作有兩個(gè)：劃分切片和編輯切片劃分切片，是使用切片工具，在原圖上進(jìn)行切分

2、的操作編輯切片，是對(duì)切分好的切片進(jìn)行編輯的操作，編輯包括對(duì)切片的名稱、尺寸等的修改等等下面我們看一下這兩個(gè)操作2）基本操作緲屜此處添加丈本」刪除切片勺片曲($＞：SlTQiX?43□5片WAMCD：無如果想移動(dòng)某個(gè)切片，可以使用^切片選擇工具''選擇某個(gè)切片，并用tlMA*金頭到用戶劃分匕A并巻為頂前移一直73圧hr1"*編輯切片選項(xiàng)…VU.OP鼠標(biāo)進(jìn)行拖動(dòng)，也可以使用實(shí)現(xiàn)，另外如果想精確的細(xì)微移動(dòng)，則可以使用實(shí)現(xiàn)如果想將某個(gè)切片存為某個(gè)圖片輸出，可以使用“切片選擇工具‘‘選擇某個(gè)切片，然后選擇“文件”菜單，并選擇“存儲(chǔ)為Web所用格式(W)

3、…"，然后在彈出的界面中…丄?對(duì)水設(shè)置圖片格式（png.jpg.gif等等）?-u?u--r/Kti-XI設(shè)It完成后點(diǎn)擊“存儲(chǔ)”設(shè)置圖片的具體格式B*

4、根據(jù)內(nèi)容多少，自由伸縮等）的模板頁面。這其中，切圖的方式直接影響著模板頁面是否能夠滿足實(shí)際的耍求。我們來看一個(gè)例子：在上下方向上是可以伸縮的,說明切圖時(shí)，紅框內(nèi)的部分是一個(gè)切片（頁面中將該切片做為背寮并設(shè)為自動(dòng)Y向填充即可）:1??n.e*n>ia?Me*M?e*zsn#i2?i8?e?19?記錄i*e*22*S卯CR?*e?如果將整個(gè)左邊做為一個(gè)切片，那么在相應(yīng)的Html頁面中，即使設(shè)置背雖自動(dòng)Y向填充，那么左邊效果會(huì)變形2）切圖技巧主要有幾下幾點(diǎn)屬性均勻的區(qū)域適合分為一個(gè)切片，均勻主要是指顏色和形狀都沒有變化，或者在X或在Y方向上沒有變化

5、。屬性漸變的區(qū)域適合分為一個(gè)切片，漸變有兩種表現(xiàn)形式顏色漸變形狀漸變根據(jù)原圖的內(nèi)容布局，確定整體的切分策略，即切分要有分塊的思想,要在想象中將整個(gè)布局看成是一個(gè)兩個(gè)table,然后在具體到每個(gè)table,去考慮里面應(yīng)該如何切。下面通過幾個(gè)圖例來說明三,切圖的Html格式輸出切圖完成，就可以輸出為Html格式的頁面了。在^文件"菜單中，選擇存儲(chǔ)為Web所用格式(W)??T,在彈出的頁面中直接選擇“存儲(chǔ)”，然后在彈出的界面中，填入文件名，保存類型選擇州TML和圖像(Ihtml)：設(shè)置為“默認(rèn)設(shè)置"即可，切片選擇“所有切片然后點(diǎn)擊''保存'‘按鈕就

6、可以了。后面的事情，就是編輯輸出的Html頁面了。網(wǎng)頁制作：從切圖到生成網(wǎng)頁鑒于很多朋友問到如何切圖這個(gè)問題，又鑒于這個(gè)問題可大可小，一兩句話是絕對(duì)講不清楚的，所以今天有空閑在家里就舉一個(gè)簡(jiǎn)單的例子來說明這個(gè)問題吧!OK,讓我們開始:step1:在PhotoShop中打開設(shè)計(jì)稿，如下圖選擇工具板上的slice切片工具，先大刀闊斧的切上一番!技巧：大面積的色塊單獨(dú)切成一塊，盡可能的保持在水平線上的整齊（這個(gè)問題你們?cè)诤竺娴闹谱黜撁嬷猩钣懈杏|）切好的圖如下所示:step2:在PhotoShop中選擇file-saveforweb...來輸出，這里

7、要注意一些參數(shù)的選擇：我們來看看紅線所標(biāo)識(shí)的1,2,3部分，將1所示的切片工具選中,然后點(diǎn)選2所示的圖片，在3所示的地方選擇色值，如果色彩單一可以選擇盡量小的色值位;（為什么要這樣？？）答案：這樣會(huì)大大減小文件的大小，同時(shí)又能比較好的保持圖片的色彩；設(shè)置好后點(diǎn)0K輸出文件，這里的文件包括了一個(gè)htm和images文件夾，如圖：這里候你的頁面才算完成了一半，接下來在Dreamweaver里建立站占.八、、?stcp3:定義站點(diǎn):$*eDefMMnlorllmaned9tei2SJhl?*Zat*,irr?S>t<*SVU￡

8、i&C5?v>-n?4ylUtti>iHVqUjreitSiteEBCSOLUniUcd￡?皿*論??4匕q?八J(7I叭、?1IhfMllIf??