国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

網(wǎng)頁設(shè)計(jì)中圖像切圖技巧

時間:2020-09-10 18:42:46 美工設(shè)計(jì) 我要投稿

網(wǎng)頁設(shè)計(jì)中圖像切圖技巧

  在網(wǎng)頁的制作過程中,不時需要將圖像進(jìn)行切圖處理。下面是小編為大家整理的網(wǎng)頁設(shè)計(jì)中圖像切圖技巧,歡迎參考~

  網(wǎng)頁制作技術(shù)伴隨著網(wǎng)絡(luò)的快速發(fā)展而快速興起,目前,國內(nèi)外計(jì)算機(jī)行業(yè)對于網(wǎng)頁制作的研究較多,但是由于受到初學(xué)者個人風(fēng)格和操作技巧的影響,在網(wǎng)頁制作中普遍存在不同程度的問題。而對圖像進(jìn)行切圖處理也是一個存在網(wǎng)頁制作中的問題;诖,本文就網(wǎng)頁設(shè)計(jì)中圖像切圖技巧進(jìn)行了探討,并提出了一些有關(guān)的技巧,相信對圖像切圖的工作能有一定的幫助作用。

  1 切圖技術(shù)

  切圖就是指在網(wǎng)頁制作過程中,用圖形圖像處理軟件提供的切片工具,將美工設(shè)計(jì)的網(wǎng)頁效果圖這種大幅圖像,分割成為一系列小的圖像,這些小圖像稱為原大幅圖像的切片。一張圖可以有多種切圖方案,但不是所有的切圖方案都適合后期的網(wǎng)頁制作的。因此需要在眾多切圖方案中,找出一種適合后期網(wǎng)頁編程的最佳切圖方案。本文中所說的切圖技術(shù),就是指的實(shí)現(xiàn)最佳切圖方案的切圖技術(shù)。由于它遵循一些切圖原則和技巧,所以它能夠?qū)崿F(xiàn)最佳切圖方案。

  由于切圖時,圖像的最小單位是像素,矩形對邊上的像素個數(shù)應(yīng)該是相同,或者遇到圓角應(yīng)該是銳化的。但是在人工操作時,可能會發(fā)生像素個數(shù)的變化,或者圓角產(chǎn)生頓挫角。因此,在切圖時,將原圖采用300%以上的放大倍數(shù)切圖。切完整個大圖后,把一系列的切片全部選中,接著利用軟件中的圖像優(yōu)化工具,即菜單欄中“窗口”下拉菜單“優(yōu)化”命令對所有的小切片進(jìn)行優(yōu)化來解決以上問題。然后利用文件菜單下的“導(dǎo)出”命令生成HTML網(wǎng)頁和圖像,最后在網(wǎng)頁制作軟件DREAMWEAVER中建立站點(diǎn),將上面導(dǎo)出的網(wǎng)頁和小圖像都放在網(wǎng)站里。導(dǎo)出的網(wǎng)頁文件是不能用的。因?yàn)橐粋網(wǎng)站的頁面大小要求統(tǒng)一。因此,接下來的工作是在網(wǎng)頁制作軟件中制作表格。用分塊的思想來看整個網(wǎng)頁的布局,一個塊就是一個表格。把網(wǎng)頁看成是多個獨(dú)立的表格組成的。將導(dǎo)出的圖片插入到單元格中。日常工作中常用的圖形圖像處理軟件有Photoshop、Flash、Firework等,這些軟件中都有切片工具,但是在網(wǎng)頁制作時,圖形圖像處理軟件首選使用Firework。因?yàn)镈REAMWEAVER中只要對圖像雙擊,系統(tǒng)會自動調(diào)用Firework軟件。

  2 切圖原則

  一張圖可以有多種相關(guān)的切圖方案,但不是所有的切圖方案都是合適網(wǎng)頁編程的。所以在切圖技術(shù)中,應(yīng)該保證實(shí)現(xiàn)的是最佳切圖方案,因此切圖技術(shù)中還涉及了切圖的原則和切圖的技巧。

  2.1 塊與切片的概念

  在本文中所說的一個塊與切片概念是不同的。塊和切片都是網(wǎng)頁中的一部分,但是塊指的范圍比切片大。塊中可以包含一個或多個切片。塊是指在網(wǎng)頁上內(nèi)容相關(guān)的'區(qū)域范圍。切片是從圖中相關(guān)范圍中分割出來的一小圖形。如果轉(zhuǎn)換成網(wǎng)頁后,塊對應(yīng)了網(wǎng)頁中的表格,而切片對應(yīng)的是表格中的單元格。

  2.2 分塊的原則一:以相關(guān)內(nèi)容為一塊

  根據(jù)原圖中相關(guān)內(nèi)容,確定整體的切分策略,即切分要有分塊的思想,把整個網(wǎng)頁看成是多個塊構(gòu)成的,每個塊就是一個table,塊中每一個細(xì)節(jié)內(nèi)容就是table中單元格中內(nèi)容。即將整個網(wǎng)頁看成是由多個table組成的,然后在具體到每個table,去考慮里面應(yīng)該如何切。必須強(qiáng)調(diào)的是,應(yīng)該把整個網(wǎng)頁看成是多個獨(dú)立的塊構(gòu)成,切片是塊中的內(nèi)容。依據(jù)這種思想去切圖,然后在網(wǎng)頁制作軟件中,插入多個表格。塊對應(yīng)成了網(wǎng)頁中的表格,切片對應(yīng)成表格中的單元格內(nèi)容。在切圖時,同一塊中的內(nèi)容是完整的,也就是說,要保證完整的一部分在一個塊內(nèi),例如某區(qū)域的標(biāo)題文字,網(wǎng)頁的LOGO,網(wǎng)頁的廣告,網(wǎng)頁的導(dǎo)航區(qū)等可以分別是一個獨(dú)立的塊,這樣做的目的是方便日后網(wǎng)頁編程和修改。

  2.3 分塊的原則二:盡量分成大行,平行的切

  當(dāng)一個網(wǎng)頁的內(nèi)容比較多時,在顯示網(wǎng)頁時是有時間差的,這時要求內(nèi)容的顯示是從上而下從左到右逐行顯示網(wǎng)頁的內(nèi)容,決不允許一個網(wǎng)頁上的內(nèi)容雜亂的跳出來。因此,在分塊時也應(yīng)該貫穿逐行分塊的原則。切圖的時候要盡量平行的切,也就是說,分成大行,然后再逐行的切。如果一個網(wǎng)頁的顯示頁面是由多個表格構(gòu)成的,這樣做的目的是當(dāng)客戶端瀏覽一個網(wǎng)頁時,由于它是由多個表格構(gòu)成的,因此,客戶端與網(wǎng)頁服務(wù)器會生成多個request請求,多個表格同時下載信息,因此網(wǎng)頁下載的速度就會相對快。避免出現(xiàn)把網(wǎng)頁整個頁面看成一個塊,然后塊里又分塊,出現(xiàn)塊中嵌套塊。因?yàn)檫@種結(jié)構(gòu)在由切片轉(zhuǎn)換成網(wǎng)頁后就出現(xiàn)了表格的嵌套,表格的嵌套影響了客戶端網(wǎng)頁瀏覽的速度。

  2.4 切片的原則:以屬性相同為依據(jù)

  一般切圖原則是:屬性相同的區(qū)域適合分為一個切片。屬性相同主要是指顏色和形狀都沒有變化,或者在X或在Y方向上沒有變化。屬性漸變的區(qū)域適合分為一個切片,漸變有兩種表現(xiàn)形式顏色漸變,形狀漸變。

  3 切圖的技巧

  切圖也有技巧。構(gòu)成一張圖片的信息量是非常大的,因此在服務(wù)器中存儲一張圖片時占的容量也是很大的,同時從服務(wù)器里下載圖片到客戶端也需要時間也就相當(dāng)長。因此,在利用切片轉(zhuǎn)換成網(wǎng)頁時,可以利用一些技巧,即減少切片個數(shù)和減小切片的大小,可以解決以上存在的問題。

  3.1 減少切片的個數(shù)

  網(wǎng)頁上的文字與圖片信息都是存儲在網(wǎng)頁服務(wù)器上的,一個切片就是一張小的圖片。根據(jù)顯示的點(diǎn)陣原理可以知道,對于同一張大圖像來說,切片數(shù)減少,存儲在網(wǎng)頁服務(wù)器上這張圖的信息量也就減少了,也就是說在網(wǎng)頁服務(wù)器上占的空間減少。所以當(dāng)切片的背景是單一顏色,切片的文字沒有效果,這時就可以采取這種特殊的處理方式對此切片進(jìn)行處理。即可以將單一顏色和文字沒有效果的切片丟掉,在DREAMWEAVER中打開站點(diǎn),插入表格,在對應(yīng)的單元格中,利用DREAMWEAVER軟件提供的設(shè)置單元格的背景色,直接從鍵盤上輸入文字內(nèi)容。這種做法實(shí)現(xiàn)了切片的效果,同時可以使網(wǎng)頁服務(wù)上存儲的切片數(shù)減少了。以“京東商城特賣新”網(wǎng)頁頁面為例,在實(shí)驗(yàn)中保證網(wǎng)頁頁面效果相同的情況下,采用減少切片個數(shù)和未采用減少切片個數(shù)方法,可以得到下面表中的數(shù)據(jù)。從下面表中的數(shù)據(jù)可以看出兩種處理辦法造成的結(jié)果是:未采用減少切片個數(shù)方法時,圖片總?cè)萘繛?02MB,而采用減少切片個數(shù)方法后,圖片總?cè)萘繛?0.3MB,明顯前后圖片的總?cè)萘孔兓艽,值得提倡這種做法。

  3.2 減小切片大小

  大面積的顏色相同的,或者形狀相同圖塊,可以只從原圖中切出一個像素的切片,然后DREAMWEAVER里面,用切片平鋪形成所需要的圖。

【網(wǎng)頁設(shè)計(jì)中圖像切圖技巧】相關(guān)文章:

網(wǎng)頁美工切圖設(shè)計(jì)技巧06-07

網(wǎng)頁美工的切圖設(shè)計(jì)技巧09-22

網(wǎng)頁美工切圖技巧06-12

網(wǎng)頁美工切圖設(shè)計(jì)10-02

網(wǎng)頁美工的切圖技巧09-07

網(wǎng)頁美工切圖設(shè)計(jì)要素08-31

網(wǎng)頁美工切圖設(shè)計(jì)要點(diǎn)07-25

網(wǎng)頁美工切圖設(shè)計(jì)要點(diǎn)分享09-25

網(wǎng)頁美工切圖設(shè)計(jì)注意要點(diǎn)09-20