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