Diagram fir Handy ass net ëmmer wat et schéngt
Et gëtt ëmmer méi verbreeden fir Grafikpräisser ze hunn net nëmmen hir Wierker a Printen, awer och op Web a Geräter wéi iPhones, iPads, Android Apparater a Android Tabletten. Op der Uewerfläch kann dëst als "gutt Saach" gesi ginn wéi d'Medien, déi eis Aarbecht erweidert op d'Erweiderung vun digitale Screens. De Downside ass d'bloos Zuel vu Screens an déi verréckelter Zuel vu Screen-Resolutiounen. Et ass net onkomplizéiert fir erfreet erfuerscht ze héieren wat iwwer d'Deeg geschitt ass, wann eng 300 dpi TIFF-Bildausbildung am CMYK- Format d'Norm war. Oh fir déi gudd al Dagen!
Déi Deeg sinn iwwer. Mir mussen elo mat der Tatsaach konfrontéieren, datt e 200 bis 200 Bild kéint op engem Apparat sinn an awer nach véier Gréisst op enger anerer an dräimol Véiergréisst op engem aneren erscheint. Et ass alles richteg op de "Resolution Arms Race" ginn vun de Geräterhersteller gepackt, wéi se versichen, méi Pixel an e Schirm ze jäizen wéi hir Konkurrenten.
Dëst bréngt eis zu wat mir "The Rise Of The Suffixes" nennen. D'Suffixes sinn dës Saachen - @ 2x, @ 3x - gekuckt op den Numm vum Bild. Si si wesentlech, zum Beispill, de richteg Bild an der richtiger Plaz op de richtegt Gerät ze setzen. Duerno gëtt et besser.
Vill vun eiser Aarbecht involvéiert d'Zesummenaarbecht mat Symbolen a mat der Opstig vu der Flächentechnik Bewegung dës Saachen sinn an esou Vektor Zeechnunge benotzt wéi Illustrator a Sketch. De Problem ass Apparater einfach net ze maachen .ai oder .eps files. Si brauchen ze konvertéieren zu Scalable Vector Graphics an, jee no der Applikatioun déi d'Symboler erstallt hunn, kënnt et net och e SVG-Optioun.
Duerno gëtt et besser.
Et ass eng nei Klass vu Software- Prototyping Applikatiounen - déi sinn de Montagepunkt, ier Äert Bilden an Symboler fir Geräter erausgeschéckt ginn an se hunn hir Besonnerheet och.
Dës Tutorial féiert tëscht Photoshop an Sketch fir d'Grafik an benotzt Adobe Experience Design , fir e puer vun de Schmerzwäiten tëscht Ärer Iddi a spéiderer Bewerbung ze demonstréieren. Looss eis un.
01 vum 05
Wéi preparéiere Biller fir mobilen Apparater am Adobe Photoshop
Deen éischte Schrëtt an dësem Prozess weess Ären Zielapparat oder Apparater. An dësem Fall wäerte Dir d'iPhone 6 uginn, déi e Bildschinn vu 375 Pixelen breet ass mat 667 Pixel héich. Den Design rufft d'Bild fir d'Breet vum Écran ze sinn.
D'Bild déi benotzt ka gouf an der Berner Minster Kathedrale zu Bern an der Schwäiz erschoss. Sobald d'Bild an Photoshop eröffnet hutt, wielt d'Bild> Bildgréisst op fir d'Dimensionen vum Bild an hir Resolutioun ze kontrolléieren. Natierlech gëtt e Bild, deen 3156 x 2592 mat enger Resolutioun vun 300 ppi an eng Dateigréisst vun 23,4 Mb einfach net funktionnéiert.
Innere vum Dialogfeld "Bildgréisst" reduzéieren d'Resolutioun op 100 ppi . Maacht dat als éischt, datt d'Bildausdehnung och ännert. Mat der Resolutioun setzt d'Breet vun 375 Pixelen. Wann Dir d'Bildgréisst Donnéeë préift, da gesitt Dir datt de Image vu 23,4 Mb op e méi mobil mobil 338k schrumpelt huet. Klickt op OK fir d'Verännerung ze akzeptéieren an den Dialog "Bildgréisst" ze schließen.
02 vum 05
Wéi benotzt de "Export As ..." Dialogbox am Adobe Photoshop
Sot d'Bild virbereet fir den Export, wielt "Export> Export As ..." fir den Export als Dialogfeld opzemaachen.
Dësen Dialogbox ass e rezenten Zousatz op Photoshop a ersetzt den Dialog "Späichere fir Web", wou se all Joër benotzt hunn. Wann Dir se nach ëmmer brauch, kënnt Dir et an der Pop-Export exportéieren. Et ass aus evidenten Grënn, elo bekannt als "Export For Web (Legacy)". Wann dat eent éischt Visite zu dësem Dialogfeld ass, ass eng kleng Tour:
- Gréisst: Dës Kolonn huet d'Ausgabgréisst vum Bild. Den interessanten Aspekt vun dëser Géigend gëtt et de Bild vergréissere mä de Bild gëtt net als "Fuzzy" op dem Apparat gewisen wéinst der grousser Zuel vu Pixelen am Bildschierm vum Apparat.
- 1X: Klickt op dësst Haische an Dir kënnt mat enger Rei vu Gréissten presentéiert ginn. Déi 1x, 2x a 3x Kategorien ginn traditionell mat Hi Dpi-Geräter vun Apple verknäppt a si zesumme mat e puer anerer viru Virbilder fir Android Apparater virbereeden.
- Suffix: Dës Wiel wäert Är Gréisst weisen, awer et gëtt als @ 2x oder d'Gréisst ausgewielt. Dëse Suffix gëtt dem Bildbeam benotzt.
- D'Zeechen: Klickt hei fir verschidde Gréisste fir erauszefannen. An dësem Fall klickt se zweemol a wählt 2x a 3x aus der Pop Pop. Dëst wäert praktesch all iOS Apparat erënneren.
- Den Trash Can: Klickt dës an d'Wiel ass aus der Opstellung geläscht ginn.
- Datei-Parameteren: Kuckt de Format - jpg, png, gif oder svg - am beschten am Bild. Wann d'Dateigréisst eng Suerg ass, kënnt Dir och d'Qualitéitenexistenz reduzéieren.
- Bildgréisst: Dir kënnt d'physikalesch Dimensiounen vum Bild änneren.
- Mauergréisst: Dir kënnt déi kierperlech Dimensioun vum Bild Canvas änneren.
- Metadaten: Dir kënnt d'Urheberrechter an Är Kontaktinformatioun un d'Metadaten vum Image setzen.
Klickt op d'Schaltwierk Export All. Dir kënnt gefroot ginn wou Dir d'Biller wëllt setzen. Eng gutt Gewunnechkeet fir ze developpéieren ass op d'New Folder Knäppchen a schreift e Fichier fir déi exportéiert Biller ze halen. Wann Dir op Export klickt, ginn Dir d'Biller an der Lëscht ze gesinn.
03 vun 05
Wéi preparéiert Biller fir Mobile Apparater an Skiz 3 vun der béiser Kodéierung
Sketch 3, eng Macintosh-Applikatioun nëmme vu böhmesche Codéierungen, ass séier ënnert de UX- a UI-Designern opgrond vu sengem intensiven Fokus am Web- an App-Design. Tatsächlech ass Photoshop op ville Weisen an der ongerueden Positioun, mat "Sketch" ze spillen.
Gitt e Bild fir Handy an Sketch virzebereiwen, wielt d 'Bild op dem ArtBox a klickt op de Maacht Exportable Knäppchen am ënneschten Deel vum Feld "Properties" . Dëst fëllt den Dialog "Export". Klickt op d'Zeechen fir 2x an 3x Versioune hinzuzefänken an och déi Suffixes. D'Formate sinn verfügbar PNG, JPG, TIF, PDF, EPS a SVG. An dësem Fall wielt JPG. Klickt d'Export Knäppchen a schrëftlech oder e Verlag fir ze maachen déi verschidden Exemplare ze halen.
04 vun 05
Firwat Dir musst dräi (oder méi) Versioune vum Bild erstellen
A ville Beräicher ass de Mobilem Maart den "Wuere Westen" vu Resolutiounen an eng Gréisst ass definitiv net all passend. Am exemplaresche Beispill vum Adobe Experience Design gëtt d'Bild op 2 iPhone 6 Artboards plazéiert an eng Android Apparat Artbrett. Remark: Wéi d'1x Versioun op der lénker Säit hallef Gréisst ass. Dëst ass genau wéi d'Bild op engem iPhone 6 mat sengem Retina-Bild erscheint. Déi 2x Versioun passt perfekt an d'Android Versioun aus dem Écran. Är Entscheedung ass d'Bild oder d'Bild vun engem Photoshop op enger anerer Gréisst z'erfëllen.
05 05
Test froe séier, Test Oofs, Vertrauen Nothing, Vertrauens Nee Een a besonnesch Dir selwer
Wat Dir braucht fir ze verstoen ass dat ass just de Start vum Prozess. Wielt Är Aarbecht op esou vill Geräter wéi Dir kënnt als eegent Wierk vum Workflow betraff sinn. Dir musst och bewosst sinn dat ass just den éischte Schrëtt am Prozess vun der Schaffung vun Grafike Spiller fir eng App oder mobil Websäiten.
Mat Prototypen Applikatiounen ass eng gutt Manéier fir d'Schmerzpunkten opzebréngen, awer déi selwecht Verméigensmodeller mussen Ausgruewung fir de Gebrauch vum Entwéckler hunn. A ville Fäll sinn d'physikalesch Dimensiounen vum Verméigen, och d'Ikonen, kierperlech grouss a net am svg, awer png-Format. Op den éischte Bléck kann dëst e bëssen méi wäit wéi am Ufank sinn awer deng goldene Regel vu Skaleren.
Déi ënnescht Linn ass fir enk mat Ärem Entwéckler ze schaffen an Prototyping Software ze benotzen als eng Manéier fir Är Konzept Intent ze weisen. Allerdéngs hu mir déi selwecht Verméigens viraussiichtlech fir de Finalprodukt ze sinn an Är Entwéckler hunn e besseren Handelen op wat hien oder hatt brauch wéi Dir.