未满十八岁免费观看十年的漫画_无码一区+中文字幕_四虎永久在线精品无码_欧美成人乱码一区二区三区_欧美电影在线观看_哪灬你的鸣巴好大_夏至未至电视剧_良性黑色素痣图片_山东妇女亂伦ⅹⅹⅹ_高h各种姿势调教np

新的Photoshop軟件已經(jīng)到Photoshop CC 14.2.1的版本了，它的出現(xiàn)，為設(shè)計師設(shè)計網(wǎng)頁界面、創(chuàng)建CSS樣式代碼實現(xiàn)跨平臺開發(fā)提供了無限可能。它操作簡單，圖像處理功能強大。本節(jié)內(nèi)容，我們一起來分享網(wǎng)頁圖像的4項基礎(chǔ)知識。

1.3.1 網(wǎng)頁圖像的大小

網(wǎng)頁界面設(shè)計中，圖像的大小與分辨率高低有很大的關(guān)系，同樣大小的圖像，分辨率越高圖像就越清晰。其中，單位面積內(nèi)所包含的像素數(shù)量是決定分辨率的重要因素。在像素數(shù)量一定的情況下，如果更改分辨率，那么圖像的尺寸也會發(fā)生相應(yīng)的變化。在網(wǎng)頁設(shè)計中，我們一般設(shè)置文件大小為1024x768像素、1280x720像素、1440 x900像素，分辨率設(shè)置為72像素/英寸，如圖1.30所示。

當(dāng)設(shè)計師創(chuàng)建網(wǎng)頁文件時，我們可自由確定文件的大小。在Photoshop CC軟件中，為了便于設(shè)計師合理設(shè)置文件的大小，在“新建”對話框中提供了“存儲預(yù)設(shè)”選項，我們可單擊此按鈕，保存我們常用的文件設(shè)置選項，如圖1.31所示。

此外，有時我們在設(shè)計網(wǎng)頁時僅需使用圖像的一部分或縮小圖像，這樣也會改變圖像原有的尺寸。

1.3.2 網(wǎng)頁圖片格式

網(wǎng)頁圖像格式的選擇和應(yīng)用，直接關(guān)系到網(wǎng)頁的下載速度和打開速度。即使相同大小的圖像，選擇不同的圖像格式其文件的大小也會有所差異。本節(jié)內(nèi)容筆者與大家一起分享網(wǎng)頁設(shè)計中常用的3種圖像格式。

形式簡單的圖形或圖像文件的首選格式：PNG格式

PNG是一種無損耗的圖像格式，我們可以對PNG格式圖像做任何操作也不會使圖像質(zhì)量產(chǎn)生損耗。這也使得PNG格式可以作為JPEG編輯的過渡格式。當(dāng)我們保存文件時可選擇8位256色的PNG和24位的全色PNG。它完全支持圖像的透明、半透明和不透明，但在IE瀏覽器（6.0）會出現(xiàn)怪異的現(xiàn)象，即半透明的8位256色的PNG格式圖像會顯示為全透明.

色彩豐富的圖形或圖像文件的首選格式：JPEG格式

JPEG格式是在互聯(lián)網(wǎng)及其他聯(lián)機服務(wù)上常用的一種圖像格式，它支持CMYK、RGB和灰度顏色模式，不支持透明度。但保留RGB圖像中的所有顏色信息，可以通過有選擇地扔掉數(shù)據(jù)來壓縮文件大小。當(dāng)我們在保存文件時，可以確定文件的壓縮級別，壓縮級別越高，得到的圖像品質(zhì)越低；壓縮級別越低，得到的圖像品質(zhì)越高。一般來說，我們的壓縮品質(zhì)不要低于5，否則圖像的色彩損失就比較明顯了，如圖1.33所示。

對圖像的顏色要求不高的圖形或圖像文件的首選格式：GIF格式

GIF 格式也是在互聯(lián)網(wǎng)及其他聯(lián)機服務(wù)上常用的一種文件格式，用于顯示超文本標(biāo)記語言（HTML）文檔中的索引顏色圖形和圖像。它是一種用 LZW 壓縮的格式，目的在于小化文件大小和節(jié)省文件的傳輸時間。GIF格式保留索引顏色圖像中的透明度，但不支持Alpha通道。

1.3.3 Web圖像優(yōu)化的3個關(guān)鍵點

