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

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

這里有一些設計的平板電腦應用程序。

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

的問題

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

縮放因子

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

你可以很快看到決議失控。 顯示設計的一角@1x @3x。

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

性能

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

表顯示的像素數量,大小@1x @3x空白PSDs的磁盤和內存。

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

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

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

字體大小

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

字體大小成為乘法的游戲時,在視網膜的規模。

整個像素

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

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

規格

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

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

好消息

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

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

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

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

作為另一個例子,讓我們來聯系5。 與它的分辨率為1920×1080像素和480 DPI,DP單位工作是640×360。 然后,比例因子作為@3x出來。 所以,現在你知道你的DP維度和資產的規模因素。

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

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

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

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

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

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

導出腳本

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

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

2. 它會創建一個新文件夾命名 視網膜,你PSD保存。

3. 然后,它可以節省一個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 \ \預設\腳本在Mac, Adobe \ Photoshop CC \ \程序\ \預設\腳本。

請注意這將 根據你的Photoshop和操作系統版本 。

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

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

你現在剩下視網膜圖像@2x或@3x,準備好讓在設備上。

提示

請記住幾件事如果你選擇這種方法。 盡可能使用形狀和向量。 他們規模好,圖層樣式。 總是使用智能對象的位圖。 記住他們仍然需要@2x或@3x里面。

使用這種方法, Photoshop的發電機 還好了。 任何層或層組可以導出@2x @3x。 ,你就會知道他們是像素級。

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

插畫家

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

素描

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

感謝你的閱讀

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

新聞標題：手機網站的設計與Photoshop。
瀏覽地址：http://m.newbst.com/news42/80442.html

成都網站建設公司_創新互聯，為您提供App開發、企業網站制作、網站導航、微信小程序、云服務器、ChatGPT

廣告

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