最新的Photoshop軟件已經(jīng)到Photoshop CC 14.2.1的版本了,它的出現(xiàn),為設(shè)計(jì)師設(shè)計(jì)網(wǎng)頁界面、創(chuàng)建CSS樣式代碼實(shí)現(xiàn)跨平臺(tái)開發(fā)提供了無限可能。它操作簡單,圖像處理功能強(qiáng)大。本節(jié)內(nèi)容,我們一起來分享網(wǎng)頁圖像的4項(xiàng)基礎(chǔ)知識(shí)。
1.3.1 網(wǎng)頁圖像的大小
網(wǎng)頁界面設(shè)計(jì)中,圖像的大小與分辨率高低有很大的關(guān)系,同樣大小的圖像,分辨率越高圖像就越清晰。其中,單位面積內(nèi)所包含的像素?cái)?shù)量是決定分辨率的重要因素。在像素?cái)?shù)量一定的情況下,如果更改分辨率,那么圖像的尺寸也會(huì)發(fā)生相應(yīng)的變化。在網(wǎng)頁設(shè)計(jì)中,我們一般設(shè)置文件大小為1024x768像素、1280x720像素、1440 x900像素,分辨率設(shè)置為72像素/英寸,如圖1.30所示。
當(dāng)設(shè)計(jì)師創(chuàng)建網(wǎng)頁文件時(shí),我們可自由確定文件的大小。在Photoshop CC軟件中,為了便于設(shè)計(jì)師合理設(shè)置文件的大小,在“新建”對(duì)話框中提供了“存儲(chǔ)預(yù)設(shè)”選項(xiàng),我們可單擊此按鈕,保存我們常用的文件設(shè)置選項(xiàng),如圖1.31所示。
此外,有時(shí)我們?cè)谠O(shè)計(jì)網(wǎng)頁時(shí)僅需使用圖像的一部分或縮小圖像,這樣也會(huì)改變圖像原有的尺寸。
1.3.2 網(wǎng)頁圖片格式
網(wǎng)頁圖像格式的選擇和應(yīng)用,直接關(guān)系到網(wǎng)頁的下載速度和打開速度。即使相同大小的圖像,選擇不同的圖像格式其文件的大小也會(huì)有所差異。本節(jié)內(nèi)容筆者與大家一起分享網(wǎng)頁設(shè)計(jì)中常用的3種圖像格式。
形式簡單的圖形或圖像文件的首選格式:PNG格式
PNG是一種無損耗的圖像格式,我們可以對(duì)PNG格式圖像做任何操作也不會(huì)使圖像質(zhì)量產(chǎn)生損耗。這也使得PNG格式可以作為JPEG編輯的過渡格式。當(dāng)我們保存文件時(shí)可選擇8位256色的PNG和24位的全色PNG。它完全支持圖像的透明、半透明和不透明,但在IE瀏覽器(6.0)會(huì)出現(xiàn)怪異的現(xiàn)象,即半透明的8位256色的PNG格式圖像會(huì)顯示為全透明.
色彩豐富的圖形或圖像文件的首選格式:JPEG格式
JPEG格式是在互聯(lián)網(wǎng)及其他聯(lián)機(jī)服務(wù)上常用的一種圖像格式,它支持CMYK、RGB和灰度顏色模式,不支持透明度。但保留RGB圖像中的所有顏色信息,可以通過有選擇地扔掉數(shù)據(jù)來壓縮文件大小。當(dāng)我們?cè)诒4嫖募r(shí),可以確定文件的壓縮級(jí)別,壓縮級(jí)別越高,得到的圖像品質(zhì)越低;壓縮級(jí)別越低,得到的圖像品質(zhì)越高。一般來說,我們的壓縮品質(zhì)不要低于5,否則圖像的色彩損失就比較明顯了,如圖1.33所示。
對(duì)圖像的顏色要求不高的圖形或圖像文件的首選格式:GIF格式
GIF 格式也是在互聯(lián)網(wǎng)及其他聯(lián)機(jī)服務(wù)上常用的一種文件格式,用于顯示超文本標(biāo)記語言(HTML)文檔中的索引顏色圖形和圖像。它是一種用 LZW 壓縮的格式,目的在于最小化文件大小和節(jié)省文件的傳輸時(shí)間。GIF格式保留索引顏色圖像中的透明度,但不支持Alpha通道。
1.3.3 Web圖像優(yōu)化的3個(gè)關(guān)鍵點(diǎn)
網(wǎng)頁圖像的優(yōu)化是每一位設(shè)計(jì)師都關(guān)心的問題,我們必須在圖像的質(zhì)量和壓縮比之間找到平衡點(diǎn),進(jìn)而獲得滿意的視覺效果。對(duì)于網(wǎng)頁圖像的優(yōu)化,重點(diǎn)需要處理好以下3個(gè)關(guān)鍵點(diǎn):
1 選擇正確的保存格式;
2 文件的分辨率大小;
3 圖像包含的顏色數(shù)量。
很多時(shí)候,我們的圖像尺寸太大都是沒有處理好以上3個(gè)關(guān)鍵點(diǎn)。下面青島網(wǎng)站建設(shè)公司一起分享圖像優(yōu)化的技巧。
01 如果僅僅滿足圖像瀏覽的需要,而無需用戶下載打印,筆者建議大家可采用GIF格式保存圖像,因?yàn)镚IF格式的圖像多采用索引模式顯示,最多支持256種顏色,基本上滿足了視覺瀏覽的需要。GIF格式適合那些使用純色或是有限色彩的圖像,如標(biāo)志、背景、色條等。
02 如果是JPEG格式的圖片,在保存時(shí)需結(jié)合圖像的主體對(duì)象、背景的色彩靈活選擇壓縮品質(zhì)高、中、低下的效果。根據(jù)網(wǎng)站的目標(biāo)瀏覽者,可在保存圖像時(shí)勾選“連續(xù)”選項(xiàng)。這樣在加載圖像時(shí),JPEG格式的圖像會(huì)逐漸呈現(xiàn),使瀏覽者在圖像完全加載之前便可快速預(yù)覽到圖像的基本面貌,如圖1.34所示。
03 網(wǎng)頁圖像的分辨率數(shù)值,只可以由大改小,減少圖像的大小,能源行業(yè)網(wǎng)站建設(shè)解決方案而不要想當(dāng)然地由小改大,這樣不僅不會(huì)提升圖像的質(zhì)量,還會(huì)增加文件的保存大小。
04 必要時(shí),可選擇其他專門用來優(yōu)化網(wǎng)頁圖像的工具軟件,例如,RIOT(基本圖像優(yōu)化工具)、Online Image Optimizer(在線圖像優(yōu)化)。
1.3.4 網(wǎng)站效果圖的切圖
在切割網(wǎng)頁效果圖時(shí),通過添加參考線,可以很明確地對(duì)頁面圖像進(jìn)行劃分,明確頁面中哪些內(nèi)容需要被切割為圖像、哪些內(nèi)容被切割為背景色,從而的切圖技巧。
01 切割網(wǎng)站圖像之前要首先分析網(wǎng)站的結(jié)構(gòu)特點(diǎn)。打開設(shè)計(jì)效果圖1.35以后,我們發(fā)現(xiàn),頁面主要分為上中下3部分,頁面上部主要包括了網(wǎng)站導(dǎo)航、logo、導(dǎo)航欄等內(nèi)容,中間部分又分為左、中、右3部分。其中左邊與右邊在基本布局形式上都相同,而中間部分看似簡單,只有一則突出的banner,但由于涉及倒影、光照等因素,在裁切時(shí)一定要格外小心。
02 仔細(xì)觀察頁面我們還發(fā)現(xiàn)網(wǎng)頁的背景是一個(gè)具有漸變平滑過渡效果的漸變色背景,如圖1.36所示。網(wǎng)站的導(dǎo)航設(shè)計(jì)比較特別,所以可整體進(jìn)行裁切。
03 網(wǎng)站的主題banner所包含的各個(gè)圖像、圖形在后期將進(jìn)行圖層合并,所以不需要再次進(jìn)行單獨(dú)切割。
04 網(wǎng)站的正文文案不需要裁切,只需標(biāo)注文字的字號(hào)、顏色、字體即可。執(zhí)行“視圖”→“標(biāo)尺”命令,在工作區(qū)顯示標(biāo)尺,單擊標(biāo)尺,并拖曳鼠標(biāo)至頁面中需要進(jìn)行模塊劃分的區(qū)域,松開鼠標(biāo)即可產(chǎn)生一條參考線。重復(fù)類似的操作,完成頁面中所有參考線的添加。
05 背景的切割:打開圖層面板,隱藏除背景效果以外的其他圖層,選擇矩形選框工具,繪制出如圖1.37所示的矩形選框,按Ctrl+C組合鍵復(fù)制所選區(qū)域的內(nèi)容,執(zhí)行“文件”→“新建”命令,然后按Ctrl+V組合鍵粘貼所選區(qū)域的內(nèi)容到當(dāng)前文檔中。
06 執(zhí)行圖像裁切命令,然后在彈出的對(duì)話框中選擇“左上角像素顏色”選項(xiàng),這樣可以保證所裁切的圖像不包含多余的非透明內(nèi)容,如圖1.38所示。
07 保存文件:執(zhí)行“文件”→“存儲(chǔ)為…”命令,然后設(shè)定保存文件的名稱和保存位置,我們?cè)O(shè)定的品質(zhì)值一定不要低于5,否則系統(tǒng)會(huì)產(chǎn)生額外的優(yōu)化算法,在圖像的周圍產(chǎn)生影響視覺瀏覽的噪點(diǎn),如圖1.39、圖1.40所示。
08 重復(fù)以上操作即可完整整個(gè)網(wǎng)站的裁切。如圖1.41所示,為筆者用同樣的方法裁切網(wǎng)站的導(dǎo)航。
Copyright All Rights GreatGoal Design co.,ltd. 魯ICP備16002128號(hào)-3