網頁設計切圖(網頁設計切圖規范)

網頁設計中圖像切圖技巧

網頁設計中圖像切圖技巧

　　在網頁的制作過程中，不時需要將圖像進行切圖處理。下面是我為大家整理的網頁設計中圖像切圖技巧，歡迎參考~

　　網頁制作技術伴隨著網絡的快速發展而快速興起，目前，國內外計算機行業對于網頁制作的研究較多，但是由于受到初學者個人風格和操作技巧的影響，在網頁制作中普遍存在不同程度的問題。而對圖像進行切圖處理也是一個存在網頁制作中的問題?；诖?，本文就網頁設計中圖像切圖技巧進行了探討，并提出了一些有關的技巧，相信對圖像切圖的工作能有一定的幫助作用。

　　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里面，用切片平鋪形成所需要的圖。

;

網頁設計好后的切圖是什么意思呢

切圖就是把用設計軟件設置好的圖片切成相應的大小，切圖后再把圖片上傳就可以可以加快顯示速度，不用等整個圖片都下載以后顯示。

PS切圖步驟：

1、打開PS，然后點擊切片工具。

2、點擊切片工具后，就可以把圖片切成需要的大小。

3、切好圖片后，點擊導出web所用格式。

4、進入導出web所用格式頁面，按住shift鍵把所有切片都選中。

5、導出格式設置為JPEG。

6、最后點擊存儲就可以了。

網頁切圖怎么做? 網頁設計切圖

網頁切圖怎么做，網頁設計切圖的方法。

如下參考：

1.打開PS，點擊切片工具，如下圖所示。

2.點擊切片工具，可以將圖片切割成所需的大小，如下圖所示。

3.剪切圖片后，點擊導出特殊網頁使用的格式，如下圖所示。

4.輸入屬導出web的格式頁面，并按住shift鍵選擇所有部分。

5.導出格式設置為JPEG，如下所示。

6.最后，單擊save存儲，如下圖所示。

網頁設計好后的切圖是什么意思呢

網頁設計好后的切圖是將設計稿切成便于制作成頁面的圖片，并完成html+css布局的靜態頁面，有利于交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具，把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態頁面書寫，完成CSS布局。

設計好的網頁都需要切圖，主流的是dreamweaver、photoshop軟件，還有sketch、firework等，低端QQ切圖，網頁切圖等。切圖為后端編程者帶來方便，提高效率，讓網頁稿有了交互性，實現平時看到的各種各樣的功能，畫面瀏覽速度快，有利于優化。

擴展資料：

一般我們從設計師那得到的都是psd文件，里面有幾十或者上百個圖層，一般會根據內容分好文件夾，有文字有圖片，有的只在特殊情況下顯示的，這時候就需要根據自己的需要導出不同的圖。

切圖的時候也會有許多考慮，比如把哪些內容壓縮成一張圖片，什么時候用透明背景PNG，什么時候用CSS Sprite（把瑣碎的小圖比如按鈕、logo復制到一張透明背景的圖上然后保存為一張圖，再用background position去提取。）文字是切成圖片，還是復制到HTML里。

一般情況下都不會把文字切成圖，除非用到比較特殊的字體或者變形等等，然后即使是photoshop保存為web格式導出的圖，有時候尺寸也是很大的，特別是PNG，這時要使用一些專業壓縮工具進行二次壓縮。

當然有些有前端經驗的設計師會把切好的圖片發給你，這樣就可以直接開始寫HTML和CSS了，但是建議還是盡量自己切，掌握熟練的切圖技巧也是一個前端應該有的技能。

參考資料來源：百度百科-切圖

百度百科-靜態頁切圖

在網頁設計中如何用PS切圖

1、在Photoshop中打開設計稿，如下圖：

2、選擇工具板上的slice切片工具，大面積的色塊單獨切成一塊，盡可能的保持在水平線上的整齊，切好的圖如下所示：

3、在PhotoShop中選擇file-save for web...來輸出，這里要注意一些參數的選擇：

4、接下來在Dreamweaver里建立站點：

5、在圖示左邊的site name中為站點起一個名字，如example然后在下面的local root folder中選擇剛才導出的站點的文件夾：

6、重新制作頁面表格，通常在photoshop中直接導出的htm文件是不可以直接使用的，因為有些地方在實際運用時要作調整：

7、根據這個頁面表格所示，在新的頁面中建立一個三行一列的表格，把cellpadding,cellspacing,border三項值設為0，不然會有空隙，最后選擇表格，背景添加圖片即可。

網頁美工切圖技巧

網頁美工切圖技巧

　　如何做好網頁美工設計，對于新手而言，這還有些小小的難度，尤其是當網頁美工設計由幾個人接手的時候。在網頁美工切圖設計之前，我們先基于ps進行新建文件設置，在設置的時候需要注意以下幾點：

　　1.一定要做好網頁寬度的設置設計，一般網頁寬度有760PX、900PX、1000PX等，最好不要超過1200PX的寬度，高度沒有限制。大多數做網站的公司都有一個比較合理的標準。

　　2.作為網頁背景、網頁圖標的要清晰，在網站設計的時候比較注重。所以在切圖的時候不要切出來的效果與設計的效果相差太大。

　　3.有特效地方，有必要設計出特效樣式，以便DIV CSS制作的時候切圖使用。

　　4.在做成網頁后可改變的文字，需要使用宋體、黑體無需修飾

　　5.細節一定要對齊

　　美工圖設計好后要注意的兩點：

　　1.導出JPGGIFPNG等格式觀察效果。

　　2.不要合層，盡量保持每個文字圖標圖片都有獨立圖層，這樣在DIV CSS切圖時方便隱藏顯示切圖。

　　在新建設置之后，就要開始進行網頁美工設計了，在網頁美工設計的過程中要注意：

　　1. 注意頁面的分塊，著手設計一個頁面的時候，你必須根據所掌握的內容，以及其風格，對頁面的整體進行分塊。分塊是一個非常必要且難以掌握的技巧。對于一般雜志來說，它們是有邊的，這意味著雜志美工設計師有邊可循，依靠邊來形成立體感，依靠邊來產生未盡的意韻;但是對于web頁面，邊的概念被淡化了，屏幕可以上下左右的拖動。所以此時分塊顯得非常必要，目的也就是產生的效果。

　　分塊可以用不同著色的色塊、框、細線、排列整齊的英文等等，還可以混合使用，但是注意不要過于醒目，因為頁面的重點在內容，而不在其他。

　　2、色彩的平衡與呼應。

　　1)色彩的平衡。色彩在頁面中可以形成很多的`效果，通過強烈的對比，可以突出頁面的重點。還可以通過色彩調配，達到頁面穩重度的改變。一般的情況下，頁面上方的顏色總是很重，這樣才能壓住下面的顏色，如果不采取這種辦法，整個頁面將顯得很不穩重，底下的文字圖片，有飄出的意味。因此，要使整個頁面顯得很平衡，必須要有能鎮住其他顏色的色彩。

　　2)色彩的呼應。一種比較突出的色彩，如果很突兀地放在頁面中，無論你是突出重點也好，還是logo圖標，都給整個頁面帶來了副作用。為此，你必須在相對稱的位置加上該色系(對于頁面并不醒目)的色彩以呼應，這樣可以弱化這種視覺的沖擊。

　　3、精確到1個像素

　　如果你是一個成功的頁面設計者，你至少會在做出頁面前已經把整個頁面構思好了;如果你很寬容地對待圖片中1個像素的差別，那說明你還不是很合格。

;