當前位置:才華齋>設計>美工設計>

網頁美工操作技巧之網影象處理技巧

美工設計 閱讀(1.25W)

網頁中影象表的現力是無可替代的,沒有影象的網頁是枯燥頁單調的,無法吸引人的注意力,因此影象在整個網頁製作中佔有非常重要的地位。它不但使網頁內容更豐富,表現力、渲染力更強,而且使整個網頁更具有觀賞性,更具美感、藝術性。而我們手頭的照片或其他圖片有時並不適合直接用於網頁的。那麼做為網頁美工,就必須要掌握一定的影象處理技巧。小編就通過Photoshop例項來和您講一講網頁影象的處理。

網頁美工操作技巧之網影象處理技巧

一、網頁影象製作

影象是網頁中必不可少的元素。如何使用一個較大的圖象檔案恰倒好處的融入網頁之中呢?那麼勢必要對影象進行切割,ImageReady CS(ImageReady是Photoshop的'一個附件)也可以很好地來完成這項工作。

1.製作切片

儘管網路速度一直在提高,但網路傳輸的速度一直是個瓶頸。假如使用者瀏覽網頁時,網頁中包含了一個較大的圖象,由於網路傳輸速度過慢,就會等待很長時間才能看到這個影象。人們想出了一個方法,就是將影象進行切割,分成若干個較小的影象,從而避免了較長的等待時間。

要切割圖片,可首先選擇工具箱中的切片工具,在影象視窗單擊並拖動,即可以製作出切片。如圖,可看出影象被分成了9個部分。

2.切片屬性設定

在工具箱中單擊切選取工具,然後單擊滑鼠右鍵,從彈出的快捷選單中選擇[編輯切片選項]選單項,此時系統彈出“切片選項”對話方塊。讀者可以在此對話方塊中對切片的屬性進行設定。在對話方塊中可以設定以下引數:“切片型別”、“名稱”、“URL”(超級連線)等。如圖所示。

3.調整切片的位置尺寸

在工具箱中選擇切片選取工具,單擊屬性工具欄中的“切片選項”圖示按鈕,將其設定為使用者切片。然後將游標移動到切片區單擊並拖動,實現切片的移動。將游標移切片邊界單擊並拖動,實現切片尺寸的調整。

二、網頁影象的優化輸出

身為網頁美工,我們應該知道在Photoshop中,影象的優化輸出可以分為兩類,即基本優化與精確優化。如果是簡單地製作能夠用於網頁的優化影象,可選擇選單中的[檔案]→[儲存為]命令,然後在開啟的“儲存”對話方塊中將檔案型別設定為網頁常用的GIF、JPG格式即可。

如果要精確優化影象,可選擇選單[檔案]→[儲存為Web格式]命令。此時系統將彈出相應的對話方塊,其中各工具箱的意義如下圖所示。

設定優化輸出引數

值得注意的是,要輸出帶有透明區的影象時,在源影象中必須帶有透明區域,輸出格式只能是GIF。

當然,網頁美工在影象的處理方法不止這一種,有很多影象處理軟體都是可能達到編輯效果。本文只是列舉了其中的一種,朋友們可以舉一反三,在實際工作中靈活掌握。