網(wǎng)站切圖教程(photoshop)

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

1、使用photoshop進(jìn)行網(wǎng)站切圖一，基本概念1，切圖，是一種網(wǎng)頁(yè)制作技術(shù)，他是將美工效果圖轉(zhuǎn)換為頁(yè)面效果圖的重要技術(shù)。Fireworks也提供了切圖技術(shù)，F(xiàn)lash則直接提供了網(wǎng)頁(yè)格式輸出技術(shù)（不需要切圖）。2，切片，是切圖的直接結(jié)果，切圖實(shí)際上就將圖切分為一系列的切片二，切圖操作過(guò)程1，切圖工具圖標(biāo)的識(shí)別2，切圖基本操作1）基本操作有兩個(gè)：劃分切片和編輯切片劃分切片，是使用切片工具，在原圖上進(jìn)行切分的操作。編輯切片，是對(duì)切分好的切片進(jìn)行編輯的操作，編輯包括對(duì)切片的名稱、尺寸等的修改等等下面我們看一下這兩個(gè)操作2）基本操作如果想移動(dòng)某個(gè)切片，可以使用“切片

2、選擇工具”選擇某個(gè)切片，并用鼠標(biāo)進(jìn)行拖動(dòng)，也可以使用實(shí)現(xiàn)，另外如果想精確的細(xì)微移動(dòng)，則可以使用實(shí)現(xiàn)如果想將某個(gè)切片存為某個(gè)圖片輸出，可以使用“切片選擇工具”選擇某個(gè)切片，然后選擇“文件”菜單，并選擇“存儲(chǔ)為Web所用格式(W)...”，然后在彈出的界面中...3，切圖技巧1）一張圖，可以有多種切分方式，如下：既然存在n多種切圖方式，那么是不是哪種方式都可以滿足要求？答案：不是的。一般對(duì)頁(yè)面的要求是，當(dāng)頁(yè)面大小發(fā)生變化時(shí)，頁(yè)面的各部分可以相對(duì)自由地伸縮，而不會(huì)使頁(yè)面發(fā)生錯(cuò)亂或變形等問(wèn)題。我們切分好的圖是要輸出為Html格式的網(wǎng)頁(yè)文件的，然后通過(guò)網(wǎng)頁(yè)編輯器，將該

3、頁(yè)面進(jìn)行加工，做成符合要求（例如可以根據(jù)內(nèi)容多少，自由伸縮等）的模板頁(yè)面。這其中，切圖的方式直接影響著模板頁(yè)面是否能夠滿足實(shí)際的要求。我們來(lái)看一個(gè)例子：2）切圖技巧主要有幾下幾點(diǎn)屬性均勻的區(qū)域適合分為一個(gè)切片，均勻主要是指顏色和形狀都沒(méi)有變化，或者在X或在Y方向上沒(méi)有變化。屬性漸變的區(qū)域適合分為一個(gè)切片，漸變有兩種表現(xiàn)形式顏色漸變形狀漸變根據(jù)原圖的內(nèi)容布局，確定整體的切分策略，即切分要有分塊的思想，要在想象中將整個(gè)布局看成是一個(gè)兩個(gè)table，然后在具體到每個(gè)table，去考慮里面應(yīng)該如何切。下面通過(guò)幾個(gè)圖例來(lái)說(shuō)明三，切圖的Html格式輸出切圖完成，就可以輸

4、出為Html格式的頁(yè)面了。在“文件”菜單中，選擇“存儲(chǔ)為Web所用格式(W)...”，在彈出的頁(yè)面中直接選擇“存儲(chǔ)”，然后在彈出的界面中，填入文件名，保存類(lèi)型選擇“HTML和圖像(*.html)”，設(shè)置為“默認(rèn)設(shè)置”即可，切片選擇“所有切片”。然后點(diǎn)擊“保存”按鈕就可以了。后面的事情，就是編輯輸出的Html頁(yè)面了。網(wǎng)頁(yè)制作：從切圖到生成網(wǎng)頁(yè)鑒于很多朋友問(wèn)到如何切圖這個(gè)問(wèn)題，又鑒于這個(gè)問(wèn)題可大可小，一兩句話是絕對(duì)講不清楚的，所以今天有空閑在家里就舉一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明這個(gè)問(wèn)題吧!OK，讓我們開(kāi)始：　　step1:在PhotoShop中打開(kāi)設(shè)計(jì)稿，如下圖　　選擇

5、工具板上的slice切片工具，先大刀闊斧的切上一番!技巧：大面積的色塊單獨(dú)切成一塊，盡可能的保持在水平線上的整齊(這個(gè)問(wèn)題你們?cè)诤竺娴闹谱黜?yè)面中深有感觸)切好的圖如下所示：　　step2:在PhotoShop中選擇file-saveforweb...來(lái)輸出，這里要注意一些參數(shù)的選擇：我們來(lái)看看紅線所標(biāo)識(shí)的1，2，3部分，將1所示的切片工具選中，然后點(diǎn)選2所示的圖片，在3所示的地方選擇色值，如果色彩單一可以選擇盡量小的色值位;(為什么要這樣？？)答案：這樣會(huì)大大減小文件的大小，同時(shí)又能比較好的保持圖片的色彩；設(shè)置好后點(diǎn)OK輸出文件，這里的文件包括了一個(gè)htm和

6、images文件夾，如圖：　　這里候你的頁(yè)面才算完成了一半，接下來(lái)在Dreamweaver里建立站點(diǎn)：　　step3:定義站點(diǎn)：　　在圖示左邊的sitename中為站點(diǎn)起一個(gè)名字，如example然后在下面的localrootfolder中選擇我們剛才導(dǎo)出的站點(diǎn)所以的文件夾；站點(diǎn)建好后在sitemap中我們看到：　　(為什么要建立站點(diǎn)？)建立站點(diǎn)可以使我們養(yǎng)成一種很好的習(xí)慣，就是把一個(gè)網(wǎng)站所包含的文件，文件夾有條理的放在一起，同時(shí)我們很容易的將這個(gè)站點(diǎn)移動(dòng)到其它地方而不用對(duì)文件路徑進(jìn)行任何改寫(xiě)!(當(dāng)然如果你實(shí)在不想建立站點(diǎn)也沒(méi)人強(qiáng)求你，我在事際工作中就遇到這

7、樣的同事，沒(méi)有習(xí)慣為頁(yè)面建立站點(diǎn)，當(dāng)然后果的要麻煩少少了)　　step4:重新制作頁(yè)面表格(為什么？)通常在photoshop中直接導(dǎo)出的htm文件是不可以直接使用的，因?yàn)橛行┑胤皆趯?shí)際運(yùn)用時(shí)要作調(diào)整，比如有動(dòng)態(tài)文字的地方，我們需要在頁(yè)面中輸入頁(yè)不是使用圖片，那么圖片就要把它拿走，如果你在直接生成的htm中拿走不想要的圖片再加上你想要的東西，你們發(fā)現(xiàn)頁(yè)面將變得慘不忍睹，整個(gè)頁(yè)面可能完全亂了套!好了，先來(lái)分析一下導(dǎo)出的htm文件吧：根據(jù)這個(gè)頁(yè)面表格所示，我們?cè)谛碌捻?yè)面中建立一個(gè)三行一列的表格:　　注意，把cellpadding,cellspacing,bord

8、er三項(xiàng)值設(shè)為0，這個(gè)很重要；因?yàn)閳D片中我們不希望看