Web設(shè)計(jì)基礎(chǔ)-處理網(wǎng)頁(yè)圖片

Web美工基礎(chǔ)教程

處理網(wǎng)頁(yè)圖片目錄3.4快速制作Web文件3.2圖像的合成3.3圖像的輸出3.1幾種常見(jiàn)的摳圖工具及方法3.5創(chuàng)建與編輯切片1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法3.1.1魔棒工具

工具介紹：魔棒工具作為基本的構(gòu)建選取工具，通過(guò)區(qū)分顏色和色調(diào)，快速將色彩和色調(diào)相近的區(qū)域進(jìn)行選擇。如圖3-1所示，在其選項(xiàng)欄中，對(duì)容差值的設(shè)定可以控制選擇范圍，容差值越大其選定范圍越大。勾選“連續(xù)”選項(xiàng)時(shí)，即為所選區(qū)域是連續(xù)的，非“連續(xù)”狀態(tài)時(shí)，會(huì)選擇所有顏色相近的區(qū)域。魔棒工具適用于摳取顏色比較單一或者背景顏色比較單一的圖像。

圖3-1魔棒工具1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法方法步驟：如圖3-2所示，對(duì)素材中的建筑物進(jìn)行摳圖:

圖3-2導(dǎo)入素材圖3-3選中部分背景【setp1】設(shè)置容差值為“10”，“連續(xù)”選項(xiàng)為非勾選，單擊藍(lán)色背景，即為選中部分背景區(qū)域。 如圖3-3所示。1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step2】對(duì)未選中的背景區(qū)域進(jìn)行加選，方法為長(zhǎng)按【Shift】鍵，單擊未選中的背景區(qū)域,重復(fù)操作直至所有背景區(qū)域加選完畢。松開(kāi)鼠標(biāo)，如圖3-4所示。

圖3-4確定選區(qū)圖3-5反選確定所需區(qū)域【step3】單擊菜單欄中的【選擇】，執(zhí)行【反向】操作（【Ctrl+Shift+I】），即為選中所需的區(qū)域，如圖3-5所示。1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step4】將步驟3中選中的區(qū)域復(fù)制（【Ctrl+J】），從而得到透明背景的新圖層,摳圖步驟完成。如圖3-6所示。

圖3-6摳圖步驟完成1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法3.1.2鋼筆工具

工具介紹：有時(shí)根據(jù)需求，需要將圖片中的某一部分摳出來(lái)用于其它目地，尤其對(duì)于內(nèi)容豐富的圖片，通常采用鋼筆工具來(lái)實(shí)現(xiàn)更加完美的摳圖效果。在使用“鋼筆工具”進(jìn)行曲線繪制時(shí)，需要根據(jù)情況改變路徑曲線的弧度，使其更貼近圖片，此時(shí)可以長(zhǎng)按【Ctrl】鍵，調(diào)整曲線的弧度。

方法步驟：如圖3-7所示，對(duì)素材中的人物進(jìn)行摳圖：

圖3-7導(dǎo)入素材圖3-8放大圖片【step1】選擇“鋼筆工具”，將工具模式設(shè)置為“路徑”，并將圖像放大至300%（【Ctrl++】），如圖3-8所示。

1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step2】使用“抓手工具”將圖片拖動(dòng)至瞄點(diǎn)起始的位置處，點(diǎn)擊“鋼筆工具”，將鼠標(biāo)移動(dòng)至瞄點(diǎn)開(kāi)始的地方單擊，創(chuàng)建第一個(gè)瞄點(diǎn)。如圖3-9所示。

圖3-9創(chuàng)建第一個(gè)瞄點(diǎn)圖3-10建立平滑點(diǎn)【step3】在新瞄點(diǎn)附件創(chuàng)建第二個(gè)瞄點(diǎn)，并同時(shí)按住鼠標(biāo)左鍵進(jìn)行拖動(dòng)，調(diào)整曲線路徑的弧度，使路徑曲線更加貼近圖形邊緣，如圖3-10所示。1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step4】重復(fù)第三步，直到圍繞整個(gè)圖像形成閉合的路徑曲線，最后的效果如圖3-11所示。

圖3-12“路徑”面板

