切圖教程,pdf格式切圖教程實(shí)例
在ios某個(gè)版本之后(原諒我只是一個(gè)設(shè)計(jì)師并不是很清楚到底是哪個(gè)版本正式開始啟用pdf格式載入的),xcode6具有了基于矢量圖像(PDF文件)的編譯能力。
UI設(shè)計(jì)師都會(huì)涉及到的一個(gè)問題,切圖。在完成頁面設(shè)計(jì)之后,需要導(dǎo)出@1x @2x @3x三個(gè)尺寸的png圖像資源。哦呵呵呵呵呵呵,我每天都是帶著計(jì)算器在按。
然而,現(xiàn)在xcode6有了pdf辨識(shí)的功能!直接帶來的2個(gè)非常直觀的影響。
1,ios切圖從此只要切@1x,然后不論是哪個(gè)尺寸都能完美適配,達(dá)到最佳效果
2,縮減app大小,優(yōu)化用戶下載體驗(yàn)。(因?yàn)榍袌D成pdf并且是@1x的時(shí)候占用空間非常小,并且省去了一整套@2x和@3x的切圖所占用的空間,喔呵呵呵呵呵想到app一下子減少了那么多大小,真是睡覺都笑出聲呢。)
現(xiàn)在,一步步教大家如何切圖。
一,photoshop,如果是在ps里繪制的矢量圖,請?jiān)趐s里切pdf。
以上圖為例,這是一個(gè)求攻略出品的翻譯軟件,目前處于開發(fā)狀態(tài)。這是一個(gè)在ps里用矢量畫的volume圖標(biāo)。切記,icon務(wù)必要用矢量畫,切圖pdf格式也僅支持矢量圖形。
選中volume icon選區(qū),快捷鍵 command+鼠標(biāo)左鍵,然后按照選區(qū)大小新建大小相同的新文件。
這時(shí)候,你會(huì)看到圖中所示。因?yàn)樵谠O(shè)計(jì)ui的時(shí)候是以iphone6為尺寸,也就是750。是@2x的時(shí)候的圖,所以此時(shí),我們切出來的圖是@2x的。
還需要注意的一點(diǎn),當(dāng)從畫布1將icon 復(fù)制到畫布2的時(shí)候,要保持icon一直處在矢量狀態(tài)。切勿刪格化!否則大業(yè)未成,前功盡棄!
如上圖所示,這時(shí)候點(diǎn)開調(diào)整畫布,control+command+i快捷鍵,將寬高百分比調(diào)整到50%,也就是說這時(shí)候你的icon切圖是@1x的狀態(tài)了。
為什么要調(diào)整到@1x的狀態(tài)呢,因?yàn)锧1x的時(shí)候擴(kuò)展成@2x和@3x只要往上乘,而不是往下減。
避免了切圖像素不整除的情況,但是我還是建議大小要取一個(gè)吉利的像素尺寸。
此處晤面。記住,要把背景去掉,因?yàn)槟阈枰氖且粋(gè)透明的背景。
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 圖片畫冊平面設(shè)計(jì)排版ps理論教程
- 用戶體驗(yàn),如何讓用戶心動(dòng)?
- UI知識(shí),尺寸對(duì)UI設(shè)計(jì)的影響
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 設(shè)計(jì)界面最常用最舒服的12種顏色(含色
- Photoshop初級(jí)教程-命令的技巧
- 色彩知識(shí),講解顏色基礎(chǔ)知識(shí)和配色理論
- 調(diào)色知識(shí),簡單實(shí)用的調(diào)色原理
- 移動(dòng)設(shè)計(jì),移動(dòng)應(yīng)用導(dǎo)航模式設(shè)計(jì)方法
- 用戶體驗(yàn),分享20個(gè)有影響力的包裝設(shè)計(jì)