當(dāng)前位置:首頁(yè)>ps入門(mén)教程>ps基礎(chǔ)教程>技巧教程>教程內(nèi)容

切圖教程,分享一種高效切圖方法

來(lái)源:站酷 作者:duck3805946 學(xué)習(xí):30927人次

作為UI設(shè)計(jì)師,過(guò)完稿和開(kāi)發(fā)對(duì)接時(shí),需要標(biāo)注設(shè)計(jì)稿和切圖,把標(biāo)注切圖文件給到開(kāi)發(fā)。這個(gè)時(shí)候就犯難了,那么多尺寸怎么切圖,iPhone就有8個(gè)版本,更別提安卓那一堆尺寸。今天這篇好文分享一個(gè)意想不到的切圖方法,幫你高效切圖。

不用在意那么多設(shè)備,不管iOS和Android手機(jī)型號(hào)有多少,只要我們了解它的屏幕分辨率之后就好辦了。

切圖教程,分享一種高效切圖方法_tgudhdp.cn
<點(diǎn)圖片看大圖>tgudhdp.cn

有人會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題,6S、6S plus的尺寸呢?因?yàn)樗麄兊姆直媛屎?、6 plus尺寸一致的。

切圖教程,分享一種高效切圖方法_tgudhdp.cn

從上圖可以看出不同分辨率對(duì)應(yīng)不同的倍率,這樣的話我們適配的時(shí)候就知道怎么切圖了,@2x表示兩倍圖,@3x表示三倍圖;以上的那些尺寸圖,重點(diǎn)看這張圖就可以同時(shí)適配iOS和Android的切圖了。

工欲善其事,必先利其器

現(xiàn)在PhotoshopCC2015已經(jīng)出了切圖就更方便了,但是對(duì)于電腦的配置要求比較高,不然卡死,土豪就不用擔(dān)心,隨便安裝,對(duì)于電腦配置比較低的可以這樣干,作圖的時(shí)候用CS6,文件在這里面做好之后,只需要啟動(dòng)CC2014或者CC2015進(jìn)行切圖操作就可以了,我現(xiàn)在就是這么干的,畢竟高配置的電腦成本比較高。

現(xiàn)在開(kāi)始來(lái)?yè)v鼓CC2014或者CC2015吧。

1、調(diào)出首選項(xiàng)Command(Ctrl)+k,勾選啟用生成器,默認(rèn)是不夠選的。

切圖教程,分享一種高效切圖方法_tgudhdp.cn

2、文件-生成-圖像資源,這個(gè)是后期的時(shí)候用的比較多的一個(gè)選項(xiàng)。

切圖教程,分享一種高效切圖方法_tgudhdp.cn

切圖要點(diǎn)

1、不同的模塊建立不同的切圖文件夾存放。

學(xué)習(xí) · 提示

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
SummerCopper2020-11-29 08:37
PS設(shè)計(jì)稿切圖的話,用摹客更方便,可以自動(dòng)生成/一鍵下載不同平臺(tái)、不同倍率的切圖,還支持自定義切圖尺寸和切圖壓縮等實(shí)用功能,切圖效率倍增
SummerCopper2020-11-29 08:36
PS設(shè)計(jì)稿切圖的話,用摹客更方便,可以自動(dòng)生成/一鍵下載不同平臺(tái)、不同倍率的切圖,還支持自定義切圖尺寸和切圖壓縮等實(shí)用功能,切圖效率倍增。體驗(yàn)地址:https://www.mockplus.cn
青春、一個(gè)夢(mèng)2020-04-06 03:02
源哥哥婷2019-03-22 01:44
學(xué)習(xí)一下
榮昌好燈港燈飾2018-11-06 12:04
學(xué)習(xí)一下
22626929742018-05-30 08:17
學(xué)習(xí)了
桐桐桐桐人2016-09-13 04:15
點(diǎn)9也需要UI來(lái)做啊
桐桐桐桐人2016-09-13 04:09
點(diǎn)9也需要UI來(lái)做啊
shine2016-08-29 05:26
回復(fù)一下
shine2016-08-29 05:26
回復(fù)一下
地獄悲傷2016-08-29 05:02
支持,支持
地獄悲傷2016-08-29 05:02
支持,支持
筱妤young2016-08-29 01:46
謝謝分享
筱妤young2016-08-29 01:46
謝謝分享
zpzxczp2016-08-29 01:12
學(xué)習(xí)學(xué)習(xí)!!

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

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