圖3-11繪制路徑圖3-13“建立”選取對(duì)話框【step5】在“路徑”面板，點(diǎn)擊圖3-12箭頭所示按鈕，在下拉菜單中選擇“建立選區(qū)”，在彈出的對(duì)話框中設(shè)置羽化半徑為“2”，點(diǎn)擊“確定”，路徑即轉(zhuǎn)化為選區(qū)，如圖3-13所示。1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step6】按復(fù)制健【Ctrl+J】，復(fù)制圖像得到新圖層如圖3-14，摳圖成功。

圖3-14摳圖效果1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法3.1.3通道摳圖

工具介紹：在圖像處理過(guò)程中，“通道”作為一種高級(jí)功能在調(diào)色中占據(jù)著重要的作用，在顏色通道中存儲(chǔ)圖像的色彩，通過(guò)“色彩”和“曲線”對(duì)話框進(jìn)行調(diào)色。與此同時(shí)，通道也被廣泛應(yīng)用在扣圖中。

方法步驟：如圖3-15，對(duì)素材中的云朵進(jìn)行摳圖

圖3-15素材圖3-16“通道“面板【step1】復(fù)制圖像【Ctrl+J】得到新圖層，如圖3-16所示，點(diǎn)擊“窗口”在下拉框中選擇“通道”，拖動(dòng)“通道”面板至合適位置，

1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step2】選擇紅色通道，按組合鍵【Ctrl+M】出現(xiàn)“曲線”對(duì)話框，如圖3-17所示，將曲線拖動(dòng)，使其輸入值為“125”，輸出值為“40”，點(diǎn)擊“確定”，得到圖3-18所示效果。

圖3-17“曲線“對(duì)話框圖3-18調(diào)整之后效果

圖3-18調(diào)整之后效果

1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step3】選擇紅色通道，再次單擊紅色通道，并選擇通道面板下方的“將通道作為選區(qū)載入”，出現(xiàn)紅色通道的選區(qū)，效果如圖3-19所示。

圖3-19紅色通道選區(qū)圖3-20摳圖效果【step4】選擇RGB通道，轉(zhuǎn)換至“圖層“面板，對(duì)圖層1進(jìn)行復(fù)制【Ctrl+J】,呈現(xiàn)出最后的效果圖，成功摳出云彩，如圖3-20所示。

1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step5】將藍(lán)天草地背景圖拖入當(dāng)前工作區(qū)域,如圖3-21所示,調(diào)整其大小與圖層1一致,并將其置于云彩土層之下,如圖3-22所示,將摳出來(lái)的云彩與背景圖進(jìn)行融合。

圖3-21置入背景圖圖3-22合成云彩與背景圖

1.幾種常見(jiàn)的摳圖工具及方法常見(jiàn)的摳圖工具及方法【step6】選中圖層2，通過(guò)快捷鍵【Ctrl+T】將云彩的大小和位置進(jìn)行調(diào)整,如圖3-23所示,在工具箱中選擇“橡皮擦”工具，具體設(shè)置如圖3-24所示，用橡皮擦將圖3-23中圖層的交接處進(jìn)行擦除，使云彩自然融入到藍(lán)天中，效果如圖3-25所示。

圖3-23調(diào)整云彩大小位置圖3-25最后效果圖圖3-24設(shè)置橡皮擦工具的參數(shù)

2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.1合成建筑與草地圖像PS的強(qiáng)大之處不止在于繪制圖標(biāo)以及圖像的制作，在圖像處理中，可以通過(guò)各種工具的綜合使用，將不同的圖像合成為具有特殊效果的圖像。本節(jié)中，通過(guò)將建筑，草地,以及道路汽車圖像合成為一個(gè)最終圖像，介紹圖像合成中的工具使用以及圖像合成的方法技巧。【step1】準(zhǔn)備素材,建筑素材如圖3-26所示,草地圖像如圖3-27所示。

圖3-26建筑素材圖3-27草地素材2.圖像的合成常常見(jiàn)的摳圖工具及方法【step2】將草地圖像拖入當(dāng)前畫布界面如圖3-28所示，繼續(xù)拖入建筑圖像,如圖3-29所示，按【Enter】鍵確定選區(qū),將草地圖層隱藏,如圖3-30所示。

