Photoshop zu CSS, habe gerade Retina bekommen [duplizieren]

Ich habe gerade ein neues Macbook Pro mit Retina bekommen und bin verwirrt darüber, wie ich meine PSDs angreifen soll. Wenn ich eine Website mit einer Schriftgröße von 14 Pixeln entwerfe, sollte ich sie in Photoshop auf 28 Pixel einstellen, um zu erhalten, wie sie in CSS aussehen wird? Oder wenn meine Website einen 60 Pixel hohen Header haben soll, sollte ich sie in Photoshop auf 120 Pixel einstellen?

Ich denke, ich bin verwirrt, weil das CSS gleich bleibt, aber sollte ich alles in Photoshop verdoppeln, um zu bekommen, wie es in CSS aussehen würde?

Zunächst einmal ist Photoshop eine Bildbearbeitungssoftware und der Hauptzweck ist nicht das Erstellen von Webdesigns. Allerdings gibt es keine allgemeine Regel, wie Sie die Schriftgröße in Pixel einstellen müssen, da dies davon abhängt, welche Auflösung Sie für das Bild einstellen und in welchem ​​​​Maßstab Sie es betrachten.

Antworten (1)

Bei Bildern würdest du dann ja eine Version desselben Bildes haben wollen. Eine Originalgröße und die größere Version in doppelter Größe. Es gibt ein paar Möglichkeiten, wie Sie Ihr Bild beim Vergrößern zum Laufen bringen können. Auf Javascript-Weise sollten Sie die Bilder wie myimage.jpg und myimage@2x.jpg speichern. Sie müssen dann retina.js von http://imulus.github.io/retinajs/ herunterladen und dann einschließen

<script src="js/retina.js"></script>.

das geht auch mit css

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
header h1 a {
    background-image: url(images/myimage@2x.png);
    background-size: 164px 148px; //original size image
}
}

Ich würde mich davon fernhalten, eine PSD zu schneiden und zu versuchen, alles "Retina" zu machen.

Photoshop zu CSS, habe gerade Retina bekommen [duplizieren]
AntwortenHierDatenschutz-Bestimmungen1y, 0v