Text dazu bringen, sich in Photoshop so zu verhalten wie in HTML/CSS

Ich erstelle eine Vorlage in PS 1280 x 700 px 300 dpi (ich weiß, dass Web 72 ist, aber ich mag mehr Klarheit, wenn ich in PS arbeite).

Mein Hauptproblem ist die Art und Weise, wie der Text gerendert wird. Ich verwende Helvetica Neue Light 15px und es kommt ziemlich zackig heraus. Gibt es eine Möglichkeit, es zu glätten / als Schriftart zu verwenden, anstatt dem Pixelraster zu folgen, damit es so aussieht, wie es im Web aussieht?

Meine zweite Frage ist, ob es beim Festlegen eines Navigationssystems eine bessere Möglichkeit gibt, die Textüberschriften zu trennen. Im Moment verwende ich entweder nur die Leertaste 5 oder 6 Mal, um sie aufzubrechen (was wirklich schlecht ist, wenn Sie zurückgehen und Änderungen vornehmen möchten, da Sie alle ändern müssen) oder ich mache jede Überschrift zu einer Textebene und Platzieren Sie sie auf einem Raster, was wiederum nicht großartig ist, wenn ich Änderungen vornehmen möchte.

Ihre "zweite Frage" hat wirklich nichts mit der ersten zu tun. Es ist eine legitime Frage, also entfernen Sie sie bitte von hier und machen Sie sie zu einer separaten Frage, damit wir sie beantworten können.
@lauren ispum, wird reichen
Das Ändern der DPI eines Bildes mit fester Pixelgröße trägt nicht zur Verbesserung oder Verringerung der „Klarheit“ bei. Die Schriftglättung ist eine Option in der Schriftpalette. Es gibt jede Möglichkeit.
@da01 Gibt es eine Anti-Aliasing-Methode, die bevorzugt wird, damit es so aussieht, wie es im Web aussieht, oder muss es nur mit dem Auge gemacht werden?
@sem es gibt keine "einzige" Möglichkeit, wie es im Web aussieht. Es unterscheidet sich von Gerät zu Gerät, Browser zu Browser, Betriebssystem zu Betriebssystem, Schriftart zu Schriftart.

Antworten (2)

hmm, gut in den Zeichenoptionen, wenn der Text hervorgehoben ist, gibt es eine "Anti-Aliasing"-Option, die Sie von glatt auf scharf, scharf, stark und keine ändern können.

Aber das ist irgendwie seltsam, dass Sie dieses Problem bekommen.

Stellen Sie sicher, dass Sie den Text mit 100 % Zoom betrachten. Ich habe das manchmal in meinen Designs bemerkt, besonders wenn ich OpenType PostScript (otf-Dateien) verwende.

Wenn Sie also auf 100 % zoomen, prüfen Sie zuerst, ob dies das Problem ist. Da Sie auch an einem größeren Design arbeiten, können Sie den Zoom auf 50% herunterskalieren und erhalten auch nicht diesen gezackten Effekt, aber alles dazwischen wird Sie ...

Wenn beides nicht funktioniert, liegt möglicherweise ein Problem mit der Datei vor. Wenn nichts davon funktioniert, dann sehe ich es nicht richtig in CSS/HTML. Haben Sie bemerkt, dass es in CSS/HTML richtig gerendert wird? Wenn ja, dann ja, es ist der Zoom oder das Anti-Aliasing.

Welche Version verwenden Sie (wenn Sie kein Anti-Aliasing finden können), kann ich es wahrscheinlich erklären, aber es ist in verschiedenen Versionen etwas anders. Aber im Allgemeinen befinden sich oben, direkt unter dem Hauptmenü, ein paar Optionen direkt nach der Schriftgröße. Es ist eine Dropdown-Box.

Viel Glück Kumpel.

BEARBEITEN: Was Ihre zweite Frage betrifft, gehen Sie in das Charakter-Docklet / Menü. Wenn es auf der rechten Seite in der Nähe Ihrer Ebenen nicht sichtbar ist, müssen Sie es aktivieren, indem Sie den Workflow „typogrpahy“ anstelle von „Essentials“ auswählen, ODER zum Hauptmenü gehen und „Window > Character“ auswählen, dann sollte es erscheinen hoch. Sie können dort auch das Anti-Aliasing vornehmen. Aber was Sie damit machen möchten, ist, Ihre Überschrift hervorzuheben und die erste Zeile des nächsten Textes hervorzuheben. Sobald Sie das getan haben, gehen Sie in das Zeichenfenster und ändern Sie die „Leading“ (das ist die erste Option auf der rechten Seite. Bewegen Sie den Mauszeiger darüber und es wird „Change the Leading“ sagen, um sicherzugehen. Das entspricht der Zeile von CSS Höhe.

So ziemlich alles, was Sie in Photoshop in diesem Zeichenmenü tun, können Sie in CSS tun.

Außerdem würde ich an deiner Stelle pts (Punkte) für Text verwenden. Ich scheine immer ein Offset-Problem mit Pixeln zu haben, wenn ich ein Design in Code übertrage. Punkte haben mich nie im Stich gelassen.

Sie können Ihre Lineale und das gesamte Dokument für den Rest des Designs in Punkte ändern, wenn Sie möchten, im Hauptmenü unter "Bearbeiten> Einstellungen> Einheiten und Lineale".

Viel Glück Knospe.

danke, es ist in cs5 erweitert, um zu bestätigen, dass es in html/css gut gerendert wird, nur wenn es in PS arbeitet, scheint es den Text auf ein Pixelraster zu beschränken, anstatt es fließende Linien zu lassen
Keine Problemknospe. Meinst du ein echtes Raster? oder nur das Raster, das am Anfang mit der DPI festgelegt wurde. Denn wenn Sie nur ein durch die Einstellungen festgelegtes Raster meinen, können Sie es im Hauptmenü "Ansicht> Ausrichten an> Raster" deaktivieren.
Ich meinte das Raster, das festgelegt wurde, als ich die Leinwand erstellt habe, also das 300x300-dpi-Raster
Text dazu bringen, sich in Photoshop so zu verhalten wie in HTML/CSS
AntwortenHierDatenschutz-Bestimmungen1y, 0v