Share
Mit diesem Tutorial erstellen wir eine Schaltfläche für den High-Tech-Stil, die in Startseiten, Anwendungen oder Powerpoint-Präsentationen verwendet werden kann. Wir werden Illustrator verwenden, um komplexe Vektoren zu erstellen, und Photoshop, um realistische Effekte zu entwickeln.
Mit Illustrator erstellen wir ein Rechteck mit der angezeigten Größe. Mit dem Rechteckwerkzeug klicken wir auf den Arbeitsbereich. Es erscheint ein Fenster, in dem wir die exakten Größen für das Objekt bestimmen können. Ich empfehle, Illustrator-Einstellungen mit Pixeln als Maßeinheit festzulegen.
Wir legen eine Anleitung als Referenz für die horizontale Ausrichtung vor. Mit dem Plus-Stift-Werkzeug (um einem vorhandenen Vektor Ankerpunkte hinzuzufügen), fügen wir einen zusätzlichen Ankerpunkt an der oberen Seite des Rechtecks hinzu.
Jetzt wählen wir diesen neuen Ankerpunkt aus und nehmen ihn höher als die Linie, und wir trennen den unteren Ankerpunkt voneinander, um ein Objekt mit dieser angenäherten Form zu erhalten.
Bei den Ankerpunktgriffen verwenden wir den oberen Punkt als Achse für eine weiche Kurve.
Jetzt müssen wir zwei weitere Objekte erhalten, die ein Dreipunktobjekt integrieren. Wir drehen diesen Vektor unter Verwendung seines zentralen unteren Teils als Rotationsachse. Zu Beginn wählen wir das Rotationswerkzeug aus und klicken auf den unteren Teil. Dann wird der Cursor in einen kleinen schwarzen Pfeil verwandelt.
Wenn Sie die Alt-Taste drücken (damit wird das Duplizieren gemacht - Sie sehen den schwarzen Pfeil zusammen mit einem weißen Pfeil), ziehen wir das Objekt. Wir verwenden das Informationsfenster, um das duplizierte Objekt um einen bestimmten Grad zu drehen. In Anbetracht dessen, dass es sich um ein Dreipunktobjekt handelt, müssen wir 360 ° für diese Zahl (3) teilen, sodass unser duplizierter Vektor sich um 120 ° drehen muss. Ziehen Sie es, bis diese ungefähre Zahl im Infofenster angezeigt wird.
Durch Drücken von Strg + D (Windows) duplizieren wir automatisch, was wir getan haben. Dieser Vektor wird also bei 120 ° erneut dupliziert.
Wir vereinen diese Objekte zu einem. Im Pathfinder-Fenster vereinen wir die Vektoren: Klicken Sie auf die Option Vereinigen und dann auf die Schaltfläche Erweitern, um die Gruppe in ein festes Objekt zu konvertieren.
Jetzt runden wir die Ecken dieses Objekts ab. Gehen Sie zu Effekt> Stilisieren> Runde Ecken.
Legen Sie einen Radius von 10 Pixel fest und zeigen Sie eine Vorschau des Ergebnisses an, indem Sie das Optionsfeld Vorschau aktivieren. Der Radius hängt von der Amplitude der Kurven ab, die Sie im Hauptobjekt gezeichnet haben. Mit der Vorschau-Option werden Sie feststellen, ob der Radius die Ecken richtig weich macht: Wenn die Pixelanzahl zu groß ist, wirkt das Objekt verzerrt und nicht weich gerundet.
Lassen Sie uns nun das Erscheinungsbild (den erzeugten Effekt) vom ursprünglichen Vektor trennen. Gehen Sie zu Objekt> Darstellung erweitern und ermitteln Sie den endgültigen Vektor.
Dies ist das Ergebnis unserer Arbeit mit Vektoren in Illustrator. Es ist ein komplexes Objekt, das manuell ausgeführt werden muss. Deshalb verwenden wir einige Techniken, um einen symmetrischen und ergonomischen Vektor zu erreichen.
Da unser Knopf eine innere Einfügung hat - eine Art zusammengebautes Objekt im vorderen Teil -, werden wir die vorherigen Schritte wiederholen, diesmal jedoch mit einem viel kleineren und kürzeren Objekt.
Mit den gleichen Schritten von Schritt 1 bis Schritt 12 erstellen wir dieses neue Objekt. Die übrigen Vektoren können manuell oder automatisch erstellt werden, ohne dass dies zu viel Komplexität erfordert.
Wir erstellen nur die Hälfte eines neuen Objekts und reflektieren es, um es symmetrisch zu machen. Bitte befolgen Sie sorgfältig die Schritte, die Sie auf dieser Grafik sehen.
Mit dem Reflektieren-Werkzeug duplizieren wir das Objekt und halten dabei die Umschalttaste + Alt-Taste gedrückt.
Jetzt vereinen wir beide Hälften mit dem Pathfinder-Tool. Sie können die verbleibenden Ankerpunkte dieser Vereinigung mit dem Minus-Stift-Werkzeug löschen.
Wir verwenden die zuvor beschriebene Duplikationsmethode, indem wir das Objekt um 120 ° drehen, um auch 3 identische Objekte zu erhalten und gleichmäßig zu verteilen.
Zum Schluss erstellen wir einen einfachen Kreis, einen Vektor, der als LEDs verwendet wird, die die Schaltfläche im Hover-Status leuchten. Wir werden die Bearbeitung in Photoshop abschließen, um Maskierungstechniken für geformte Ebenen hinzuzufügen.
Jetzt wählen wir alle Vektoren aus und drücken Strg + C (Windows), um sie in die Systemzwischenablage zu kopieren.
Wir schließen Illustrator und öffnen Photoshop. Wir erstellen eine .PSD von 1024x768 Pixeln und diese Anfangskonfiguration.
Wir lackieren die erste Schicht in Schwarz. Anschließend wenden wir einen Ebenenstil an, um einen Hintergrundverlauf zu erstellen.
Mit dunkelgrauen und schwarzen Farben erstellen wir einen radialen Verlauf und bringen ihn auf die maximale Skalierung (130-150%). Denken Sie daran, dass Sie in diesem Ebenenstilfenster den Farbverlauf an die gewünschte Stelle auf dem Bildschirm ziehen können.
Jetzt fügen wir die Vektoren als Formebenen ein. Strg + V oder Bearbeiten> Einfügen.
Wir haben die Vektoren in einer Formschicht und müssen sie in verschiedenen Schichten trennen. Lassen Sie uns so viele Ebenen wie Teile kopieren, die wir in diesem Fall -4 haben, und entfernen Sie die unnötigen Objekte auf jeder Ebene, wobei Sie die Form verlassen, die uns interessiert.
Die Reihenfolge der Ebenen ist die, die Sie im Bild sehen. Vergessen Sie nicht, jede Schicht zu benennen, um Ihre Arbeit besser organisieren zu können. Dazu werden einige Ebenen hinzugefügt, die vollständig in Photoshop erstellt werden. Wir werden Ebenenstile zu unserer Hauptschaltfläche hinzufügen.
Durch einen Doppelklick auf die Ebene im Hauptschaltflächenfenster öffnen wir das Bearbeitungsfenster dieser Ebenenstile. Bei "Mischoptionen: Standard" setzen wir die Deckkraft dieser Ebene auf Null, um nur unsere Ebeneneffekte zu sehen. Wir beginnen mit dem Hinzufügen eines kreisförmigen Farbverlaufs mit den gleichen Hintergrundfarben (333333 (dunkelgrau) und # 000000 (schwarz)). Stellen Sie sicher, dass dieser Farbverlauf von der Mitte bis zum Rand weich ist, und vergrößert ihn auf 120%..
Mit einem inneren Schatten und Deaktivieren der Option "Globales Licht verwenden" (die wir IMMER bei 90 ° verwenden werden), invertieren wir diesen Schatten und ziehen den Winkeleditor des Schattens auf -90 °. Dies wird uns helfen, die Schatten im unteren Bereich zu verstärken…
Wir haben den ersten Teil des Knopfbearbeitungsprozesses abgeschlossen. Wir haben jetzt den vorderen Teil mit einer undurchsichtigen Oberfläche fertiggestellt, den wir später mit Glanz- und Pseudo-3D-Extrusionen ergänzen werden.
Jetzt erstellen wir einen verchromten Strich um den Knopf. Wir fügen einen 3-Pixel-Strich mit Verlaufsfüllung hinzu. Wir fügen diesem Verlauf innerhalb des Strichs weitere Details hinzu. Wir reproduzieren eine reflektierende Oberfläche aus verchromtem Metall, auf der wir den Horizont und den Himmel einer Freilichtbühne reflektieren.
Wir wenden den reflektierten Stil auf den Farbverlauf an, um die Anzahl der verchromten Reflexionen zu vergrößern. Durch Drehen des Neigungswinkels platzieren wir die helleren Bereiche an der gewünschten Stelle. In diesem Fall sollte die maximale Helligkeit im oberen Bereich des Strichs gesehen werden.
Jetzt machen wir die verchromte Oberfläche komplexer, indem dem Metall mehr Licht- und Schattendetails hinzugefügt werden. Mit Bevel & Emboss und der Gloss Contour, die Sie in diesem Bild sehen, fügen wir der Oberfläche weitere Details hinzu.
Mit Inner Glow fügen wir der Schaltfläche eine innere abgeschrägte Kante hinzu, als ob sie 3D wäre, um die Verschmelzung mit dem Hintergrund des Objekts schärfer zu gestalten.
Nun benötigen wir eine Auswahl, um einige Details manuell über die Schaltfläche zu zeichnen. Der erste Schritt besteht darin, die Formebene der Schaltfläche zu verwenden und eine Auswahl zu erhalten, die als Maske für das Bemalen verwendet wird. Gehen Sie zum Fenster Pfade und wählen Sie die Schaltflächenebene aus, um eine Auswahl mit derselben Form zu erstellen.
Nun verkleinern wir die Größe dieser Auswahl, indem Sie auf Auswählen> Ändern> Vertrag klicken. Wir verkleinern die Auswahl um 10 Pixel von ihrer ursprünglichen Größe.
Jetzt weichen wir die Auswahl auf. Gehen Sie zu Auswählen> Ändern> Feder oder Alt + Strg + D (Windows). Wir wenden 1 Pixel Feder an und drücken OK.
Wir blenden die Auswahl mit Strg + H aus, um besser darzustellen, was wir tun werden. Mit dem Pinselwerkzeug mit einem 35-Pixel-Pinsel und einem Fluss von 10% zeichnen wir in einer neuen Ebene einige Lichtreflexionen über der Schaltfläche und verwenden dabei weiße Farbe. Da das Licht unserer Szene von oben kommt, werden wir den oberen Bereich der Schaltfläche mit mehr Helligkeit ausstatten und mit kleinen Lichtpunkten einige dunkle Bereiche im unteren Teil des Objekts hervorheben.
Wenn Sie unsere Auswahl beibehalten (die mit Strg + H wieder sichtbar wird), reduzieren wir einige Pixel, um ein wenig von der Arbeit, die wir mit dem Pinsel gemacht haben, zu löschen und einen verfeinerten Effekt zu erzielen. Diesmal verkleinern wir die Auswahl um 3 Pixel.
Diese Auswahl wird wieder ausgeblendet, indem Sie die Tastenkombination Strg + H verwenden und die Löschtaste drücken, um einige Teile unserer vorherigen Pinselspuren zu löschen. Dies ermöglichte uns das manuelle Malen und Polieren unserer Arbeit, wobei ein abgeschrägter Randbereich erstellt wurde, der den 3D-Aspekt der Schaltfläche verstärkt und der Oberfläche eine plastische Textur verleiht.
Wir haben die Tastenstruktur beendet. Jetzt müssen wir eine Einfügung in der Mitte erstellen. Der erste Schritt besteht darin, die Deckkraft der Formschicht auf null (0%) zu setzen..
Erstellen Sie einen neuen inneren Schatten im umgekehrten Winkel, genau wie zuvor für die Hauptschaltfläche. Stellen Sie sicher, dass Sie die Werte hinzufügen, die Sie in diesem Bild sehen.
Ein kleiner Strich repräsentiert nun eine Abschrägung zwischen beiden Objekten.
Der folgende Schritt ist ein Schlagschatten, der vom Blend-Modus-Bildschirm und der weißen Farbe als beleuchtete Fläche verwendet wird. Die Größe dieses Lichts muss 2 Pixel betragen, um sehr scharf zu sein, als wäre es eine abgeschrägte Kante, die etwas Licht von oben empfängt.
Zum Schluss erstellen wir mit einem inneren Schein die abgeschrägte Kante des inneren Knopfes. Auf diese Weise interpretiert der Betrachter dieses Objekt als eine kleine, abgeschrägte, kantige Fläche, die in die Hauptschaltfläche eingebettet ist.
Wir sind fertig mit dem Hauptknopf. Eigentlich handelt es sich nicht um eine Schaltfläche, die auf einem Hintergrund platziert wird: Durch einige zusätzliche Effekte wird es als Einfügung der Hintergrundoberfläche gesehen, die einen metallischen Strich aufweist und eine Schaltfläche enthält, die nach unten gedrückt werden kann.
Jetzt erstellen wir das Power-Symbol der Schaltfläche. Laden Sie diese kostenlose Schriftart herunter: http://www.dafont.com/guifx-v2-transports.font. Sie können dieses Objekt mit der Taste "q" und dieser Schriftart in 48 Punkten erstellen.
In diesem Bild sehen Sie, wie wir dem Symbol eine externe abgeschrägte Kante hinzufügen können, indem Sie einen 3-Pixel-Strich derselben Farbe wie die Schaltflächenoberfläche verwenden und dann den Strichprägungseffekt mit diesen Werten anwenden.
Mit dem Strichprägungseffekt als Option zum Erstellen einer abgeschrägten Kante können wir den abgeschrägten Effekt des Symbols im Hintergrund erstellen.
Zum Schluss fügen wir dem Symbol eine metallische Textur hinzu, indem Sie einen Farbverlauf verwenden, wie Sie in diesem Bild sehen können.
Jetzt erstellen wir 3 LEDs, die die Taste aufleuchten, wenn wir mit der Maus darüber fahren. Der erste Schritt besteht darin, der Formebene die Farbe # 06B9FB zuzuweisen. Doppelklicken Sie darauf, um die Farbe zu bearbeiten.
Mit der Formebene der Hauptschaltfläche erstellen wir eine Auswahl.
Wir erweitern die Größe dieser Auswahl, indem Sie Auswählen> Ändern> Erweitern wählen.
Wir setzen eine Erweiterung um 8 Pixel und drücken OK.
Wir invertieren diese Auswahl mit Select> Inverse.
Mit dieser umgekehrten Auswahl erstellen wir eine Maske, um die endgültige Form und Größe der LEDs um die Schaltfläche herum zu erhalten.
Mit einem Strich mit derselben Farbe der Tastenoberfläche (verwenden Sie den Farbwähler, um ihn zu erhalten), erstellen wir eine kleine Abschrägung um diese Lichter. Dies ermöglicht uns die Vorstellung eines eingefügten Objekts auf der Hintergrundoberfläche.
Mit Abschrägung und Relief geben wir unserem Strich einen oberen Schatten und ein unteres Licht (als ob das Licht von oben diese abgeschrägten Kanten beeinflussen würde)..
Mit invertiertem Inner Shadow und Multiply erzeugen wir eine Acrylreflexion über dem oberen Bereich dieser LEDs.
Wir beenden die Ausgabe dieser Objekte mit einem Schlagschatten, mit dem wir die Idee vermitteln können, dass diese Details im Schaltflächenentwurf die Hintergrundoberfläche ändern, sie niederdrücken und um sie schattierte Bereiche erzeugen.
So sieht unser Button jetzt aus, aber es fehlen noch einige Effekte.
Wir werden die Schicht der vorherigen LEDs duplizieren und diese neue Formebene weiß lackieren. Wir beginnen, mit Outer Glow und diesen Werten den leuchtenden LED-Effekt zu erzeugen.
Wir fügen die Beleuchtung des Bereichs in der Nähe der LEDs hinzu, indem Sie den Drop Shadow-Modus im Screen Blend-Modus verwenden.
Der Rollover-Status der Schaltfläche ist abgeschlossen. Wenn Sie nun eine Auswahl mit 20 Pixeln unter der neuen Ebene verwenden, machen wir den Hintergrund so, dass er hinter der Schaltfläche eine konvexe Erscheinung hat, als ob der Hintergrund aus seiner Mitte herauskommen würde, wodurch ein weicher 3D-Ball entsteht, der auf das obige Licht reagiert.
Wir malen diese Auswahl in Weiß, zuvor mit einer 20-Pixel-Feder weich gemacht. Sie können das Malwerkzeug oder die Tastenkombination Alt + Rücktaste verwenden, um die Ebene mit der Farbe zu zeichnen, die Sie als Vordergrund verwenden.
Wir setzen die Deckkraft dieser Kugel im Fenster Layer Styles Edition auf Null (0%).
Mit einem Farbverlauf von 50% Transparenz und Überblendung (bei Verwendung von weißen und schwarzen Farben, die standardmäßig im Verlaufseditor eingestellt sind) erreichen wir dieses kugelförmige Gefühl auf dem Schaltflächenhintergrund.
Nun sind wir mit dem Button und all seinen Details fertig. Es müssen lediglich abgeschrägte Kanten im Hintergrund erstellt werden, wobei die in Illustrator erstellten symmetrischen Vektoren verwendet werden.
Wie immer nehmen wir die Deckkraft auf null.
Mit einem Strich und diesen Werten erstellen wir das Basrelief dieser Schrägen im Hintergrund.
Mit dem weißen Schatten- und Mischbildschirm erstellen wir den beleuchteten Bereich dieser abgeschrägten Kanten.
Zum Schluss verbergen wir einen Teil dieser abgeschrägten Kanten mit einer 20 Pixel weichen Maske. Die Idee ist, dass diese sanft mit dem Hintergrund verschmelzen und in Richtung der Ecken verschwinden.
Es war eine lange Fahrt, aber das Ergebnis hat sich gelohnt. Der letzte Schliff ist eine kleine Linsenreflexion über dem oberen hellen Bereich der verchromten Kante. Speichern Sie eine .PSD-Datei immer mit diesen Ressourcen, die reflektierenden Objekten einen realistischen und fotografischen Effekt verleihen. Sie können das endgültige Bild unten anzeigen oder eine größere Version hier anzeigen.
Accentsconagua