圖3-29添加建筑素材到畫布

圖3-28拖入草地素材

圖3-30隱藏草地背景

2.圖像的合成常見(jiàn)的摳圖工具及方法【step3】選中建筑物所在的圖層，對(duì)建筑進(jìn)行摳圖,摳圖工具選擇鋼筆工具，為方便摳圖,將圖像放大,如圖3-31所示。確定建筑物大小之后，用鋼筆工具進(jìn)行描點(diǎn)，如圖3-32所示。

圖3-31放大建筑物圖像圖3-32描點(diǎn)繪制路徑

2.圖像的合成常見(jiàn)的摳圖工具及方法【step4】封閉路徑，點(diǎn)擊【路徑】/【建立選區(qū)】,設(shè)置羽化半徑為2像素,如圖3-33所示,點(diǎn)擊"確定",結(jié)果如圖3-34所示,選區(qū)建立成功。

圖3-33建立選區(qū)圖3-34選區(qū)建立成功

2.圖像的合成常見(jiàn)的摳圖工具及方法在圖層面板新建圖層【Shift+Ctrl+Alt+N】,如圖3-35所示，新建“圖層1”。選中建筑圖層進(jìn)行復(fù)制【Ctrl+C】,然后選中“圖層1”進(jìn)行粘貼【Ctrl+V】，摳圖成功，如果3-36所示。

圖3-35新建圖層圖3-36建筑摳圖成功

2.圖像的合成常見(jiàn)的摳圖工具及方法【step5】取消草地背景的隱藏，選中圖層1，調(diào)出界定框【Ctrl+T】，將建筑物等比例縮小，并將其移動(dòng)至樹(shù)叢之后，效果圖如圖3-37所示。

圖3-37調(diào)整建筑物的大小和位置圖3-38橡皮擦工具【step6】在工具箱中選擇橡皮擦工具，如圖3-38所示，

2.圖像的合成常見(jiàn)的摳圖工具及方法設(shè)置完畢橡皮擦參數(shù)如圖3-39，對(duì)建筑和樹(shù)叢邊界部分進(jìn)行擦除，使建筑物的視覺(jué)位置呈現(xiàn)在小樹(shù)叢之后，被小樹(shù)叢剛好掩蓋了一部分的視覺(jué)效果，最后效果圖如圖3-40所示。

圖3-39設(shè)置橡皮擦工具參數(shù)

圖3-40建筑物與樹(shù)叢合成效果

2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.2合成車和草地圖像【step1】繼續(xù)將車圖像拖入到畫布中，將其他圖層隱藏，如圖3-41所示，在合成圖像之前，先需要將圖像中的道路和車一起摳出來(lái)。

圖3-41車圖像拖入畫布圖3-42放大圖像【step2】按【Ctrl++】鍵將圖像放大，如圖3-42所示，使用3.1.2節(jié)所學(xué)的鋼筆工具對(duì)其進(jìn)行描點(diǎn)直至路徑閉合2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.2合成車和草地圖像點(diǎn)擊路徑面板選擇“建立選區(qū)”，設(shè)置羽化半徑為2像素，如圖3-43所示，選區(qū)建立完畢，即可對(duì)選區(qū)進(jìn)行移動(dòng)，如圖3-44所示。

圖3-43建立選區(qū)圖3-44確定選區(qū)2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.2合成車和草地圖像【step3】按【Shift+Ctrl+Alt+N】新建圖層，復(fù)制選擇所在圖層【Ctrcl+C】，選定新建圖層，進(jìn)行粘貼【Ctrl+V】，將選區(qū)復(fù)制到新的圖層，如圖3-45所示。

圖3-45復(fù)制選區(qū)圖3-46集合所有素材【step4】將第一步中合成好的圖像顯示，使摳圖出來(lái)的道路和車出現(xiàn)在畫布中，如圖3-46所示2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.2合成車和草地圖像選擇車所在圖層，按【Ctrl+T】調(diào)整車和道路的大小，如圖3-47所示。大小調(diào)整之后，將車和道路置于右下角的位置，使合成的圖像看起來(lái)協(xié)調(diào)一致，如圖3-48所示。

