Warum @2x Mockups

Was ist der Unterschied zwischen einem 360-ppi-Mock und einem 72-ppi-Mock?

Wenn es um Bildschirmmodelle geht, absolut nichts.

Das einzige, was zählt, sind Pixelmaße.

Was Ihre Bedenken betrifft, so ist keine davon wirklich ein Problem für ein Team von Designern und Entwicklern, die den Prozess verstehen.

Sehr große Dateigrößen

Festplatten sind billig. :)

Unrealistische Proportionen

Die Proportionen sollten genau gleich bleiben. Das sollte also überhaupt kein Problem sein.

Ungenauigkeit der Pixelmessung in der Entwicklung

Das Entwickeln von Websites auf das pixelgenaue Niveau ist eine Übung in Sinnlosigkeit, daher würde ich die Leute normalerweise ermutigen, sich darüber keine Sorgen zu machen. Das heißt, es sollte keine so große Sache sein. Exportieren Sie das 2x-Bild mit 50 % und Sie haben genau die Pixelgröße, die Sie benötigen.

Ungenauigkeit der Schriftgröße

Genau wie das Pixelproblem sollte dies keine große Hürde darstellen. Halbiere die Schriftgröße in dev.

"Halbpixel"-Messungen beim Zurückskalieren auf 72 ppi

Wenn das Problem darin besteht, dass Designer Dinge wie 1px-Linien bei 2x erstellen, verschwinden diese bei halber Größe. Dies ist jedoch eher ein Problem beim Entwerfen von Websites in Photoshop. Die Designer müssen dies einfach verstehen und bei Bedarf mit den Entwicklern kommunizieren.

Beachten Sie, dass 2x zwar beliebt, aber kaum die einzige Bildschirmdichte ist, die es gibt.

Diese Seite listet viele von ihnen auf, die gerade da draußen sind:

http://dpi.lv/

Beachten Sie, dass sie in verschiedenen Dichten erhältlich sind: 1x, 1,33x, 1,66x, 2x, 2,46x und 3x (vorerst).

Ich verstehe das @2x nicht als "Trend". Es ist manchmal eine Anforderung an das Webdesign.

@2x, @3x, @Nx ist keine Möglichkeit, alles zu entwerfen, es ist eine Deklaration in einem CSS-Stylesheet, ein Bild mit höherer Auflösung zu verwenden.

Dies ist ein spezieller Fall von hochauflösenden Geräten. Auch bekannt als Iphone, Ipad.

Die Auflösung ist höher als normal. Wenn diese Systeme die Auflösung wie alle anderen angeben, wären die Bilder und der Text winzig.

Das System deklariert also eine halbmögliche Auflösung (eine normale), achtet aber besonders darauf, wenn ein Bild mit der Markierung @2x gefunden wird. In diesem speziellen Fall nimmt es dieses Bild mit höherer Auflösung und zeigt es nicht mit "halber", sondern mit seiner wirklich hohen Auflösung an.

Betrachten Sie dies als den Unterschied zwischen einer Vorschau (niedrige Auflösung) und der Verwendung eines hochauflösenden Bildes am Ende.

Das ist also kein Trend, sondern in einigen Fällen eine Notwendigkeit.

Es gibt mittlerweile einige Geräte mit doppelt linearer Auflösung als Full HD.

Übrigens. Ersparen Sie sich Ärger und beginnen Sie mit dem Designen in Vektoren. Nicht in PhotoDontDoAllInItShop.

Bei elektronischen Geräten spielt ppi keine Rolle

Mir wurde gesagt, ich solle einfach mit 360 ppi entwerfen

Nein. PPI zählen überhaupt nicht in elektronischen Geräten. Sie müssen Pixel als Abmessungen verwenden. Dann haben Sie beispielsweise die Wahl, eine maximale Breite von sagen wir mal FullHD 1920px zu verwenden.

