Ұялы телефон үшін кескін әрдайым көрінбейді
Графикалық провайдерлерге олардың жұмысы баспа түрінде ғана емес, сонымен қатар iPhone, iPad, Android құрылғылары мен Android планшеттері сияқты вебте және құрылғыларда барған сайын кеңінен таралған. Беттің үстінде, бұл «жақсы нәрсе» ретінде қарастырылуы мүмкін, себебі біздің жұмысымыз медиа-сандық экрандар кеңейтілуінде көрінеді. Төмендету - бұл экрандардың мөлдір саны және экрандағы ажыратымдылықтың саны. CMYK пішіміндегі 300 нүктедегі TIFF кескіні норма болған күндермен болған нәрселерді қызықтырған тәжірибелі провайдерлерді есту әдеттегідей емес. Жақсы ескі күндер үшін!
Сол күндері аяқталды. Енді 200-ден 200-ге дейінгі кескіннің бір құрылғыда жақсы көрінуі мүмкін, алайда тағы бір және үшінші төрттің өлшемі бойынша төрттіктің өлшемі көрінеді. Мұның бәрі, шынымен де, «қару қаруының қарсыласуына» түседі, олар құрылғы өндірушілерімен жүргізіледі, өйткені олар экранда көп пикселдерді бәсекелестерге қарағанда кептіруге тырысады.
Бұл бізді «The Rise Of The Suffixes» деп аталатын нәрсеге әкеледі. Жұрнақтар - бұл заттар - @ 2x, @ 3x - суреттің атына салынған. Олар шын мәнінде, мысалы, дұрыс бейнені дұрыс құрылғыға дұрыс жерде орналастырады. Сонда ол одан да жақсы болады.
Біздің жұмысымыздың көп бөлігі иконкалармен жұмыс жасайды және Кескіндей дизайн қозғалысының өсуімен байланысты, бұл заттар Illustrator және Sketch сияқты векторлық суреттерде жасалады. Мәселе мынада, құрылғылар тек жай немесе .eps файлдарын көрсете алмайды. Олар ауқымды векторлық графикаға айналдырылуы керек және белгішелер жасау үшін пайдаланылатын бағдарламаға байланысты SVG опциясы болмауы да мүмкін.
Сонда ол одан да жақсы болады.
Бағдарламалық жасақтама - Prototyping қосымшаларының жаңа классы бар - олар сіздің кескіндеріңіз бен иконкаларыңыз құрылғыға түсірілмес бұрын жиналыс нүктесіне айналады және олардың ерекшеліктері де бар.
Бұл оқулық Photoshop мен Sketch арасында графиктер үшін және Adobe App Design бағдарламасын пайдаланып, сіздің идеяңыз бен ойдағыдай орналастыру туралы бірнеше ауыру нүктесін көрсету үшін қолданылады. Бастайық.
01-ден 05-ге дейін
Adobe Photoshop-те мобильді құрылғыларға арналған суреттерді қалай дайындау керек
Бұл үрдістегі алғашқы қадам - мақсатты құрылғыңызды немесе құрылғыларды білу. Бұл жағдайда сіз iPhone 6-ді қолдана аласыз, ол экранның аумағын 375 пикселді кеңейтіп, 667 пиксель жоғары. Дизайн бейнені экранды ені деп атайды.
Пайдаланылатын кескін Bern, Швейцариядағы Берн Минстер соборының ішіне түсірілді. Кескіннің өлшемдерін және оның ажыратымдылығын тексеру үшін кескін Photoshop бағдарламасында ашылғаннан кейін Image> Image Size таңдаңыз . Әлбетте, 300 пиксель рұқсаты бар және 23,4 Мб файл өлшемі бар 3156 х 2592 суретті оңай жұмыс істемейді.
Кескін өлшемінің тілқатысу терезесінде Ажыратымдылықты 100 ppi мәніне дейін азайтыңыз . Мұны алдымен жасаңыз, себебі кескін өлшемдері өзгереді. Ажыратымдылық жиынтығымен енін 375 пикселге өзгертіңіз. Кескін өлшемінің деректерін тексеретін болсаңыз, кескін 23,4 Мб-тан 338к ұялы телефонға дейін азайғанын байқайсыз. Өзгертулерді қабылдау үшін Image (Кескін өлшемі) тілқатысу терезесін жабу үшін OK түймесін басыңыз .
05 02
Adobe Photoshop бағдарламасындағы «Экспортқа ...» диалог терезесін қалай пайдалануға болады
Сурет экспорттауға дайын болғаннан кейін Export As диалогтық терезесін ашу үшін «Экспорт» Экспорт ... « пәрменін таңдаңыз.
Бұл диалог терезесі Photoshop-тің соңғы қосымшасы болып табылады және көптеген жылдар бойы пайдаланған «Вебті сақтау» диалогтық терезесін ауыстырады. Егер сізге әлі де қажет болса, оны Экспорттау популярынан төмен табуға болады. Бұл белгілі себептермен қазір «Экспорттау үшін веб (Legacy)» деп аталады. Егер бұл сіздің тілқатысу терезесіне бірінші рет келсе, мұнда қысқаша тур:
- Көлемі: Бұл баған кескіннің шығыс өлшемін орнатады. Бұл аймақтың қызықты аспабы, ол суретті үлкейтеді, бірақ құрылғының экранында үлкен пикселдер салдарынан кескін құрылғыда «анық емес» көрінбейді.
- 1X: Бұл батырманы басып тұрыңыз және сізге бірнеше өлшемдер ұсынылады. 1x, 2x және 3x категориялары әдетте Apple-дан Hi Dpi құрылғыларымен байланыстырылған және олар бірнеше адаммен қатар Android құрылғыларына суреттер дайындайды.
- Suffix: Бұл таңдау өлшеміңізді көрсететін болады, бірақ ол @ 2x немесе өлшемі таңдалады. Бұл жұрнақ сурет атына қосылады.
- + Белгісі: Шығаруға арналған түрлі өлшемдерді қосу үшін осы батырманы басыңыз. Бұл жағдайда, оны екі рет нұқыңыз және қалқымалы терезеден 2x және 3x таңдайды. Бұл іс жүзінде кез келген iOS құрылғысын қамтиды.
- Себет: Бұл батырманы басыңыз және таңдау желіде жойылады.
- Файл параметрлері: jpg, png, gif немесе svg пішімін таңдаңыз - кескінге ең қолайлы. Егер файл өлшемі маңызды болса, сіз Сапа параметрлерін азайта аласыз.
- Image Size: кескіннің физикалық өлшемдерін өзгертуге болады.
- Кенептің өлшемі: Кескіннің кенептің жеке өлшемдерін өзгерте аласыз.
- Метадеректер: Сіз авторлық құқықты және байланыс ақпаратын суреттің метадеректеріне қоса аласыз.
Аяқтаған кезде, Барлығын экспорттау түймешігін басыңыз. Сізге суреттерді қайда орналастыруды сұрайды. Жақсы әдетті жасау - New Folder түймешігін басу және экспортталған кескіндерді ұстау үшін қалта жасау. Экспорттау түймешігін басқанда, қалтадағы суреттер көрсетіледі.
03 05
3-суреттегі мобильді құрылғыларға арналған бейнелерді қалай дайындау керек? 3 Богемиялық кодтаудан
Sketch 3, Bohemian Coding бағдарламасынан Macintosh-ға арналған ғана қолданба UX және UI дизайнерлері арасында веб пен бағдарлама дизайнына қарқынды шоғырлануына байланысты тез арада байқалуда. Шын мәнінде, Photoshop көптеген жолдармен Sketch-пен бірге «жетуге» баруға тура келеді.
Ұяшыққа бейненің суретін Sketch-де дайындау үшін, суреттегі суретті таңдап , Сипаттар панелінің төменгі жағындағы « Экспорттау» түймешігін басыңыз . Бұл Экспорттау диалогтық терезесін ашады. 2x және 3x нұсқаларын қосу үшін + белгісін басыңыз да, жұрнақтарды қосыңыз. Қол жетімді форматтар PNG, JPG, TIF, PDF, EPS және SVG. Бұл жағдайда JPG таңдаңыз. Экспорттау түймешігі мен мақсатты нұқыңыз немесе экспортталған әртүрлі кескіндерді ұстайтын қалта жасаңыз.
04 04
Неліктен кескіннің үш (немесе көп) нұсқаларын жасауыңыз керек
Көптеген жағдайларда ұялы байланыс нарығы «Wild West» болып табылады және бір өлшемі бәріне сай емес. Жоғарыда келтірілген мысалда Adobe Illustrator дизайнынан сурет 2 iPhone 6 жұмыс үстелінде және Android құрылғысының жұмыс үстелінде орналастырылған. Сол жақтағы 1x нұсқасының жартысы қалай көрінетініне назар аударыңыз. Бұл iPhone 6-дағы тордың экранымен бейнеленген. 2x нұсқасы жақсы сәйкес келеді және Android нұсқасы экраннан өшіріледі. Сіздің таңдауыңыз кескінді масштабтау немесе Photoshop-ден басқа кескінді экспорттау.
05 05
Ерте тестілеу, жиі-жиі тексеру, ештеңеге сенім артпау, ешкімге және әсіресе өзіңізге сенім арт
Түсінуіңіз керек нәрсе - бұл процестің басы ғана. Жұмысыңызды көптеген құрылғыларда көру, себебі сіз жұмыс үрдісінің маңызды бөлігі ретінде қарастырылуы керек. Сондай-ақ, бұл бағдарламаның немесе мобильді веб-жобаларының графикалық активтерін жасау процесінің алғашқы қадамы екенін білуіңіз керек.
Прототиптік қосымшаларды қолдану - бұл ауырсыну нүктелерін ашудың тамаша тәсілі, бірақ сол активтерді әзірлеуші пайдалану үшін шығару керек. Көптеген жағдайларда активтердің физикалық өлшемдері, оның ішінде белгішелер физикалық тұрғыдан үлкен болады, бірақ sng, png форматында емес. Бір қарағанда, бұл жоғарыдан біраз көрінуі мүмкін, бірақ суреттерді масштабтаудың алтын ережесін есте сақтаңыз: масштабтаудан гөрі ауқымдылығы жақсы.
Төменгі жол - әзірлеушіңізбен тығыз байланыста жұмыс жасау және дизайнерлік ниетін көрсету тәсілі ретінде прототиптік бағдарламалық жасақтаманы пайдалану. Бірақ, ақыр соңында, осындай активтер соңғы өнімге дайын болуы керек және сіздің әзірлеуші сізге қарағанда не қажет екенін жақсы басқарады.