Выявы для мабільных прыладаў не заўсёды тое, што здаецца
Яна становіцца ўсё больш распаўсюджанай з'явай для графікі профі не толькі сваю працу , з'яўляюцца ў друку , але і ў Інтэрнэце , і прылад , такіх як iPhone'ов, IPADS, Android прылад і Android таблеткі. На паверхні, гэта можа разглядацца як «добрая рэч», як сродкі масавай інфармацыі, пашыраецца да лічбавых экранах з'яўляецца наша праца. Недахопам з'яўляецца тое велізарная колькасць экранаў і заблытаным колькасць дазволаў экрана. Гэта не рэдкасць пачуць бывалых профі задаць усе , што адбылося ў тыя дні , калі 300 кропак на цалю дазвол TIFF выявы ў CMYK фармаце было нормай. Аб за старыя добрыя часы!
Гэтыя дні скончаны. Цяпер мы павінны змагацца з тым, што 200 на 200 малюнка можа з'явіцца штраф на адным прыладзе і яшчэ з'яўляюцца памерам квартала на адным і памеры тры чвэрці на яшчэ адзін. Усё гэта на самай справе зводзіцца да «Дазвол гонкі ўзбраеньняў», развязанай вытворцамі прылад, як яны спрабуюць глушыць больш пікселяў на экране, чым іх канкурэнты.
Гэта падводзіць нас да таго, што мы называем «The Rise Of The суфіксаў». Суфіксы тыя рэчы - @ 2x, 3x @ - прыфастрыгоўваецца да назвы малюнка. Яны, па сутнасці, да прыкладу, паставіць правільнае малюнак у патрэбным месцы на праве прылады. Тады гэта становіцца яшчэ лепш.
Шмат нашай працы ўключае ў сябе працу з абразкамі і з уздымам плоскага руху канструкцыі, гэтыя рэчы ствараюцца ў такіх прыкладаннях вектарнай графікі , як Illustrator і эскіз. Праблема заключаецца ў тым прылада проста не можа аказваць .ai або .eps файлаў. Яны павінны быць ператвораны ў маштабуецца вектарнай графікі і, у залежнасці ад выкарыстоўванага прыкладання для стварэння абразкоў, там можа не быць нават варыянт SVG.
Тады гэта становіцца яшчэ лепш.
Існуе новы клас праграмна прыкладанняў для стварэння прататыпаў - якія становяцца кропкай зборкі, перш чым вашыя выявы і абразкі пусціліся да прылад, і яны маюць свае асаблівасці, а таксама.
Гэты падручнік перамяшчаецца паміж Photoshop і эскізам для графікі і з дапамогай Adobe Experience Design , каб прадэманстраваць некаторыя з болевых кропак паміж вашай ідэяй і наступным разгортваннем. Давайце пачнем.
01 з 05
Як падрыхтаваць выявы для мабільных прылад у Adobe Photoshop
Першы крок у гэтым працэсе, ведаючы ваша мэтавае прылада або прылады. У гэтым выпадку, вы будзеце нацэльванне на iPhone 6, які мае плошчу экрана 375 пікселяў у шырыню і 667 пікселяў ў вышыню. Канструкцыя патрабуе, каб малюнак было шырыня экрана.
Малюнак, якое будзе выкарыстоўвацца быў застрэлены ў Берне Minster сабор у Берне, Швейцарыя. Пасля таго як малюнак адкрыецца ў Photoshop, абярыце Image> Image Size , каб праверыць памеры малюнка і яго дазволу. Відавочна, што малюнак, якое з'яўляецца 3156 х 2592 з дазволам 300 кропак на цалю і памер файла 23,4 Мб проста не будзе працаваць.
Усярэдзіне малюнкаў Памер дыялогавага акна, паменшыць дазвол да 100 кропак на цалю. Зрабіце гэта першым, так як памеры малюнка таксама зменіцца. З наборам Рэзалюцыі, змяніць шырыню да 375 пікселяў. Калі вы правяраеце дадзеныя Памер малюнка вы ўбачыце выява скарацілася з 23,4 Мб да больш рухомых дружалюбных 338K. Націсніце кнопку OK , каб прыняць змены і закрыць дыялогавае акно Памер малюнка.
02 з 05
Як выкарыстоўваць «Экспарт As ...» дыялогавае акно ў Adobe Photoshop
Пасля таго , як малюнак гатова для экспарту, выберыце «Экспарт> Экспарт у ...» , каб адкрыць Экспартаваць як дыялогавае акно.
Гэты дыялог Box з'яўляецца апошнім дадаткам да Photoshop і замяняе дыялогавае акно «Захаваць для Web» яны выкарыстоўвалі на працягу многіх гадоў. Калі вам усё яшчэ трэба, вы можаце знайсці яго ў экспарце поп-уніз. Гэта, па зразумелых прычынах, у цяперашні час вядомы як «Экспарт для Інтэрнэту (Спадчына)». Калі гэта ваш першы візіт у гэта дыялогавае акно, вось кароткі тур:
- Памер: Гэты слупок ўсталёўвае памер выхаднога выявы. Цікавы аспект гэтай галіне будзе павялічыць малюнак, але малюнак не будзе выглядаць як «невыразны» на прыладзе з-за велізарнай колькасці пікселяў на экране прылады.
- 1X: Націсніце на ўтрыманне гэтага і вам будзе прадстаўлены з некалькімі памерамі. 1x, 2x і 3x катэгорыі традыцыйна асацыююцца з Прывітанне ДПМ прылад ад Apple, і яны разам з некалькімі іншымі будзе падрыхтаваць выявы для Android прылад.
- Суфікс: Гэты выбар будзе паказваць памер , але гэта будзе паказана , як @ 2x або памер абраны. Гэты суфікс будзе дададзены да імя малюнка.
- + Знак: Націсніце гэтую кнопку , каб дадаць розныя памеры для вываду. У гэтым выпадку, націсніце на яго два разы і абраў 2x і 3x з выпадальнага ўніз. Гэта будзе ахопліваць практычна любую прыладу IOS.
- Trash Can: Націсніце гэтую кнопку , і выбар будзе выдалены з чаргі.
- Параметры файла: Абярыце фармат - JPG, PNG, GIF або SVG - лепш за ўсё падыходзіць да выявы. Калі памер файла з'яўляецца праблемай вы можаце таксама знізіць налады якасці.
- Памер малюнка: вы можаце змяніць фізічныя памеры малюнка.
- Палатно Памер: Вы можаце змяніць фізічныя памеры палатна малюнка.
- Метададзеныя: Вы можаце дадаць аўтарскія правы і вашу кантактную інфармацыю метададзеных малюнка.
Калі скончыце, націсніце кнопку Усе экспарту. Вам будзе прапанавана, дзе вы хочаце змясціць малюнка. Добрая звычка развівацца, гэта націснуць кнопку Стварыць тэчку і стварыць тэчку для захоўвання экспартаваных малюнкаў. Пры націску кнопкі Экспарту, вам будуць паказаны выявы ў тэчцы.
03 з 05
Як падрыхтаваць выявы для мабільных прылад у Sketch 3 з багемскае Coding
Эскіз 3, Макінтош толькі дадатак з багемскае Coding, хутка заваёўвае вядомасць сярод UX і UI дызайнераў з-за яе інтэнсіўнае ўвагу на вэб-прыкладанняў і дызайну. На самай справе Photoshop, у многіх адносінах, у няцотныя становішчы, каб гуляць «дагнаць» 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
Тэст Ранні, выпрабаванні Часта трэст Нічога, трэст No One і асабліва сябе
Тое, што вы павінны зразумець, што гэта толькі пачатак працэсу. Прагляд вашай працы ў якасці шматлікіх прылад , як вы можаце , павінны разглядацца як важная частка працэсу. Вы таксама павінны ведаць, што гэта толькі першы крок у працэсе стварэння графічных сродкаў для прыкладання або мабільных вэб-праектаў.
Выкарыстанне прататыпаў прыкладанняў з'яўляецца выдатным спосабам раскрыцця болевыя кропкі, але гэтыя ж сродкі павінны будуць быць выведзеныя для выкарыстання распрацоўшчыкам. У многіх выпадках фізічныя памеры актываў, у тым ліку іконы, будуць фізічна велізарным і не ў SVG, але PNG фармаце. На першы погляд, гэта можа здацца трохі над верхняй, але памятайце залатое правіла маштабавання малюнка: лепш згортваць, чым маштабы.
Сутнасць заключаецца ў тым, каб працаваць у цесным супрацоўніцтве з распрацоўшчыкам і выкарыстоўваць праграмнае забеспячэнне прототипирования як спосаб паказаць свой дызайнерскі задума. У рэшце рэшт, аднак, тыя ж самыя актывы павінны быць гатовыя да канчатковага прадукту і ваш распрацоўшчык мае лепшую ручку на тое, што ён ці яна мае патрэбу, чым вы.