圖3-47調(diào)整車和道路的大小圖3-48調(diào)整車和道路的位置2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.2合成車和草地圖像【step5】處理馬路與草地交界處，使其統(tǒng)一協(xié)調(diào)，選擇工具箱中的多邊形套索工具，如圖3-49所示，在不和諧的邊界處繪制一個(gè)三角形，如圖3-50所示，按【Enter】鍵刪除選區(qū)中多余的道路部分，刪除之后按【Ctrl+D】取消選區(qū)，使邊界融合為一體，如圖3-51所示。

圖3-49多邊形套索工具圖3-50多邊形套索工具繪制選區(qū)圖3-51融合草地和道路的邊界處2.圖像的合成常見(jiàn)的摳圖工具及方法3.2.2合成車和草地圖像【step6】根據(jù)車，草地，建筑的比例關(guān)系，對(duì)合成圖像中的各個(gè)部分做最后調(diào)整，調(diào)整之后的最后效果如圖3-52所示。

圖3-47調(diào)整車和道路的大小3.圖像的輸出常見(jiàn)的摳圖工具及方法在Photoshop圖像處理中，支持20多種文件保存格式，默認(rèn)的格式為psd，能支持Photoshop的全部信息：α通道，專色通道，多圖層，路徑和剪貼路徑，它還支持Photoshop使用的任何顏色深度和圖象模式。由于psd可以保存作品的創(chuàng)建過(guò)程，因此常用于設(shè)計(jì)再次修改，同時(shí)擁有良好的兼容性，但也正是因?yàn)槠浔４媪舜罅啃畔?，?dǎo)致其保存需要較大存儲(chǔ)空間。在實(shí)際應(yīng)用中，根據(jù)具體的情況，可以將圖像存儲(chǔ)為各種格式。下面著重介紹幾種常用圖像格式。

3.圖像的輸出見(jiàn)的摳圖工具及方法3.2.1JPEGJPEG實(shí)際上應(yīng)該是JFIF（JPEGFileInterchangeFormat)格式，簡(jiǎn)稱為JPEG。此格式是有損壓縮，可調(diào)節(jié)它的壓縮量而改變文件的大小，因此，和與GIF格式一樣，通常被web應(yīng)用。JPEG不支持α通道，也不支持透明圖像，但支持路徑。支持RGB模式，同時(shí)也支持CMYK模式。此格式適用于色調(diào)連續(xù)或相片圖像。JPEG保存圖象時(shí)可選擇壓縮量，壓縮量越小，圖象質(zhì)量越好。在保存該格式時(shí)還有選擇：基線（標(biāo)準(zhǔn)），生成的文件可被所有的瀏覽器接受；基線已優(yōu)化，生成的文件較小，但有的程序不接受；連續(xù)，文件較大，可選擇掃描次數(shù)，載入時(shí)能分級(jí)逐漸顯示，但不是所有的瀏覽器都支持。在網(wǎng)頁(yè)制作過(guò)程中，橫幅廣告、大的插圖或者商品的圖片都可以將其保存為JPEG格式。

3.圖像的輸出見(jiàn)的摳圖工具及方法3.3.2GIFGIF是GraphicsInterchangeFormat（圖形交換格式）的縮寫，目前Internet上大量使用的彩色動(dòng)畫文件大多為GIF格式的文件。因?yàn)镚IF圖像文件短小且下載速度快，可以使用許多具有同樣大小的圖像文件制作成動(dòng)畫效果。GIF格式作為目前較為重要的圖象格式之一，其重要地位在于web上的廣泛應(yīng)用。GIF屬于索引模式，也是一種無(wú)損壓縮格式，共256種顏色，其包含信息量小，可以在web上快速下載GIF圖像。支持α通道，以此可以在web上形成透明的圖像。另外，也因信息量小而被制作成動(dòng)畫，在web上受到極大的歡迎。GIF格式支持隔行掃描，還增加了漸顯方式,因此圖像在傳輸過(guò)程中,用戶可以先看到圖像的大致輪廓,然后隨著傳輸過(guò)程的繼續(xù)而逐步看清圖像中的細(xì)節(jié)部分,從而適應(yīng)了用戶在web上觀看時(shí)，圖像逐漸從模糊到清晰的效果。