Obwohl ein Gerät eine Pixeldichte von beispielsweise 360 ​​ppi haben kann, werden diese Informationen nicht wie ein gedrucktes Dokument verwendet. Es zählt nur der absolute Wert in Pixeln.

Hier sind 2 Bilder. Sie haben völlig unterschiedliche deklarierte ppi in der Datei, sind aber genau gleich groß. (Sie können den Unterschied nur sehen, wenn Sie sie in einem Bildverarbeitungsprogramm öffnen und die ppi-Daten lesen)

Foto: Scott F. Snyder Modell: Amy Lee Fathbruckne

Der größte Unterschied ist wirklich:

Wenn Sie in @2x entwerfen, können Sie in @1x exportieren

Wenn Sie in @1x entwerfen, können Sie nicht in @2x exportieren

Es ist für Retina-Displays und Geräte mit höherer Dichte. Und Sie müssen dafür eine höhere Auflösung haben, und da es einfacher ist, ein Bild zu verkleinern, als es zu vergrößern, wenn die Dateien von Anfang an größer erstellt werden.

Die Dateien, die gerastert und für Retina vorbereitet wurden, enden normalerweise beispielsweise mit @2x.jpg, weil das aufrufende Skript sie auf diese Weise identifiziert. Es wird eine Nicht-Retina-Version (z. B. mypict.jpg) und im selben Bildordner eine für Retina (z. B. mypict@2x.jpg) geben. Einige ziehen es vor, stattdessen @2x zu verwenden und die Größe in ihrem Code zu ändern.

Das @2x ist normalerweise doppelt so groß wie das Originalbild. Deshalb finden Sie diese Vorlagen viel zu groß.

Und ja, die meisten Leute ziehen es vor, einfach an einer einzigen Datei für ihr Layout zu arbeiten und die Größe zu ändern, anstatt an zwei verschiedenen Dateien zu arbeiten. Das @2x wird sicherlich ein Standard werden ( EDIT z. B. Dateien mit höherer Auflösung werden ein Standard.)

Technisch gesehen sollte es die Qualität nicht ändern, wenn die Hauptdatei eine höhere Auflösung hat, tatsächlich profitieren Sie davon nur neben (vielleicht) der Leistung des Computers. Es ist auch ziemlich praktisch, wenn die Designelemente größer sind; Sie können leicht für andere Banner wiederverwendet werden, die die gleiche Montage erfordern ... sogar kleine Druckprojekte! Retina- und Webprojekte mit hoher Auflösung verwenden denselben Arbeitsablauf wie bei der Vorbereitung von Druckprojekten; Idealerweise beginnen Sie mit dem größten Projekt und können dann Zeit sparen, indem Sie dieselben Dateien verwenden, aber kleinere. Auf diese Weise müssen Sie nicht 2-3-4 Mal dasselbe Layout erstellen!

Es macht sowieso Sinn, jedes Design mit höherer Auflösung zu erstellen, mit hoher Dichte oder nicht.

"Größe" ist oft verwirrend, es gibt die Pixeleinheiten und es gibt die anderen Werte, die verwendet werden können.

Wenn die Leute, mit denen Sie zusammenarbeiten, Sie gebeten haben, eine hohe Auflösung von 360 ppi zu erstellen, ziehen sie es offensichtlich vor, dass Sie die gleiche Größe beibehalten und die Auflösung erhöhen! Auf diese Weise wird auch die Pixelgröße erhöht.

Gleiches Bild, gleiche "Größe", andere Auflösung:

Die hohe Auflösung, mehr Pixel.

Die mit niedriger Auflösung, weniger Pixel.

Wenn es für Sie einfacher ist, die Anzahl der Pixel zu berechnen und die Summe mit 2-3-4 zu multiplizieren, um die richtige Größe zu erhalten, ist das in Ordnung.

Einige Leute beginnen ihre Leinwand gerne mit den normalen 72 dpi und sampeln sie dann einfach auf 360 dpi (zum Beispiel), bevor sie mit ihrer Arbeit beginnen.