最近,我有一個(gè)項(xiàng)目,我需要制作高保真屏幕平板電腦。 我現(xiàn)在這些屏幕在設(shè)備上也產(chǎn)生一個(gè)可點(diǎn)擊的原型。 他們需要像素級(jí)。 時(shí)間軸是緊(像往常一樣),所以我和我的互聯(lián)網(wǎng)工具,Photoshop。 我使用它已經(jīng)超過十年,而且它給我最快的高質(zhì)量的輸出。
你是在“視網(wǎng)膜”決議在Photoshop設(shè)計(jì)嗎? 如果答案是肯定的,那么這篇文章是給你的。 我將指導(dǎo)您完成創(chuàng)建視網(wǎng)膜的原型是我面臨的問題在平板設(shè)備上顯示。 我將解釋方法的工作更容易,讓你更好的性能。 這是關(guān)于我的經(jīng)驗(yàn)和Photoshop,但可以應(yīng)用到插畫家和其他軟件。
這里有一些設(shè)計(jì)的平板電腦應(yīng)用程序。
在本文中,我將使用@2x @3x符號(hào)。 這些代表了視網(wǎng)膜桶iOS。 一個(gè)很好的例子是應(yīng)用程序的圖標(biāo)。 最初的iPhone,這將是60×60像素(@1x)。 對(duì)于iPhone 4,它將翻倍,120×120像素(@2x)。 現(xiàn)在,最新的設(shè)備動(dòng)用三領(lǐng)土。 為iPhone 6另外,圖標(biāo)將180×180(@3x)。 在談到@2x或@3x,我指的是使用像素尺寸的兩倍或三倍。 都應(yīng)該成為清楚你讀。
的問題
現(xiàn)在,讓我們進(jìn)入這個(gè)平板電腦應(yīng)用程序的設(shè)計(jì)。 像許多其他設(shè)計(jì)師,我被告知,必須設(shè)計(jì)一個(gè)在視網(wǎng)膜分辨率。 普遍的共識(shí)是@2x或@3x。 所以,我開始了我的快樂方式,設(shè)計(jì)@2x。 Nexus one的設(shè)計(jì)將9 4:3比例,所以我的畫布設(shè)置為2048×1536像素。 在實(shí)踐中創(chuàng)建幾個(gè)屏幕后,我意識(shí)到這并不管用。 讓我們一起通過我發(fā)現(xiàn)的問題。
縮放因子
起初,這沒什么大不了的。 縮小至50%或33%,看你的設(shè)計(jì)在1:1左右。 但與此同時(shí),這有點(diǎn)可笑,對(duì)嗎?
你可以很快看到?jīng)Q議失控。 顯示設(shè)計(jì)的一角@1x @3x。
為什么你要放大或縮小不斷看到發(fā)生什么事了? 這也完全廢墟?pixel-snapping?,這是最好的為100%。 這是幾乎不可能知道一個(gè)像素是否一致,當(dāng)你放大在33%或50% ! 我只想說,我非常厭倦縮放,就像一個(gè)瘋子一樣把事情對(duì)齊像素級(jí)。
性能
這是一個(gè)大的。 讓我們使用一個(gè)平板電腦4:3比例作為一個(gè)例子。 我設(shè)置了一個(gè)空白的PSD @1x(1024×768像素),另一個(gè)@2x(2048×1536)和第三個(gè)@3x(3072×2304)。 然后我做了一些比較。
表顯示的像素?cái)?shù)量,大小@1x @3x空白PSDs的磁盤和內(nèi)存。
首先,我看著PSDs的像素?cái)?shù)。 @2x PSD有四倍的像素。 @3x 9倍。 這直接影響內(nèi)存的使用,它本身是由四倍和9倍! 對(duì)于我們的空白PSD,這從2.25米到9米@2x,然后@3x 20米。
最后但并非最不重要的,它還需要存儲(chǔ)所有這些額外的像素。 所以,你的文件大小增加。 磁盤上的大小@2x上升了280%,和@3x上升了590%。 現(xiàn)在,在我們的空白PSD這只是增加從60到358 KB。 但一旦你有一些嚴(yán)重的智能對(duì)象和層次,小心! 讓我們的例子的PSD 100 MB。@3x可能590 MB。然后,這乘以20到30個(gè)文件在您的項(xiàng)目!
從性能的角度來看,很明顯,在視網(wǎng)膜將花費(fèi)你一些嚴(yán)重的內(nèi)存,CPU和磁盤使用情況。
字體大小
這個(gè)問題很快變得明顯當(dāng)你@2x或@3x工作。 假設(shè)您已經(jīng)著手做一個(gè)文本框的字體設(shè)置為16個(gè)像素。 但@2x這是32像素,@3x 48像素! 不理想,它是,必須不斷地乘上兩個(gè)或三個(gè)嗎? 我不知道你,但是我可能沒有數(shù)學(xué)常數(shù)。 當(dāng)我設(shè)計(jì),我想知道16像素是16像素!
字體大小成為乘法的游戲時(shí),在視網(wǎng)膜的規(guī)模。
整個(gè)像素
這是一個(gè)陷阱。 當(dāng)你使用的時(shí)候會(huì)發(fā)生什么?1 px在視網(wǎng)膜@2x嗎? 你猜對(duì)了,它變成了0.5像素! 和@3x情況將會(huì)更糟,0.33像素! 所以,你也必須經(jīng)常注意你的大小必須被2或3整除時(shí)在視網(wǎng)膜。 另一個(gè)需要考慮的因素發(fā)揮作用,如果你曾經(jīng)使用@2x一個(gè)奇怪的像素值。 比方說你有一個(gè)盒子是33個(gè)像素寬,當(dāng)轉(zhuǎn)換回@1x構(gòu)建,這變成了16.5像素! 又一個(gè)人才流失與視網(wǎng)膜。
說明如何?1 px會(huì)從@1x @3x。
規(guī)格
這是我另一個(gè)問題出現(xiàn)在工作場(chǎng)所:設(shè)計(jì)師一直在@2x或@3x然后開始規(guī)范設(shè)計(jì)開發(fā)人員。 這通常涉及記錄填充,寬度,高度,字體大小等等,以確保設(shè)計(jì)建造。 但是他們忘記了他們?cè)跊Q議的兩倍或三倍。 所以,可憐的老開發(fā)人員得到一個(gè)完整的規(guī)范,他們需要所有除以2或3 ! 不是很好,是嗎? 為什么讓他們的生活更加困難?
另一個(gè)選擇是,設(shè)計(jì)師可以挽救一個(gè)新的PSD在50%或33%,然后規(guī)范。 但Retina-land看上去就像一條單行道。 通過這些眼鏡很難看到。
好消息
別擔(dān)心。 所有的壞消息后,有好消息。 在工作上?從插畫家出口Android圖標(biāo)?,我發(fā)現(xiàn)密度獨(dú)立像素(DP)的世界。 你可以閱讀一個(gè)大長(zhǎng)解釋Android開發(fā)者關(guān)于“?支持多個(gè)屏幕?”,或者我可以很快會(huì)讓你崩潰。
基本上DP是@1x像素尺寸,或者在Android上,基線密度介質(zhì)(MDPI)。 密度獨(dú)立像素1相同的物理像素160 DPI屏幕上。 轉(zhuǎn)換是?DP =像素÷(160 DPI÷)。
讓我們使用我們的平板電腦的例子顯示的2048×1536像素和320 DPI。 運(yùn)行通過上面的方程,我們得到1024 DP的寬度,高度,768 DP。 這成為我們的基線的決議。 我們還需要知道圖像資產(chǎn)的比例因子。 方程:?比例因子= DP×(160 DPI÷)。
使用1024 DP的寬度和設(shè)備的320 DPI,如果我們運(yùn)行這個(gè)方程,我們得到一個(gè)比例因子為2。 這意味著我們需要輸出@2x資產(chǎn)顯示在這個(gè)設(shè)備。 它也很容易看到?2048÷1024 = 2。 所以,不要對(duì)方程壓力了!
作為另一個(gè)例子,讓我們來聯(lián)系5。 與它的分辨率為1920×1080像素和480 DPI,DP單位工作是640×360。 然后,比例因子作為@3x出來。 所以,現(xiàn)在你知道你的DP維度和資產(chǎn)的規(guī)模因素。
的例子@1x @3x DP單位在不同的設(shè)備。
一旦你有了DP維度,這些成為你PSD畫布大小為72 DPI。 所以,這個(gè)謎的答案?設(shè)計(jì)@1x或在迪拜?。
其他設(shè)備不適合在這些桶那么好,但是你懂的。 這里的重點(diǎn)是,你是減少基線DP單位,你知道出口規(guī)模圖像。
“但我堅(jiān)持@1x圖片!”
正確的。 和一個(gè)@1x PNG看起來可怕的視網(wǎng)膜設(shè)備上。 我需要的是一種與DP @1x和工作單位,但出口@2x或@3x預(yù)覽設(shè)備上。 我的客戶會(huì)接受。 所以,用我的知識(shí)出口各種dpi Android圖標(biāo),?我不在?,我同樣的技術(shù)應(yīng)用于Photoshop。
我的問題的解決方案是一個(gè)Photoshop腳本,出口任何帆布@2x或@3x PNG預(yù)覽的設(shè)備。 因此,一個(gè)人可以繼續(xù)工作@1x DP和獲得所有的性能優(yōu)勢(shì),仍然得到高質(zhì)量的屏幕。 您的蛋糕和吃它,如果你愿意。
導(dǎo)出腳本
這里只簡(jiǎn)單介紹一下這個(gè)腳本是如何工作的:
你的畫布大小的200%或300%。
它會(huì)創(chuàng)建一個(gè)新文件夾命名?視網(wǎng)膜,你PSD保存。
然后,它可以節(jié)省一個(gè)PNG?< documentname > _2x.png或?< documentname > _3x.png。
它還清理和清洗歷史(“撤銷”)。
然后,它保存文檔時(shí)如何在腳本運(yùn)行。
腳本很容易修改。 如果你想重命名的文件夾或文件名稱,你只會(huì)改變變量如下圖所示:
var scale = "200%";var folderName = "retina";var extensionName = "_2x.png";
安裝
下載的腳本?(郵政、4 KB)或查看項(xiàng)目?GitHub?。
一旦下載并解壓,腳本并粘貼到Photoshop的副本?腳本文件夾:在Windows上,?Adobe \ \程序文件\ Adobe Photoshop CC 2014 \ \預(yù)設(shè)\腳本在Mac,?Adobe \ Photoshop CC \ \程序\ \預(yù)設(shè)\腳本。
請(qǐng)注意這將?根據(jù)你的Photoshop和操作系統(tǒng)版本?。
幾乎就要完成了。 重啟Photoshop,腳本將會(huì)準(zhǔn)備好。 現(xiàn)在,任何時(shí)候你想出口一個(gè)PNG @2x或@3x,點(diǎn)擊“文件”→“腳本”→“ExportDocument2xPNG”或“文件”→“腳本”→“ExportDocument3xPNG”:
點(diǎn)擊“文件”。
進(jìn)入“腳本”,然后單擊“ExportDocument2xPNG”或“ExportDocument3xPNG。”
你現(xiàn)在剩下視網(wǎng)膜圖像@2x或@3x,準(zhǔn)備好讓在設(shè)備上。
提示
請(qǐng)記住幾件事如果你選擇這種方法。 盡可能使用形狀和向量。 他們規(guī)模完美,圖層樣式。 總是使用智能對(duì)象的位圖。 記住他們?nèi)匀恍枰狜2x或@3x里面。
使用這種方法,?Photoshop的發(fā)電機(jī)?還好了。 任何層或?qū)咏M可以導(dǎo)出@2x @3x。 ,你就會(huì)知道他們是像素級(jí)。
在生產(chǎn)設(shè)計(jì)之后,我需要為客戶端創(chuàng)建一個(gè)可點(diǎn)擊的原型。 我發(fā)現(xiàn)導(dǎo)出的png偉大的工作奇跡?。 奇跡允許你上傳你的照片,Dropbox或通過自己的系統(tǒng)。 一旦上傳,您可以創(chuàng)建熱點(diǎn)和鏈接到其他屏幕。 然后,您可以查看設(shè)備上看到你的設(shè)計(jì)。 其他獎(jiǎng)金是我使用較少的帶寬和Dropbox空間! 視網(wǎng)膜PSDs會(huì)超重!
插畫家
如果你使用Illustrator,您還可以在DP @1x和工作。 確保你的文檔是在72 DPI設(shè)置為web。 然后,您可以手動(dòng)出口@2x和@3x PNG圖像通過點(diǎn)擊“文件”→“出口…”并選擇“PNG。 “點(diǎn)擊”出口。 “然后,使用“決議”下拉菜單,點(diǎn)擊“其他”,并輸入?144 PPI@2x或?216 PPI@3x。 與Photoshop腳本,這也可以配置為一個(gè)點(diǎn)擊!
素描
另一種選擇是使用越來越受歡迎的應(yīng)用程序?素描?。 談到所有設(shè)置和準(zhǔn)備好@1x基于矢量的工作流。 內(nèi)置支持出口@2x和@3x層和切割。 只是注意操作系統(tǒng)的要求。 波西米亞編碼,造物主是開發(fā)專門為Mac驕傲,沒有計(jì)劃支持Windows或Linux(?根據(jù)其常見問題解答)。 這是一個(gè)偉大的計(jì)劃,如果您的工作流和業(yè)務(wù)支持。
感謝你的閱讀
好吧,我希望這是對(duì)你使用。 我當(dāng)然有改善工作流程。 現(xiàn)在我得到superlight和快速PSDs可以出口到視網(wǎng)膜規(guī)模設(shè)備上查看。 和最好的部分是,我不再癡狂縮放或乘法、除法像素!
(ccxcn.com 網(wǎng)站建設(shè)，轉(zhuǎn)載請(qǐng)標(biāo)注)
