「方法」圖示建立滑鼠指向效果按鈕


    「方法提示」圖示方法提示:

    使用 ImageReady「圖層」浮動視窗和「網頁內容」浮動視窗,來建立滑鼠指向效果按鈕。

    許多網站皆包含滑鼠指向效果按鈕,當您將滑鼠置於項目上方時或是選取項目時,這些按鈕會有所變更;按鈕有多種不同的顯示模式,這些模式統稱為滑鼠指向效果狀態。您可以利用 Photoshop 中的圖層來設計按鈕及按鈕的滑鼠指向效果狀態,另外,您還可以將變更各個效果狀態的成份放在各自的圖層上,然後使用 Photoshop「圖層」浮動視窗預視這些成份。當設計符合您的需要時,請建立按鈕的切片,這個切片會將滑鼠觸發的區域標示起來,以顯示不同的狀態。接下來要在 ImageReady® 中編輯按鈕,以定義滑鼠指向效果狀態的內容,此時需要搭配使用「網頁內容」浮動視窗和「圖層」浮動視窗,先建立狀態,再藉由開啟或關閉圖層設定外觀。

  1. 在 Photoshop 中為每個按鈕的滑鼠指向效果狀態建立按鈕影像、文字和內容。請將任何與正常狀態不同的滑鼠指向效果狀態內容存放在個別的圖層上。滑鼠指向效果狀態圖層可以增大按鈕的正常狀態,或是當做正常狀態圖層使用。假設希望在滑鼠放到按鈕上時,按鈕旁會出現一個圓圈,只需要在另一個圖層上建立這個圓圈,而不需要複製按鈕本身。
  2. 到「圖層」浮動視窗中,選取代表正常狀態按鈕的圖層,然後選擇「圖層 > 新增基於圖層的切片」。這時候 Photoshop 會在圖層上建立一個繪出按鈕外框的切片,只要滑鼠碰到這個切片外框,就會啟動滑鼠指向效果狀態。
  3. 儲存檔案,然後在 ImageReady 中選擇「檔案 > 編輯」,ImageReady 應用程式就會開啟,上面有這個影像。
  4. 按一下「圖層」標籤和「網頁內容」標籤,讓浮動視窗帶在最前面,或是選擇「視窗 > 圖層」,然後選擇「視窗 > 網頁內容」(如果浮動視窗尚未開啟的話)。
  5. 到「網頁內容」浮動視窗中,選取「正常」狀態,接著在「圖層」浮動視窗中,確認此狀態的圖層皆能正確顯示和隱藏。按一下眼睛圖示 「眼睛」圖示 可以隱藏圖層,清除眼睛欄可以顯示圖層。
  6. 到「網頁內容」浮動視窗中,選取為按鈕建立的切片,接著按一下浮動視窗底部的「建立滑鼠指向效果狀態」按鈕 「新增」按鈕。這時候 Photoshop 會在切片下方插入「Over」狀態,當使用者將滑鼠置於按鈕上方時,就會產生「Over」狀態。
  7. 「網頁內容」浮動視窗中的「Over」狀態選取時,按一下您希望遇到這個狀態時要隱藏或顯示的「圖層」浮動視窗的眼睛圖示 「眼睛」圖示 ,或是清除圖層旁的眼睛欄。
  8. 重要:務必確認在「網頁內容」浮動視窗中已選取了正確的滑鼠指向效果狀態,才能對按鈕圖層進行任何變更。

  9. 重複執行步驟 6 和 7,就可以在這個按鈕上加入其他的狀態,例如「Down」狀態(當使用者按下滑鼠按鈕時的狀態) 或「Selected」狀態。
  10. 注意:如果想要將 Photoshop 建立的狀態變更為不同的狀態 (例如,從「Down」變更為「Selected」),請選取狀態,再從「網頁內容」浮動視窗選單中,選擇「滑鼠指向效果狀態選項」,然後選取需要的狀態,最後按一下「確定」。

  11. 選取工具箱中的「預視文件」按鈕 「預視文件」按鈕,將滑鼠移到按鈕上方,可以預視滑鼠指向效果狀態。如果已建立其他的狀態,請您也啟動這些狀態 (例如按下滑鼠按鈕或按一下)。最後再次選取「預視文件」,關閉預視模式。
  12. 當按鈕的設定符合您的需求時,請將檔案儲存起來。切記!務必以 Photoshop 格式先存檔,因為 Photoshop 格式可以保留按鈕的所有元件,讓您在日後有需要時可以修改它們。一旦將它們儲存成 PSD 檔,您就可以將按鈕整合到其他 Photoshop 檔案,或最佳化它們以用於網頁中。

「Photoshop 說明」中的相關主題: