iPad & iPhone Grafikpunkte gegen Pixel
Wie in den meisten Projekten erstellen Sie die Grafiken für eine iPad-App, bevor Sie mit der Erstellung der iOS-Anwendung beginnen. Mit der Veröffentlichung des iPad und Änderungen am iOS SDK können Sie jetzt universelle iOS-Apps erstellen. Eine universelle App funktioniert auf dem iPhone / iPod und dem iPad. Wenn Sie die Grafiken für eine universelle App erstellen, denken Sie möglicherweise, Sie würden ein großes Bild (iPad-Größe) erstellen und die App anweisen, die Größe des Bilds nach Bedarf für das Gerät des Betrachters zu ändern. Dies führt jedoch zu sehr schlechten Ergebnissen. Eine der erstaunlichen Eigenschaften von iOS-Apps sind die brillanten Bildschirmauflösungen. Um diese Funktion nutzen zu können, benötigen Sie Grafiken in verschiedenen Größen. Die App verwendet je nach Gerät des Benutzers eine andere Grafik.

In diesem Tutorial gehen wir davon aus, dass Ihre App im Vollbildmodus abgespielt wird, wodurch die Statusleiste (die Leiste mit dem Akkusymbol) blockiert wird. Wenn nicht, müssen Sie die 20 Punkte der Statusleiste kompensieren. Sie haben vielleicht bemerkt, dass ich den Begriff Punkte anstelle von Pixeln verwendet habe.

Wenn Sie in Pixeln für das Web gearbeitet haben, müssen Sie anfangen, in Punkten zu denken. ApfelR. bezieht sich auf die Größe der Anzeige in Punkten und Pixeln und auf den ersten Blick kann der Unterschied verwirrend sein. Dies war vor dem iPhone 4 wirklich kein Problem, da die Anzahl der Punkte der Anzahl der Pixel für jedes Gerät entsprach. Das iPhone 4 verfügt jedoch über ein Retina-Display. Falls Sie das Wort "Retina" zum ersten Mal hören, bezieht es sich auf das neue hochauflösende Display, das für jeden Punkt auf dem Bildschirm 4 Pixel verwendet. Daher hat das iPhone 4 die gleichen Abmessungen wie die früheren iPhones, verwendet jedoch die doppelte Anzahl vertikaler und horizontaler Pixel.

Adobe

Daher möchten wir die Grafiken für unsere Apps in drei Größen erstellen. Es gibt die Größen mit niedriger und hoher Auflösung für das iPhone. Dann haben die Grafiken für das iPad eine dritte Größe.

Unten finden Sie eine Zusammenfassung der Pixelbeziehung für jedes Gerät.

iPad: 1024 Pixel x 768 Pixel x 132 Auflösung
iPhone 4: 960 Pixel x 640 Pixel x 326 Auflösung
iPhone 3G: 480 Pixel x 320 Pixel x 163 Auflösung

Sie fragen sich vielleicht, warum jedes Gerät eine andere Auflösung hat. Die Auflösung ist die Anzahl der Pixel pro Zoll. Der Unterschied in der Auflösung für jedes Gerät spiegelt die Dichte der Pixel pro Zoll wider. Der Anzeigebereich des iPad beträgt beispielsweise 7,76 Zoll x 5,82 Zoll und die Pixelabmessungen 1024 x 768. Das Ergebnis ist eine Auflösung von 132.

Auflösung und resultierende Bildschirmgröße

1024 x 768 bei 72 res wären 14,22 Zoll mal 10,66 Zoll
1024 x 768 bei 132 Auflösungen wären 7,76 Zoll mal 5,82 Zoll

Das iOS-Gerät nimmt also die 1024 x 768 Pixel, die auf Ihrem Computerbildschirm mit 14,22 x 10,66 Zoll angezeigt werden, und komprimiert sie auf dem iPad auf 7,76 x 5,82 Zoll. Diese Komprimierung ist der Grund, warum das iPad und andere Geräte eine so brillante Bildschirmanzeige haben und auch eine Auflösung von 132 haben.

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.
Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie und Mac sind Marken von Apple Inc., eingetragen in den USA und anderen Ländern. CoffeBreakBlog ist eine unabhängige Veröffentlichung und wurde von Apple Inc. nicht autorisiert, gesponsert oder anderweitig genehmigt. Screenshots werden mit Genehmigung verwendet.


Video-Anleitungen: Can iPad Pro Replace a Computer? (Oktober 2020).