Mugikorentzako irudiak ez dira beti
Pixel grafikoek gero eta ohikoagoa izaten jarraitzen dute inprimategian baina baita webean eta gailuetan iPhones, iPads, Android gailuak eta Android pilulak bezalako gailuak ere. Azalean, "gauza ona" ikus daiteke, komunikabideek gure lana pantaila digitaletara zabaltzen baita. Arazoren bat pantailen kopurua eta pantaila-bereizmen nahasgarriak dira. Ez da arraroa izoztutako pros gaiei buruz galdetzen zer gertatu zen egunetan 300 dpi bereizmen TIFF irudia CMYK formatuan izan zen normalean. Oh zahar onak!
Egun horiek amaitu dira. Gaur egun, 200 eta 200 irudiek itxura ona izan dezakete gailu batean eta hiru dimentsioko beste hiruhileko tamainan agertzen dira oraindik beste batean. Egia esan, gailuen fabrikatzaileek "Ebazpen Arma Arrakastatsua" deitzen diote lehiakideek baino pixel gehiago nahasteko.
Honek "Suffix Rise" deituko dugu. Atzizkiak gauza hauek dira: @ 2x, @ 3x - irudi baten izenarekin lotuta. Funtsean, esate baterako, eskuineko irudia eskuineko lekuan jarri eskuineko gailuan. Gero hobe da.
Gure lan asko ikonoekin lanean ari dira, eta Flat Design mugimenduaren gorakada, marrazkia marrazteko aplikazioak Illustrator eta Sketch bezalakoak dira. Arazoa gailuak ezin dira .ai edo .eps fitxategiak errendatu. Bektore grafiko eskalagarriak bihurtu behar dira eta, ikonoak sortzeko erabilitako aplikazioen arabera, ezingo da SVG aukerarik izan.
Gero hobe da.
Softwarearen klase berri bat dago: Prototyping aplikazioak - muntatze-puntua bihurtzen ari dira, zure irudiak eta ikonoak gailuetara daramatzate eta bere berezitasunak ere badituzte.
Tutorial hau Photoshop eta Sketch-etik grafikoen eta Adobe Experience Design-en artean mugitzen da, zure ideiaren eta ondorengo hedapenaren arteko muga batzuk erakusteko. Has gaitezen.
05eko 1ean
Adobe Photoshop gailu mugikorren irudiak nola prestatu
Prozesu honen lehen urratsa zure helburuko gailua edo gailuak ezagutzea da. Kasu honetan, iPhone 6ra bideratuko duzu, 375 pixeleko zabalera duen pantaila-eremua, 667 pixeleko altuera duena. Diseinuak irudia pantailaren zabalera izango du.
Bern Minster katedrala Bernen, Suitzan, erabili beharreko irudia. Irudia Photoshop-en irekitzen denean, hautatu Irudia> Irudiaren tamaina irudia eta bere bereizmena neurtzeko. Jakina, 3156 x 2592 irudia duen 300 Ppi bereizmenarekin eta 23,4 Mb-ko fitxategi-tamaina, besterik gabe, ez du funtzionatuko.
Irudiaren tamaina koadroaren barruan, murriztu Ebazpena 100 ppi . Egin hau lehenengoa irudiaren dimentsioak ere aldatuko delako. Ebazpen multzoarekin, aldatu 375 pixelera. Irudiaren tamainaren datuak egiaztatzen badituzu, irudia 23,4 Mb-etara murriztuko da eta mugikorragoa 338k-rako. Egin klik Ados aukeran aldaketak onartzeko eta Irudiaren tamaina elkarrizketa koadroa ixteko.
02 de 05
Nola erabili "Esportatu gisa ..." Elkarrizketa koadroa Adobe Photoshop-n
Irudia esportatzeko prest dagoenean, hautatu "Esportatu> Esportatu gisa ..." , Esportatu elkarrizketa koadroa irekitzeko.
Elkarrizketa koadro hau Photoshop-era gehitu da eta urteak daramatzaten "Save For Web" elkarrizketa kutxa ordezkatzen du. Behar baduzu oraindik, Esportatu pop down aurki dezakezu. Arrazoi esanguratsuak direla eta, "Webra esportatzea (legacy)" izenez ezagutzen da. Elkarrizketa koadro hau zure lehen bisita bada, hemen laburbilduko da:
- Tamaina: zutabe honek irudiaren irteeraren tamaina ezartzen du. Eremu honen alderdi interesgarria irudia handituko du baina irudia ez da agertuko "fuzzy" gailuan gailuaren pantailaren pixel kopuru handia delako.
- 1X: Egin klik mantendu hau eta hainbat neurri aurkeztuko zaizu. 1x, 2x eta 3x kategoriek Apple-ren Hi Dpi gailuekin lotuta daude tradizionalki eta beste batzuekin batera, Android-eko irudiak prestatuko dituzte.
- Sufixo: Aukera honek zure tamaina erakutsiko du, baina @ 2x gisa erakutsiko da edo tamaina hautatuko da. Suffix hau irudien izenari gehituko zaio.
- The + sign: Egin klik hemen irteerarako tamaina ezberdinak gehitzeko. Kasu honetan, egin klik bi aldiz eta aukeratu 2x eta 3x pop down. IOS gailu ia guztiak estaltzen ditu.
- Trash Can: Egin klik hau eta aukeraketa lerroan kenduko da.
- Fitxategien ezarpenak: aukeratu formatua - jpg, png, gif edo svg - irudiarekin hobekien egokitzen dena. Fitxategiaren tamaina kezkagarria bada Kalitatea ezarpenak murriztu ditzakezu.
- Irudiaren tamaina: irudiaren dimentsio fisikoak alda ditzakezu.
- Canvas Size: Irudiaren mihiseen dimentsio fisikoak alda ditzakezu.
- Metadatuak: copyrightaren eta zure kontaktuen informazioa gehi ditzakezu irudien metadatuetara.
Amaitutakoan, egin klik Exekutatu guztiak botoian. Irudiak kokatzeko nahi duzun galdetuko zaizu. Garatu beharreko ohitura ona da karpeta berria botoia sakatzea eta esportatutako irudiak gordetzeko karpeta bat sortzea. Exportazioa sakatzen duzunean, karpetan dauden irudiak erakutsiko dira.
05/03
Nola Sketch gailu mugikorren irudiak prestatzea 3 Bohemiako kodekutik
Sketch 3, Bohemian Coding aplikazioko Macintosh-eko aplikazio bakarra, UX eta UI diseinatzaileen artean nabarmentzen ari da, webean eta aplikazioen diseinuan arreta handia eskainiz. Izan ere, Photoshop, modu askotan, Sketch-ekin "harrapatzeko" jolastu beharra dago.
Sketch mugikorrerako irudi bat prestatzeko, hautatu artelanaren irudia eta egin Exportable botoia Propietateen panelaren behealdean . Esportatu elkarrizketa koadroa irekiko du. Sakatu + zeinuaren 2x eta 3x bertsioak gehitzeko eta gehitu atzizkiak ere. Formatu eskuragarriak PNG, JPG, TIF, PDF, EPS eta SVG dira. Kasu honetan, hautatu JPG. Egin klik Esportatu botoian eta esportatu nahi dituzun irudiak kokatzeko helburua edo sortu karpeta bat.
04 de 05
Zergatik sortu behar dituzun hiru (edo gehiago) bertsioen bertsioak
Zentzu askotan, mugikorreko merkatua "Mendebaldeko Mendebaldea" ebazpenak da eta neurri batean behin betiko ez dator bat. Adobe Experience Design-en adibide goian, irudia 2 iPhone 6 artelanen eta Android gailuaren artelanen gainean jartzen da. Kontutan izan ezkerreko 1x bertsioa tamaina erdia dela. Hau da zehazki nola agertuko litzateke irudia iPhone batean 6 erretilu-pantailan. 2x bertsioa ezin hobeto egokitzen da eta Android bertsioa pantailatik desagertuko da. Aukeratzea irudia eskalatzea da edo Photoshop-eko irudia tamaina desberdinean esportatzea da.
05 de 05
Proba goiztiarra, probatu sarritan, fidatu ezer, Fidatu inork ez eta bereziki zeure buruari
Ulertu behar duzuna hau da, prozesuaren hasiera besterik ez da. Zure lana ikusi ahal duzun gailu guztietan ikusi ahal izango da laneko funtsezko elementu gisa. Halaber, kontuan izan behar da aplikazioa edo web mugikorreko proiektuetarako grafikoen aktiboak sortzeko prozesuaren lehen urratsa.
Prototipoen aplikazioak erabiltzea mina-puntuak agerian jartzeko modu bikaina da, baina garatzaileek beraiek erabili beharreko irteera bera izango dute. Kasu askotan, aktiboen dimentsio fisikoak, ikonoak barne, fisikoki erraldoiak izango dira eta ez SVG baina png formatuan. Lehen begiratuan, goiko aldean pixka bat badirudi, baina irudi eskalatzeko urrezko araua gogoratzen da: hobe da eskalatzea eskalatzea baino.
Beheko lerroa zure sustatzailearekin lan egitea da eta prototipo softwarea zure diseinuaren asmoa erakusteko modu gisa erabiltzea da. Azkenean, ordea, aktibo berak azken produkturako prest egon behar du eta zure garatzaileek zu baino hobeto kudeatzen du.