jason天空部落

Photoshop 提供了切片工具、影像最佳化等網頁製作工具，當您在製作網頁時，多加利用 Photoshop 的網頁設計工具就可以快速完成手上的專案。

網頁設計時使用的單位是「像素」，您可以修改 Photoshop 使用的單位，點選功能表 [ 編輯 > 偏好設定 > 單位和尺標 ] ，將單位改為「像素」即可。

網頁最佳化

目前常用的網頁瀏覽器，可支援 GIF、JPG、PNG 的影像格式。Photoshop 的影像最佳化可以壓縮影像，縮短檔案的下載時間，避免造成網站伺服器與網路流量的負擔。

若您需要使用 Photoshop 對目前編輯的影像進行最佳化，請點選功能表 [ 檔案 > 儲存為網頁與裝置用 ] 以開啟設定的對話框。接著，您可以從「預設集」選擇不同的影像壓縮設定，預覽視窗將會即時顯示最佳化的影像，對話框的下方會顯示最佳化之後的檔案大小。

GIF 格式適用於記錄色彩單純與線條簡單的影像（例如卡通風格的影像），使用 GIF 格式壓縮，不但檔案的體積比較小，而且影像的品質也較佳。

版面設計與螢幕解析度

設計時必須考慮螢幕的解析度，因為每位訪客的螢幕解析度設定都不同，請瞭解網頁在不同解析度螢幕所呈現的效果。早期電腦使用者的螢幕解析度以 640 x 480 或 800 x 600 像素為主，而目前則設定為 1024x768 或 1280x1024 較多，甚至 FullHD 的解析度更高達 1920x1080 或 1920x1200，但設計版面時以比例較高的使用者為考量即可。

影像切片的運用

「影像切片」是網頁設計上常用的一種技巧，透過將完整的影像切割成較小的影像切片，訪客瀏覽網頁時可以同時下載影像檔案，減少等候時間。影像切片可依影像的內容選擇最佳化的壓縮格式。

此外，製作網頁互動效果也可以使用切片的方式製作。

切片工具 Slice

切片工具用於建立影像切片。

切片選取工具 Slice Select

切片選取工具用於選取已切割的影像切片，滑鼠拖曳時可以移動切片的位置，雙擊切片即可設定切片的選項。

從圖層自動建立切片

若您製作的影像包含圖層，就可以使用 Photoshop 依據圖層自動建立切片的功能，而且移動或縮放圖層的影像時，切片也會自動調整，讓您節省修改切片的時間。

選取背景以外的所有圖層，點選功能表 [ 圖層 > 新增基於圖層的切片 ] 就可以自動建立切片。

切片選項

切片類型設定為 影像 時，可以設定切片名稱、超連結、目標、訊息文字。

切片類型設定為 沒有影像 時，可以輸入顯示在儲存格內的文字，內容支援 HTML 語法，這部份通常配合 Dreamweaver、FrontPage 等網頁設計軟體編輯內容。

製作滑鼠指向效果影像

滑鼠指向效果影像主要運用於網頁設計，您可以在許多網站上看到互動式的導覽列按鈕。滑鼠指向效果影像實際上是兩個不同的影像檔案，並且使用 JavaScript 程式偵測滑鼠事件來製作互動的效果。

主要影像 - 正常情況下網頁顯示的影像。

次要影像 - 滑鼠游標移入時顯示的影像。

可先使用圖層製作主要影像，接著只要複製圖層，修改為次要影像。

儲存影像時若需放置於同一資料夾，因為作業系統的限制，不能使用相同的檔案名稱。

滑鼠指向效果的 JavaScript 程式需要自行撰寫，或是使用 Dreamweaver 的插入滑鼠變換影像功能。

您可以請參考 CG 數位學習網的 Dreamweaver 線上教學 瞭解實際的操作步驟。

網頁的配色

對許多網頁設計的初學者而言，網頁的色彩搭配達到專業的水準，經常會不知道怎麼著手，Kelvin 老師建議儘量觀摩不同網站的設計，並參考市面上的網頁配色相關書籍，此外，您也可以從配色網站找到實用的資訊：

http://www.colormatch5k.com

http://www.colormatch.dk

http://www.hlrnet.com/colormatch

樣版網站

