UI設計師們最最討厭的工作：切圖+標註

03-04

設計師最煩的工作：切圖+標註。這也是一個ui設計師的基礎關，就好比知道列印是cmyk一樣。

站酷找來的，沒錯我就是站酷ID：遠行星

馬克鰻 - 設計稿標註、測量需要先裝adobe air

Parker - 收費的ps插件（真好用）至少版本要CC2014

一個ps的插件 Cutterman - 為設計更專註

----------------------------------正常情況下的@2x的切圖↓---------------------------------

導出圖

這就是一個標註圖，丟給程序員讓他進行萬里長征第二步，我建議大家圖標像我下方的導航圖標的那樣，做個淡藍色底，然後導出切圖時候，導出對應的44*44的圖標帶透明度，標註並導出44x44的圖方便開發。

網頁/ios/安卓通用，如果你精益求精的話，你可以ios750和android720都來一套，也是可以的。

安卓用的是「dp」，這蛋疼的單位。上次寫這個的答案的時候公司來了一個安卓萌新，居然不知道dp和像素的兌換，我教了她一下，然後.....跳槽了......跳槽了........跳槽了.........

蘋果用的單位是「點」，蘋果@2x的點就是像素的二分之一，這「點」和像素比對蘋果工程師是常識了 ,也好記,至少比安卓的對比舒服.

首先蘋果手機有分為@1x，@2x，@3x的區別，1x已經沒卵用了，

@2x是：1dp=2px

@3x是：1dp=3px

程序猿要是不知道這個，說明就是個萌新，不用懷疑告訴他吧，

而且年輕的安卓出來的界面像素會有差，不用懷疑你自己，這是他的鍋。

----------------------------------導出圖片的格式↓-------------------------------------

ios導出圖

如圖所見，這是蘋果圖標的導出PNG，我相信同行們也許還有人再用導出web所用格式，我開頭時候有推薦的一個PS插件切圖神器： Cutterman - 為設計更專註

第一步

第二步 PDF格式反正沒有人找我要過

第三步

然後就可以去你設定的導出文件夾去找找你要的圖標了，做個壓縮包丟給開發吧。

-----------------------------------有陰影的圖怎麼切↓---------------------------------------

陰影圖

簡單來說：截取左邊那一條就好，選取框一下就好,要帶透明的png，程序員可以用這一個做成「背景」，然後就一路下去了，但如果要是你家程序員懶的話................都切給他吧

---------------------------------------------------動圖怎麼切↓----------------------------------------------------

我說個我導出GIF的方法，有次個人中心的背景圖用到了一個波浪。

這裡我用到Ae做波浪。

在ae裡面導出png序列,然後用ps打開選定圖像序列，

陪圖我手頭沒有，隨便截取的打開圖，然後導出wed使用格式，選擇Gif，這要是細說又可以說一篇文章。

---------------------------------------------------程序猿懶怎麼辦↓----------------------------------------------------

目前有些程序猿會喜歡多一事不如少一事,我有一次做了大半天,然後程序猿給我看的時候,我發現他都沒有做線條,顏色也不對,然後我說下他才動手做.

有些程序員是喜歡偷懶,就比如快下班了把圖給你說xx做不了,這樣工作就你加班了,他明天改了.

程序猿和我們是相愛想殺的人,你要盯著他,防止他划水,QQ彈窗震動是個好東西.

最後界面長的不好看,人家不會怪程序猿,是會怪你的

-----------------------------------------------------------總結↓-----------------------------------------------------------

蘋果安卓的都是現做@2x的優先，由於友盟在維護,只有今年一月份的數據,750*1334的蘋果較多所以先做750*1334 , 安卓雷打不動的720*1280。

不過在做之前最好問問程序猿他需要怎樣的切圖和標註。

@1x早已淘汰不用切圖，只要切@2x，@3x的圖就夠了，

所以先做這兩個尺寸設計排版就好了，沒特殊要求，切圖標註完剩下交給程序猿讓他們去適配吧。

真希望蘋果，谷歌，微軟能統一下尺寸。