網(wǎng)頁圖像的優(yōu)化是每一位設(shè)計師都關(guān)心的問題，我們必須在圖像的質(zhì)量和壓縮比之間找到平衡點，進(jìn)而獲得滿意的視覺效果。對于網(wǎng)頁圖像的優(yōu)化，重點需要處理好以下3個關(guān)鍵點：

1 選擇正確的保存格式；

2 文件的分辨率大?。?

3 圖像包含的顏色數(shù)量。

很多時候，我們的圖像尺寸太大都是沒有處理好以上3個關(guān)鍵點。下面青島網(wǎng)站建設(shè)公司一起分享圖像優(yōu)化的技巧。

01 如果僅僅滿足圖像瀏覽的需要，而無需用戶下載打印，筆者建議大家可采用GIF格式保存圖像，因為GIF格式的圖像多采用索引模式顯示，多支持256種顏色，基本上滿足了視覺瀏覽的需要。GIF格式適合那些使用純色或是有限色彩的圖像，如標(biāo)志、背景、色條等。

02 如果是JPEG格式的圖片，在保存時需結(jié)合圖像的主體對象、背景的色彩靈活選擇壓縮品質(zhì)高、中、低下的效果。根據(jù)網(wǎng)站的目標(biāo)瀏覽者，可在保存圖像時勾選“連續(xù)”選項。這樣在加載圖像時，JPEG格式的圖像會逐漸呈現(xiàn)，使瀏覽者在圖像完全加載之前便可快速預(yù)覽到圖像的基本面貌，如圖1.34所示。

03 網(wǎng)頁圖像的分辨率數(shù)值，只可以由大改小，減少圖像的大小，能源行業(yè)網(wǎng)站建設(shè)解決方案而不要想當(dāng)然地由小改大，這樣不僅不會提升圖像的質(zhì)量，還會增加文件的保存大小。

04 必要時，可選擇其他專門用來優(yōu)化網(wǎng)頁圖像的工具軟件，例如，RIOT（基本圖像優(yōu)化工具）、Online Image Optimizer（在線圖像優(yōu)化）。

1.3.4 網(wǎng)站效果圖的切圖

在切割網(wǎng)頁效果圖時，通過添加參考線，可以很明確地對頁面圖像進(jìn)行劃分，明確頁面中哪些內(nèi)容需要被切割為圖像、哪些內(nèi)容被切割為背景色，從而的切圖技巧。

01 切割網(wǎng)站圖像之前要首先分析網(wǎng)站的結(jié)構(gòu)特點。打開設(shè)計效果圖1.35以后，我們發(fā)現(xiàn)，頁面主要分為上中下3部分，頁面上部主要包括了網(wǎng)站導(dǎo)航、logo、導(dǎo)航欄等內(nèi)容，中間部分又分為左、中、右3部分。其中左邊與右邊在基本布局形式上都相同，而中間部分看似簡單，只有一則突出的banner，但由于涉及倒影、光照等因素，在裁切時一定要格外小心。

02 仔細(xì)觀察頁面我們還發(fā)現(xiàn)網(wǎng)頁的背景是一個具有漸變平滑過渡效果的漸變色背景，如圖1.36所示。網(wǎng)站的導(dǎo)航設(shè)計比較特別，所以可整體進(jìn)行裁切。

03 網(wǎng)站的主題banner所包含的各個圖像、圖形在后期將進(jìn)行圖層合并，所以不需要再次進(jìn)行單獨切割。

04 網(wǎng)站的正文文案不需要裁切，只需標(biā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í)行圖像裁切命令，然后在彈出的對話框中選擇“左上角像素顏色”選項，這樣可以保證所裁切的圖像不包含多余的非透明內(nèi)容，如圖1.38所示。

07 保存文件：執(zhí)行“文件”→“存儲為…”命令，然后設(shè)定保存文件的名稱和保存位置，我們設(shè)定的品質(zhì)值一定不要低于5，否則系統(tǒng)會產(chǎn)生額外的優(yōu)化算法，在圖像的周圍產(chǎn)生影響視覺瀏覽的噪點，如圖1.39、圖1.40所示。

08 重復(fù)以上操作即可完整整個網(wǎng)站的裁切。如圖1.41所示，為筆者用同樣的方法裁切網(wǎng)站的導(dǎo)航。