Manchmal haben Sie ein perfektes Layout, aber Ihr Design erfordert etwas mehr, um es abzuschließen. Leider ist es leicht, sich festzusetzen und keine Ideen mehr zu haben.
Heute helfen wir Ihnen bei der Lösung dieses Problems, indem wir fünf zufällige Designideen hervorheben, die Sie in Ihre Rückseite von Designtricks integrieren können. Lass uns anfangen!
Gestrichelt
Gestrichelte oder gestrichelte Linien sind eine großartige Möglichkeit, Ihren Entwürfen ein wenig Flair zu verleihen. Sie sind sehr einfach zu implementieren und neigen dazu, einige alte Schulklassen in ein Design zu integrieren. In Illustrator ist das Erstellen eines gestrichelten Strichs so einfach wie das Öffnen des Strichs. Palette.
Variieren Sie die Verwendung der gestrichelten Linie. Platzieren Sie ein Element vertikal zwischen den Elementen in einer horizontalen Liste, versuchen Sie es nur mit einem Text oder erstellen Sie sogar ein vollständiges Rechteck.
Sie können auch eine gestrichelte oder gepunktete Linie mit reinem CSS über die Rand Eigentum.
Traceflow, die unten gezeigte Website, ist ein Paradebeispiel für die Verwendung der Technik der gestrichelten Linien. Hier ist ein Blick auf ihren Navigationsbereich:
Genäht
Die gleiche Website zeigt eine leicht veränderte Version der Technik. Wenn Sie die gestrichelten Linien etwas von der Kante abbringen, ergibt sich ein gestickter Look.
Einfache Textverriegelungen
Textverknüpfungen wie die oben sind derzeit sehr beliebt. Sie werden wahrscheinlich ein schlechtes Klischee sein? in der nahen Zukunft scheint sie aber vorerst jeder zu lieben. Sie sehen aus wie ein wirklich schickes Design, sind aber ziemlich einfach zu bauen. Schnappen Sie sich einfach ein paar Schriftarten, die gut aussehen und die Linienbreite gleich machen. Achten Sie darauf, die Anzahl der Wörter pro Zeile so zu variieren, dass einige Wörter größer sind als andere und die Betonung genau dort liegt, wo Sie es möchten.
Mischen Sie in einfachen, aber attraktiven Grafiken mit dem Typ, um das Interesse zu erhöhen. Beachten Sie, wie ich die doppelte Linienform einer der Schriftarten tatsächlich als Inspiration für eine vertikale Trennlinie verwendet habe. Dies ist ein Lehrbuchbeispiel für das Prinzip der Wiederholung. Sie sollten in Ihrer eigenen Arbeit nach ähnlichen Möglichkeiten suchen.
Die Sache, die das so einfach macht, ist, dass die Leute, die die Schriften erstellt haben, die ganze Arbeit erledigt haben. Der ästhetische Reiz liegt in der Attraktivität der Buchstabenformen. Dies ist einer der Hauptgründe, warum Designer die Typografie so lieben. Jemand anders macht die ganze Arbeit, dann werfen wir sie auf eine Leinwand und bekommen die Anerkennung!
Natürlich haben alle wirklich großartigen Textverknüpfungen etwas mehr Arbeit. Schauen Sie sich dieses großartige Beispiel von Deda.me an, das einige schöne Variationen in Text, Bildmaterial und Farbe zeigt. Hier gibt es auch eine Menge cooler Hover-Effekte, also schauen Sie auf der Baustelle vorbei und schauen Sie vorbei.
Aufklebereffekt
Der Sticker-Effekt ist so lächerlich einfach, dass er dumm ist. Alles, was Sie wirklich tun, ist, so gut wie jedes Bild aufzunehmen und es mit einem dicken weißen Strich und vielleicht etwas Schatten auf einen Hintergrund zu werfen. Dies ist ein guter Trick, wenn Sie sich für ein fröhliches, lustiges und Retro-Gefühl interessieren. Da sich diese Technik für helle Farben und interessante Illustrationen eignet, ist es offensichtlich perfekt, wenn Sie etwas für Kinder entwerfen.
In Photoshop müssen Sie den Hub nur so lange aufdrehen, bis er gut aussieht. Für Text müssen Sie möglicherweise die negativen Bereiche in den Buchstaben manuell ausfüllen, dies ist jedoch in der Regel ein sehr schneller Vorgang.
Wir können diese Technik auf einer Sticker-Website in Aktion sehen! Schauen Sie sich die Abbildung unten von Sticker Mule an.
Eine günstige Alternative zu einem guten Beschneidungspfad
Dieser Trick kann auch verwendet werden, um eine gewöhnliche Designhürde zu lösen. Wenn Sie zu faul oder unerfahren sind, um einen geeigneten Beschneidungspfad zu erstellen, kann es schwierig sein, ein auf weißem Hintergrund aufgenommenes Foto auf eine dunkle Leinwand zu platzieren, ohne dass Artefakte sichtbar werden.
Hier müssen Sie nur eine wirklich schnelle und schmutzige Auswahl treffen und dann einen dicken weißen Strich anwenden. Das Ergebnis sieht ziemlich absichtlich aus, niemand wird Sie sogar in Photoshop saugen!
Schlagzeile Banner
Lust auf eine lustige Art, eine Schlagzeile zu beleben? Klebe es auf ein Banner. Dies ist ein weiterer Trend, der heutzutage im Webdesign sehr beliebt ist. Sie finden diese Idee im gesamten Web.
Wie Sie in der Abbildung oben sehen können, gibt es drei Hauptvarianten Ihres typischen Banners, die alle in Verbindung mit einer Website verwendet werden können. Das erste ist ein freistehendes Banner, das sich an den Enden irgendwie zusammenfaltet.
Wenn Sie sich fragen, wie Sie den 3D-Effekt erstellen können, könnte es nicht einfacher sein. Wählen Sie zunächst eine Farbe für den Hauptteil oder den vorderen Teil des Banners. Dann wählen Sie eine leicht dunklerer Farbton für die Seitenteile. Erstellen Sie schließlich ein winziges Dreieck und machen Sie es noch dunkler. Die drei Teile werden im Bild unten getrennt und dann zusammen angezeigt.
Die beiden anderen Versionen des Banners sind eine Variation dieses Themas. Diesmal ist die Idee, das Banner mit einigen Inhalten zu versehen. Sie können das Banner wie beim zweiten Beispiel von einer Seite aus hervorblicken lassen oder das gesamte Objekt wie beim dritten Beispiel umschließen.
Die Website WPCoder verwendet tatsächlich alle drei Variationen des Banners in seiner Gestaltung. Hier sind ein paar Screenshots einiger Elemente.
Diese wurden mit Bildern erstellt, aber es ist üblich, einen ähnlichen Effekt nur mit HTML5 und CSS3 zu erzielen. In diesem Tutorial von WebDesignTuts finden Sie eine exemplarische Vorgehensweise.
Fügen Sie ein Foto in Ihren Text ein
Manchmal fühlt sich eine einfache, einfarbige Überschrift langweilig an. Du wirfst einen Schatten darauf und versuchst es vielleicht, es abzuschneiden, aber das macht den klassischen, einfachen Look aus, den du suchst. Was ist die Lösung? Es ist einfach! Verwenden Sie einfach ein Foto als Hintergrund für Ihren Text.
Das Erstellen einer dieser Überschriften in Photoshop ist ein Kinderspiel. Sie brauchen nur zwei Schichten.Geben Sie zunächst etwas Text ein und wählen Sie den gewünschten Text aus. Dann werfen Sie ein Foto darüber und schlagen Sie Cmd-Option-G oder gehe zu Ebene> Schnittmaske erstellen. Das ist alles dazu! Jetzt können Sie die Text- und Bildebenen unabhängig voneinander verschieben, und der Clip bleibt erhalten.
CSS verwenden
Sie können diese Technik in CSS auch durch die Verwendung von Hintergrund-Clip: Text oder Maskenbild. Trent Walton hat ein kurzes, aber praktisches Tutorial, um genau das zu erreichen.
Denken Sie daran, dass Sie ein Bild verwenden müssen, wenn Sie möchten, dass alle Benutzer den Effekt erleben. Wie bei den meisten neueren CSS-Funktionen ist die Browserunterstützung für diese Eigenschaften fleckig.
Fazit
Ich hoffe, diese schnellen und einfachen Designtricks haben Sie dazu inspiriert, ein wenig genauer darüber nachzudenken, wie Sie die Dinge in Ihrem typischen Designprozess ändern können. Es ist wahrscheinlich, dass Sie diese schon tausend Mal in Aktion gesehen haben, aber wenn Sie sich dessen bewusst werden, können Sie als Designer Ihren Horizont erweitern.
Hinterlasse einen Kommentar und lass uns wissen, was du denkst! Benutzt du regelmäßig eines davon? Wirst du jetzt anfangen?