Photoshop 網頁工具可以讓您輕鬆地建立網頁元件,或是以預設集或自訂的格式輸出完整的網頁。

  • 使用圖層和切片設計網頁和網頁介面元件。(請參閱圖層切片網頁)。

  • 使用圖層構圖,嘗試不同的網頁構圖或是轉存網頁的綜觀變量。(請參閱圖層構圖。)

  • 建立滑鼠指向效果文字或按鈕圖像,以讀入至 Dreamweaver 或 Flash。

  • 使用「動畫」面板建立網頁動畫,然後轉存為動畫 GIF 影像或 QuickTime 檔案。請參閱建立影格動畫

  • 使用 Adobe Bridge 可建立網路相片收藏館,透過各式各樣的專業範本,快速地將一組影像製作成互動式網站。

如需有關使用 Photoshop 和 Dreamweaver 設計網站的影片,請參閱從 Dreamweaver 存取 Photoshop 以強化網頁影像

建立滑鼠指向效果影像

滑鼠指向效果是網頁上的按鈕或影像,當滑鼠指向它時,就會變更。若要建立滑鼠指向效果,您至少需要兩個影像:正常狀態的主要影像以及已變更狀態的次要影像。

Photoshop 提供一些有用的工具以建立滑鼠指向效果影像:

  • 使用圖層建立主要和次要影像。在一個圖層上建立內容,然後複製圖層並進行編輯,在圖層之間建立類似的內容,並保持對齊。建立滑鼠指向效果時,您可以變更圖層的樣式、可見度或是位置、調整顏色或色調,或是套用濾器效果。請參閱複製圖層

  • 您也可以使用圖層樣式,將顏色覆蓋、陰影、光暈或浮雕等效果套用至主要圖層。若要建立滑鼠指向效果組,請開啟或關閉圖層樣式,並儲存每個狀態的影像。請參閱圖層效果和樣式

  • 從「樣式」面板使用預設集按鈕樣式,快速地建立具有一般狀態、滑鼠置於上方及滑鼠置於下方狀態的滑鼠指向效果按鈕。使用矩形工具繪製基本的圖形並套用樣式 (如 Beveled Normal),將矩形自動轉變成按鈕。接著拷貝圖層並套用其他預設集樣式 (如 Beveled Mouseover),以建立其他按鈕狀態。將每個圖層儲存為不同的影像,以建立已完成的滑鼠指向效果按鈕集。

  • 使用「儲存為網頁與裝置用」對話框,以網頁相容的格式及最佳化的檔案大小儲存滑鼠指向效果影像。請參閱最佳化影像

註解:

當您儲存滑鼠指向效果影像時,請使用不同的命名慣例區分主要 (非滑鼠指向效果狀態) 影像和次要 (滑鼠指向效果狀態) 影像。

在 Photoshop 中建立滑鼠指向效果影像之後,使用 Dreamweaver 將影像放在網站上,並自動增加滑鼠指向效果動作的 JavaScript 程式碼。

轉存為 Zoomify

您可以將高解析度的影像張貼在網站上,讓檢視者進行平移和縮放,看得更仔細。同時也會下載基本大小的影像,是一個相同大小的 JPEG 檔案。Photoshop 會轉存 JPEG 檔案與 HTML 檔案,您可以將它們上載到網頁伺服器。

  1. 選擇「檔案 > 轉存 > Zoomify」並設定轉存選項。

    範本

    為在瀏覽器中檢視的影像設定背景與導覽。

    輸出位置

    指定檔案的位置與名稱。

    影像拼貼選項

    指定影像的品質。

    瀏覽器選項

    為檢視器的瀏覽器中的基本影像設定像素寬度與高度。

  2. 將 HTML 與影像檔案上載到網頁伺服器。

使用 16 進位顏色數值

Photoshop 可以顯示影像顏色的 16 進位值,或是拷貝顏色的 16 進位值以供在 HTML 檔案中使用。

在「資訊」面板中檢視 16 進位的顏色數值

  1. 請選擇「視窗 > 資訊」或按一下「資訊」面板索引標籤,檢視面板。
  2. 在面板選單中選擇「面板選項」。在「解析第一個顏色」或「解析第二個顏色」下,從「模式」選單中選擇「網頁色彩」,並按一下「確定」。
  3. 請將指標放在您要檢視其 16 進位值的顏色上。

以 16 進位數值拷貝顏色

Photoshop 會將顏色拷貝為包含十六進位值的 HTML COLOR 屬性 (color=#xxyyzz),或單獨的十六進位值。

  1. 執行下列任一項作業:
    • 使用滴管工具,將指標移動到您要拷貝的顏色上。按一下滑鼠右鍵 (Windows) 或按住 Control 並按一下 (Mac OS),然後選擇「拷貝顏色的 HTML 色碼」或「拷貝顏色的十六進位碼」。

    • 使用「顏色」面板、「色票」面板或是 Adobe「檢色器」設定前景色。在「顏色」面板選單中,選擇「拷貝顏色的 HTML 色碼」或「拷貝顏色的十六進位碼」。

    • 在「儲存為網頁用」對話框中,按一下顏色色票或選擇「邊緣調合 > 其他」。在 Adobe 檢色器中,以滑鼠右鍵按一下十六進位值,然後選擇「拷貝」。

  2. 在 HTML 編輯應用程式中開啟想要的檔案,然後選擇「編輯 > 貼上」。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策