Design Trend Schnitttext & Typografie

Puristen sagen, dass Sie die Typografie niemals ändern sollten. Die Beschriftung sollte so aussehen, wie vom Textdesigner beabsichtigt, oder Sie sollten eine andere Schriftart auswählen. Während dies meistens zutrifft, liegt die Ausnahme im aufgeschnittenen Text.

Der raffinierte Effekt lässt Schriftelemente so aussehen, als wären sie mit einem Präzisionswerkzeug geschnitten worden, und sie können Logos, Überschriften und einfache Textblöcke visuell interessanter machen. Geschnittene Texteffekte können von sehr subtil (z. B. wenn ein kleiner Buchstabe fehlt) bis zu großen Teilen von Wörtern, die ganz fehlen, variieren.

Bei der Verwendung von geschnittenem Text sollten Sie immer daran denken, dass Wörter immer sein müssen lesbar - Welchen Punkt gibt es sonst? - und Sie sollten genauestens darauf achten, dass unbeabsichtigte Buchstabenkombinationen oder Wörter nicht durch Aufteilen angezeigt werden. Hier sehen Sie, wie Sie es mit einigen Beispielen von Designs, die es gut machen, für Sie zum Laufen bringt.

Traditionell? Scheibe

Geschnittener Text enthält ein fast mehrschichtiges Aussehen mit einem Textelement, z. B. einem Wort oder einer kleinen Gruppe von Wörtern, das auf zwei Ebenen geschnitten und überlappt wird. Dieser Effekt erzeugt Tiefe und kann eine einfache Gruppe von Zeichen visuell interessant machen.

Resoluut nutzt diesen Effekt in Kombination mit einem Et-Zeichen, um Benutzer in die Mitte des Designs zu bringen. Der aufgeschnittene Text spiegelt die folgenden Nachrichten wider, die sich auf "digitales Design mit Haltung" konzentrieren. denn geschnittener Text vermittelt eine geradezu kantigere Note als eine geradlinige Beschriftung.

Diese Technik funktioniert am besten, wenn die Zeichensätze einfach sind (denken Sie zuerst an serifenlose Schriften) und Wörter einen natürlichen Haltepunkt haben, an dem sie geschnitten werden können und die Lesbarkeit erhalten.

Slice Text und Fotos

Der Layer-Effekt ist nicht auf eine Kombination aus Schrift und Leerzeichen beschränkt. Designer können Bilder und Text auch verwenden, um einen coolen, in Scheiben geschnittenen Effekt zu erzeugen, wie im obigen Beispiel von The Shift.

Die geneigten Schnittkombinationen eines einzelnen Bildes (auch geschnitten) mit Beschriftung ziehen den Benutzer in das Design.

Während einige der Wörter zunächst etwas schwieriger zu erkennen sind, bleibt zwischen den Animationen genügend Zeit, um die Nachricht mit Leichtigkeit herauszufinden.

Dieser Trend eignet sich gut für digitale Agenturen und Portfolio-Websites, um ein modernes Look & Feel zu präsentieren und kreative Möglichkeiten hervorzuheben.

Slice mit Animation

Der aufgeschnittene Texteffekt kann auch mit anderen trendigen Designelementen kombiniert werden. Das Mischen von Slicing mit Animation kann zu einem schönen visuellen Element führen.

Im obigen Beispiel handelt es sich bei den einzelnen Textelementen um eine Navigation. Benutzer können auf eines der Elemente klicken, aber noch beeindruckender ist die Hover-Aktion, durch die der aufgeschnittene Text wieder zusammengefügt wird.

Für Logos

Geschnittener Text kann eine lustige Möglichkeit sein, ein Logo zu erstellen, wenn Sie nur mit Text arbeiten müssen. Ein lustiges Logo kann mehr als ein Zeichen für die Wiedererkennung von Marken sein. Es kann auch ein sehr grafisches Element für mehrere Zwecke sein, wie z. B. das Shirt-Design oben.

Achten Sie bei der Arbeit mit geschnittenem Text auf eine natürliche Form und Neigung für das Schneiden, so dass es interessant ist, sie zu betrachten und dabei die Lesbarkeit zu erhalten.

Achten Sie auf die Art und Weise, wie das Schneiden weißen Raum erzeugt. Das obige Design verwendet eine Vielzahl von zusätzlichen Informationen. Die häufigere Verwendung von Slicing ist oft eine dünne Linie, aber die Ansätze (wie Sie den Beispielen in diesem Beitrag entnehmen können) können sehr unterschiedlich sein.

Interaktivität schaffen