Kelvin 老師在 1998 年時在公司擔任網頁設計的工作，當時的網頁設計幾乎從頭到尾都是由設計人員負責，而後端資料庫與程式的部份再交給不同的部門開發。現在，網路上已經有許多樣版網站，提供數量可觀的網頁樣版，適合各行各業的網頁設計。與客戶洽談時，可先從網站搜集適合的樣版提供客戶參考，至於是否請客戶自行到樣板網站挑選，就看您與客戶的交情囉~

Kelvin 老師會推薦的是 TemplateMonster 網站，瀏覽時可選擇不同的設計風格，並提供輸入關鍵字搜尋的功能。

http://www.templatemonster.com/

• 切片類型
• 將網頁切片
• 將自動切片與圖層式切片轉換成使用者切片
• 檢視切片與切片選項

切片可將影像分割成幾個較小的影像，這些小片段可以利用 HTML 表格或 CSS 圖層在網頁上重新組合。藉由分割影像，您可以指定不同的 URL 連結以建立網頁導覽，或使用個別的最佳化設定來最佳化影像的各個片段。

您可以使用「儲存為網頁與裝置用」指令轉存及最佳化切片的影像。Photoshop 會將每一個切片儲存為個別檔案，並產生所需的 HTML 或 CSS 程式碼以顯示切片的影像。

分割成切片的網頁.

處理切片時，請記住下列要點︰

• 您可以使用「切片」工具或藉由建立圖層式切片來建立切片。

• 建立切片後，可以使用「切片選取」工具 選取切片，然後移動它、調整它的尺寸，或是將它對齊其他切片。

• 您可以在「切片選項」對話框中設定每個切片的選項，例如切片類型、名稱和 URL。

• 您可以使用「儲存為網頁與裝置用」對話框中的不同最佳化設定，最佳化每一個切片。

回到頁首

切片類型

切片的分類是依據其內容類型 (表格、影像、沒有影像) 以及建立方式 (使用者、圖層式、自動)。

使用「切片」工具建立的切片稱為使用者切片；從圖層建立的切片稱為圖層式切片。當您建立新的使用者切片或圖層式切片時，也會產生額外的自動切片，以便容納影像中的其餘區域。換句話說，使用者切片或圖層式切片未定義到的影像區域，都會以自動切片填滿。每次新增或編輯使用者切片或圖層式切片時，都會重新產生自動切片。您可以將自動切片轉換成使用者切片。

使用者切片、圖層式切片和自動切片的外觀各不相同，使用者切片和圖層式切片是由實線定義，而自動切片則是由虛線定義。此外，使用者切片和圖層式切片會顯示不同的圖示。您可以選擇要顯示或隱藏自動切片，讓您較為容易檢視使用者切片和圖層式切片的工作內容。

次切片是一種自動切片，建立重疊切片時，就會產生次切片。當您儲存最佳化的檔案時，次切片會顯示出影像的分割方式。雖然次切片已加上編號並顯示切片符號，但是您不能將它們與下面的切片分開來選取或編輯。每次排列切片的堆疊順序時，都會重新產生次切片。

切片是以下列不同的方式建立：

• 自動切片會自動產生。

• 使用者切片則是由「切片」工具建立。

• 圖層式切片是以「圖層」面板建立。

回到頁首

將網頁切片

您可以使用切片工具直接在影像上繪製切片線段，或者是使用圖層設計圖像，然後以圖層為基礎來建立切片。

使用切片工具建立切片

1. 選取「切片」工具 。(按 C 鍵也可以在「裁切」工具群組間循環切換。)

   現有的任何切片就會自動顯示在文件視窗中。

2. 在選項列中選擇樣式設定：

   正常

   在拖曳時決定切片的長寬比例。

   固定外觀比例

   設定高度與寬度比例。在外觀比例上，輸入整數或小數數值。例如，若要建立寬度為高度兩倍的切片，在寬度輸入為 2，高度輸入為 1。

   固定尺寸

   指定切片的高度和寬度。輸入整數的像素值。

3. 在要建立切片的區域上方拖移。按住 Shift 鍵並拖移可以強制建立正方形切片； 按住 Alt 鍵 (Windows) 或 Option 鍵 (Mac OS) 並拖移，可以從中心開始繪製。使用「檢視 > 靠齊」，將新的切片對齊參考線或影像中的另一個切片。請參閱移動、靠齊及重新調整使用者切片尺寸。