3.圖像的輸出見(jiàn)的摳圖工具及方法3.3.3PNGPNG格式PNG（PortableNetworkGraphics）是繼JPEG與GIF之后新起的一種網(wǎng)絡(luò)圖像格式,與JPEG一樣，PNG格式也屬于無(wú)損壓縮網(wǎng)頁(yè)格式.在1994年底,由于Unysis公司宣布GIF擁有專利的壓縮方法,要求開(kāi)發(fā)GIF軟件的作者須繳交一定費(fèi)用,由此促使免費(fèi)的png圖像格式的誕生.PNG的一出現(xiàn)就結(jié)合GIF及JPG兩種格式的優(yōu)點(diǎn)，存儲(chǔ)形式豐富,兼具GIF和JPG的色彩模式。PNG格式可以將圖像文件壓縮至極限以便于在網(wǎng)絡(luò)進(jìn)行傳輸,同時(shí)還能保存所有與圖像品質(zhì)相關(guān)的信息，PNG采用無(wú)損壓縮方式來(lái)減少文件的大小,與犧牲圖像品質(zhì)從而得到高壓縮率的JPG格式是不一樣的。PNG顯示速度非常快,僅需下載1x64的圖像信息就能顯示出低分辨率的預(yù)覽圖像。此外，PNG支持透明圖像,透明圖像在制作網(wǎng)頁(yè)圖像時(shí)非常有用,可以將圖象背景設(shè)置成透明,然后用網(wǎng)頁(yè)本身的顏色信息取代設(shè)置為透明的顏色,這樣操作可以讓圖像和網(wǎng)頁(yè)背景有效地融合在一起.當(dāng)然，PNG格式除了其優(yōu)點(diǎn)之外，也有其缺點(diǎn)，其不支持動(dòng)畫應(yīng)用的效果,因此不能取代GIF和JPEG，而且這種格式也不能適用于所有的瀏覽器。

3.圖像的輸出見(jiàn)的摳圖工具及方法3.3.4BMPBMP（Bitmap）即位圖的意思,是Windows操作系統(tǒng)中的標(biāo)準(zhǔn)圖像文件格式,很多Windows應(yīng)用程序都支持BMP格式.Windows操作系統(tǒng)的流行和眾多Windows應(yīng)用程序的開(kāi)發(fā),推動(dòng)了BMP位圖格式的廣泛應(yīng)用.其特點(diǎn)是包含的圖像信息比較豐富,支持1-24位的顏色深度，可采用RGB、灰度、索引顏色等，幾乎不不能保留Alpha通道信息，基本上不會(huì)對(duì)圖像進(jìn)行壓縮,也因此導(dǎo)致這種格式文件占用較多磁盤空間。以上介紹的四種圖像格式可以在具體輸出時(shí)通過(guò)四聯(lián)對(duì)比框進(jìn)行比較，通過(guò)【文件】/【存儲(chǔ)為Web所用格式】可調(diào)出對(duì)話框，如圖3-53所示，此工具可以幫助用戶確定輸出的圖像質(zhì)量，在圖像質(zhì)量和文件大小之間做出平衡，用戶根據(jù)需求選擇所需要的存儲(chǔ)格式。

圖3-53四聯(lián)對(duì)比框

