PSD zu HTML & CSS - meine Ränder sind falsch

Ich habe Probleme mit der Replikation exakter Ränder aus der PSD in CSS. Wenn ich mit einem Select-Tool einen Rand messe, bekomme ich zum Beispiel 32px. Dann füge ich das in meinen CSS-Code ein:

div {
margin-top:32px;
}

Aber obwohl der Rand korrekt eingestellt ist (überprüft mit Firebug), sieht dieses Element immer noch seltsam aus, als wäre es weit weg. Die Marge scheint zu groß zu sein, ich muss sie nach Augenmaß berechnen, nachdem ich die PSD auf 100% Ansicht eingestellt habe, anstatt diese rohen Zahlen zu verwenden.

Wie kann ich mein Photoshop so konfigurieren, dass es mir korrekte Maße gibt, die ich dann in CSS anwenden kann, damit PSD- und CSS-Ränder (und im Grunde alle Maße) übereinstimmen?

Ändern andere Eigenschaften Ihr CSS? Geerbte Stile, Polsterung, Zeilenhöhe usw.?
Nein, ich bin sicher, das tun sie nicht. Die Zahlen sind korrekt, was auch immer ich in CSS eingebe, funktioniert perfekt, aber es sieht im Vergleich mit dem PSD völlig daneben aus. Ich muss die Zahlen korrigieren. Wenn ich zum Beispiel einen Screenshot der Website mache und ihn über meine PSD lege, ist es leicht zu erkennen, dass die Elemente ausgeschaltet sind.
Ist Ihr Bild in Photoshop auf 72 dpi eingestellt?
Nein, es ist bei 96 dpi. Das ist seltsam, ich habe es nie geändert, es könnte ein Fehler gewesen sein, weil mein PS letzte Woche oft abgestürzt ist. Das sollte das Problem beheben, oder?
72 dpi ist die Web-Standard-Bildschirmauflösung, daher sollte es Ihnen eine Eins-zu-eins-Beziehung zwischen Ihrem Bild geben, wenn es in Photoshop mit 100 % angezeigt wird, und Ihrem Browser auf dem PC.
@digijim Du solltest das als Antwort posten, das ist ein wirklich guter Aufruf.
@digijim 72 dpi ist zufällig das, was Photoshop zu 100% ansieht, aber es ist nicht die Standard-Bildschirmauflösung. (Es gibt keine Standardauflösung und die überwiegende Mehrheit der Bildschirmauflösungen ist viel höher als 72)
Außerdem glaube ich, dass Photoshop jetzt „tatsächliche Größe“ als eine der Zoomoptionen hat, die völlig unabhängig von der dpi-Einstellung ist – und das ist, was man wahrscheinlich verwenden sollte (es sei denn, wir sprechen über das Erstellen von Grafiken für Retina-Bildschirme, was eine ganz anderes Thema...)
Abschließend (sorry, es wird langsam langweilig), nichts davon sollte eigentlich eine Rolle spielen. Solange Sie in Pixeleinheiten messen, spielt der Zoom in Photoshop überhaupt keine Rolle. Unabhängig davon, ob Sie 800 % oder 50 % vergrößert haben, zählt Ihr Lineal-Tool die gleiche Anzahl von Pixeln im Bild.
Es hat wahrscheinlich mehr mit CSS zu tun als mit PS. Untersuchen Sie das Element in DevTools (z. B. Firebug- oder Chrome-Entwicklungstools) und überprüfen Sie alle CSS: Ränder, Auffüllungen, Rahmen. Nicht nur des Elements, sondern auch der übergeordneten und untergeordneten Elemente. Browser fügen manchmal Auffüllungen oder Ränder hinzu, wo Sie sie am wenigsten erwarten würden. Ein CSS-Reset kann dabei helfen, unerwartete Ränder und Auffüllungen auf Ihrer Website zu beseitigen. Außerdem hoffe ich, dass dies nicht Ihr eigentliches CSS ist. Das Festlegen eines Rands von 32 Pixel für ALLE Divs ist in der Tat sehr schlechte Form und führt automatisch zu unerwarteten Blicken.
@PieBie - Das Umschalten auf 72 dpi hat alles behoben. Fall abgeschlossen :).
k. wirklich sehr seltsam.