自參考線建立切片

1. 請在影像中增加參考線。
2. 選取「切片」工具，並按一下選項列中的「自參考線建立切片」。

   當您自參考線建立切片時，會將現有的切片全部刪除。

自圖層建立切片

圖層式切片會包含圖層中所有的像素資料。如果移動圖層或編輯圖層的內容，切片區域就會自動調整以包含新的像素。

圖層式切片在來源圖層修改後會更新。

和使用者切片比起來，圖層式切片較不具彈性；不過，您可以將圖層式切片轉換 (「提升」) 成使用者切片。請參閱將自動切片與圖層式切片轉換成使用者切片。

1. 在「圖層」面板中選取圖層。
2. 選擇「圖層 > 新增圖層式切片」。

如果您想要在製作動畫期間，將圖層移到影像中的大型區域上方，請不要使用圖層式切片，因為切片尺寸可能會超出可以使用的大小。

回到頁首

將自動切片與圖層式切片轉換成使用者切片

由於圖層式切片與圖層的像素內容連結在一起，因此將它移動、組合、分割、調整尺寸和對齊的唯一方式，就是編輯圖層，不然就是要將它轉換成使用者切片。

影像中所有的自動切片都會連結在一起，共享相同的最佳化設定，如果您想要針對某個自動切片進行不同的最佳化設定，就必須將它提升為使用者切片。

1. 使用「切片選取」工具，選取要轉換的一個或多個切片。
2. 按一下選項列中的「提升」。

   您可以在「儲存為網頁與裝置用」對話框中解除自動切片的連結，以此方式提升自動切片。請參閱在儲存為網頁與裝置用對話框中使用切片

回到頁首

檢視切片與切片選項

您可以在 Photoshop 和「儲存為網頁與裝置用」對話框中檢視切片。下列特性可以幫助您辨識、區分不同的切片：

切片線段

定義切片的邊界。實線表示該切片是使用者切片或圖層式切片；虛線則表示該切片是自動切片。

切片顏色

將使用者切片和圖層式切片與自動切片區分出來。依預設，使用者切片和圖層式切片有藍色符號，自動切片則有灰色符號。

此外，「儲存為網頁與裝置用」對話框還會使用色彩調整，將未選取的切片變成灰色。這些調整只用於顯示之用，不會影響最終影像的顏色。根據預設，自動切片的色彩調整量是使用者切片的兩倍。

切片編號

切片是從影像的左上角開始，依左到右、上到下的順序從 開始編號。如果更改切片的排列方式或切片總數，就會更新切片編號反映出新的順序。

切片標誌

下列標誌或圖示用於表示特定狀況。

使用者切片包含影像內容。

使用者切片不包含影像內容。

切片是圖層式。

顯示或隱藏切片邊界

選擇「檢視 > 顯示 > 切片」。使用「輔助項目」指令，將切片與其他項目一起隱藏及顯示。請參閱顯示或隱藏輔助項目。

顯示或隱藏自動切片

執行下列任一項作業:

• 選取「切片選取」工具，並按一下選項列中的「顯示自動切片」或「隱藏自動切片」。

• 選擇「檢視 > 顯示 > 切片」。自動切片會連同其他切片一起顯示。

顯示或隱藏切片編號

1. 執行下列任一項作業:

   • 在 Windows 中，選擇「編輯 > 偏好設定 > 參考線、格點與切片」。

   • 在 Mac OS 中，選擇「Photoshop > 偏好設定 > 參考線、格點與切片」。

2. 在「切片」下，按一下「顯示切片編號」。

更改切片線段的顏色

1. 在 Windows 中，選擇「編輯 > 偏好設定 > 參考線、格點與切片」；在 Mac OS 中，選擇「Photoshop > 偏好設定 > 參考線、格點與切片」。
2. 在「切片線段」之下，從「直線顏色」選單中，選擇一種顏色。

   在顏色變更後，選取的切片線段會自動以對比色顯示。

更多說明主題

切片的 HTML 選項

指定切片內容類型

在儲存為網頁與裝置用對話框中使用切片

  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律注意事項   |   線上隱私權政策