Příprava obrázků pro mobilní zařízení

Zobrazování pro mobilní zařízení není vždy to, co se zdá

Pro grafiky se stává stále častější nejen to, že se jejich práce objeví v tisku, ale také na webu a zařízeních, jako jsou iPhony, iPady, zařízení Android a tablety Android. Na povrchu to může být považováno za "dobrou věc", protože média, která se objevuje na rozšiřování digitálních obrazovek. Nevýhodou je naprostý počet obrazov a matoucí počet rozlišení obrazovky. Není neobvyklé slyšet zkušené profesionály, kteří se zajímali o to, co se stalo s dny, kdy byl normou rozlišení 300 dpi TIFF ve formátu CMYK . Ach za staré dobré časy!

Tyto dny skončily. Nyní musíme vypořádat se skutečností, že obraz 200 x 200 se může na jednom zařízení objevit dobře, přesto se na druhém objeví čtvrtina a druhá čtvrtina. Všechno skutečně přichází k "závodu pro vyřešení zbraní", které vedou výrobci zařízení, když se snaží zaseknout více pixelů na obrazovku než jejich konkurenti.

To nás přivádí k tomu, co nazýváme "Vzestup příjmů". Přípony jsou ty věci - @ 2x, @ 3x - připoutány k jménu obrázku. V podstatě například vkládají správný obrázek na správné místo na správném zařízení. Pak je ještě lepší.

Spousta naší práce spočívá v práci s ikonami a při vzestupu pohybu plochého designu se tyto věci vytvářejí v aplikacích vektorových výkresů jako Illustrator a Sketch. Problémem je, že zařízení jednoduše nemohou vykreslit soubory .ai nebo .eps. Musí být převedeny na škálovatelnou vektorovou grafiku a v závislosti na aplikaci použité k vytvoření ikon nemusí být ani možnost SVG.

Pak je ještě lepší.

Existuje nová třída softwaru - Prototypové aplikace - které se stávají místem shromažďování předtím, než jsou vaše obrázky a ikony vytlačeny do zařízení a mají také své zvláštnosti.

Tento tutoriál se pohybuje mezi aplikací Photoshop a Sketch pro grafiku a pomocí programu Adobe Experience Design, který demonstruje několik bodů bolesti mezi vaší myšlenkou a případným nasazením. Začněme.

01 z 05

Jak připravit obrázky pro mobilní zařízení v aplikaci Adobe Photoshop

Změňte rozlišení dříve, než změníte rozměry při použití dialogového okna Velikost obrazu. Zdvořilost Tom Green

Prvním krokem v tomto procesu je znát vaše cílové zařízení nebo zařízení. V takovém případě budete cílit na iPhone 6, který má plochu obrazovky o šířce 375 pixelů o 667 pixelů vysokou. Návrh požaduje, aby obraz byl šířkou obrazovky.

Obrázek, který se má použít, byl zastřelen uvnitř Bernské minsterské katedrály v Bernu ve Švýcarsku. Jakmile se obrázek otevře ve Photoshopu, zvolte Image> Image Size a zkontrolujte rozměry obrázku a jeho rozlišení. Je zřejmé, že obraz, který je 3156 x 2592 s rozlišením 300 ppi a velikostí souboru 23,4 Mb jednoduše nebude fungovat.

V dialogovém okně Velikost obrázku snížíte rozlišení na 100 ppi . Udělejte to nejdříve, protože se změní také rozměry snímku. S nastavením Rozlišení změňte šířku na 375 pixelů. Pokud zkontrolujete údaje o velikosti obrázku, zjistíte, že obraz se zmenšil z 23,4 Mb na 338k, který je mobilnější. Klepnutím na tlačítko OK přijměte změnu a zavřete dialogové okno Velikost obrázku.

02 z 05

Jak používat dialogové okno "Exportovat jako ..." v aplikaci Adobe Photoshop

Nový dialog Exportovat jako nahrazuje funkci Uložit pro web ve Photoshopu. Zdvořilost Tom Green

Jakmile je obrázek připraven k exportu, vyberte "Exportovat> Exportovat jako ..." a otevřete dialog Exportovat jako.

