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