Heute haben wir eine kleine Sammlung völlig zufälliger, aber sehr nützlicher Designtricks, die Sie beim nächsten Mal, wenn Sie eine neue Idee benötigen, im Hinterkopf behalten sollten.
Ich zeige Ihnen einen schnellen Weg, um einen Software-Screenshot interessanter zu machen, wie Sie fantastische Vektor-Grunge-Texturen erstellen und einen superschnellen Weg, um einen Vektor-Starburst zu erstellen.
Breakout-Screenshot
Wenn Sie eine Website für eine Web- oder Desktop-App entwerfen, müssen Sie unweigerlich ein paar Screenshots in Ihr Design integrieren, was großartig ist, weil Sie damit attraktive Grafiken erstellen, die sehr einfach zu erstellen sind. Rufen Sie die App einfach auf Ihrem attraktiven, aber minimalen Desktop auf, drücken Sie eine Tastenkombination, fügen Sie Text hinzu und fertig!
Dies ist definitiv eine sehr einfache Möglichkeit, Artwork für eine Website zu erstellen. Es lohnt sich jedoch, darüber nachzudenken, wie Sie die Grafik noch interessanter machen können.
Eine sehr einfache Möglichkeit, dies zu tun, besteht darin, dass der Screenshot die Grenzen des Hintergrundbildes überschreitet. Dieser schnelle und einfache Trick lässt Ihr Design lebendiger und vielschichtiger wirken.
Nun, der lange und schwierige Weg, diesen Trick auszuführen, besteht darin, einen Teil des Hintergrunds auf Ihrem Screenshot auszublenden. Dies ist jedoch ein echter Schmerz. Es ist weitaus einfacher, eine transparente PNG-Datei aus Ihrem Anwendungsfenster zu erstellen, die keinen Hintergrund enthält, die Sie dann über alles platzieren können, was Sie in Photoshop wünschen.
Um dies auf einem Mac zu tun, drücken Sie Befehlstaste + Umschalttaste + 4, um das Fadenkreuz aufzurufen, mit dem Sie einen Screenshot eines ausgewählten Bereichs aufnehmen können. Bewegen Sie dann den Mauszeiger über das App-Fenster und drücken Sie die Leertaste. Das Fadenkreuz sollte sich in ein Kamerasymbol verwandeln, und das Fenster, über dem Sie den Mauszeiger bewegen, sollte hervorgehoben sein. Klicken Sie einfach auf, um eine Datei auf Ihrem Desktop zu erstellen, die dieses Fenster und seinen Schatten auf einem transparenten Hintergrund enthält. Windows-Benutzer können diese Schritte ausführen, um einen Screenshot eines Fensters zu erstellen.
Wenn Sie den Screenshot des Fensters erstellt haben, greifen Sie einen Hintergrund zum Platzieren auf und öffnen Sie beide in Photoshop.
Von hier aus ist es einfach, den Hintergrund so zuzuschneiden, dass der Screenshot herausschaut. Beachten Sie, dass ich die entgegengesetzte Route am unteren Rand des Screenshots genommen habe, die im Hintergrundbild verankert ist.
In der Wildnis
Dieser Trick ist im Webdesign momentan sehr verbreitet und kann auf einer beliebigen Anzahl von Desktopsoftware und Web-App-Sites angezeigt werden. Ein leuchtendes Beispiel ist die aktuelle Sparrow for Mac-Website.
Leichter Illustrator Starburst
Ich zögere, Ihnen diesen Trick beizubringen, einfach weil ich generell Starbursts hasse. Ich akzeptiere jedoch, dass es tatsächlich einige recht coole Anwendungen für sie gibt. Noch wichtiger ist, ich kenne einen ziemlich coolen Trick dafür, dass ich sie gerne zeige.
Öffnen Sie zunächst Illustrator und zeichnen Sie einen Kreis. Setzen Sie dann den Strich des Kreises auf eine gestrichelte Linie. Die Parameter spielen an dieser Stelle keine große Rolle, stellen Sie jedoch sicher, dass Sie etwas haben, das ungefähr so aussieht:
Hier kommt der lustige Teil. Nehmen Sie das Hubgewicht auf Ihren Kreis und drehen Sie es weit über alles logische hinaus (in die Hunderte). Legen Sie schließlich Ihre ersten Strich- und Lückenwerte als identisch fest. Das Ergebnis ist ein schöner, perfekter Starburst.
Das Tolle daran ist, dass dieser Trick Ihnen die volle Kontrolle über die Breite der Linien und Lücken gibt. Hier ist ein etwas optimiertes Beispiel, das etwas mehr verbreitet ist.
Gehen Sie noch weiter und fügen Sie den anderen Strich- und Lückenabständen einige zufällige Werte hinzu. Dies wird anfangen, einige wirklich kreative Ergebnisse zu erzielen. Hier ist ein schönes kleines Muster, das mich an eine Pfefferminz erinnert.
Es ausweiten
Wenn Sie nun mit einem funky gestrichenen Objekt wie diesem auf lange Sicht arbeiten, wird es unordentlich. Wenn Sie sich also für Ihre allgemeine Form und das allgemeine Muster entschieden haben, empfehle ich die Option Objekt> Flatten-Transparenz. Dies gibt Ihnen einen schönen, erweiterten Vektor-Starburst, der aussieht, als hätten Sie ihn auf die harte Tour gebaut (Umriss-Strich führt zu seltsamen Ergebnissen). Löschen Sie einfach den Strich des ursprünglichen Kreises, um die Dinge sauber zu halten.
Grunge Vektor-Texturen
Fotografische Grunge Texturen sind leicht zu bekommen, Vektor Grunge Texturen, nicht so sehr. Glücklicherweise ist es ziemlich einfach, das Letztere durch die Verwendung des Ersteren zu erstellen.
Beginnen wir mit Flickr Creative Commons, um eine anständige Grunge-Textur zu finden. Hier ist eine großartige von D. Sharon Pruitt.
Nun habe ich mich bewusst für dieses Modell entschieden, weil es helle Kratzer auf einem dunklen Hintergrund enthält, was scheinbar viel schwieriger zu arbeiten wäre, aber eigentlich gar nicht.
Öffnen Sie die Textur in Photoshop, drücken Sie Befehlstaste + I, um die Farben umzukehren, und Sie haben plötzlich einen schönen weißen Hintergrund mit schwarzen Kratzern. Verwenden Sie dann eine grundlegende Pegelanpassung, um die Weißtöne und die Schwarztöne nach unten zu bringen. Das Ergebnis sollte ungefähr so aussehen:
Speichern Sie nun das Bild als JPG und öffnen Sie es in Illustrator. Von hier aus haben wir einige wirklich grundlegende Formen, die mit relativer Genauigkeit automatisch verfolgt werden können. Führen Sie den Befehl Auto Trace aus, und stellen Sie die Parameter wie unten gezeigt ein. Ein wichtiger Schritt hier ist, sicherzustellen, dass Sie auf "Weiß ignorieren" klicken. Befehl, damit Illustrator nur die schwarzen Bereiche nachzeichnet.
Von hier aus haben Sie einfach die Option "Erweitern" gedrückt. Schaltfläche in der Menüleiste. Dadurch erhalten Sie 100% skalierbare und leicht anzuwendende Grunge-Kratzer.
Wir können diesen Trick mit dem letzten kombinieren und haben ein fantastisches Retro-Kunstwerk. Ziemlich cool!
Fazit
Diese Quick Tip Posts sollen Ihre Trickkiste erweitern, so dass Sie einen größeren Pool an Ideen für Ihr nächstes Designprojekt haben. Ich hoffe, dass Sie ein oder zwei Dinge gelernt haben und inspiriert wurden, Ihre eigenen einzigartigen Ideen auf der Grundlage der obigen Informationen zu entwickeln.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, welche Techniken Sie im Web gesehen haben, wissen aber nicht, wie Sie diese replizieren sollen.Wir werden einen Blick darauf werfen, ob wir beim nächsten Design-Trick helfen können.