Vaizdavimas mobiliesiems ne visada yra tas, kas atrodo
Grafikos specialistai tampa vis labiau įpratę, kad jų darbas atsiras ne tik spausdintoje, bet ir žiniatinklyje bei įrenginiuose, pvz., "IPhone", "iPad", "Android" įrenginiuose ir "Android" planšetiniuose kompiuteriuose. Paviršiuje tai gali būti laikoma "geru dalyku", nes žiniasklaida, mūsų darbas atrodo, plečiasi į skaitmeninius ekranus. Neigiama pusiausvyra - tai daugybė ekranų ir painus ekrano rezoliucijų skaičius. Nenuostabu, kad išgirsti pagardintus pliusus įdomu, kas atsitiko su dienomis, kai CMYK formatu buvo 300 dpi TIFF atvaizdas . Oi senų gerų dienų!
Tos dienos baigėsi. Dabar turime pasipriešinti tai, kad 200 200 atvaizdas gali atrodyti gerai viename įrenginyje, bet dar ketvirčio dydis kitam ir trims ketvirtadaliui yra dar vienas. Tai iš tikrųjų priklauso nuo "Nutraukimo ginklų lenktynės", kurią vykdo prietaisų gamintojai, nes jie bando įstrigti daugiau taškų ekrane nei jų konkurentai.
Tai atveda prie to, ką mes vadiname "Išpuolių kilimas". Priedai yra tokie dalykai, kaip @ 2x, @ 3x - su paveikslėlio pavadinimu. Pavyzdžiui, jie iš esmės tinkamoje vietoje įrengia tinkamą vaizdą. Tada jis tampa dar geriau.
Daug mūsų darbų reikalauja dirbti su piktogramomis ir, plėtojant Flat dizaino judėjimą, tokie dalykai yra sukurti tokiose vektoriniu piešimo programose kaip Illustrator ir Sketch. Problema yra tai, kad įrenginiai tiesiog negali pateikti .ai ar .eps failų. Jas reikia konvertuoti į " Scalable Vector Graphics" ir, priklausomai nuo piktogramų kūrimo programos, gali būti, kad net nėra SVG parinkties.
Tada jis tampa dar geriau.
Yra nauja klasė programinės įrangos - "Prototyping" programos, kurios tampa surinkimo tašku, kol jūsų atvaizdai ir piktogramos bus nukreipiami į įrenginius, ir jie turi ir jų ypatybes.
Šis pamoka pereina tarp "Photoshop" ir "Sketch" grafinių elementų ir " Adobe Experience Design", siekiant parodyti keletą skausmo taškų tarp jūsų idėjos ir galimo diegimo. Pradėkime.
01 iš 05
Kaip paruošti atvaizdus mobiliesiems įrenginiams "Adobe Photoshop"
Pirmasis žingsnis šiame procese yra žinojimas apie tikslinį įrenginį ar įrenginius. Tokiu atveju būsite nukreipti į "iPhone 6", kurio ekrano plotas yra 375 pikselių ir 667 pikselių. Dizainas reikalauja, kad vaizdas būtų ekrano plotis.
Naudojamas vaizdas buvo nufilmuotas Berno Minsterio katedroje Berne, Šveicarijoje. Kai vaizdas bus atidarytas Photoshop, pasirinkite Image> Image Size, kad patikrintumėte vaizdo dydį ir jo raišką. Akivaizdu, kad 3156 x 2592 atvaizdas, kurio raiška yra 300 ppi, o failo dydis - 23,4 MB, tiesiog neveiks.
Dialogo lange Vaizdo dydis viduje sumažinkite skiriamąją gebą iki 100 ppi . Atlikite tai pirma, nes vaizdo matmenys taip pat pasikeis. Nustačius rezoliuciją, pakeiskite plotą iki 375 pikselių. Jei patikrinsite Duomenų dydžio duomenis, pastebėsite, kad vaizdas sumažėjo nuo 23,4 Mb iki labiau mobiliuoju telefonu 338k. Spustelėkite "Gerai", kad patvirtintumėte pakeitimą ir uždarytumėte dialogo langą "Vaizdo dydis".
02 iš 05
Kaip naudoti dialogo langą "Eksportuoti kaip ..." "Adobe Photoshop"
Kai vaizdas bus paruoštas eksportuoti, pasirinkite "Eksportuoti"> "Eksportuoti kaip ...", kad atidarytumėte dialogo langą "Eksportuoti kaip".
Šis dialogo langas yra naujausias "Photoshop" papildymas ir pakeičia dialogo langelį "Išsaugoti žiniatinklį", kurį jie naudoja daugelį metų. Jei to vis dar reikia, galite jį rasti "Eksportuoti". Dėl akivaizdžių priežasčių dabar vadinama "Eksportuoti žiniatinklį (" Legacy "). Jei tai pirmasis jūsų apsilankymas šiame dialogo lange, čia pateikiama trumpa apžvalga:
- Dydis: šiame stulpelyje nustatomas vaizdo išvesties dydis. Įdomus šios srities aspektas - jis padidins vaizdą, bet vaizdas nebus rodomas kaip "neaiškus" įrenginyje, nes prietaiso ekrane yra daugybė taškų.
- 1X: Paspauskite "laikykite" ir jums bus pateikiami keli dydžiai. "1x", 2x ir 3x kategorijos yra tradiciškai susietos su "Hi Dpi" įrenginiais iš "Apple", o kartu su keletu kitų bus paruošti atvaizdus "Android" įrenginiams.
- Sufiksas: šis pasirinkimas parodys jūsų dydį, bet jis bus rodomas kaip @ 2x arba pasirinktas dydis. Ši priesaga bus pridėta prie vaizdo pavadinimo.
- + Ženklas: spustelėkite šią nuorodą, kad galėtumėte pridėti įvairius dydžius. Šiuo atveju spustelėkite jį du kartus ir pasirinkę 2x ir 3x iš pop-up. Tai apims beveik bet kurį "iOS" įrenginį.
- Šiukšliadėžė: spustelėkite šią ir pasirinkimas pašalinamas iš lineupo.
- Failo nustatymai: pasirinkite formatą - jpg, png, gif arba svg - geriausiai tinka vaizdui. Jei failo dydis yra susirūpinimas, galite sumažinti ir kokybės nustatymus.
- Vaizdo dydis: galite pakeisti fizinius vaizdo matmenis.
- Drobių dydis: galite pakeisti fizinio dydžio vaizdą drobė.
- Metaduomenys: galite įtraukti autorių teises ir kontaktinę informaciją į vaizdo metaduomenis.
Baigę spustelėkite mygtuką "Eksportuoti viską". Jums bus klausiama, kur norite patalpinti vaizdus. Gera įprotis plėtoti yra paspausti mygtuką "Naujas aplankas" ir sukurti aplanką, kuriame būtų eksportuojami vaizdai. Kai paspausite Eksportuoti, bus rodomi aplanke esantys vaizdai.
03 iš 05
Kaip paruošti atvaizdus mobiliems įrenginiams 3 eskizas iš Bohemijos kodavimo
"Sketch 3", "Bohemian Coding" tik "Macintosh" programa, greitai populiarėja tarp "UX" ir "UI" dizainerių, nes jis intensyviai susitelkia ties žiniatinklio ir programų kūrimu. Tiesą sakant, "Photoshop" daugeliu atžvilgių yra nepakartojama pozicija, kai reikia žaisti "pasivyti" su "Sketch".
Norėdami paruošti vaizdą, skirtą mobiliesiems, esančiame eskizijoje, pasirinkite meniu lape esantį vaizdą ir spustelėkite parinktį Padaryti eksportuojamais, esančiu skydelio "Ypatybės" apačioje . Tai atidarys dialogo langą Eksportuoti. Spustelėkite piktogramą +, jei norite pridėti 2x ir 3x versijas, taip pat pridėkite priesagas. Galimi formatai yra PNG, JPG, TIF, PDF, EPS ir SVG. Tokiu atveju pasirinkite JPG. Spustelėkite mygtuką Eksportuoti ir taikykite arba sukurkite aplanką, kuriame laikomi įvairūs eksportuojami vaizdai.
04 iš 05
Kodėl jums reikia sukurti tris (ar daugiau) vaizdų versijas
Daugeliu atžvilgių "Mobile" rinka yra "Wild West" rezoliucija, o vienas dydis tikrai netinka visiems. Ankstesnėje "Adobe Experience Design" pavyzdyje vaizdas yra ant 2 "iPhone 6" montuotojų ir "Android" įrenginio modulio. Atkreipkite dėmesį, kad 1x versija kairėje pusės dydžio. Tai yra būtent tai, kaip vaizdas būtų rodomas iPhone 6 su tinklainės ekranu. "2x" versija puikiai tinka ir "Android" versija eina iš ekrano. Jūsų pasirinkimas - tai mastelio atvaizdas arba nuotrauka iš Photoshop kito dydžio.
05 iš 05
Ankstyvas testas, dažnai testavimas, nieko patikėkite, nė vieno patikėkite ir nepasitikėkite savimi
Ką reikia suprasti, tai tik proceso pradžia. Jūsų darbo stebėjimas tiek daug prietaisų, kiek galite, turi būti laikomas svarbiu darbo eigos etapu. Taip pat turite žinoti, kad tai yra tik pirmas žingsnis kuriant programos ar mobiliojo interneto projektų grafikos turinį.
Naudojant prototipų programas yra puikus būdas atskleisti skausmo taškus, tačiau tas pats turtas turi būti išvestas naudoti kūrėjui. Daugeliu atvejų fiziniai turto matmenys, įskaitant piktogramas, bus fiziškai dideli, o ne svg, bet png formatu. Iš pirmo žvilgsnio tai gali atrodyti šiek tiek virš viršaus, bet atsiminkite auksinę taisyklę dėl mastelio keitimo: geriau masto nei mastelio.
Bottom line yra glaudus bendradarbiavimas su jūsų kūrėju ir prototipų programinės įrangos naudojimas kaip jūsų dizaino ketinimų rodymo būdas. Galų gale, tačiau tas pats turtas turės būti paruoštas galutiniam produktui, o jūsų kūrėjas turi geriau valdyti tai, ko jam reikia, o ne jums.