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

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

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

這里有一些設(shè)計的平板電腦應(yīng)用程序。

在本文中,我將使用@2x @3x符號。 這些代表了視網(wǎng)膜桶iOS。 一個很好的例子是應(yīng)用程序的圖標。 最初的iPhone,這將是60×60像素(@1x)。 對于iPhone 4,它將翻倍,120×120像素(@2x)。 現(xiàn)在,最新的設(shè)備動用三領(lǐng)土。 為iPhone 6另外,圖標將180×180(@3x)。 在談到@2x或@3x,我指的是使用像素尺寸的兩倍或三倍。 都應(yīng)該成為清楚你讀。

的問題

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

縮放因子

起初,這沒什么大不了的。 縮小至50%或33%,看你的設(shè)計在1:1左右。 但與此同時,這有點可笑,對嗎?

你可以很快看到?jīng)Q議失控。 顯示設(shè)計的一角@1x @3x。

為什么你要放大或縮小不斷看到發(fā)生什么事了? 這也完全廢墟 pixel-snapping ,這是最好的為100%。 這是幾乎不可能知道一個像素是否一致,當你放大在33%或50% ! 我只想說,我非常厭倦縮放,就像一個瘋子一樣把事情對齊像素級。

性能

這是一個大的。 讓我們使用一個平板電腦4:3比例作為一個例子。 我設(shè)置了一個空白的PSD @1x(1024×768像素),另一個@2x(2048×1536)和第三個@3x(3072×2304)。 然后我做了一些比較。

表顯示的像素數(shù)量,大小@1x @3x空白PSDs的磁盤和內(nèi)存。

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

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

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

字體大小

這個問題很快變得明顯當你@2x或@3x工作。 假設(shè)您已經(jīng)著手做一個文本框的字體設(shè)置為16個像素。 但@2x這是32像素,@3x 48像素! 不理想,它是,必須不斷地乘上兩個或三個嗎? 我不知道你,但是我可能沒有數(shù)學(xué)常數(shù)。 當我設(shè)計,我想知道16像素是16像素!

字體大小成為乘法的游戲時,在視網(wǎng)膜的規(guī)模。

整個像素

這是一個陷阱。 當你使用的時候會發(fā)生什么 1 px在視網(wǎng)膜@2x嗎? 你猜對了,它變成了0.5像素! 和@3x情況將會更糟,0.33像素! 所以,你也必須經(jīng)常注意你的大小必須被2或3整除時在視網(wǎng)膜。 另一個需要考慮的因素發(fā)揮作用,如果你曾經(jīng)使用@2x一個奇怪的像素值。 比方說你有一個盒子是33個像素寬,當轉(zhuǎn)換回@1x構(gòu)建,這變成了16.5像素! 又一個人才流失與視網(wǎng)膜。

說明如何 1 px會從@1x @3x。

規(guī)格

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

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

好消息

別擔心。 所有的壞消息后,有好消息。 在工作上 從插畫家出口Android圖標 ,我發(fā)現(xiàn)密度獨立像素(DP)的世界。 你可以閱讀一個大長解釋Android開發(fā)者關(guān)于“ 支持多個屏幕 ”,或者我可以很快會讓你崩潰。

基本上DP是@1x像素尺寸,或者在Android上,基線密度介質(zhì)(MDPI)。 密度獨立像素1相同的物理像素160 DPI屏幕上。 轉(zhuǎn)換是 DP =像素÷(160 DPI÷)。

讓我們使用我們的平板電腦的例子顯示的2048×1536像素和320 DPI。 運行通過上面的方程,我們得到1024 DP的寬度,高度,768 DP。 這成為我們的基線的決議。 我們還需要知道圖像資產(chǎn)的比例因子。 方程: 比例因子= DP×(160 DPI÷)。

使用1024 DP的寬度和設(shè)備的320 DPI,如果我們運行這個方程,我們得到一個比例因子為2。 這意味著我們需要輸出@2x資產(chǎn)顯示在這個設(shè)備。 它也很容易看到 2048÷1024 = 2。 所以,不要對方程壓力了!

作為另一個例子,讓我們來聯(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。 所以,這個謎的答案 設(shè)計@1x或在迪拜 。

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

“但我堅持@1x圖片!”

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

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

導(dǎo)出腳本

這里只簡單介紹一下這個腳本是如何工作的:

1. 你的畫布大小的200%或300%。

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

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

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

5. 然后,它保存文檔時如何在腳本運行。

腳本很容易修改。 如果你想重命名的文件夾或文件名稱,你只會改變變量如下圖所示:

var scale = "200%";var folderName = "retina";var extensionName = "_2x.png";

安裝

下載的腳本 (郵政、4 KB)或查看項目 GitHub 。

一旦下載并解壓,腳本并粘貼到Photoshop的副本 腳本文件夾:在Windows上, Adobe \ \程序文件\ Adobe Photoshop CC 2014 \ \預(yù)設(shè)\腳本在Mac, Adobe \ Photoshop CC \ \程序\ \預(yù)設(shè)\腳本。

請注意這將 根據(jù)你的Photoshop和操作系統(tǒng)版本 。

幾乎就要完成了。 重啟Photoshop,腳本將會準備好。 現(xiàn)在,任何時候你想出口一個PNG @2x或@3x,點擊“文件”→“腳本”→“ExportDocument2xPNG”或“文件”→“腳本”→“ExportDocument3xPNG”:

進入“腳本”,然后單擊“ExportDocument2xPNG”或“ExportDocument3xPNG。”

你現(xiàn)在剩下視網(wǎng)膜圖像@2x或@3x,準備好讓在設(shè)備上。

提示

請記住幾件事如果你選擇這種方法。 盡可能使用形狀和向量。 他們規(guī)模好,圖層樣式。 總是使用智能對象的位圖。 記住他們?nèi)匀恍枰狜2x或@3x里面。

使用這種方法, Photoshop的發(fā)電機 還好了。 任何層或?qū)咏M可以導(dǎo)出@2x @3x。 ,你就會知道他們是像素級。

在生產(chǎn)設(shè)計之后,我需要為客戶端創(chuàng)建一個可點擊的原型。 我發(fā)現(xiàn)導(dǎo)出的png偉大的工作奇跡 。 奇跡允許你上傳你的照片,Dropbox或通過自己的系統(tǒng)。 一旦上傳,您可以創(chuàng)建熱點和鏈接到其他屏幕。 然后,您可以查看設(shè)備上看到你的設(shè)計。 其他獎金是我使用較少的帶寬和Dropbox空間! 視網(wǎng)膜PSDs會超重!

插畫家

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

素描

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

感謝你的閱讀

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

新聞標題：手機網(wǎng)站的設(shè)計與Photoshop。
瀏覽地址：http://www.bm7419.com/news42/80442.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、微信小程序、云服務(wù)器、ChatGPT

廣告

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