手機(jī)網(wǎng)站的設(shè)計(jì)與Photoshop。

最近,我有一個(gè)項(xiàng)目,我需要制作高保真屏幕平板電腦。 我現(xiàn)在這些屏幕在設(shè)備上也產(chǎn)生一個(gè)可點(diǎn)擊的原型。 他們需要像素級(jí)。 時(shí)間軸是緊(像往常一樣),所以我和我的互聯(lián)網(wǎng)工具,Photoshop。 我使用它已經(jīng)超過(guò)十年,而且它給我最快的高質(zhì)量的輸出。

你是在“視網(wǎng)膜”決議在Photoshop設(shè)計(jì)嗎? 如果答案是肯定的,那么這篇文章是給你的。 我將指導(dǎo)您完成創(chuàng)建視網(wǎng)膜的原型是我面臨的問(wèn)題在平板設(shè)備上顯示。 我將解釋方法的工作更容易,讓你更好的性能。 這是關(guān)于我的經(jīng)驗(yàn)和Photoshop,但可以應(yīng)用到插畫(huà)家和其他軟件。

這里有一些設(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)該成為清楚你讀。

的問(wèn)題

現(xiàn)在,讓我們進(jìn)入這個(gè)平板電腦應(yīng)用程序的設(shè)計(jì)。 像許多其他設(shè)計(jì)師,我被告知,必須設(shè)計(jì)一個(gè)在視網(wǎng)膜分辨率。 普遍的共識(shí)是@2x或@3x。 所以,我開(kāi)始了我的快樂(lè)方式,設(shè)計(jì)@2x。 Nexus one的設(shè)計(jì)將9 4:3比例,所以我的畫(huà)布設(shè)置為2048×1536像素。 在實(shí)踐中創(chuàng)建幾個(gè)屏幕后,我意識(shí)到這并不管用。 讓我們一起通過(guò)我發(fā)現(xiàn)的問(wèn)題。

縮放因子

起初,這沒(méi)什么大不了的。 縮小至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% ! 我只想說(shuō),我非常厭倦縮放,就像一個(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的磁盤(pán)和內(nèi)存。

首先,我看著PSDs的像素?cái)?shù)。 @2x PSD有四倍的像素。 @3x 9倍。 這直接影響內(nèi)存的使用,它本身是由四倍和9倍! 對(duì)于我們的空白PSD,這從2.25米到9米@2x,然后@3x 20米。

最后但并非最不重要的,它還需要存儲(chǔ)所有這些額外的像素。 所以,你的文件大小增加。 磁盤(pán)上的大小@2x上升了280%,和@3x上升了590%。 現(xiàn)在,在我們的空白PSD這只是增加從60到358 KB。 但一旦你有一些嚴(yán)重的智能對(duì)象和層次,小心! 讓我們的例子的PSD 100 MB。@3x可能590 MB。然后,這乘以20到30個(gè)文件在您的項(xiàng)目!

從性能的角度來(lái)看,很明顯,在視網(wǎng)膜將花費(fèi)你一些嚴(yán)重的內(nèi)存,CPU和磁盤(pán)使用情況。

字體大小

這個(gè)問(wèn)題很快變得明顯當(dāng)你@2x或@3x工作。 假設(shè)您已經(jīng)著手做一個(gè)文本框的字體設(shè)置為16個(gè)像素。 但@2x這是32像素,@3x 48像素! 不理想,它是,必須不斷地乘上兩個(gè)或三個(gè)嗎? 我不知道你,但是我可能沒(méi)有數(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è)奇怪的像素值。 比方說(shuō)你有一個(gè)盒子是33個(gè)像素寬,當(dāng)轉(zhuǎn)換回@1x構(gòu)建,這變成了16.5像素! 又一個(gè)人才流失與視網(wǎng)膜。

說(shuō)明如何 1 px會(huì)從@1x @3x。

規(guī)格

這是我另一個(gè)問(wèn)題出現(xiàn)在工作場(chǎng)所:設(shè)計(jì)師一直在@2x或@3x然后開(kāi)始規(guī)范設(shè)計(jì)開(kāi)發(fā)人員。 這通常涉及記錄填充,寬度,高度,字體大小等等,以確保設(shè)計(jì)建造。 但是他們忘記了他們?cè)跊Q議的兩倍或三倍。 所以,可憐的老開(kāi)發(fā)人員得到一個(gè)完整的規(guī)范,他們需要所有除以2或3 ! 不是很好,是嗎? 為什么讓他們的生活更加困難?

另一個(gè)選擇是,設(shè)計(jì)師可以挽救一個(gè)新的PSD在50%或33%,然后規(guī)范。 但Retina-land看上去就像一條單行道。 通過(guò)這些眼鏡很難看到。

好消息