Toto dialogové okno je nedávno přidané do Photoshopu a nahrazuje dialogové okno "Uložit pro web", které používají roky. Pokud ji stále potřebujete, můžete jej najít v rozbalovací nabídce Export. Ze známých důvodů je nyní známo, že je to "Export pro web (Legacy)". Pokud se jedná o svou první návštěvu tohoto dialogu, je zde krátká prohlídka:

Po dokončení klikněte na tlačítko Exportovat vše. Budete dotázáni, kam chcete obrázky umístit. Dobrým zvykem, které chcete vyvíjet, je klepnout na tlačítko Nová složka a vytvořit složku pro uložení exportovaných obrázků. Po klepnutí na tlačítko Exportovat se zobrazí obrázky ve složce.

03 ze dne 05

Jak připravit obrázky pro mobilní zařízení v náčrtu 3 z českého kódování

Photoshop je v nepřehledné pozici při hraní & # 34; s náčrtem, pokud jde o návrh na mobilní zařízení. Zdvořilost Tom Green

Aplikace Sketch 3, aplikace Macintosh od Bohemian Coding, rychle získává význam mezi návrháři UX a UI kvůli intenzivnímu zaměření na návrh webových aplikací a aplikací. Ve skutečnosti je Photoshop v mnoha ohledech v podivné pozici, kdy musel hrát "dohnat" se Sketch.

Chcete-li připravit obrázek pro mobily ve Skici, vyberte obrázek na kreslicí ploše a klikněte na tlačítko Vyrobit exportabilní v dolní části panelu Vlastnosti . Otevře se dialogové okno Exportovat. Klepněte na znaménko + pro přidání verzí 2x a 3x a přidejte také přípony. Dostupné formáty jsou PNG, JPG, TIF, PDF, EPS a SVG. V takovém případě zvolte JPG. Klepněte na tlačítko Exportovat a zacílete nebo vytvořte složku pro uložení různých exportovaných snímků.

04 z 05

Proč potřebujete vytvořit tři (nebo více) verze obrázku

Když vše ostatní selže při použití prototypového softwaru použijte verzi s příponou & # 64; 2x. Zdvořilost Tom Green

V mnoha ohledech je mobilní trh "divokým západem" rezolucí a jedna velikost rozhodně nesedí. Ve výše uvedeném příkladu z aplikace Adobe Experience Design je obraz umístěn na 2 kresbách iPhone 6 a kreslicím plátně zařízení Android. Všimněte si, jak se zdá, že 1x verze vlevo je polovina velikosti. Přesně tak se obraz objevuje na iPhone 6 s obrazovkou sítnice. Verze 2x se perfektně hodí a verze Android se vypne z obrazovky. Vaše volba je buď zmenšit velikost obrazu nebo exportovat obrázek mimo Photoshop v jiné velikosti.

05 z 05

Testujte časně, často otestujte, nikomu nevěřte, nevěřte nikomu a hlavně sobě

Neexistuje žádná velikost, která by vyhovovala všem řešením a potřebujete testovat na co nejvíce zařízení. Zdvořilost Tom Green

Co musíte pochopit, je to jen začátek procesu. Prohlížení práce na co nejvíce zařízeních, jak je to možné, musí být považováno za zásadní součást pracovního postupu. Také si musíte být vědomi, že je to jen první krok v procesu vytváření grafických prostředků pro projekty webových aplikací nebo mobilních webových stránek.

Použití prototypových aplikací je skvělým způsobem, jak odhalit body bolesti, ale tytéž výhody musí být vygenerovány pro použití vývojářem. V mnoha případech budou fyzické rozměry majetku, včetně ikon, fyzicky obrovské a nebudou ve formátu svg, ale png. Na první pohled se to může zdát trochu přes vrchol, ale pamatujte si na zlaté pravidlo měřítka obrázků: je lepší škálovat dolů než zvětšit.

Spodní čára je úzce spolupracovat s vaším vývojářem a používat prototypový software jako způsob, jak projevit svůj záměr návrhu. Nakonec však budou muset být tytéž aktiva připraveny na konečný produkt a tvůj vývojář má lépe zvládnout to, co potřebuje než vy.