前言
設(shè)計(jì)師必須有個mac才避,別問題我windows行不行,我一個敲代碼的碼農(nóng)不理解你們美工圈鄙視鏈嗤形。
很多軟件windows沒有,只提供mac版弧圆。
另外赋兵,恕我直言:軟件不提供跨平臺版笔咽,一律視為垃圾,微笑霹期。
在線切圖工具【需要安裝photoshop才能使用】
摹客是設(shè)計(jì)+協(xié)作的一站式云平臺叶组,可以為產(chǎn)品開發(fā)團(tuán)隊(duì)提供全流程協(xié)作、高保真設(shè)計(jì)和設(shè)計(jì)規(guī)范管理支持历造。幫助設(shè)計(jì)師更輕松地完成設(shè)計(jì)稿交付甩十,設(shè)計(jì)效率提升200%。
摹客支持上傳Sketch吭产、Adobe XD侣监、PS、Figma的設(shè)計(jì)稿臣淤,可以自動生成不同平臺橄霉、不同倍率的切圖:快速切換平臺:支持切換iOS、Android荒典、Web和選擇倍率酪劫,減少了手動切換平臺的繁瑣流程吞鸭。
使用方法:
1.在官網(wǎng)下載安裝的PS插件:https://www.mockplus.cn/download/idoc-ps/?hmsr=cyrene
2.根據(jù)以下教程寺董,在PS中進(jìn)行切圖標(biāo)記,并上傳到摹客平臺:
一鍵下載全部切圖:可一鍵下載不同平臺下的全部尺寸切圖刻剥,PNG遮咖、SVG和Webp三種格式自由選擇,交付更省心造虏。
自定切圖尺寸:摹客支持對切圖尺寸進(jìn)行自定義御吞,快速調(diào)整切圖大小。還可以在PS插件中為切圖添加遮罩漓藕,把圖標(biāo)切成統(tǒng)一尺寸的切圖陶珠。
切圖壓縮:啟用切圖壓縮后,可將下載的切圖體積瘦身50%以上享钞。
重命名切圖及設(shè)置安卓切圖文件夾名稱:如果選擇了Android 開發(fā)平臺揍诽,還可以修改安卓切圖文件夾名稱,提高開發(fā)效率栗竖。
除了智能的切圖方式暑脆,摹客的標(biāo)注、交互狐肢、全貌畫板添吗、文檔管理等功能也很實(shí)用。
支持百人團(tuán)隊(duì)免費(fèi)使用https://www.mockplus.cn/specs/ps/?hmsr=cyrene
自動切圖工具
這里切圖推薦一個插件:Cutterman份名,更多切圖工具介紹請移步:扶朕起來碟联,朕還能切
Cutterman 是個國產(chǎn)的切圖工具妓美,廣告語就叫“最好用的切圖工具”
Cutterman致力于改善設(shè)計(jì)師的工作效率,為設(shè)計(jì)師提供優(yōu)秀、高效鲤孵、實(shí)用的技術(shù)解決方案, 解放雙手部脚。讓創(chuàng)意不再有界限, 讓設(shè)計(jì)更專注!
- 支持多倍圖
- 多種格式
- 多圖層導(dǎo)出
- 可以設(shè)置固定大小
- 操作簡單
- 免費(fèi),只需要注冊個賬號即可
一鍵切圖裤纹,真正解放雙手
Cutterman能夠讓你只需要點(diǎn)擊一個按鈕委刘,就自動輸出你需要的各種各樣的圖片,快到?jīng)]有朋友鹰椒!
關(guān)于標(biāo)注
將一個個標(biāo)注手動畫出來锡移,耗時費(fèi)力不說,畫得兩眼昏花漆际,一不小心就會出現(xiàn)漏標(biāo)的情況淆珊。而這些漏標(biāo)的地方,攻城獅們往往在開發(fā)過程中才會發(fā)現(xiàn)奸汇,于是不得不一次又一次地找設(shè)計(jì)師進(jìn)行確認(rèn)施符。
切好圖之后該怎么標(biāo)注了,這是一個面臨的問題擂找,別告訴我你還在手動一個一個在那里測距離戳吝,我看見我同事之前就是用PS一個一個在那里量距離,看得我強(qiáng)迫癥和尷尬癥都犯了贯涎,記住听哭,不要把時間浪費(fèi)在體力活上,能用工具解決的事就不要用雙手塘雳,你這么喜歡干這種測距離的體力活你咋不去搬磚呢陆盘?讓別人用雙手拯救你的雙手?有時候標(biāo)注設(shè)計(jì)師會幫你做败明,但是也不是總能碰見這么善解人意的設(shè)計(jì)師隘马,我方設(shè)計(jì)師VS別人設(shè)計(jì)師。
我方設(shè)計(jì)師:
對方設(shè)計(jì)師:
碰見這種我方設(shè)計(jì)師妻顶,沒人替我們分擔(dān)酸员,這種低效的協(xié)作方式贝乎,造成了大多數(shù)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)普遍的悲劜哉:明天要上線,通宵摳細(xì)節(jié)仿粹,吐血調(diào)界面呢燥,加班U柑怼!叛氨!
幾款強(qiáng)大的標(biāo)注工具
設(shè)計(jì)師不幫我們標(biāo)注呼渣,咋們自己來棘伴,借助工具標(biāo)注也是分分鐘的事情,假如復(fù)雜的標(biāo)注蹂躪了你屁置,不要悲傷焊夸,不要哭泣。
如果有一天蓝角,設(shè)計(jì)師只需專注界面設(shè)計(jì)阱穗,不需再做切圖和標(biāo)注的工作;如果有一天使鹅,工程師只需專注功能框架建設(shè)揪阶,不需再花太多心思在標(biāo)注UI上面;沒有如果患朱,這一天真的來了鲁僚。。裁厅。
工以利器為助冰沙,人以賢友為助。有了這些工具的輔佐执虹,讓我們開發(fā)的效率又快又好拓挥,簡直如虎添翼,爽到不行声畏。
1撞叽、標(biāo)你妹
官方網(wǎng)站:http://www.biaonimeia.com/
是否免費(fèi):免費(fèi)
登錄方式:直接微信掃一掃
介紹:
天天讓我標(biāo)注測距離,標(biāo)你妹啊插龄,作為射擊獅,卻干著死美工的活科展,每天要為程序猿同學(xué)標(biāo)注PSD有木有均牢?但我卻憧憬著成為逼格很高的射擊獅。為了能夠早點(diǎn)下班泡妹子看電影才睹。標(biāo)你妹啊幫你解放你的雙手…
操作:登錄成功之后徘跪,新建一個項(xiàng)目上傳PSD,然后就可以進(jìn)行標(biāo)注琅攘。
操作預(yù)覽圖:
2垮庐、藍(lán)湖Mac端App
一款全中文免費(fèi)的自動標(biāo)注的神器!徹底解放設(shè)計(jì)師的雙手坞琴,上傳文件就能蹭蹭蹭的自動標(biāo)注哨查!什么?你還想自動作圖剧辐?冷靜點(diǎn)冷靜點(diǎn)…萬一失業(yè)了呢寒亥?
現(xiàn)在邮府,這款叫藍(lán)湖的設(shè)計(jì)師標(biāo)注神器,最新版開始支持“自動標(biāo)注”的功能(目前僅支持.Sketch溉奕,Psd版本即將上線)
只需下載“藍(lán)湖”Mac端App褂傀,即可實(shí)現(xiàn):從Sketch一鍵導(dǎo)出設(shè)計(jì)圖→自動生成標(biāo)注→自動共享給團(tuán)隊(duì)→團(tuán)隊(duì)相關(guān)成員自動收到提醒等一系列自動化功能。
官方網(wǎng)站:https://www.lanhuapp.com/
是否免費(fèi):免費(fèi)
登錄方式:下載APP,注冊賬號登錄
介紹:
藍(lán)湖是一款產(chǎn)品設(shè)計(jì)師的協(xié)作平臺,幫助設(shè)計(jì)師更快地完成工作加勤。藍(lán)湖通過幫助設(shè)計(jì)師更好地向團(tuán)隊(duì)展示設(shè)計(jì)圖,描述頁面之間的跳轉(zhuǎn)關(guān)系仙辟。藍(lán)湖還支持從Sketch一鍵分享、在線協(xié)作…
操作:登錄成功之后鳄梅,新建一個項(xiàng)目上傳欺嗤,然后就可以進(jìn)行標(biāo)注。
操作預(yù)覽圖:
“自動標(biāo)注”功能可以完整而清晰地將Sketch設(shè)計(jì)圖中每個元素的尺寸卫枝、位置煎饼、顏色、間距校赤、字號 等樣式信息自動同步到藍(lán)湖吆玖,團(tuán)隊(duì)內(nèi)的工程師等同事可以隨時查看。
如果設(shè)計(jì)圖出現(xiàn)改動和更新马篮,藍(lán)湖也能自動添加新版本沾乘。
如今設(shè)計(jì)師的工具那么多,這一款工具的優(yōu)勢在哪里呢
1.所有功能完全免費(fèi)浑测,沒有任何項(xiàng)目或團(tuán)隊(duì)成員數(shù)量限制翅阵。
2.中文的!中文的迁央!中文的掷匠!
3.無與倫比的快!在國內(nèi)的服務(wù)器+藍(lán)湖工程師嘔心瀝血優(yōu)化的算法岖圈,使藍(lán)湖的“自動標(biāo)注”的速度嗖嗖的讹语!
4.藍(lán)湖還整合了設(shè)計(jì)圖流程的展示,設(shè)計(jì)圖歷史版本管理蜂科,多種情況和狀態(tài)的設(shè)計(jì)圖管理等功能顽决。
5.設(shè)計(jì)師不但可以為每張?jiān)O(shè)計(jì)圖添加備注文檔,其他團(tuán)隊(duì)成員還可以針對設(shè)計(jì)圖發(fā)表評論导匣,方便團(tuán)隊(duì)在線高效溝通才菠。(內(nèi)心竟有點(diǎn)小小的惶恐…)
6.在藍(lán)湖上,還可以基于設(shè)計(jì)圖快速制作一個高保真的交互原型贡定,讓工程師不用再跑來問你“這個按鈕跳到哪啊”赋访,該原型還可以在藍(lán)湖手機(jī)端App和微信上進(jìn)行操作和預(yù)覽。
美團(tuán),網(wǎng)易进每,面包旅行等等國內(nèi)知名互聯(lián)網(wǎng)公司都參與了藍(lán)湖的早期內(nèi)測汹粤,為 “藍(lán)湖”提出了很多專業(yè)的建議√锿恚“藍(lán)湖”基于這些反饋快速迭代嘱兼,而“自動標(biāo)注”功能就是其中一項(xiàng)。
由于是國內(nèi)的團(tuán)隊(duì)贤徒,溝通起來非常方便芹壕!所以如果設(shè)計(jì)師們有痛點(diǎn)或是需求,可以積極討論接奈!沒準(zhǔn)下版本的藍(lán)湖就能直接自動作圖了呢L哂俊!序宦!
對惹睁壁,藍(lán)湖主體功能是Web端網(wǎng)頁平臺,不需要下載互捌,直接注冊就可以免費(fèi)使用潘明。
來源:你丫才美工(Ymeigong),之前今日頭條看到的推薦秕噪,不知道網(wǎng)址钳降。。腌巾。
3遂填、Sketch/PS + Zeplin
隨著sketch的普及(sketch是啥,能吃嗎澈蝙?自行谷歌吓坚、必應(yīng)),國內(nèi)外很多項(xiàng)目團(tuán)隊(duì)都陸續(xù)用起了sketch+zeplin的開發(fā)模式碉克。不過話說回來凌唬,sketch真的有那么好用嗎?很多小伙伴們表示用ps好幾年了漏麦,要我重新學(xué)一個軟件,臣妾做不到翱鐾省撕贞!~
其實(shí)剛進(jìn)公司的時候也是這種心情的,沒用過mac更沒用過sketch测垛,完全的小白用戶捏膨,當(dāng)時內(nèi)心幾乎是奔潰的。但是自從接觸sketch后,真的是愛不釋手号涯,都不想用回ps了目胡。
官方網(wǎng)站:https://www.zeplin.io/
PS導(dǎo)出zeplin官方視頻教程:https://www.youtube.com/watch?v=0cVbzq-Q43M
Sketch導(dǎo)出zeplin 官方視頻教程:https://www.youtube.com/watch?v=o9kOpAaDpQU
是否免費(fèi):免費(fèi)
登錄方式:下載APP,注冊賬號登錄
介紹:
在使用 Zeplin 之前链快,最早是使用馬克曼(手動標(biāo)注誉己,這里不做推薦)進(jìn)行標(biāo)注的,也就是直接在輸出效果圖上量尺寸域蜗;使用 Sketch 插件 Measure 之后巨双,可以在畫板中生成尺寸標(biāo)注信息,導(dǎo)出標(biāo)注圖提供給開發(fā)同學(xué)使用霉祸。無論是馬克曼還是 Measure筑累,最后的交付物是一致的,馬克曼和接下來要介紹的Measure這種原始的標(biāo)準(zhǔn)就是已經(jīng)破壞了原本的視覺效果圖丝蹭,標(biāo)注的信息一定會對原設(shè)計(jì)稿形成遮擋慢宗,因此一般效果圖和標(biāo)注圖要分開給,開發(fā)也經(jīng)常需要在兩個圖之間切換奔穿,圖片管理不太方便镜沽。
zeplin 主要就是為了解決上述問題的,使用它之后巫橄,可以在 Sketch 中一鍵導(dǎo)入 Artboard淘邻,在設(shè)計(jì)師做好圖層管理(命名、分組)的前提下湘换,它可以自動生成標(biāo)注信息(并且可以標(biāo)注為 pt 或 dp)宾舅,允許添加注釋形成類 prd 文檔,并且自動提取 Style Guide彩倚,同時還允許添加項(xiàng)目組成員筹我,提供給團(tuán)隊(duì)組查看項(xiàng)目。
操作:登錄成功之后帆离,新建一個項(xiàng)目上傳素材蔬蕊,然后就可以進(jìn)行操作。
官方預(yù)覽圖:
介紹之后回答兩個基本問題
①sketch支持windows嗎哥谷?
答:不好意思岸夯,目前沒有!設(shè)計(jì)師為了提升工作效率们妥,就算吃土一兩個月也要買臺mac猜扮。不過windows用戶除了裝mac虛擬機(jī)外,現(xiàn)在ps也支持zeplin插件了监婶,只要安裝個插件旅赢,沒有mac也照樣可以任性的告別切圖和標(biāo)注齿桃。
②zeplin支持windows嗎?
答:真夠意思煮盼,這個必須有短纵!不久前只有mac版,不過zeplin團(tuán)隊(duì)怎么會放棄windows那么大塊的市場呢僵控。真是喜大普奔香到,現(xiàn)在zeplin也支持windows了,從此開發(fā)哥哥再也不會抱怨網(wǎng)頁端的zeplin打開速度超級慢了喉祭。
好了养渴,廢話不多說,直接進(jìn)正題泛烙。
③sketch+zeplin的優(yōu)勢
1理卑、sketch支持多畫板,便于同時預(yù)覽蔽氨,占用內(nèi)存較ps小很多藐唠;
2、sketch支持導(dǎo)出flinto鹉究,便于制作交互動效原型宇立;
3、zeplin解放設(shè)計(jì)師的雙手自赔,從此告別切圖和標(biāo)注妈嘹;
4、zeplin降低工程師的溝通成本绍妨,提高設(shè)計(jì)還原度润脸。
更多細(xì)節(jié)已經(jīng)安裝方法導(dǎo)出技巧請移步:APP標(biāo)注無煩惱!告別切圖標(biāo)注-Sketch/PS+Zeplin
這里這介紹工具他去,由于篇幅有限毙驯,并不詳細(xì)教你怎么用,工具多用用就會了灾测,熟能生巧爆价。
更多關(guān)于Zeplin的體驗(yàn)和細(xì)節(jié)請移步:Zeplin 的使用體驗(yàn)如何?
4媳搪、Sketch Measure
中文文檔:http://sketch.im/plugins/1
github:https://github.com/utom/sketch-measure
官方網(wǎng)站:http://utom.design/measure/
官方使用教程:http://utom.design/measure/how-to.html
是否免費(fèi):免費(fèi)
登錄方式:下載APP,注冊賬號登錄
介紹:
Sketch Measure是一款可用于標(biāo)注和設(shè)計(jì)規(guī)范的工具铭段,支持Sketch 3.5版以上。Measure幫你解放你的雙手…
1.創(chuàng)建疊加
2.度量尺寸
3.度量邊距
4.獲取屬性
5.添加注釋
操作:登錄成功之后秦爆,新建一個項(xiàng)目上傳PSD稠项,然后就可以進(jìn)行標(biāo)注。
官方DEMO預(yù)覽地址:http://utom.design/news/#artboard0
Demo操作預(yù)覽圖:
關(guān)于Sketch Measure的使用教程鲜结,這里也不多細(xì)說,這里拋磚引玉的介紹一下,想要了解和使用請移步:
Sketch Measure切圖標(biāo)注插件使用教程
下面談一談Zeplin和Sketch Measure的區(qū)別精刷,純屬引用拗胜,表示沒用過Sketch Measure:
Zeplin:
①Zeplin注冊免費(fèi),只能保留一個Active項(xiàng)目怒允,“STARTER”17刀/月埂软,3個Active項(xiàng)目,“GROWING BUSINESS”26刀/月纫事,12個Active項(xiàng)目勘畔。“ORGANIZATION”每個用戶6.75刀/月丽惶。
②支持MAC的Sketch和PS炫七,以及PC的PS。(最大的優(yōu)點(diǎn))
③數(shù)據(jù)必須上傳到網(wǎng)絡(luò)上钾唬,可以用客戶端查看也可以網(wǎng)頁查看万哪,必須是注冊用戶。(很麻煩抡秆,有些公司不允許上傳就沒辦法了)
④自動生成styleguide奕巍。(非常棒)
⑤切圖需要查看相應(yīng)頁面時,從切圖欄下載儒士。(我用的并不多的止,也可能有其他方式)
Sketch Measure:
①完全免費(fèi)。
②只支持MAC Sketch着撩,但查看不受限制诅福。
③數(shù)據(jù)保存在本地(html文件),方便打包后發(fā)郵件睹酌,缺點(diǎn)是每次更新都要再發(fā)一遍权谁,管理麻煩。
④沒有Zeplin智能憋沿,沒有自動styleguide旺芽,但是有類似AssistorPS一樣的手動標(biāo)注。
⑤有“顏色命名”但比styleguide差很多辐啄,希望以后能更新類似功能采章。自動打包輸出切圖,支持iOS和Android的命名方式壶辜。
5悯舟、其他諸如PxCook(像素大廚),cutterman的parker(這個收費(fèi)砸民,喜歡的可以贊助一下抵怎,切圖那個免費(fèi)哦<g-emoji class="g-emoji" alias="hushed" fallback-src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f62f.png" style="box-sizing: border-box; font-family: "Apple Color Emoji", "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.2em; font-weight: 400; line-height: 20px; vertical-align: middle;">??</g-emoji>)等大同小異奋救,這里就不多做介紹,感興趣的童鞋可以自己折騰玩玩反惕,工具嘛尝艘,適合自己的就是最好的,其他一些我也沒有實(shí)踐姿染,大家自己看著玩背亥。。悬赏。
以上四個推薦軟件的看法:
標(biāo)你妹適合小型的個人的一些項(xiàng)目狡汉,對于新手來說,學(xué)習(xí)成本基本為0闽颇,非常方便盾戴,web端沒有平臺限制;
藍(lán)湖Mac端APP首先你得有一臺Mac进萄,其次是OSX系統(tǒng)捻脖,國內(nèi)的良心之作,速度很快中鼠,適合個人和企業(yè)協(xié)同合作開發(fā)可婶;
Zeplin適合小型的團(tuán)隊(duì),還帶有一部分協(xié)作辦公的功能(留言和更新狀況)援雇,要求前端也能適應(yīng)這種新的方式矛渴;
Sketch Measure更傳統(tǒng)一些,本地文檔惫搏、打包切圖等等具温,更適合有自己辦公流程的大公司,僅僅支持Mac筐赔。