當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內(nèi)容

切圖教程,pdf格式切圖教程實例

來源:站酷 作者:夏敘 學習:5645人次

在ios某個版本之后(原諒我只是一個設計師并不是很清楚到底是哪個版本正式開始啟用pdf格式載入的),xcode6具有了基于矢量圖像(PDF文件)的編譯能力。

UI設計師都會涉及到的一個問題,切圖。在完成頁面設計之后,需要導出@1x @2x @3x三個尺寸的png圖像資源。哦呵呵呵呵呵呵,我每天都是帶著計算器在按。

然而,現(xiàn)在xcode6有了pdf辨識的功能!直接帶來的2個非常直觀的影響。

1,ios切圖從此只要切@1x,然后不論是哪個尺寸都能完美適配,達到最佳效果

2,縮減app大小,優(yōu)化用戶下載體驗。(因為切圖成pdf并且是@1x的時候占用空間非常小,并且省去了一整套@2x和@3x的切圖所占用的空間,喔呵呵呵呵呵想到app一下子減少了那么多大小,真是睡覺都笑出聲呢。)

現(xiàn)在,一步步教大家如何切圖。

一,photoshop,如果是在ps里繪制的矢量圖,請在ps里切pdf。

切圖教程,pdf格式切圖教程實例_www.theoat.com.cn

以上圖為例,這是一個求攻略出品的翻譯軟件,目前處于開發(fā)狀態(tài)。這是一個在ps里用矢量畫的volume圖標。切記,icon務必要用矢量畫,切圖pdf格式也僅支持矢量圖形。

切圖教程,pdf格式切圖教程實例_www.theoat.com.cn

選中volume icon選區(qū),快捷鍵 command+鼠標左鍵,然后按照選區(qū)大小新建大小相同的新文件。

切圖教程,pdf格式切圖教程實例_www.theoat.com.cn

這時候,你會看到圖中所示。因為在設計ui的時候是以iphone6為尺寸,也就是750。是@2x的時候的圖,所以此時,我們切出來的圖是@2x的。

還需要注意的一點,當從畫布1將icon 復制到畫布2的時候,要保持icon一直處在矢量狀態(tài)。切勿刪格化!否則大業(yè)未成,前功盡棄!

切圖教程,pdf格式切圖教程實例_www.theoat.com.cn

如上圖所示,這時候點開調(diào)整畫布,control+command+i快捷鍵,將寬高百分比調(diào)整到50%,也就是說這時候你的icon切圖是@1x的狀態(tài)了。

為什么要調(diào)整到@1x的狀態(tài)呢,因為@1x的時候擴展成@2x和@3x只要往上乘,而不是往下減。

避免了切圖像素不整除的情況,但是我還是建議大小要取一個吉利的像素尺寸。

此處晤面。記住,要把背景去掉,因為你需要的是一個透明的背景。

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!