用photoshop做網頁設計圖需要給前端人員切圖，我比較常用的就是藍湖，切圖后上傳，有的圖層會比較多，藍湖有個功能就是會“顯示切圖區域”，這樣切圖后的圖層都會清晰看見，以防有遺漏的切圖。

另外需要注意的是切圖的命名規范，做圖的時候會圖層太多，時間緊迫或者會遺漏圖層的命名，這樣前端人員下載切圖的時候需要自己修改名稱，在規范網站找到的命名規范，這樣以后修改設計的圖或者前端人員都會方便很多。

模塊_類別_功能_狀態.png
U妹舉個栗子：nav_button_search_default.png
釋義為：導航_按鈕_搜索_默認.png

啟動界面:
啟動圖片 default.png
啟動logo default_logo.png
如：default.png\defoult@2x.png\defauLt-568@2x.png

登錄界面（login）
登錄背景 login_bg.png
登錄logo login_logo.png
輸入框 login_input.png
輸入框選中狀態 login_input_pre.png
登錄按鈕 Login_btn.png
登錄按鈕選中狀態 Login_btn_pre.png

導航欄按鈕 (nav) 命名

nav_功能描述.png
如：nav_menu.png\nav_menu_pre.png（同按鈕選中前后兩種狀態命名 ）

按鈕命名（btn可重復使用按鈕)

一般 normal btn_xxx_normal.png
點擊 highlight btn_xxx_highlight.png
不能點擊 disabled btn_xxx_disable.png
按下 pressed btn_xxx_pressed.png
選中 selected btn_xxx_selected.png 做為復數選擇出現機會不高
btn_功能屬性或色彩均可.png
如：btn_blue.png\btn_blue.9.png 藍色按鈕


其他命名

圖標 icon_xxx.png
圖片 pic_xxx.png或是img_xxx.png
照片 pho_xxx.png
左側導航 命名 leftbar_功能描述.png
如：leftbar_info.png\leftbar_info_pre.png 個人中心

底部選項卡按鈕（TabBar）

命名 Tab_功能描述.png 如：tab_set.Png\nav_set_pre.png 設置

主頁命名

命名 home_功能屬性＋描述.png
如：home_menu_recommended.png 熱門推薦
ps：描述可用英文或拼間開頭字母組合等


列表頁命名規則

命名 List_功能屬性＋描述.png
如：list_menu_collect.png 列表頁收藏按鈕