3.圖像的輸出見(jiàn)的摳圖工具及方法3.3.5TIFFTIFF格式TIFF（TagImageFileFormat）主要用于在不同應(yīng)用程序和計(jì)算機(jī)平臺(tái)中文件交換，是Mac中廣泛被使用的圖像格式之一。它是Aldus和微軟聯(lián)合開(kāi)發(fā),最初目的是用于跨平臺(tái)存儲(chǔ)掃描圖像，發(fā)展到現(xiàn)在，大部分繪畫和圖像編輯以及頁(yè)面版式的應(yīng)用程序都支持這種格式文件。TIFF格式可以保存圖層、通道和路徑信息，在其他應(yīng)用程序中，保存的圖層會(huì)被合并，只有在PS中打開(kāi)才能對(duì)圖層進(jìn)行修改編輯。其特點(diǎn)是圖像格式復(fù)雜、存貯信息多,因此圖像的質(zhì)量得到提高。目前在Mac和PC機(jī)上移植TIFF文件十分便捷,因而TIFF現(xiàn)在也是微機(jī)上使用最廣泛的圖像文件格式之一.3.3.5TIFFAI格式是AdobeIllustrator軟件特有的圖像格式，是一種矢量圖形存儲(chǔ)格式。在Photoshop保存圖像格式時(shí)，可將其保存為AI格式，在常用的矢量圖形軟件中（Illustrator，CoreDraw）可以直接打開(kāi)文件進(jìn)行編輯和修改。 4.快速制作Web文件常見(jiàn)的摳圖工具及方法一張圖片的像素或者占用內(nèi)存太大，在具體使用過(guò)程中需要對(duì)圖片進(jìn)行切割或者存儲(chǔ)為web所用格式，因此用戶訪問(wèn)網(wǎng)頁(yè)時(shí)才能快速的打開(kāi)圖片。本節(jié)主要介紹如何設(shè)置圖片存儲(chǔ)為web所用格式。方法步驟：【step1】打開(kāi)ps軟件，打開(kāi)要用進(jìn)行切片的圖片。點(diǎn)擊工具箱中的“切片工具”，如圖3-54所示：

圖3-54載入素材，選擇切片工具4.快速制作Web文件常見(jiàn)的摳圖工具及方法【step2】進(jìn)行選區(qū)繪制，將網(wǎng)頁(yè)中的元素進(jìn)行切割，以便于對(duì)單個(gè)小圖片進(jìn)行優(yōu)化，不斷進(jìn)行切割，對(duì)于不需要的切片，右擊選區(qū)內(nèi)部，選擇刪除切片進(jìn)行切片刪除。切割之后效果如圖3-55所示：

圖3-55切割網(wǎng)頁(yè)元素圖3-56選擇切片進(jìn)入編輯選項(xiàng)

【step3】選中選區(qū)3，右擊選擇“編輯切片選項(xiàng)”，如圖3-56所示，進(jìn)入切片選項(xiàng)對(duì)切片進(jìn)行各項(xiàng)信息設(shè)置。4.快速制作Web文件常見(jiàn)的摳圖工具及方法【step4】在切片選項(xiàng)中進(jìn)行各項(xiàng)信息填寫，切片類型選擇“圖像”；名稱會(huì)默認(rèn)為文檔名+切片編號(hào)；URL中所填寫的地址欄作用是在頁(yè)面點(diǎn)擊圖像時(shí)跳轉(zhuǎn)的頁(yè)面地址，本例中設(shè)置其為；目標(biāo)選項(xiàng)設(shè)置為“blank”即一個(gè)空白幀,因此在點(diǎn)擊圖像時(shí)會(huì)保留當(dāng)前頁(yè)面，切換到另外一個(gè)頁(yè)面；如圖3-57所示：

圖3-57設(shè)置URL和目標(biāo)圖3-58設(shè)置存儲(chǔ)信息

【step5】點(diǎn)擊文件，選擇“存儲(chǔ)為Web所用格式”，在優(yōu)化的選擇格式中選擇“GIF”，點(diǎn)擊存儲(chǔ)，設(shè)置存儲(chǔ)格式為“HTML和圖像”，文件名不能包含中文字符，如圖3-58所示,4.快速制作Web文件常見(jiàn)的摳圖工具及方法將文件存儲(chǔ)在相應(yīng)文件夾中，如圖3-59所示，得到一個(gè)切圖文件夾里面存放了切的圖，另外還有一個(gè)html的源文件。

圖3-59切圖和源文件圖3-60URL實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

【step6】點(diǎn)擊源文件，如圖3-60所示，鼠標(biāo)移動(dòng)至切片ym_3，鼠標(biāo)呈現(xiàn)手狀，點(diǎn)擊圖片，頁(yè)面跳轉(zhuǎn)到頁(yè)面，同時(shí)保留了原頁(yè)面。4.快速制作Web文件常見(jiàn)的摳圖工具及方法【step7】信息文本中設(shè)置的文字即為鼠標(biāo)放到圖片時(shí)，狀態(tài)欄中顯示的信息，本案例中設(shè)置其為“”；alt選項(xiàng)中的值將會(huì)在鼠標(biāo)放置在圖片上時(shí)出現(xiàn)的替換文本，設(shè)置其為“PS切片”，效果如圖3-61所示：

圖3-61信息文本設(shè)置和alt設(shè)置

5.創(chuàng)建與編輯切片常見(jiàn)的摳圖工具及方法由于網(wǎng)絡(luò)傳輸時(shí)需要占用較多流量，因此網(wǎng)速的好壞會(huì)影響傳輸速度。如果圖片比較大，用戶在打開(kāi)頁(yè)面時(shí)，需等待較長(zhǎng)時(shí)間才能看到完整圖片。當(dāng)要求快速實(shí)現(xiàn)圖片在網(wǎng)絡(luò)中顯示或下載，因?yàn)榍衅梢约涌靾D片的下載速度，因此切片是一個(gè)很好的選擇，在網(wǎng)頁(yè)圖片中被應(yīng)用很廣。把圖片切片后，在網(wǎng)上看到一張圖片并把它下載時(shí)，很多時(shí)候?qū)嶋H下載的是這張圖片的幾塊切片，下載之后再組成一張圖片。本節(jié)通過(guò)切片實(shí)現(xiàn)漸變效果的網(wǎng)頁(yè)背景，介紹創(chuàng)建和編輯切片的的方法和技巧。

方法步驟：在切圖過(guò)程中，原則上圖切的越小越少越好，但兩者是相互矛盾的，因此，在具體切圖過(guò)程中，需要達(dá)到兩者之間的一個(gè)平衡，正常一個(gè)網(wǎng)頁(yè)切至20-30個(gè)圖能達(dá)到良好的加載速度。另外，切圖技巧中，須注意根據(jù)參考線一行一行的切；背景如果是單一背景色或漸變色，將其切成小條；如不宜進(jìn)行拆分則無(wú)須再拆分；切圖時(shí)候要將圖放大，使移動(dòng)一個(gè)像素時(shí)也能清晰明顯，保證原圖和網(wǎng)頁(yè)能盡量保持一致。

5.創(chuàng)建與編輯切片常見(jiàn)的摳圖工具及方法如圖3-62所示，通過(guò)創(chuàng)建和編輯切片,重構(gòu)如圖所示網(wǎng)頁(yè)的頭部,頁(yè)面其他部分的重構(gòu)與頭部類似。

圖3-62素材5.創(chuàng)建與編輯切片常見(jiàn)的摳圖工具及方法【step1】打開(kāi)ps軟件，托入要用切片工具切分的背景圖片。如圖3-63所示：

圖3-63打開(kāi)素材圖3-64打開(kāi)標(biāo)尺工具

【step2】點(diǎn)擊菜單欄中標(biāo)尺工具(【視圖】/【標(biāo)尺】),打開(kāi)標(biāo)尺工具使素材上方和左邊出現(xiàn)標(biāo)尺,如圖3-64所示,標(biāo)尺可以確定網(wǎng)頁(yè)以及之后切圖的尺寸大小。5.創(chuàng)建與編輯切片常見(jiàn)的摳圖工具及方法【step3】從標(biāo)尺處向下或者向右拉參考線，對(duì)網(wǎng)頁(yè)的頭部進(jìn)行分區(qū)，如圖3-65所示，將整個(gè)頭部的圖案劃分成各個(gè)小區(qū)域，通過(guò)對(duì)頭部的分析，將其劃分成聯(lián)系電話，公司logo,兩個(gè)菜單欄(紅色部分和其余部分不在一個(gè)圖層)，以及背景banner5個(gè)圖片是比較合理的，劃分完畢之后效果如圖3-66所示。

圖3-65向下或向右拉參考線圖3-66用參考線劃分區(qū)域5.創(chuàng)建與編輯切片常見(jiàn)的摳圖工具及方法【step4】選擇工具箱中的切片工具，如圖3-67所示，根據(jù)參考線劃分好的區(qū)域確定選區(qū)對(duì)網(wǎng)頁(yè)頭部從上往下一行一行進(jìn)行切圖，如圖3-68所示。

圖3-67切片工具圖3-68確定選區(qū)進(jìn)行切圖