Designtrend: Geschnittener Text & Typografie

Puristen sagen, dass Sie die Typografie niemals ändern sollten. Die Beschriftung sollte wie vom Schriftdesigner vorgesehen angezeigt werden, oder Sie sollten eine andere Schriftart auswählen. Während dies meistens zutrifft, liegt die Ausnahme im Trend für geschnittenen Text.

Der raffinierte Effekt lässt Schriftelemente so aussehen, als wären sie mit einem Präzisionswerkzeug geschnitten worden, und kann Logos, Überschriften und einfachen Textblöcken visuelles Interesse verleihen. In Scheiben geschnittene Texteffekte können von sehr subtil (z. B. ein kleiner Teil eines fehlenden Buchstabens) bis zu großen Teilen von Wörtern variieren, die insgesamt fehlen.

Bei der Verwendung von geschnittenem Text ist zu beachten, dass Wörter immer lesbar sein müssen - welchen Sinn gibt es sonst? - und Sie sollten genau darauf achten, dass unbeabsichtigte Buchstabenkombinationen oder Wörter nicht durch Schneiden entstehen. Hier ist ein Blick darauf, wie es für Sie funktioniert, mit einigen Beispielen für Designs, die es gut machen.

Entdecken Sie Envato-Elemente

"Traditionelle" Scheibe

In Scheiben geschnittener Text enthält ein fast geschichtetes Erscheinungsbild mit einem Textelement, z. B. einem Wort oder einer kleinen Gruppe von Wörtern, das auf zwei Ebenen geschnitten und überlappt wird. Dieser Effekt schafft Tiefe und kann einen einfachen Zeichensatz visuell interessant machen.

Resoluut verwendet diesen Effekt in Kombination mit einem kaufmännischen Und, um Benutzer in die Mitte des Designs zu ziehen. Der in Scheiben geschnittene Text spiegelt die unten stehende Botschaft wider, dass sich das Unternehmen auf „digitales Design mit Haltung“ konzentriert, da in Scheiben geschnittener Text eine gewisse kantigere Atmosphäre vermittelt, die eine direkte Beschriftung darstellt.

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 bleibt.

Text und Fotos in Scheiben schneiden

Der Überlagerungseffekt ist nicht auf eine Kombination aus Schriftart und Leerzeichen beschränkt. Designer können auch Bilder und Text verwenden, um einen coolen Schnitteffekt zu erzielen, wie im obigen Beispiel von The Shift.

Die Schrägschnittkombinationen eines einzelnen Bilds (ebenfalls in Scheiben geschnitten) mit Schriftzug ziehen den Benutzer in das Design ein.

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

Dieser Trend eignet sich gut für digitale Agenturen und Portfolio-Websites, um ein modernes Erscheinungsbild zu präsentieren und kreative Aspekte hervorzuheben.

Slice mit Animation

Der geschnittene 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 ist jedes der geschnittenen Textelemente tatsächlich eine Navigation. Benutzer können auf beide Elemente klicken. Beeindruckender ist jedoch die Hover-Aktion, mit der der geschnittene Text wieder zusammengesetzt wird.

Für Logos

In Scheiben geschnittener Text kann eine unterhaltsame 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 Markenbekanntheit sein. Es kann auch ein hochgrafisches Element für mehrere Verwendungszwecke sein, wie z. B. das Hemddesign oben.

Achten Sie beim Arbeiten mit geschnittenem Text auf eine natürliche Form und Neigung zum Schneiden, damit es interessant ist, sie zu betrachten und gleichzeitig die Lesbarkeit zu verbessern.

Achten Sie darauf, wie beim Schneiden Leerzeichen entstehen. Das obige Design verwendet eine große Menge zusätzlicher Informationen. Die häufigere Verwendung des Schneidens ist oft eine dünne Linie, aber Ansätze (wie Sie aus den Beispielen in diesem Beitrag sehen können) können ziemlich dramatisch variieren.

Interaktivität erstellen

