2021-1-4 前端達(dá)人
這一期專門為大家講解下在sketch中切圖問題
切圖作為UI設(shè)計(jì)師的必備技能，其實(shí)有許多地方困擾著很多同學(xué)們。比如批量下載切圖、切圖命名、不同切片的類型這些都有同學(xué)或多或少的有些迷茫。這一期專門為大家講解下在sketch中切圖問題。
在本文中我們將sketch中的切片分為兩類：一是內(nèi)置切片，二是獨(dú)立切片。
我們將某元素點(diǎn)擊導(dǎo)出按鈕之后形成的切片稱之為內(nèi)置切片，如下圖：
內(nèi)置切片相對(duì)比較簡(jiǎn)單，他的切圖范圍是跟隨他所依附的元素的大小而改變的。而且只能切出所依附的元素本身。
由切片工具繪制而來的切片我們稱之為獨(dú)立切片
獨(dú)立切片范圍是可以隨意更改的，不依附于想要切的元素。并且可以切出所有在切片范圍中顯示的視覺元素。
如果我們需要用獨(dú)立切片去切出特定的元素，那么我們需要將切片和我們需要切的元素打組，并且在導(dǎo)出選項(xiàng)內(nèi)勾選“Export group contents only”就可以只切組內(nèi)我們需要的內(nèi)容了。
當(dāng)然我們對(duì)于這兩種切片還有更詳盡的講解，大家可以去看之前我們專門關(guān)于切片的視頻教程：https://www.bilibili.com/video/BV1ik4y1k7aU
由于現(xiàn)在越來越多的團(tuán)隊(duì)選擇使用藍(lán)湖切圖，我們講一下切圖中使用到藍(lán)湖時(shí)候的注意事項(xiàng)。
首先我們需要上傳設(shè)計(jì)稿到藍(lán)湖，再上傳的時(shí)候我們要對(duì)照自己的設(shè)計(jì)稿尺寸選擇對(duì)應(yīng)的參數(shù)
是不是覺得上傳之后就大功告成，下載切圖什么的就交給開發(fā)小哥哥去處理了？
No no no!!!
為了讓開（zi）發(fā)（ji）更省心省力，我們還需要和開發(fā)小哥哥溝通一下藍(lán)湖的設(shè)置，方便他們操作。
首先我們需要在設(shè)置中將“切圖置頂”勾選，以防止開發(fā)在點(diǎn)選切圖元素時(shí)誤操作導(dǎo)致下載的切圖不正確。
然后我們還需要勾選“下載切圖有重名時(shí)替換”選項(xiàng)。這里是為了防止出現(xiàn)在不同頁面上的同一元素被重復(fù)下載，造成混亂。
如果我們遇到安卓的切圖，開發(fā)時(shí)出現(xiàn)了正確的圖標(biāo)開發(fā)出來之后尺寸發(fā)生變化的情況。我們建議將設(shè)置中“Android 文件夾以drawable 命名”選項(xiàng)勾選。
另外還有一個(gè)藍(lán)湖使用的小技巧可以告訴大家，就是在藍(lán)湖中按住鍵盤shift鍵，鼠標(biāo)框選多個(gè)畫板，然后右鍵就可以在選項(xiàng)中選擇“下載選中頁面全部切圖“，是不是覺得離準(zhǔn)點(diǎn)下班又進(jìn)了一步呀～
最后還有一點(diǎn)要提醒大家，在sketch中我們?yōu)榻M件命名時(shí)所用到的“/”符號(hào)。如果用在了切片上，那么在藍(lán)湖下載切圖的時(shí)候會(huì)根據(jù)“/”形成文件夾。所以這里向大家推薦一款比較實(shí)用的插件——自動(dòng)化。他可以將我們命名中的“/”自動(dòng)修改為“-”或者”_“，這樣我們?cè)谑褂盟{(lán)湖的時(shí)候就不用再手動(dòng)去修改切片中的特殊符號(hào)了啦。
插件下載地址
https://www.yuque.com/tuotadamowang/dhq5di/irybf6#SGtSu
好啦，本期就聊到這里，我們下期再見喲～
轉(zhuǎn)自：站酷
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com