移動影像並不總是看起來像
對於圖形專業人員來說 ，他們的作品不僅在印刷品中出現，而且在iPhone，iPad，Android設備和Android平板電腦等網絡和設備上也越來越普遍。 從表面上看，這可以被看作是一件“好事”，因為我們的工作出現的媒體擴展到了數字屏幕。 不足之處在於屏幕的數量和屏幕分辨率的數量令人困惑。 經常聽到經驗豐富的專業人士想知道在CMYK格式的300 dpi分辨率TIFF圖像是常態的時候發生了什麼。 哦，過去的好日子！
那些日子已經結束了。 我們現在必鬚麵對這樣一個事實：一個200x200的圖像可能在一台設備上顯示正常，但在另一台設備上顯示四分之一大小，而在另一設備上顯示四分之一大小。 這一切都歸結於設備製造商正在進行的“解決方案軍備競賽”，因為他們試圖將更多的像素塞入屏幕而不是競爭對手。
這給我們帶來了我們所稱的“後綴的崛起”。 後綴是那些 - @ 2x，@ 3x - 加入到圖像的名稱中。 例如，它們本質上是將正確的圖像放在正確的設備上。 然後它變得更好。
我們的許多工作都涉及到圖標的工作，隨著平面設計運動的興起，這些東西在Illustrator和Sketch等矢量繪圖應用程序中創建。 問題是設備根本無法渲染.ai或.eps文件。 他們需要轉換為可縮放矢量圖形，並且根據用於創建圖標的應用程序，可能甚至沒有SVG選項。
然後它變得更好。
有一類新的軟件 - 原型應用程序 - 在您的圖像和圖標推向設備之前它們正在成為裝配點，並且它們也具有其特性。
本教程在Photoshop和Sketch之間移動以用於圖形，並使用Adobe Experience Design演示您的想法和最終部署之間的一些難題。 讓我們開始吧。
05年1月
如何在Adobe Photoshop中為移動設備準備圖像
此過程的第一步是了解您的目標設備或設備。 在這種情況下，您將瞄準iPhone 6，屏幕面積為375像素寬，667像素高。 該設計要求圖像是屏幕的寬度。
使用的圖像是在瑞士伯爾尼的伯爾尼大教堂內拍攝的。 一旦圖像在Photoshop中打開， 選擇圖像>圖像大小來檢查圖像的尺寸及其分辨率。 顯然，分辨率為300 ppi，文件大小為23.4 Mb的圖像為3156 x 2592根本無法使用。
在“圖像大小”對話框中， 將分辨率降低到100 ppi 。 首先這樣做，因為圖像尺寸也會改變。 在設置分辨率的情況下，將寬度更改為375像素。 如果您檢查圖像大小數據，您會注意到圖像已從23.4 Mb縮小到更適合移動設備的338k。 單擊確定以接受更改並關閉圖像大小對話框。
05年05月
如何在Adobe Photoshop中使用“導出為...”對話框
一旦圖像準備好導出，請選擇“導出>導出為...”打開“導出為”對話框。
這個對話框是Photoshop最近的補充，它取代了他們多年來使用的“Save For Web”對話框。 如果您仍然需要它，可以在“導出”下拉菜單中找到它。 這是因為顯而易見的原因，現在被稱為“為Web導出（遺留）”。 如果這是您首次訪問此對話框，請參閱以下簡短介紹：
- 大小：此列設置圖像的輸出大小。 該領域的一個有趣之處在於它會放大圖像，但由於設備屏幕上的像素數量龐大，圖像不會在設備上顯示為“模糊”。
- 1X：點擊保持這個，你會看到一些尺寸。 傳統上，1x，2x和3x類別與Apple的Hi Dpi設備相關聯，他們還會與其他一些設備一起為Android設備準備圖像。
- 後綴：此選項會顯示您的尺寸，但會顯示為@ 2x或選擇大小。 該後綴將被添加到圖像名稱。
- +符號：單擊此按鈕可為輸出添加各種尺寸。 在這種情況下，點擊兩次，從彈出窗口中選擇2倍和3倍。 這將涵蓋幾乎所有的iOS設備。
- 垃圾箱：單擊此選項並從該陣容中刪除。
- 文件設置：選擇最適合圖像的格式 - jpg，png，gif或svg。 如果文件大小是一個問題，您也可以降低質量設置。
- 圖像大小：您可以更改圖像的物理尺寸。
- 畫布大小：您可以更改圖像畫布的物理尺寸。
- 元數據：您可以將版權和您的聯繫信息添加到圖片的元數據中。
完成後，單擊全部導出按鈕。 你會被問到你想放置圖像的位置。 開發一個好習慣是點擊新建文件夾按鈕並創建一個文件夾來保存導出的圖像。 當您單擊導出時，您將在文件夾中顯示圖像。
05年3月
如何在草圖3中為移動設備準備圖像從波西米亞編碼
Sketch 3是Bohemian Coding的Macintosh應用程序，由於其非常專注於網頁和應用程序設計，因此在UX和UI設計人員中迅速嶄露頭角。 事實上，Photoshop在很多方面處於奇怪的地位，無法與Sketch一起“追趕”。
要在Sketch中為移動設備準備圖像， 請在美工板上選擇圖像， 然後單擊“屬性”面板底部的“使可導出”按鈕 。 這將打開“導出”對話框。 單擊+號以添加2x和3x版本，並添加後綴。 可用的格式有PNG，JPG，TIF，PDF，EPS和SVG。 在這種情況下，選擇JPG。 點擊導出按鈕並定位或創建一個文件夾來保存導出的各種圖像。
04年05月
為什麼您需要創建三個（或更多）版本的圖像
在許多方面，移動市場是解決方案的“狂野西部”，一個尺寸絕對不適合所有。 在上述來自Adobe Experience Design的示例中，圖像位於2個iPhone 6畫板和一個Android設備畫板上。 注意左邊的1x版本看起來是一半大小。 這正是圖像在視網膜屏幕上顯示在iPhone 6上的方式。 這個2x版本非常適合，而Android版本則是從屏幕上運行。 您的選擇是縮放圖像或以不同的大小從Photoshop中導出圖像。
05年05月
早期測試，經常測試，不要信任，不要相信任何人，特別是你自己
你需要了解的是這只是流程的開始。 在盡可能多的設備上查看您的工作必須被視為工作流程的重要組成部分。 您還需要意識到這僅僅是為應用程序或移動Web項目創建圖形資源的第一步。
使用原型應用程序是揭示痛點的好方法，但這些相同的資產需要輸出供開發人員使用。 在很多情況下，資產的物理尺寸（包括圖標）體積龐大，而不是png格式。 乍一看，這可能看起來有點過頭了，但請記住縮放圖像的黃金法則：縮放比縮放更好。
底線是與您的開發人員密切合作，並使用原型設計軟件來展示您的設計意圖。 但最終，這些相同的資產將需要為最終產品做好準備，並且您的開發人員能夠比他更好地處理他或她的需求。