Erlauben Sie Benutzern, ihren eigenen Text mit einer interaktiven Kombination aus Text und Pinsel zu schneiden, wie im obigen Beispiel. Während der Text an sich nicht exakt geschnitten ist, wird der Effekt im Kunstprozess erzeugt.

Alle Tools, mit denen Benutzer das Design ändern können, können aufgrund der interaktiven Komponente zu längeren Zeiten vor Ort führen.

Vertikale Striche in Scheiben geschnitten

Vertikale Schnitte sind tendenziell kürzer, da jeder Schnitt Teil eines einzelnen Buchstabens ist.

Während die meisten Designer den Trend auf dieselbe Weise mit einem horizontal ausgerichteten Schnitt zu verwenden scheinen, können Schnitte auch vertikal sein.

Vertikale Schnitte sind tendenziell kürzer, da jeder Schnitt Teil eines einzelnen Buchstabens ist. Der Trick, vertikale Scheiben zum Laufen zu bringen, ist Konsistenz. Die Art und Weise, wie die Schnitte gemacht werden, sollte einander nachahmen, so dass die Buchstaben so aussehen, als würden sie zusammen passen. Diese Schnittmethode sollte so aussehen, als wäre sie fast ein beabsichtigter Teil der Schrift. (Nicht in dem obigen Beispiel sind die Slices von Buchstaben zu Buchstaben gleich breit und dieselben Buchstaben haben dieselben Slices.)

Visual Flow einrichten

Die Schnitte erzeugen fast eine Lesedringlichkeit, so dass Sie über die Buchstaben hinweg auf das Hauptbild auf dem Bildschirm springen.

Eine Folge von geschnittenem Text - beabsichtigt oder nicht - besteht darin, dass er visuellen Fluss erzeugt. Das Auge eines Benutzers folgt der Richtung der Scheibe und des umgebenden weißen Bereichs.

Schauen Sie sich das Logo im obigen Beispiel an. Mit Scheiben in den R und O's in Robocath (plus dem normalen fehlenden Teil von c) gibt es einen offensichtlichen Richtungszug über den Bildschirm von links nach rechts.

Das Ziehen ist stärker als das, was Sie mit normalem Lesen assoziieren (auch von links nach rechts), da die Slices Sie schnell durch die Zeichen drücken. Die Schnitte erzeugen fast eine Lesedringlichkeit, so dass Sie über die Buchstaben hinweg auf das Hauptbild auf dem Bildschirm springen.

Betonung zur Beschriftung hinzufügen

Der letzte - und möglicherweise überzeugendste - Grund für die Verwendung des Designtrends in aufgeschnittenen Texten besteht darin, die Beschriftung oder die Nachricht zu betonen. Das Schneiden kann praktisch jede Änderung von Buchstaben sein, bei denen ein Teil eines Zeichens im Design fehlt.

MJND (siehe oben) verwendet eher einen Schichtungseffekt, um Buchstabenformulare auszublenden oder in Slice-Formulare zu schneiden, um die Betonung der Nachricht zu verbessern. Das Bild kann hier leicht die gesamte Kommunikation übernehmen, aber dieser Effekt hilft dem Benutzer, wieder zum Hauptnachrichtensystem zu gelangen. Die Kombination ist einfach, effektiv und visuell interessant.

Lernmittel

Es gibt verschiedene Möglichkeiten, in Scheiben geschnittenen Texteffekt für Projekte zu erstellen, je nachdem, was genau Sie erstellen möchten. Zu den beliebtesten Optionen gehören die manuelle Erstellung des Texteffekts mit Bearbeitungssoftware oder die Verwendung von CSS, um den Effekt für Webprojekte zu erstellen.

Hier sind Tutorials für jede dieser Optionen, sodass Sie versuchen können, einen trendigen Texteffekt mit geschnittenem Text zu erstellen:

  • Video: Erstellen von geschnittenem Text in Adobe Illustrator
  • Texteffekt-Snippet mit CSS ausschneiden

Fazit

Die Verwendung des geschnittenen Texttrends kann etwas kompliziert sein, da dazu Textelemente geändert werden müssen. Es ist wichtig, dass die Lesbarkeit nicht verloren geht oder dass Sie Benutzer mit diesem Effekt verlieren könnten.

In Scheiben geschnittene Texteffekte können jedoch eine unterhaltsame Lösung sein und dazu beitragen, einen Schwerpunkt zu erzeugen. Durch das Hinzufügen einer Animation können Sie auch die nächste Stufe erreichen. (Viele der in diesem Beitrag enthaltenen Beispiele tun genau das. Besuchen Sie unbedingt diese Websites und klicken Sie auf das entsprechende Symbol.)