當前位置:學問君>人在職場>電腦培訓>

網頁設計中圖像切圖技巧

學問君 人氣:2.81W

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

網頁設計中圖像切圖技巧

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

1 切圖技術

切圖就是指在網頁製作過程中,用圖形圖像處理軟件提供的切片工具,將美工設計的網頁效果圖這種大幅圖像,分割成爲一系列小的圖像,這些小圖像稱爲原大幅圖像的切片。一張圖可以有多種切圖方案,但不是所有的切圖方案都適合後期的網頁製作的。因此需要在衆多切圖方案中,找出一種適合後期網頁編程的最佳切圖方案。本文中所說的切圖技術,就是指的實現最佳切圖方案的切圖技術。由於它遵循一些切圖原則和技巧,所以它能夠實現最佳切圖方案。

由於切圖時,圖像的最小單位是像素,矩形對邊上的像素個數應該是相同,或者遇到圓角應該是銳化的。但是在人工操作時,可能會發生像素個數的變化,或者圓角產生頓挫角。因此,在切圖時,將原圖採用300%以上的放大倍數切圖。切完整個大圖後,把一系列的切片全部選中,接着利用軟件中的圖像優化工具,即選單欄中“視窗”下拉選單“優化”命令對所有的小切片進行優化來解決以上問題。然後利用檔案選單下的“匯出”命令生成HTML網頁和圖像,最後在網頁製作軟件DREAMWEAVER中建立站點,將上面匯出的網頁和小圖像都放在網站裏。匯出的網頁檔案是不能用的。因爲一個網站的頁面大小要求統一。因此,接下來的工作是在網頁製作軟件中製作表格。用分塊的思想來看整個網頁的佈局,一個塊就是一個表格。把網頁看成是多個獨立的表格組成的。將匯出的圖片插入到單元格中。日常工作中常用的圖形圖像處理軟件有Photoshop、Flash、Firework等,這些軟件中都有切片工具,但是在網頁製作時,圖形圖像處理軟件首選使用Firework。因爲DREAMWEAVER中只要對圖像雙擊,系統會自動調用Firework軟件。

2 切圖原則

一張圖可以有多種相關的切圖方案,但不是所有的切圖方案都是合適網頁編程的。所以在切圖技術中,應該保證實現的是最佳切圖方案,因此切圖技術中還涉及了切圖的原則和切圖的技巧。

2.1 塊與切片的概念