Ermöglichen Sie Benutzern, ihren eigenen Text mit einer interaktiven Kombination aus Text und Pinsel zu schneiden, wie im obigen Beispiel. Während der Text per se nicht genau in Scheiben geschnitten ist, wird der Effekt im Kunstherstellungsprozess 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.

Geschnittene vertikale Striche

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

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

Vertikale Schnitte sind in der Regel kürzer, da jeder Schnitt Teil eines einzelnen Buchstabens ist. Der Trick, um vertikale Scheiben zum Laufen zu bringen, ist die Konsistenz. Die Art und Weise, wie Schnitte gemacht werden, sollte sich gegenseitig nachahmen, damit die Buchstaben so aussehen, als würden sie zusammenpassen. Diese Methode des Schneidens sollte so aussehen, als wäre sie fast ein beabsichtigter Teil der Schrift. (Nicht im obigen Beispiel haben Slices von Buchstabe zu Buchstabe die gleiche Breite und die gleichen Buchstaben die gleichen Slices.)

Stellen Sie den visuellen Fluss her

Die Schnitte erzeugen fast ein Gefühl der Dringlichkeit beim Lesen, sodass Sie über die Buchstaben und zum Hauptbild auf dem Bildschirm wechseln.

Eine Konsequenz von geschnittenem Text - beabsichtigt oder nicht - ist, dass er einen visuellen Fluss erzeugt. Das Auge eines Benutzers folgt der Richtung des Slice und des ihn umgebenden Leerraums.

Schauen Sie sich das Logo im obigen Beispiel an. Mit Slices in den R und O's in Robocath (plus dem normalen fehlenden Teil des C) gibt es eine offensichtliche Richtungsbewegung über den Bildschirm von links nach rechts.

Der Zug ist stärker als das, was Sie mit normalem Lesen assoziieren (auch von links nach rechts), da die Scheiben Sie schnell durch die Zeichen schieben. Die Schnitte erzeugen fast ein Gefühl der Dringlichkeit beim Lesen, sodass Sie über die Buchstaben und zum Hauptbild auf dem Bildschirm wechseln.

Hervorheben der Beschriftung

Der letzte - und möglicherweise überzeugendste - Grund, den Trend zum Design von geschnittenen Texten zu verwenden, besteht darin, die Beschriftung oder die Nachricht hervorzuheben. Das Schneiden kann so ziemlich jede Änderung von Buchstaben sein, bei der ein Teil eines Zeichens im Design fehlt.

MJND (oben) verwendet eher einen Überlagerungseffekt, um Buchstabenformen auszublenden oder zu schneiden, um die Nachricht hervorzuheben. Das Bild könnte hier leicht die gesamte Kommunikation übernehmen, aber dieser Effekt hilft dem Benutzer, zur Hauptnachricht zurückzukehren. Die Kombination ist einfach, effektiv und optisch interessant.

Lernmittel

Es gibt verschiedene Möglichkeiten, geschnittene Texteffekte für Projekte zu erstellen, je nachdem, was Sie erstellen möchten. Zu den beliebtesten Optionen gehört das manuelle Erstellen des Texteffekts mithilfe einer Bearbeitungssoftware oder mithilfe von CSS, um den Effekt für Webprojekte zu erstellen.

Hier finden Sie Tutorials für jede dieser Optionen, damit Sie versuchen können, einen trendigen Text in Scheiben zu schneiden:

• Video: So erstellen Sie geschnittenen Text in Adobe Illustrator
• Schneiden Sie das Text-Effekt-Snippet mit CSS aus

Fazit

Die Verwendung des Texttrends in Scheiben kann etwas schwierig sein, da die Typelemente geändert werden müssen. Es ist wichtig, dass die Lesbarkeit nicht verloren geht. Andernfalls können Benutzer mit diesem Effekt verloren gehen.

In Scheiben geschnittene Texteffekte können jedoch eine unterhaltsame Lösung sein und dabei helfen, einen Schwerpunkt zu generieren. Das Hinzufügen eines Hauches von Animation kann auch dazu beitragen, das nächste Level zu erreichen. (Viele der in diesem Beitrag enthaltenen Beispiele tun genau das. Besuchen Sie diese Websites und klicken Sie sich um.)