別擔(dān)心。 所有的壞消息后,有好消息。 在工作上 從插畫(huà)家出口Android圖標(biāo) ,我發(fā)現(xiàn)密度獨(dú)立像素(DP)的世界。 你可以閱讀一個(gè)大長(zhǎng)解釋Android開(kāi)發(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)行通過(guò)上面的方程,我們得到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è)例子,讓我們來(lái)聯(lián)系5。 與它的分辨率為1920×1080像素和480 DPI,DP單位工作是640×360。 然后,比例因子作為@3x出來(lái)。 所以,現(xiàn)在你知道你的DP維度和資產(chǎn)的規(guī)模因素。

的例子@1x @3x DP單位在不同的設(shè)備。

一旦你有了DP維度,這些成為你PSD畫(huà)布大小為72 DPI。 所以,這個(gè)謎的答案 設(shè)計(jì)@1x或在迪拜 。

其他設(shè)備不適合在這些桶那么好,但是你懂的。 這里的重點(diǎn)是,你是減少基線DP單位,你知道出口規(guī)模圖像。

“但我堅(jiān)持@1x圖片!”

正確的。 和一個(gè)@1x PNG看起來(lái)可怕的視網(wǎng)膜設(shè)備上。 我需要的是一種與DP @1x和工作單位,但出口@2x或@3x預(yù)覽設(shè)備上。 我的客戶會(huì)接受。 所以,用我的知識(shí)出口各種dpi Android圖標(biāo), 我不在 ,我同樣的技術(shù)應(yīng)用于Photoshop。

我的問(wèn)題的解決方案是一個(gè)Photoshop腳本,出口任何帆布@2x或@3x PNG預(yù)覽的設(shè)備。 因此,一個(gè)人可以繼續(xù)工作@1x DP和獲得所有的性能優(yōu)勢(shì),仍然得到高質(zhì)量的屏幕。 您的蛋糕和吃它,如果你愿意。

導(dǎo)出腳本

這里只簡(jiǎn)單介紹一下這個(gè)腳本是如何工作的:

1. 你的畫(huà)布大小的200%或300%。

2. 它會(huì)創(chuàng)建一個(gè)新文件夾命名 視網(wǎng)膜,你PSD保存。

3. 然后,它可以節(jié)省一個(gè)PNG < documentname> _2x.png或 < documentname> _3x.png。

4. 它還清理和清洗歷史(“撤銷(xiāo)”)。

5. 然后,它保存文檔時(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”:

進(jìn)入“腳本”,然后單擊“ExportDocument2xPNG”或“ExportDocument3xPNG?！?/p>

你現(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或通過(guò)自己的系統(tǒng)。 一旦上傳,您可以創(chuàng)建熱點(diǎn)和鏈接到其他屏幕。 然后,您可以查看設(shè)備上看到你的設(shè)計(jì)。 其他獎(jiǎng)金是我使用較少的帶寬和Dropbox空間! 視網(wǎng)膜PSDs會(huì)超重!

插畫(huà)家

如果你使用Illustrator,您還可以在DP @1x和工作。 確保你的文檔是在72 DPI設(shè)置為web。 然后,您可以手動(dòng)出口@2x和@3x PNG圖像通過(guò)點(diǎn)擊“文件”→“出口…”并選擇“PNG。 “點(diǎn)擊”出口。 “然后,使用“決議”下拉菜單,點(diǎn)擊“其他”,并輸入 144 PPI@2x或 216 PPI@3x。 與Photoshop腳本,這也可以配置為一個(gè)點(diǎn)擊!

素描

另一種選擇是使用越來(lái)越受歡迎的應(yīng)用程序 素描 。 談到所有設(shè)置和準(zhǔn)備好@1x基于矢量的工作流。 內(nèi)置支持出口@2x和@3x層和切割。 只是注意操作系統(tǒng)的要求。 波西米亞編碼,造物主是開(kāi)發(fā)專門(mén)為Mac驕傲,沒(méi)有計(jì)劃支持Windows或Linux( 根據(jù)其常見(jiàn)問(wèn)題解答)。 這是一個(gè)偉大的計(jì)劃,如果您的工作流和業(yè)務(wù)支持。

感謝你的閱讀

好吧,我希望這是對(duì)你使用。 我當(dāng)然有改善工作流程。 現(xiàn)在我得到superlight和快速PSDs可以出口到視網(wǎng)膜規(guī)模設(shè)備上查看。 和最好的部分是,我不再癡狂縮放或乘法、除法像素!

網(wǎng)站名稱：手機(jī)網(wǎng)站的設(shè)計(jì)與Photoshop。
標(biāo)題來(lái)源：http://www.bm7419.com/news/80442.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)、做網(wǎng)站、App開(kāi)發(fā)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)