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

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

模塊_類(lèi)別_功能_狀態(tài).png
U妹舉個(gè)栗子：nav_button_search_default.png
釋義為：導(dǎo)航_按鈕_搜索_默認(rèn).png

啟動(dòng)界面:
啟動(dòng)圖片 default.png
啟動(dòng)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ī)會(huì)不高
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 個(gè)人中心

底部選項(xiàng)卡按鈕（TabBar）

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

主頁(yè)命名

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


列表頁(yè)命名規(guī)則

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