亚洲精品中文字幕无乱码_久久亚洲精品无码AV大片_最新国产免费Av网址_国产精品3级片

網(wǎng)頁(yè)設(shè)計(jì)

iPhone6plus適配切圖方法分享

時(shí)間:2024-11-13 01:27:05 網(wǎng)頁(yè)設(shè)計(jì) 我要投稿
  • 相關(guān)推薦

iPhone6plus適配切圖方法分享

  網(wǎng)絡(luò)上已經(jīng)有很多適配教程,可是看了半天總是半懂不懂。。最后還是要綜合多個(gè)教程再動(dòng)動(dòng)腦子動(dòng)動(dòng)手,最好有程序大哥幫你試一下,就跟隨百分網(wǎng)小編一起去了解下吧,想了解更多相關(guān)信息請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!

  如果有跟我一樣情況的:

  1. 有人說(shuō)用sketch自動(dòng)導(dǎo)出多套尺寸切圖和SVG矢量格式,表示沒(méi)錢(qián)買(mǎi)MAC

  2. 有人說(shuō)用切圖神器cutman,表示用CC以上版本PS不支持

  3. 另…不喜歡/用不慣/不會(huì)用ps自帶切圖工具的

  目前iPhone有10種型號(hào),5種屏幕尺寸,再加上6plus的“降采樣”(Downsampling)(1080-1920),還有iPhone6和6+上的放大模式(1125-2001)和默認(rèn)模式(1242-2208),是不是感覺(jué)好恐怖?但是不用怕,我分享一套超簡(jiǎn)單的適配方法,看完你都不信有這么簡(jiǎn)單~

  美術(shù)交付給開(kāi)發(fā)的資料有

  1、 標(biāo)注圖(以640為寬度尺寸為基準(zhǔn)標(biāo)注)

  2、 2x切圖(以640為寬度尺寸為基準(zhǔn)切圖)

  3、 3x切圖(以1280為寬度尺寸為基準(zhǔn)切圖)

  開(kāi)發(fā)看到這份標(biāo)注圖,可以自己用上面的數(shù)字,乘以1.5得出3X的數(shù)字。字號(hào)也是如此

  以淘寶為栗子

  好的,標(biāo)注的事兒解決了,再來(lái)看怎么切圖

  我使用的切圖方法很傻瓜,就是使用PS自帶的“將圖層導(dǎo)出到文件”腳本

  具體的步驟來(lái)了

  1、 以640為寬度的尺寸來(lái)設(shè)計(jì)界面,保證里面用到的尺寸都是個(gè)整數(shù)并且是偶數(shù)哦(已經(jīng)有設(shè)計(jì)好的界面的請(qǐng)看下一段)

  2、 另新建一個(gè)640為寬度的空白PSD,命名為“切圖-2X”

  3、 把設(shè)計(jì)稿里需要切圖的圖層、組,拖到“切圖-2x”里面,每個(gè)切片保存為一個(gè)組(比如說(shuō)一個(gè)按鈕包含3層,2個(gè)狀態(tài),分別合成2個(gè)組),再檢查下命名

  舉栗

  4、 保存好后,然后CTRL+ALT+I(圖像大小),把寬度640像素改成1280像素,因?yàn)橹苯臃糯蟮?倍,是不會(huì)出現(xiàn)虛邊的。

  5、 1280寬的版本保存為“切圖-3x”PSD。

  6、 接下來(lái)把PSD中的“組”合并成智能文件。直接CTRL+E合并成圖層也是可以的,智能文件還可以修改強(qiáng)迫癥患者心里舒服些。合并智能文件快捷鍵設(shè)置方法:編輯>鍵盤(pán)快捷鍵>圖層>智能對(duì)象>轉(zhuǎn)換為智能對(duì)象>設(shè)一個(gè)自己順手的快捷鍵

  7、 然后激動(dòng)人心的時(shí)刻到了,直接 文件>腳本>將圖層導(dǎo)出到文件,設(shè)置為PNG格式,設(shè)好導(dǎo)出的文件夾,點(diǎn)確定~然后喝杯咖啡去~PS大大就自動(dòng)幫你保存好了

  8、 “切圖-2x”的PSD也如此操作一遍即可。記得分別放在不同的文件夾里,否則PS會(huì)自動(dòng)覆蓋掉命名一樣的圖層的。

  超級(jí)啰嗦:

  1.為什么3x切圖要以1280來(lái)為寬度?

  其實(shí)iPhone6+的尺寸1242*2208作為3X,怎么算都又難記又不能整除,我們直接640*2得到1280跟1242相差也沒(méi)幾十個(gè)像素,最重要的是不虛邊啊,放在真機(jī)上看(處女座除外)看不出差別的。

  2.為什么只設(shè)寬度?

  為了保持長(zhǎng)寬比例。iPhone的這幾個(gè)尺寸不是正好的,寬度放大后高度總差那么幾個(gè)像素,這不要緊,千萬(wàn)別去改高度,手機(jī)屏幕是可以上下滑動(dòng)的嘛。不可以滑動(dòng)必須保證一屏顯示的除外,手動(dòng)去調(diào)整好了。

  3.為什么開(kāi)發(fā)不是乘以2而是乘以1.5來(lái)算尺寸和字號(hào)?因?yàn)榇笃潦謾C(jī)就是要顯示更多內(nèi)容而存在的。純等比放大界面看起來(lái)傻大傻大的,實(shí)驗(yàn)證明1.5倍是正好的。

  4.使用智能對(duì)象要注意的

  如果你有使用智能對(duì)象的習(xí)慣請(qǐng)一定記得直接放大智能對(duì)象是會(huì)糊的,要把智能對(duì)象內(nèi)部的圖層拿出來(lái)放大再切圖哦~!

  5.需要怎樣跟開(kāi)發(fā)去溝通適配原則

  再討論下以大屏為基礎(chǔ)設(shè)計(jì)縮小切圖的方法,如果按1242來(lái)設(shè)計(jì)那各種縮小都不成整數(shù)比例會(huì)虛邊,按我說(shuō)的1280的話那么你設(shè)計(jì)時(shí)必須每個(gè)內(nèi)容尺寸是4的倍數(shù),因?yàn)?X時(shí)除以2,1X時(shí)又要除以2,不能整除又要虛邊了。數(shù)學(xué)不好的還是蒜了吧~目前主流還是2X尺寸,啥時(shí)候3X大屏成主流了我們?cè)僬f(shuō)~

【iPhone6plus適配切圖方法分享】相關(guān)文章:

AutoCAD 圖導(dǎo)入Photoshop 的方法分享08-14

Dreamweaver切圖到生成網(wǎng)頁(yè)的方法09-09

photoshop怎么切圖01-22

photoshop怎么切圖08-21

筆記本電源適配器選擇方法08-03

PS摳圖方法10-27

關(guān)于PhotoShop教程:切圖那點(diǎn)事兒10-12

Photoshop的摳圖方法介紹06-19

PS摳圖方法介紹05-30

Photoshop摳圖方法大全08-06