Сликата за мобилни не е секогаш она што изгледа
Станува сè почеста за графичките добрите не само што нивната работа се појавува во печатените туку и на интернет и уредите како што се iPhone, iPads, Android уреди и Андроид таблети. На површината, ова може да се смета за "добро", бидејќи медиумите на кои се појавува нашето дело се шират на дигитални екрани. Недостатоци е големиот број на екрани и збунувачкиот број на резолуции на екранот. Не е невообичаено да се слушнат искусни професионалци за да се чудат што се случило со деновите кога TIFF сликата со резолуција од 300 dpi во CMYK формат беше норма. О, за старите добри времиња!
Тие денови се завршени. Сега треба да се бориме со фактот дека 200 на 200 слики може да изгледаат добро на еден уред, а сепак да се појави големина на четвртина на друга и три четвртина големина на уште еден. Сето тоа навистина се сведува на "Race Race Race" што ја водеа производителите на уреди, бидејќи се обидуваат да заглават повеќе пиксели во екран од нивните конкуренти.
Ова нè доведува до она што ќе го наречеме "Подемот на суфиксите". Суфиксите се оние работи - @ 2x, @ 3x - се наведуваат на името на сликата. Тие суштински, на пример, ја ставаат вистинската слика на вистинското место на вистинскиот уред. Тогаш станува уште подобро.
Многу од нашите дела вклучуваат работа со икони и, со подемот на движењето за дизајн на рамнини, овие работи се создаваат во такви апликации за цртање на вектори како Illustrator and Sketch. Проблемот е дека уредите едноставно не можат да направат датотеки .ai или .eps. Тие треба да се конвертираат во Scalable Vector Graphics и, во зависност од апликацијата што се користи за креирање на иконите, можеби нема да има опција за SVG.
Тогаш станува уште подобро.
Постои нова класа на софтверски апликации за прототипирање - кои стануваат склопување пред вашите слики и икони да бидат изгаснети на уреди и тие исто така имаат свои особености.
Ова упатство се движи помеѓу Photoshop и Sketch за графика и користење на Adobe Experience Design за да покаже неколку точки на болка помеѓу вашата идеја и евентуално распоредување. Ајде да почнеме.
01 од 05
Како да се подготват Слики за мобилни уреди во Adobe Photoshop
Првиот чекор во овој процес е да се знае вашиот целен уред или уреди. Во овој случај, ќе се фокусирате на iPhone 6, кој има екранска површина од 375 пиксели ширина со 667 пиксели високо. Дизајнот повикува сликата да биде ширина на екранот.
Сликата што требаше да се употреби беше застрелана во Бернската манастирска катедрала во Берн, Швајцарија. Откако сликата се отвара во Photoshop, одберете Image> Image Size за да ги проверите димензиите на сликата и нејзината резолуција. Очигледно, слика која е 3156 x 2592 со резолуција од 300 ppi и големината на датотеката од 23,4 Mb едноставно нема да работи.
Во дијалогот за големината на сликата, намалете ја Резолуцијата на 100 ppi . Направете го ова прво бидејќи димензиите на сликата исто така ќе се променат. Со поставената резолуција, сменете ја ширината на 375 пиксели. Ако ги проверите податоците за големината на сликата, ќе забележите дека сликата се намалила од 23,4 Мб на повеќе мобилни 338k. Кликнете на OK за да ја прифатите промената и да го затворите дијалогот Image Size.
02 од 05
Како да го користите дијалогот "Извези како ..." во Adobe Photoshop
Откако сликата е подготвена за извоз, одберете "Export> Export As ..." за да го отворите дијалогот за извоз како.
Овој дијалог кутија е неодамнешен додаток на Photoshop и го заменува дијалогот "Зачувај за веб" со кој се користат со години. Ако сеуште ви е потребна, можете да ја најдете во прозорецот Export. Тоа е, од очигледни причини, сега познат како "Извоз за веб (наследство)". Ако ова е вашата прва посета на овој дијалог-кутија, тука е кратка турнеја:
- Големина: Оваа колона ја поставува излезната големина на сликата. Интересен аспект на оваа област е тоа што ќе ја зголеми сликата, но сликата нема да се појавува како "нејасни" на уредот поради огромниот број пиксели на екранот на уредот.
- 1X: Кликнете на држете го ова и ќе ви бидат претставени со голем број големини. Категориите 1x, 2x и 3x традиционално се поврзуваат со Hi Dpi уредите од Apple и заедно со неколку други ќе подготват слики за уреди со Android.
- Наставка: Овој избор ќе ја покаже вашата големина, но ќе биде прикажан како @ 2x или големината е избрана. Овој суфикс ќе биде додаден на името на сликата.
- Знакот +: Кликнете за да додадете различни големини за излез. Во овој случај, кликнете двапати и избирате 2x и 3x од pop-down. Ова ќе го покрие практично секој iOS уред.
- Ѓубре може: Кликнете на ова и изборот е отстранет од поставата.
- File Settings: Изберете формат - jpg, png, gif или svg - најдобро одговара на сликата. Ако големината на датотеката е загрижена, можете исто така да ги намалите поставките за квалитет.
- Големина на сликата: можете да ги промените физичките димензии на сликата.
- Големина на платно: Можете да ги промените физичките димензии на платно на сликата.
- Метаподатоци: Можете да додадете авторски права и вашите информации за контакт на метаподатоците на сликата.
Кога ќе завршите, кликнете на копчето Извоз на сите. Ќе ви биде побарано од каде сакате да ги поставите сликите. Добра навика да се развие е да кликнете на копчето Нова папка и да креирате папка за да ги држите изнесените слики. Кога ќе кликнете на Извоз, ќе ви бидат прикажани сликите во папката.
03 од 05
Како да се подготват Слики за мобилни уреди во скица 3 Од Бохемија кодирање
Скица 3, апликација само од Macintosh од Bohemian Coding, брзо се зголемува меѓу UX и UI дизајнерите поради интензивниот фокус на веб и апликацијата. Всушност, Photoshop, на многу начини, е во чудна положба да мора да игра "фати" со Скица.
За да подготвите слика за мобилен во Sketch, одберете ја сликата на таблата и кликнете на копчето 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. На прв поглед, ова може да изгледа дека е малку над врвот, но се сеќавам на златното правило за скалирање на сликите: подобро е да се намали од скалата.
Во крајна линија е да работиме тесно со вашиот развивач и да го користите софтверот за прототипови како начин за прикажување на вашата намера за дизајн. Меѓутоа, на крај, истите имоти ќе треба да бидат подготвени за крајниот производ и вашиот развивач подобро ќе се справи со она што му е потребен од вас.