Zobrazovanie pre mobil nie je vždy to, čo sa zdá
Stále častejšie sa grafické profesionály stávajú nielen svojou prácou v tlači, ale aj na webe a zariadeniach, ako sú iPhony, iPady, zariadenia Android a tablety so systémom Android. Na povrchu to možno považovať za "dobrú vec", pretože médiá, ktoré sa naša práca objavuje, rozširuje na digitálne obrazovky. Nevýhodou je veľký počet obrazoviek a mätúci počet rozlíšení obrazovky. Nie je nezvyčajné počuť skúsených profesionálov premýšľajúc, čo sa stalo s dňami, keď bol normou TIFF obraz s rozlíšením 300 dpi vo formáte CMYK . Oh za dobré staré dni!
Tieto dni už skončili. Teraz musíme bojovať s tým, že obrázok 200 až 200 sa môže na jednom zariadení zobraziť dobre, a napriek tomu sa objaví štvrtina veľkosti na inom a tri štvrtiny veľkosti na druhom. Všetko naozaj príde na "rozjazdy s rozlíšením zbraní", ktoré vedú výrobcovia zariadení, pretože sa snažia uviazať viac pixelov na obrazovku ako ich konkurenti.
To nás prináša k tomu, čo nazývame "Nárast príležitostí". Prípony sú tie veci - @ 2x, @ 3x - prilepené na názov obrazu. Napríklad vkladajú správny obraz na správne miesto na správnom zariadení. Potom sa ešte lepšie.
Veľká časť našej práce spočíva v práci s ikonami a pri vzostupe pohybov plochého dizajnu sa tieto veci vytvárajú v takých vektorových aplikáciách ako Illustrator a Sketch. Problémom je, že zariadenia jednoducho nemôžu vykresľovať súbory .ai alebo .eps. Musia byť konvertované na škálovateľnú vektorovú grafiku a v závislosti od aplikácie použitej na vytvorenie ikon nemusí byť ani možnosť SVG.
Potom sa ešte lepšie.
Existuje nová trieda softvéru - Prototypovacie aplikácie - ktoré sa stávajú miestom zhromažďovania predtým, ako sú vaše obrázky a ikony vytlačené do zariadení a majú tiež svoje zvláštnosti.
Tento návod prechádza medzi aplikáciami Photoshop a Sketch pre grafiku a pomocou aplikácie Adobe Experience Design na demonštráciu niekoľkých bodov bolesti medzi vašou myšlienkou a prípadným nasadením. Začnime.
01 z 05
Ako pripraviť obrázky pre mobilné zariadenia v programe Adobe Photoshop
Prvým krokom v tomto procese je poznanie vášho cieľového zariadenia alebo zariadení. V tomto prípade budete zacieľovať na iPhone 6, ktorý má plochu obrazovky širokú 375 pixelov o výšku 667 pixelov. Konštrukcia vyžaduje, aby obraz bol šírkou obrazovky.
Obrázok, ktorý sa použil, bol zastrelený vo vnútri Bernskej minsterskej katedrály v Bernu vo Švajčiarsku. Keď sa obrázok otvorí vo Photoshope, vyberte položku Image> Image Size a skontrolujte rozmery obrázka a jeho rozlíšenie. Je zrejmé, že obrázok, ktorý je 3156 x 2592 s rozlíšením 300 ppi a veľkosťou súboru 23,4 Mb jednoducho nebude fungovať.
V dialógovom okne Veľkosť obrázku znížte rozlíšenie na 100 ppi . Urobte to prvý, pretože sa zmenia aj rozmery obrázka. S rozlíšením nastavte zmenu šírky na 375 pixelov. Ak skontrolujete údaje o veľkosti obrázka, zistíte, že obraz sa zmenšil z 23,4 Mb na 338k, ktorý je pre mobilné zariadenie výhodnejší. Kliknutím na tlačidlo OK prijmite zmenu a zatvorte dialógové okno Veľkosť záberu.
02 z 05
Ako používať dialógové okno "Exportovať ako ..." v programe Adobe Photoshop
Keď je obrázok pripravený na export, vyberte "Exportovať> Exportovať ako ..." a otvoríte dialógové okno Exportovať ako.
Toto dialógové okno je nedávno pridané do programu Photoshop a nahrádza dialógové okno "Uložiť pre web", ktoré používali roky. Ak ho stále potrebujete, nájdete ho v popise exportu. Zo známych dôvodov je teraz známy ako export pre web (Legacy). Ak je to vaša prvá návšteva tohto dialógového okna, je tu krátka prehliadka:
- Veľkosť: Tento stĺpec nastavuje výstupnú veľkosť obrázka. Zaujímavým aspektom tejto oblasti je zväčšenie obrazu, ale obrázok sa na zariadení nezobrazí ako "fuzzy" kvôli obrovskému počtu pixelov na obrazovke zariadenia.
- 1X: Kliknite na tlačidlo a podržte ho a zobrazí sa niekoľko veľkostí. Kategórie 1x, 2x a 3x sú tradične spojené s zariadeniami Hi Dpi od spoločnosti Apple a spolu s niekoľkými ďalšími budú pripravovať obrázky pre zariadenia Android.
- Suffix: Táto voľba zobrazí vašu veľkosť, ale bude zobrazená ako @ 2x alebo zvolená veľkosť. Táto prípona sa pridá k názvu obrázku.
- Značka +: Kliknutím naň pridáte rôzne veľkosti výstupu. V takom prípade dvakrát kliknite na ňu a dvakrát a 3x vyberiete zo zoznamu. To bude zahŕňať prakticky každé zariadenie so systémom iOS.
- Kôš koša: Kliknite na toto a voľba sa odstráni z zostavy.
- Nastavenia súborov: Vyberte formát - jpg, png, gif alebo svg - ktorý najlepšie vyhovuje obrázku. Ak je veľkosť súboru problémom, môžete tiež znížiť nastavenia kvality.
- Veľkosť obrázku: môžete zmeniť fyzické rozmery obrázka.
- Veľkosť plátna: Môžete zmeniť fyzické rozmery plátna obrázka.
- Metadáta: Do metadát obrázka môžete pridať autorské práva a svoje kontaktné informácie.
Po dokončení kliknite na tlačidlo Exportovať všetko. Zobrazí sa miesto, kam chcete umiestniť obrázky. Dobrý zvyk, ktorý sa má vyvíjať, je kliknúť na tlačidlo Nová zložka a vytvoriť priečinok na uloženie exportovaných obrázkov. Po kliknutí na tlačidlo Exportovať sa zobrazia obrázky v priečinku.
03 z 05
Ako pripraviť obrázky pre mobilné zariadenia v náčrte 3 z českého kódovania
Aplikácia Sketch 3, aplikácia od Bohemian Coding iba pre počítače Macintosh, rýchlo získava význam medzi dizajnérmi UX a UI kvôli intenzívnemu zameraniu na dizajn webov a aplikácií. V skutočnosti je Photoshop, v mnohých ohľadoch, v mimoriadnej pozícii, že musí hrať "catch up" s Sketch.
Pri príprave obrázka pre mobily v náčrte vyberte obrázok na kreslenej doske a kliknite na tlačidlo Vykonať exportovateľné v spodnej časti panelu Vlastnosti . Otvorí sa dialógové okno Export. Kliknite na znamienko + a pridajte verzie 2x a 3x a tiež pridajte prípony. Dostupné formáty sú PNG, JPG, TIF, PDF, EPS a SVG. V tomto prípade zvoľte JPG. Kliknite na tlačidlo Exportovať a zacieľte alebo vytvorte priečinok na uloženie rôznych exportovaných obrázkov.
04 z 05
Prečo potrebujete vytvoriť tri (alebo viac) verzie obrázka
V mnohých ohľadoch je mobilný trh "divokým západom" rezolúcií a jedna veľkosť určite nezodpovedá všetkým. Vo vyššie uvedenom príklade z aplikácie Adobe Experience Design je obrázok umiestnený na 2 umeleckých doskách iPhone 6 a grafickom zariadení zariadenia Android. Všimnite si, ako sa zdá, že 1x verzia vľavo je polovičná veľkosť. To je presne tak, ako by sa obraz objavil na iPhone 6 s obrazovkou sietnice. Verzia 2x sa perfektne hodí a verzia Androidu sa vypína z obrazovky. Vašou voľbou je buď zmena veľkosti obrázka alebo export obrázka z Photoshopu s inou veľkosťou.
05 z 05
Skúste skoro, často sa otestujte, nič nedôverujte, nikoho a zvlášť sami nevěřte
Čo musíte pochopiť, je to len začiatok procesu. Zobrazenie práce na čo najväčšom zariadení, ako je to možné, sa musí považovať za dôležitú súčasť pracovného postupu. Takisto musíte mať na pamäti, že ide len o prvý krok v procese vytvárania grafických prostriedkov pre webové aplikácie alebo mobilné webové projekty.
Použitie prototypových aplikácií je skvelým spôsobom odhalenia bodov bolesti, ale tie isté aktíva budú musieť byť výstupné na použitie pre vývojárov. V mnohých prípadoch fyzické rozmery majetku, vrátane ikon, budú fyzicky obrovské a nie vo formáte svg, ale png. Na prvý pohľad sa to môže zdať trochu nad hornou stranou, ale pamätajte si na zlaté pravidlo zmenšovania obrázkov: je lepšie zmenšiť ich rozsah, než je rozširovať.
Spodnou líniou je úzka spolupráca s vaším vývojárom a použitie prototypového softvéru ako spôsobu zobrazenia vášho dizajnu. Napokon, tie isté aktíva budú musieť byť pripravené na konečný produkt a váš vývojár má lepšie zvládnuť to, čo potrebuje, než vy.