Изображението за мобилни устройства не винаги е това, което изглежда
Става все по-често срещано при графичните професионалисти не само да имат своята работа в печат, но и в мрежата и устройства като iPhones, iPads, устройства с Android и таблети с Android. На пръв поглед това може да се разглежда като "добро нещо", тъй като медиите, в които се появява работата, се разширяват до цифрови екрани. Недостатъкът е огромният брой екрани и объркващият брой резолюции на екрана. Не е необичайно да чувате опитни професионалисти, които се чудят какво се е случило с дните, когато 300-цолова резолюция на TIFF изображението във формат CMYK е била норма. О, за добрите стари времена!
Тези дни са свършили. Сега трябва да се борим с факта, че изображението от 200 на 200 може да изглежда добре на едно устройство, но все пак да се появи квадрат на друг и три четвърти от друг. Всичко това наистина се свежда до "Резолюция за оръжия за разрешаване", която се води от производителите на устройства, тъй като те се опитват да заглушат повече пиксели на екран, отколкото техните конкуренти.
Това ни води до това, което ще наречем "Възходът на присмелите". Суфиксите са онези неща - @ 2x, @ 3x - прикрепени към името на изображението. Те по същество, например, поставят правилното изображение на правилното място на дясното устройство. Тогава става още по-добре.
Голяма част от нашата работа включва работа с икони и с надигането на движението "Плосък дизайн", тези неща се създават в такива приложения за векторно рисуване като Illustrator и Sketch. Проблемът е, че устройствата просто не могат да изобразяват .ai или .eps файлове. Те трябва да бъдат преобразувани в мащабируема векторна графика и, в зависимост от приложението, използвано за създаване на икони, може да няма дори опция за SVG.
Тогава става още по-добре.
Има нов клас софтуер - Prototyping приложения - които се превръщат в събирателен пункт, преди вашите изображения и икони да бъдат изхвърлени на устройства и те също имат своите особености.
Този урок се премества между Photoshop и Sketch за графиките и използвайки Adobe Experience Design, за да демонстрира някои от болезнените точки между идеята и евентуалното разполагане. Да започваме.
01 от 05
Как да подготвим изображения за мобилни устройства в Adobe Photoshop
Първата стъпка в този процес е познаването на целевото устройство или устройства. В този случай ще насочвате iPhone 6, чиято площ на екрана е 375 пиксела, а височината му е 667 пиксела. Дизайнът изисква изображението да бъде широчината на екрана.
Изображението, което трябва да се използва, е заснет в катедралата на Bern Minster в Берн, Швейцария. След като изображението се отвори във Photoshop, изберете Image> Image Size, за да проверите размерите на изображението и неговата разделителна способност. Очевидно е, че изображение, което е 3156 x 2592 с резолюция 300 ppi и размер на файла 23,4 Mb просто няма да работи.
В диалоговия прозорец "Размер на изображението" намалете разделителната способност на 100 ppi . Направете това първо, защото размерите на изображението също ще се променят. С настройката Set, променете ширината на 375 пиксела. Ако проверите данните за размера на изображението, ще забележите, че изображението е намаляло от 23,4 Mb до по-мобилно 338k. Кликнете върху OK, за да приемете промяната и затворете диалоговия прозорец "Размер на изображението"
02 от 05
Как да използвате диалоговия прозорец "Експортиране като ..." в Adobe Photoshop
След като изображението е готово за експорт, изберете "Експортиране> Експортиране като ...", за да отворите диалоговия прозорец Експортирай като.
Тази диалогова кутия е неотдавна добавка към Photoshop и заменя диалоговия прозорец "Запиши за уеб", който използваха от години. Ако все още се нуждаете от това, можете да го намерите в изскачащия прозорец за експортиране. Това, по очевидни причини, сега е известно като "Износ за уеб (Legacy)". Ако това е първото ви посещение в този диалогов прозорец, ето кратко турне:
- Размер: Тази колона задава изходния размер на изображението. Интересният аспект на тази област е, че ще увеличи изображението, но изображението няма да изглежда "размито" на устройството поради огромния брой пиксели на екрана на устройството.
- 1X: Кликнете задръжте върху нея и ще получите редица размери. Категориите 1x, 2x и 3x традиционно се свързват с устройства Hi-Dpi от Apple и заедно с още няколко други ще подготвят изображения за устройства с Android.
- Suffix: Този избор ще покаже вашия размер, но ще бъде показан като @ 2x или ще бъде избран размер. Тази суфикс ще бъде добавена към името на изображението.
- Знакът +: Кликнете върху него, за да добавите различни размери за изход. В този случай кликнете два пъти върху него и изберете 2х и 3х от поп. Това ще покрие практически всяко устройство с iOS.
- Кошчето за боклук: Кликнете върху него и изборът се премахва от състава.
- Настройки на файла: Изберете формат - jpg, png, gif или svg - най-подходящ за изображението. Ако размерът на файла е проблем, можете също така да намалите настройките за качество.
- Размер на изображението: можете да промените физическите размери на изображението.
- Размер на платно: Можете да промените физическите размери на изображението.
- Метаданни: Можете да добавите авторско право и данните си за връзка към метаданните на изображението.
Когато приключите, кликнете върху бутона Експортиране на всички. Ще бъдете запитани къде искате да поставите изображенията. Добър навик да се развива е да кликнете върху бутона Нова папка и да създадете папка за задържане на експортираните изображения. Когато кликнете върху Експортиране, ще се покажат изображенията в папката.
03 от 05
Как да подготвим изображения за мобилни устройства в скица 3 от Bohemian Coding
Sketch 3, приложение само за Macintosh от Bohemian Coding, бързо набира популярност сред дизайнерите на UX и UI, поради силния си фокус върху дизайна на уеб и приложения. Всъщност Photoshop, в много отношения, е в странно положение, че трябва да играе "настигне" с Sketch.
За да подготвите изображение за мобилни устройства в Sketch, изберете изображението в artboard и кликнете върху бутона Make Exportable в долната част на панела Properties . Това ще отвори диалоговия прозорец за експортиране. Кликнете върху знака +, за да добавите версиите 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
Тествайте рано, тествайте често, не вярвайте на нищо, не вярвайте на никой и особено на себе си
Това, което трябва да разберете, е само началото на процеса. Преглеждането на работата си на възможно най- много устройства трябва да се разглежда като жизнено важна част от работния процес. Също така трябва да сте наясно, че това е само първата стъпка в процеса на създаване на графични активи за приложения за уеб приложения или мобилни уеб.
Използването на приложения за създаване на прототипи е чудесен начин за разкриване на болезнените точки, но същите тези активи ще трябва да бъдат изведени за употреба от разработчика. В много случаи физическите размери на активите, включително иконите, ще бъдат физически огромни, а не във формат svg, но png. На пръв поглед това може да изглежда малко над върха, но помнете златното правило за мащабиране на изображенията: по-добре е да мащабирате, отколкото да увеличавате.
Най-важното е да работите в тясно сътрудничество с вашия разработчик и да използвате прототипиращ софтуер като начин да покажете намерението си за проектиране. В крайна сметка, обаче, тези същите активи ще трябва да са готови за крайния продукт и вашият разработчик има по-добра възможност да се справи с това, от което се нуждае, отколкото с вас.