国产视频一二三四区_国产伦视频一区二区三区_五月天久久狠狠_欧美一区二区三区日韩_97在线观看免费高_欧美成人在线免费视频_美女久久网站_中国女人做爰视频_国产精品久久久久久久浪潮网站_乱熟女高潮一区二区在线_国产一区二区在线影院_91超碰在线免费观看

新的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ā)提供了無限可能。它操作簡(jiǎn)單，圖像處理功能強(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種圖像格式。

形式簡(jiǎn)單的圖形或圖像文件的首選格式：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è)诒４嫖募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部分。其中左邊與右邊在基本布局形式上都相同，而中間部分看似簡(jiǎn)單，只有一則突出的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)航。