国产精品亚洲韩国_一级做a爰片久久毛片一_给我免费播放的电影在线观看下载_国产99网站免在线观看_在线天堂中文新版最新版_黄色美女性爱喷水视频网_亚洲精品午夜寂寞爆乳影院_亚洲国产第一精品综合_影视自拍高清无码_日韩激情无码一级毛片性奴

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 選擇正確的保存格式；

2 文件的分辨率大??；

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

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

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

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

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

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

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

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

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

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

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

04 網(wǎng)站的正文文案不需要裁切，只需標注文字的字號、顏色、字體即可。執(zhí)行“視圖”→“標尺”命令，在工作區(qū)顯示標尺，單擊標尺，并拖曳鼠標至頁面中需要進行模塊劃分的區(qū)域，松開鼠標即可產(chǎn)生一條參考線。重復類似的操作，完成頁面中所有參考線的添加。

05 背景的切割:打開圖層面板，隱藏除背景效果以外的其他圖層，選擇矩形選框工具，繪制出如圖1.37所示的矩形選框，按Ctrl+C組合鍵復制所選區(qū)域的內(nèi)容，執(zhí)行“文件”→“新建”命令，然后按Ctrl+V組合鍵粘貼所選區(qū)域的內(nèi)容到當前文檔中。

06 執(zhí)行圖像裁切命令，然后在彈出的對話框中選擇“左上角像素顏色”選項，這樣可以保證所裁切的圖像不包含多余的非透明內(nèi)容，如圖1.38所示。

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

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