首先分享一個(gè)比較好用且快捷的切圖軟件.....................

Cutterman；

這是一個(gè)photoshop擴(kuò)展功能切圖插件，它支持IOS、Android、WEB切圖，一鍵切圖，方便快捷。

它在Photoshop中是這個(gè)樣子的；

大家可以試一下，畢竟軟件只是工具，適合自己的軟件才是最好的。

好了，言歸正傳，下面開(kāi)始分享切圖基本命名規(guī)范；

這是網(wǎng)易考拉海購(gòu)的啟動(dòng)頁(yè)，首先確定需要切圖的內(nèi)容有幾塊，

1、啟動(dòng)頁(yè)LOGO；

2、啟動(dòng)頁(yè)背景；

3、登錄按鈕；

4、登錄的輸入框；

首先第一個(gè)啟動(dòng)頁(yè)LOGO命名

命名規(guī)范是：login_logo.png(登錄LOGO）

第二個(gè)是啟動(dòng)頁(yè)背景命名規(guī)范：login_bg.png(登錄背景）

第三個(gè)和第四個(gè)是登錄按鈕及輸入框

命名規(guī)范：login_btn.png(登錄的按鈕）

login_input.png(登錄輸入框）

這個(gè)界面中主要介紹三處命名規(guī)范：導(dǎo)航欄按鈕、菜單按鈕、主頁(yè)面icon

導(dǎo)航欄按鈕命名規(guī)范：nav_（能功描述）.png

如：anv_menu.png/nav_menu_pre.png（統(tǒng)一按鈕選中前后的兩種狀態(tài)）

ps:同一區(qū)域按鈕切圖大小一致。

菜單按鈕命名規(guī)范：tab_（功能描述）.png

如：tab_set.png/tab_set_pre.png

主頁(yè)面icon命名規(guī)范：Home_（功能屬性）_（描述）.png

如：Home_icon_share.png

ps:描述可用英文或者拼間開(kāi)頭字母組合

部分功能屬性簡(jiǎn)寫：

按鈕：btn 按鈕文字：btntext 復(fù)選框：chb

背景：bg 單選框：rb 下拉：cbb

輸入：ip

列表頁(yè)命名規(guī)范：list_（功能屬性+描述）.png

如：list_icon_like.png（我喜歡的）

可重復(fù)使用按鈕：btn_（功能屬性或色彩均可）.png

如：btn_black.png（黑色按鈕）