Antworten (2)

Es besteht nicht unbedingt ein direkter Zusammenhang zwischen Pixelmessungen in Photoshop und der Funktionsweise von CSS im Browser. Mit anderen Worten, wenn Sie 32 Pixel Platz auf Ihrer Seite benötigen, müssen Sie möglicherweise mit etwas wie 28 Pixel gehen, um den Rand oder die Auffüllung eines anderen Elements zu berücksichtigen.

Im Allgemeinen ist es am besten, die Dinge „locker“ zu gestalten, damit die Dinge ein paar Pixel geben und nehmen können. Pixelperfektion im Browser ist ein bisschen wie gegen Windmühlen anzukämpfen.

Auch wenn dieses spezielle Problem eine tatsächliche Ursache haben könnte, ist diese Antwort im Großen und Ganzen die bessere. Pixelperfektion in einem Medium zu entwerfen, das so interaktiv und austauschbar ist wie das Web, insbesondere im Jahr 2015 mit der Herrschaft des responsiven Designs, wird Ihnen nur Kopfschmerzen bereiten.
Ich verstehe das, aber etwas so Einfaches wie in einer PSD gemessene Ränder sollte sich sehr genau im CSS widerspiegeln, nicht genau, aber Sie wissen schon, zumindest nahe. Meine sind weit weg, manchmal 1,5 oder 2 mal zu groß. Ich muss mit der zweiten Antwort gehen, weil sie mein Problem direkt löst.

Es stimmt, dass die Bildauflösung im Web bedeutungslos ist. Was die Größe der Bilder bestimmt, sind die Gesamtpixelabmessungen der Bilder bei einer beliebigen Bildschirmauflösung des Anzeigegeräts.

Aber um den Pixelabstand für das Webdesign zu beurteilen, wenn Sie Ihr Bild in Photoshop auf 72 dpi einstellen, sollte es Ihnen eine Eins-zu-Eins-Beziehung zwischen Ihrem Bild geben, wenn es in Photoshop mit 100 % angezeigt wird, und Ihrem Browser (at es ist die Standard-Zoomstufe) auf einem Desktop-Computer. Hier ist ein Beispiel. Ich habe diese Seite per Screengrab erfasst und das resultierende Bild in der Vorschau auf meinem Mac geöffnet (ich würde Photoshop verwenden, aber das BIOS meines PCs ist vor zwei Tagen kaputt gegangen). Ich habe das Bild so verschoben, dass diese Seite im Hintergrund angezeigt wird, und mir die Details der Bilder angesehen. Beachten Sie die Auflösung des Screenshots:

Beispiel für eine Webauflösung von 72 dpi

Die Elemente erscheinen alle in derselben Größe sowohl auf der Webseite im Hintergrund als auch auf dem 72-dpi-Bild, das in der Vorschau mit 100 % angezeigt wird.

Mobilgeräte werden mit höheren Auflösungen angezeigt, sodass Ihre Elemente auf diesen Bildschirmen natürlich kleiner erscheinen. Aber es wird eine proportionale Verschiebung sein, also wird die Beziehung zwischen, sagen wir, einem Bild und seinem Rand/Füllung proportional gleich sein.

Das ist falsch. Es gibt keine „Web-Standard-Bildschirmauflösung“. Es ist wahr, dass 72 ppi in Photoshop der „tatsächlichen Pixelgröße“ zugeordnet sind, aber es hat wirklich keinen wirklichen Einfluss auf Webgrafiken. Es ist richtig zu sagen: "Angenommen, es handelt sich nicht um ein Netzhautbild, stellen Sie sicher, dass Sie es in Photoshop in tatsächlicher Größe anzeigen , um es zu messen).
PSD zu HTML & CSS - meine Ränder sind falsch
AntwortenHierDatenschutz-Bestimmungen1y, 0v