本文以Photoshop CS2中文版為例，其它版本的Photoshop在操作步驟上可能會略有差異。先看一下最終效果。
最終效果
具體操作步驟如下。
1.啟動Photoshop CS2中文版，按Ctrl+N開啟「新建」對話框，依需求稍做設定(大小應該能放得下將來的導覽選單)後，點選「確定」按鈕新建一個文件。
2.點選圖層面板下方的「建立新圖層」按鈕新建一個圖層。選擇工具箱中的“圓角矩形工具”，在選項列中將其半徑設為15px，然後在新圖層上畫一個如圖1所示的圓角矩形。
圖1
3.現在對上述形狀套用如下圖層樣式。
投影：
圖2
內陰影：
圖3
內發光：
圖4
顏色疊加：
圖5
描邊：
圖6
套用上述樣式後，得到如圖7所示的按鈕效果。
圖7
4.現在再次使用“圓角矩形工具”，這次，在按鈕上方畫一個小一些的白色圓角矩形，如圖8所示。
圖8
5.將此圖層的混合模式設為“疊加”，並將不透明度設為30%，則可以得到如圖9所示的按鈕效果。
圖9
6.接下來複製這些按鈕，並將它們排列成一個導航選單，添加上文本，如圖10所示。
圖10
7.選擇工具箱中的“切片工具”，打開“視圖”選單，確認“對齊”左邊有一個對勾，這樣可以使切片自動對齊邊緣，從而創建出更為準確的切片。使用「切片工具」一個按鈕一個按鈕的切割，每個切片包含一個按鈕，結果如圖11所示。
圖11
8.既然已經做好切片，那麼現在可以將其輸出為HTML文件，從而為後來的網頁設計做準備了。選擇選單指令“檔案｜儲存為Web所用格式”，為了得到最好的影像效果，採用如圖12所示的設定。設定完畢點選「儲存」按鈕。
圖12
9.在「將最佳化結果儲存為」對話方塊中選擇網頁檔案要儲存的位置，並如圖13所示輸入檔案名，選擇儲存類型為“HTML和圖片(*.html)”，然後單擊“儲存”按鈕。
圖13
這樣就會得到一個HTML頁面，一個images資料夾，這個資料夾中即包含按鈕圖片。
現在只需要將HTML程式碼拷貝到其它網頁中就可以使用了，不過在拷貝時不要拷貝由Photoshop產生的header/body標籤。