網(wǎng)頁(yè)設(shè)計(jì)中圖像切圖技巧
在網(wǎng)頁(yè)的制作過(guò)程中，不時(shí)需要將圖像進(jìn)行切圖處理。下面是小編為大家整理的網(wǎng)頁(yè)設(shè)計(jì)中圖像切圖技巧，歡迎參考~
網(wǎng)頁(yè)制作技術(shù)伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起，目前，國(guó)內(nèi)外計(jì)算機(jī)行業(yè)對(duì)于網(wǎng)頁(yè)制作的研究較多，但是由于受到初學(xué)者個(gè)人風(fēng)格和操作技巧的影響，在網(wǎng)頁(yè)制作中普遍存在不同程度的問(wèn)題。而對(duì)圖像進(jìn)行切圖處理也是一個(gè)存在網(wǎng)頁(yè)制作中的問(wèn)題�；诖�，本文就網(wǎng)頁(yè)設(shè)計(jì)中圖像切圖技巧進(jìn)行了探討，并提出了一些有關(guān)的技巧，相信對(duì)圖像切圖的工作能有一定的幫助作用。
1 切圖技術(shù)
切圖就是指在網(wǎng)頁(yè)制作過(guò)程中，用圖形圖像處理軟件提供的切片工具，將美工設(shè)計(jì)的網(wǎng)頁(yè)效果圖這種大幅圖像，分割成為一系列小的圖像，這些小圖像稱為原大幅圖像的切片。一張圖可以有多種切圖方案，但不是所有的切圖方案都適合后期的網(wǎng)頁(yè)制作的。因此需要在眾多切圖方案中，找出一種適合后期網(wǎng)頁(yè)編程的最佳切圖方案。本文中所說(shuō)的切圖技術(shù)，就是指的實(shí)現(xiàn)最佳切圖方案的切圖技術(shù)。由于它遵循一些切圖原則和技巧，所以它能夠?qū)崿F(xiàn)最佳切圖方案。
由于切圖時(shí)，圖像的最小單位是像素，矩形對(duì)邊上的像素個(gè)數(shù)應(yīng)該是相同，或者遇到圓角應(yīng)該是銳化的。但是在人工操作時(shí)，可能會(huì)發(fā)生像素個(gè)數(shù)的變化，或者圓角產(chǎn)生頓挫角。因此，在切圖時(shí)，將原圖采用300%以上的放大倍數(shù)切圖。切完整個(gè)大圖后，把一系列的切片全部選中，接著利用軟件中的圖像優(yōu)化工具，即菜單欄中“窗口”下拉菜單“優(yōu)化”命令對(duì)所有的小切片進(jìn)行優(yōu)化來(lái)解決以上問(wèn)題。然后利用文件菜單下的“導(dǎo)出”命令生成HTML網(wǎng)頁(yè)和圖像，最后在網(wǎng)頁(yè)制作軟件DREAMWEAVER中建立站點(diǎn)，將上面導(dǎo)出的網(wǎng)頁(yè)和小圖像都放在網(wǎng)站里。導(dǎo)出的網(wǎng)頁(yè)文件是不能用的。因?yàn)橐粋�(gè)網(wǎng)站的頁(yè)面大小要求統(tǒng)一。因此，接下來(lái)的工作是在網(wǎng)頁(yè)制作軟件中制作表格。用分塊的思想來(lái)看整個(gè)網(wǎng)頁(yè)的布局，一個(gè)塊就是一個(gè)表格。把網(wǎng)頁(yè)看成是多個(gè)獨(dú)立的表格組成的。將導(dǎo)出的圖片插入到單元格中。日常工作中常用的圖形圖像處理軟件有Photoshop、Flash、Firework等，這些軟件中都有切片工具，但是在網(wǎng)頁(yè)制作時(shí)，圖形圖像處理軟件首選使用Firework。因?yàn)镈REAMWEAVER中只要對(duì)圖像雙擊，系統(tǒng)會(huì)自動(dòng)調(diào)用Firework軟件。
2 切圖原則
一張圖可以有多種相關(guān)的切圖方案，但不是所有的切圖方案都是合適網(wǎng)頁(yè)編程的。所以在切圖技術(shù)中，應(yīng)該保證實(shí)現(xiàn)的是最佳切圖方案，因此切圖技術(shù)中還涉及了切圖的原則和切圖的技巧。
2.1 塊與切片的概念
在本文中所說(shuō)的一個(gè)塊與切片概念是不同的。塊和切片都是網(wǎng)頁(yè)中的一部分，但是塊指的范圍比切片大。塊中可以包含一個(gè)或多個(gè)切片。塊是指在網(wǎng)頁(yè)上內(nèi)容相關(guān)的'區(qū)域范圍。切片是從圖中相關(guān)范圍中分割出來(lái)的一小圖形。如果轉(zhuǎn)換成網(wǎng)頁(yè)后，塊對(duì)應(yīng)了網(wǎng)頁(yè)中的表格，而切片對(duì)應(yīng)的是表格中的單元格。
2.2 分塊的原則一：以相關(guān)內(nèi)容為一塊
根據(jù)原圖中相關(guān)內(nèi)容，確定整體的切分策略，即切分要有分塊的思想，把整個(gè)網(wǎng)頁(yè)看成是多個(gè)塊構(gòu)成的，每個(gè)塊就是一個(gè)table，塊中每一個(gè)細(xì)節(jié)內(nèi)容就是table中單元格中內(nèi)容。即將整個(gè)網(wǎng)頁(yè)看成是由多個(gè)table組成的，然后在具體到每個(gè)table，去考慮里面應(yīng)該如何切。必須強(qiáng)調(diào)的是，應(yīng)該把整個(gè)網(wǎng)頁(yè)看成是多個(gè)獨(dú)立的塊構(gòu)成，切片是塊中的內(nèi)容。依據(jù)這種思想去切圖，然后在網(wǎng)頁(yè)制作軟件中，插入多個(gè)表格。塊對(duì)應(yīng)成了網(wǎng)頁(yè)中的表格，切片對(duì)應(yīng)成表格中的單元格內(nèi)容。在切圖時(shí)，同一塊中的內(nèi)容是完整的，也就是說(shuō)，要保證完整的一部分在一個(gè)塊內(nèi)，例如某區(qū)域的標(biāo)題文字，網(wǎng)頁(yè)的LOGO，網(wǎng)頁(yè)的廣告，網(wǎng)頁(yè)的導(dǎo)航區(qū)等可以分別是一個(gè)獨(dú)立的塊，這樣做的目的是方便日后網(wǎng)頁(yè)編程和修改。
2.3 分塊的原則二：盡量分成大行，平行的切
當(dāng)一個(gè)網(wǎng)頁(yè)的內(nèi)容比較多時(shí)，在顯示網(wǎng)頁(yè)時(shí)是有時(shí)間差的，這時(shí)要求內(nèi)容的顯示是從上而下從左到右逐行顯示網(wǎng)頁(yè)的內(nèi)容，決不允許一個(gè)網(wǎng)頁(yè)上的內(nèi)容雜亂的跳出來(lái)。因此，在分塊時(shí)也應(yīng)該貫穿逐行分塊的原則。切圖的時(shí)候要盡量平行的切，也就是說(shuō)，分成大行，然后再逐行的切。如果一個(gè)網(wǎng)頁(yè)的顯示頁(yè)面是由多個(gè)表格構(gòu)成的，這樣做的目的是當(dāng)客戶端瀏覽一個(gè)網(wǎng)頁(yè)時(shí)，由于它是由多個(gè)表格構(gòu)成的，因此，客戶端與網(wǎng)頁(yè)服務(wù)器會(huì)生成多個(gè)request請(qǐng)求，多個(gè)表格同時(shí)下載信息，因此網(wǎng)頁(yè)下載的速度就會(huì)相對(duì)快。避免出現(xiàn)把網(wǎng)頁(yè)整個(gè)頁(yè)面看成一個(gè)塊，然后塊里又分塊，出現(xiàn)塊中嵌套塊。因?yàn)檫@種結(jié)構(gòu)在由切片轉(zhuǎn)換成網(wǎng)頁(yè)后就出現(xiàn)了表格的嵌套，表格的嵌套影響了客戶端網(wǎng)頁(yè)瀏覽的速度。
2.4 切片的原則：以屬性相同為依據(jù)
一般切圖原則是：屬性相同的區(qū)域適合分為一個(gè)切片。屬性相同主要是指顏色和形狀都沒(méi)有變化，或者在X或在Y方向上沒(méi)有變化。屬性漸變的區(qū)域適合分為一個(gè)切片，漸變有兩種表現(xiàn)形式顏色漸變，形狀漸變。
3 切圖的技巧
切圖也有技巧。構(gòu)成一張圖片的信息量是非常大的，因此在服務(wù)器中存儲(chǔ)一張圖片時(shí)占的容量也是很大的，同時(shí)從服務(wù)器里下載圖片到客戶端也需要時(shí)間也就相當(dāng)長(zhǎng)。因此，在利用切片轉(zhuǎn)換成網(wǎng)頁(yè)時(shí)，可以利用一些技巧，即減少切片個(gè)數(shù)和減小切片的大小，可以解決以上存在的問(wèn)題。
3.1 減少切片的個(gè)數(shù)
網(wǎng)頁(yè)上的文字與圖片信息都是存儲(chǔ)在網(wǎng)頁(yè)服務(wù)器上的，一個(gè)切片就是一張小的圖片。根據(jù)顯示的點(diǎn)陣原理可以知道，對(duì)于同一張大圖像來(lái)說(shuō)，切片數(shù)減少，存儲(chǔ)在網(wǎng)頁(yè)服務(wù)器上這張圖的信息量也就減少了，也就是說(shuō)在網(wǎng)頁(yè)服務(wù)器上占的空間減少。所以當(dāng)切片的背景是單一顏色，切片的文字沒(méi)有效果，這時(shí)就可以采取這種特殊的處理方式對(duì)此切片進(jìn)行處理。即可以將單一顏色和文字沒(méi)有效果的切片丟掉，在DREAMWEAVER中打開(kāi)站點(diǎn)，插入表格，在對(duì)應(yīng)的單元格中，利用DREAMWEAVER軟件提供的設(shè)置單元格的背景色，直接從鍵盤上輸入文字內(nèi)容。這種做法實(shí)現(xiàn)了切片的效果，同時(shí)可以使網(wǎng)頁(yè)服務(wù)上存儲(chǔ)的切片數(shù)減少了。以“京東商城特賣新”網(wǎng)頁(yè)頁(yè)面為例，在實(shí)驗(yàn)中保證網(wǎng)頁(yè)頁(yè)面效果相同的情況下，采用減少切片個(gè)數(shù)和未采用減少切片個(gè)數(shù)方法，可以得到下面表中的數(shù)據(jù)。從下面表中的數(shù)據(jù)可以看出兩種處理辦法造成的結(jié)果是：未采用減少切片個(gè)數(shù)方法時(shí)，圖片總?cè)萘繛?02MB，而采用減少切片個(gè)數(shù)方法后，圖片總?cè)萘繛?0.3MB，明顯前后圖片的總?cè)萘孔兓艽�，值得提倡這種做法。
3.2 減小切片大小
大面積的顏色相同的，或者形狀相同圖塊，可以只從原圖中切出一個(gè)像素的切片，然后DREAMWEAVER里面，用切片平鋪形成所需要的圖。
【網(wǎng)頁(yè)設(shè)計(jì)中圖像切圖技巧】相關(guān)文章：
網(wǎng)頁(yè)美工切圖設(shè)計(jì)技巧06-07
網(wǎng)頁(yè)美工的切圖設(shè)計(jì)技巧09-22
網(wǎng)頁(yè)美工切圖技巧06-12
網(wǎng)頁(yè)美工切圖設(shè)計(jì)10-02
網(wǎng)頁(yè)美工的切圖技巧09-07
網(wǎng)頁(yè)美工切圖設(shè)計(jì)要素08-31
網(wǎng)頁(yè)美工切圖設(shè)計(jì)要點(diǎn)07-25