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

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

模塊_類別_功能_狀態(tài).png
U妹舉個栗子：nav_button_search_default.png
釋義為：導(dǎo)航_按鈕_搜索_默認(rèn).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
輸入框選中狀態(tài) login_input_pre.png
登錄按鈕 Login_btn.png
登錄按鈕選中狀態(tài) Login_btn_pre.png

導(dǎo)航欄按鈕 (nav) 命名

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

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

一般 normal btn_xxx_normal.png
點(diǎn)擊 highlight btn_xxx_highlight.png
不能點(diǎn)擊 disabled btn_xxx_disable.png
按下 pressed btn_xxx_pressed.png
選中 selected btn_xxx_selected.png 做為復(fù)數(shù)選擇出現(xiàn)機(jī)會不高
btn_功能屬性或色彩均可.png
如：btn_blue.png\btn_blue.9.png 藍(lán)色按鈕


其他命名

圖標(biāo) icon_xxx.png
圖片 pic_xxx.png或是img_xxx.png
照片 pho_xxx.png
左側(cè)導(dǎo)航 命名 leftbar_功能描述.png
如：leftbar_info.png\leftbar_info_pre.png 個人中心

底部選項卡按鈕（TabBar）

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

主頁命名

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


列表頁命名規(guī)則

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