Имагинг за мобилне уређаје није увек оно што изгледа
Све је уобичајено за графичке професионалце да не само да се њихов рад појављује у штампи већ и на вебу и уређајима као што су иПхоне уређаји, иПадс, Андроид уређаји и Андроид таблете. На површини, то би могло да се види као "добра ствар", јер се медији наш рад појављује на проширењу на дигиталне екране. Недостатак је велики број екрана и збуњујући број резолуција екрана. Није неуобичајено чути зачињеног професионалца који се питају шта се десило са данима када је ТИФФ слика у резолуцији 300 дпи у формату ЦМИК била норма. Ох за добре старе дане!
Ти дани су готови. Сада морамо да се боримо са чињеницом да се на једном уређају може приказати слика од 200 до 200, а на другом се појављује квартална величина на другој и три четвртине величине на још једном. Све се стварно своди на "Раце Раце Раце" коју воде произвођачи уређаја јер покушавају да заглављују више пиксела на екрану од својих конкурената.
Ово нас доводи до онога што ћемо назвати "Успон Сушака". Суфиксе су те ствари - @ 2к, @ 3к - подигнуте на име слике. Они су у суштини, на пример, поставили праву слику на право место на правом уређају. Онда постаје још бољи.
Велики део нашег рада подразумева рад са иконама и, уз пораст покрета Дизајн равног стакла, ове ствари се стварају у таквим апликацијама вектора као што су Иллустратор и Скетцх. Проблем је што уређаји једноставно не могу да раде .аи или .епс датотеке. Требају их претворити у Сцалабле Вецтор Грапхицс и, у зависности од апликације која се користи за креирање икона, можда чак и није СВГ опција.
Онда постаје још бољи.
Постоји нова класа апликација за прототиповање - која постаје збирна тачка пре него што се ваше слике и иконе померају на уређаје и имају своје специфичности.
Овај водич се креће између Пхотосхопа и Скетцх-а за графику и коришћењем Адобе Екпериенце Десигн-а да демонстрира неколико точака болова између ваше идеје и евентуалног примене. Хајде да почнемо.
01 од 05
Како припремити слике за мобилне уређаје у Адобе Пхотосхопу
Први корак у овом процесу је познавање вашег циљног уређаја или уређаја. У овом случају, циљали ћете на иПхоне 6 који има екран од 375 пиксела широк за 667 пиксела. Дизајн позива да слика буде ширина екрана.
Слика која се користи је упуцана у Бернску катедралу у Берну, Швајцарска. Када се слика отвори у Пхотосхоп-у, изаберите Имаге> Имаге Сизе да бисте проверили димензије слике и његову резолуцију. Очигледно, слика која је 3156 к 2592 са Резолуцијом од 300 ппи и величином датотеке од 23.4 Мб једноставно неће радити.
У дијалогу Имаге Сизе, смањите резолуцију на 100 ппи . Урадите то прво јер се димензије слике такође мењају. Са постављеном резолуцијом, промените ширину на 375 пиксела. Ако проверите величину слике, видећете да се слика смањила са 23.4 Мб на мобилнију 338к. Кликните на ОК да бисте прихватили промену и затворите дијалог за величину слике.
02 од 05
Како користити "Дијаграме у извозу ..." у Адобе Пхотосхопу
Када је слика спремна за извоз, изаберите "Извоз> Извози као ..." да бисте отворили дијалог Извоз као.
Овај дијалог бок је недавни додатак Пхотосхопу и замењује дијалог бок "Саве Фор Веб" који су користили годинама. Ако вам је и даље потребан, можете га пронаћи у падајућем извозу. Из очигледних разлога, сада познат као "Извоз за Веб (Легаци)". Ако је ово ваша прва посета овој дијалог бок-у, ево кратке турнеје:
- Величина: Ова колона поставља величину излаза слике. Интересантан аспект овог подручја је да ће проширити слику, али слика неће бити "фуззи" на уређају због огромног броја пиксела на екрану уређаја.
- 1Кс: Кликните на држите ово и бићете приказани великим бројем величина. Категорије 1к, 2к и 3к традиционално су повезане са Хи Дпи уређајима из Аппле-а, а заједно са још неким другим ће припремити слике за Андроид уређаје.
- Суффик: Овај избор ће вам показати величину, али ће се приказати као @ 2к или ће се изабрати величина. Овај суфикс ће бити додан у име слике.
- Знак +: Кликните на ово да бисте додали различите величине за излаз. У том случају двапут кликните на њега и изаберите опцију 2к и 3к. Ово ће практично покрити било који иОС уређај.
- Кош за смеће: кликните на ово и избор се уклања из линије.
- Подешавања датотеке: Изаберите формат - јпг, пнг, гиф или свг - најбоље прилагођен за слику. Ако је величина датотеке забрињавајућа, такође можете смањити поставке за квалитет.
- Величина слике: можете променити физичке димензије слике.
- Цанвас Сизе: Можете да промените физичке димензије платна слике.
- Метаподаци: Можете додати ауторско право и своје податке за контакт метаподатама слике.
Када завршите, кликните на дугме Извези све. Биће вам постављено питање где желите да поставите слике. Добра навика за развој је да кликнете на дугме Нова мапа и креирате фасциклу за држање извезених слика. Када кликнете на Извоз, биће вам приказане слике у фолдеру.
03 од 05
Како припремити слике за мобилне уређаје у скици 3 из Бохемијског кодирања
Скетцх 3, апликација само из Мацинтосх-а из Бохемијског кодирања, брзо постаје позната међу УКС и УИ дизајнерима због интензивног фокусирања на веб и дизајн апликација. У ствари, Пхотосхоп је на много начина у чудном положају да мора играти "дохватити" са Скетцх-ом.
Да бисте припремили слику за мобилне уређаје у Скетцху, изаберите слику на табли и кликните на дугме Маке Екпортабле на дну панела Пропертиес . Ово ће отворити дијалог за извоз. Кликните знак + да бисте додали верзије 2к и 3к, а такође додајте суфиксе. Доступни формати су ПНГ, ЈПГ, ТИФ, ПДФ, ЕПС и СВГ. У том случају изаберите ЈПГ. Кликните на дугме Извези и циљајте или креирајте фасциклу да бисте држали различите слике извезене.
04 од 05
Зашто морате креирати три (или више) верзија слике
У многим аспектима, тржиште мобилних уређаја је "дивљи запад" резолуција и једна димензија дефинитивно не одговара свима. У претходном примеру из Адобе Екпериенце Десигн, слика се поставља на 2 иПхоне 6 плоче и Андроид таблицу. Обратите пажњу на то да је 1к верзија на левој страни пола величине. Ово је управо то како ће се слика појавити на иПхоне-у 6 са својим мрежним екраном. 2к верзија се савршено уклапа и Андроид верзија се искључује на екрану. Ваш избор је да или скалирате слику или да извезете слику из Пхотосхопа у другој величини.
05 од 05
Тестирај рано, тестирај често, не веруј, не верује никоме и посебно себи
Оно што треба да разумете је да је ово само почетак процеса. Преглед радова на што већем броју уређаја мора се сматрати виталним делом тока посла. Такође морате бити свјесни да је ово само први корак у процесу стварања графичких средстава за апликацију или мобилне веб пројекте.
Коришћење прототипских апликација је одличан начин откривања тачака боли, али ова исте имовине ће морати излазити за коришћење од стране програмера. У многим случајевима, физичке димензије средстава, укључујући и иконе, биће физички огромне, а не у свг али пнг формату. На први поглед, ово може изгледати мало изнад врха, али запамтите златно правило скалирања слика: боље је скалирати него што је скала.
Доња линија је да блиско сарађујете са својим програмером и да користите прототипски софтвер као начин приказивања намјере за дизајн. Ипак, на крају, та исте имовине морају бити спремне за коначни производ, а ваш програмер ће боље поступати са оним што му је потребно од вас.