So messen Sie den Abstand zwischen Text und Element in Photoshop

Ich finde es ziemlich kompliziert, den Abstand zwischen einem Element und Text zu messen. Denn ich muss zuerst den größten Buchstaben kennen und die Entfernung von diesem zum Element messen. Ziehen Sie dann die Polsterung von der Zeilenhöhe ab. Es wäre viel einfacher, wenn ich die Zeilenhöhe als Box oder so anzeigen könnte, damit ich nur daraus messen kann.

Ist das irgendwie möglich? Wie misst man zuverlässig den Abstand von Text zu einem Element, um ihn zB in CSS zu übertragen?

Es gibt keine einfache Möglichkeit, Dinge in Photoshop zu messen und mit absoluter Genauigkeit in CSS einzufügen. Vertrauen Sie stattdessen Ihren Augen. Viel weniger mühsam und letztendlich viel vernünftiger. :)
Sag es unserem Designer ;) Aber gut, die überprüfte Antwort scheint in den meisten Situationen gut genug zu sein.

Antworten (2)

Es hängt davon ab, welche Version von Photoshop Sie verwenden, aber es wurde in den letzten Updates von PS viel einfacher gemacht, insbesondere in CC, und ich würde Ihnen empfehlen, auf diese Version zu aktualisieren!

Wählen Sie einfach das Verschieben-Werkzeug (v) und halten Sie die Strg-Taste gedrückt, wenn Sie mit der Maus über ein Element fahren. Es zeigt Ihnen die Entfernung usw.Abstand zwischen Elementen in PS messen

Dann können Sie entweder Pixel in CSS oder Rems usw. verwenden. Hoffe, das hilft!

Danke, das funktioniert manchmal. Aber dann ignoriert es einfach ein Element und geht ein Element weiter, sodass der Abstand nicht korrekt ist. Ich benutze PS2014.
Ah, Sie müssen das Element zuerst auswählen, dh mit dem Textselektor (wenn es sich um Text handelt). Wählen Sie dann das Verschieben-Werkzeug und bewegen Sie den Mauszeiger über das betreffende Element, während Sie die Strg-Taste gedrückt halten. Eindrucksvoll!
Aber! Um es komplett zu machen: Der Textbereich muss so groß wie der Text sein, sonst stimmt der Abstand nicht.
Beim Text ergibt sich die Position aus der Höhe des größten Elements, z. das 'T' im Textblock. Wenn Sie mit Ihrem CSS arbeiten, dann gehen Sie auch diese Distanz! Es ist schwer zu erklären, aber im Grunde ist es der richtige Weg! :)
Richtig, aber zumindest in PS 2014 muss der Textblock so groß sein wie der Text, wenn er größer ist oder andere Textblöcke sogar überlappt, hat es bei mir nicht funktioniert.
Ahh, ich verstehe dich! Wenn sich 2 Ebenen überlappen, erhalten Sie keinen genauen Wert !! Könnten Sie einen Screenshot des Problems hochladen und ich werde sehen, ob ich eine Lösung finden kann!
Ich versuche mal ein Video zu machen. Aber ja, wenn sich zwei Ebenen überlappen, funktioniert es nicht.

Anzeigen des Textfelds
Ansicht > Anzeigen > Ebenenkanten
Die ausgewählte Ebene wird jetzt hervorgehoben

Den Abstand ermitteln
Verwenden Sie das Linealwerkzeug Imanchmal hinter der Pipette, um den tatsächlichen Abstand zu ermitteln. Lassen Sie das Textfeld ausgewählt, da sonst Ihre hervorgehobene Ebene nicht angezeigt wird.

Messen wir nicht generell alle Abstände bei „Texten“ in Bezug auf das umher erscheinende Textfeld? Oh ja, das tun wir! Es wird NICHT empfohlen, die individuelle Zeichenlänge zu messen.
@Dr..Net, das mystische Textfeld, von dem Sie sprechen, ist genau das, wonach ich suche, denke ich
@Consume Coffee, weil ich nicht immer weiß, was der größte Buchstabe einer Schriftart ist
@ 4485670 Ich habe gerade ein wenig mehr nachgeforscht, versuchen Sie es mit Ansicht> Anzeigen> Ebenenkanten. Ich werde meine Antwort jetzt aktualisieren. Ich habe auf jeden Fall gerade etwas Neues gelernt.
@4485670 Wenn Sie es für CSS verwenden, erhalten Sie es in den Entwicklertools und bewegen dann den Mauszeiger auf das entsprechende Element in der DOM-Struktur. In Photoshop können Sie es wie im obigen Kommentar tun, aber seien Sie vorsichtig, da das Textfeld auch größer als der darin enthaltene Text gemacht werden kann.
@ConsumeCoffee Das Ding funktioniert nur, wenn die Box genau so groß ist wie die Anforderung des Textes.
Ebenenkanten funktionieren bei mir nicht. Es ist genauso groß wie der Text, aber nicht so groß wie Text + Zeilenhöhe. fs5.directupload.net/images/160204/4kqptlgs.png
Im Bild sind die violetten Linien die Ebenenkanten. Während die graue vertikale Linie der Cursor ist, der meiner Meinung nach so groß ist wie die Zeilenhöhe.
@4485670 Wenn Sie die Zeilenhöhe kennen, können Sie immer ein Kästchen mit dieser Höhe zeichnen und es an der Grundlinie der obersten Textzeile platzieren und dann damit messen. Es ist ein bisschen "hacky", aber ich denke, das könnte funktionieren. Ich glaube einfach nicht, dass Photoshop hier wirklich eine Funktion hat, die für Sie hilfreich ist :(
Es ist wirklich kompliziert, weil zum Beispiel ein g-Buchstabe ein wenig in die Zeilenhöhenpolsterung eindringt, während andere Buchstaben dies nicht tun. Sie müssten sich also wirklich eine Zeilenhöhenbox besorgen. Frage mich warum das nicht dabei ist.
So messen Sie den Abstand zwischen Text und Element in Photoshop
AntwortenHierDatenschutz-Bestimmungen1y, 0v