German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)
In diesem Lernprogramm erstellen wir eine Schaltfläche im 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.
Schritt 1
Mit Illustrator erstellen wir ein Rechteck mit der angezeigten Größe. Mit dem Rechteckwerkzeug klicken wir auf den Arbeitsbereich und 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.
Schritt 2
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.
Schritt 3
Jetzt wählen wir diesen neuen Ankerpunkt aus und nehmen ihn höher als die Linie. Wir trennen den unteren Ankerpunkt voneinander, um ein Objekt mit dieser angenäherten Form zu erhalten.
Schritt 4
Bei den Ankerpunktgriffen verwenden wir den oberen Punkt als Achse für eine weiche Kurve.
Schritt 5
Jetzt müssen wir zwei weitere Objekte erhalten, die ein Dreipunktobjekt integrieren. Wir drehen diesen Vektor unter Verwendung seines zentralen unteren Teils als Rotationsachse. Als erstes wählen wir das Rotationswerkzeug aus und klicken auf den unteren Teil. Dann wird der Cursor in einen kleinen schwarzen Pfeil verwandelt.
Schritt 6
Durch Drücken der Alt-Taste (die zum Duplizieren verwendet wird - 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 dies ein Dreipunktobjekt ist, 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.
Schritt 7
Durch Drücken von Strg + D (Windows) duplizieren wir automatisch, was wir getan haben. Dieser Vektor wird also bei 120 ° erneut dupliziert.
Schritt 8
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.
Schritt 9
Jetzt runden wir die Ecken dieses Objekts ab. Gehen Sie zu Effekt> Stilisieren> Runde Ecken.
Schritt 10
Legen Sie einen Radius von 10 Pixeln 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.
Schritt 11
Trennen wir nun das Erscheinungsbild (den erstellten Effekt) vom ursprünglichen Vektor. Gehen Sie zu Objekt> Darstellung erweitern und ermitteln Sie den endgültigen Vektor.
Schritt 12
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 erzielen.
Schritt 13
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.
Schritt 14
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.
Schritt 15
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.
Schritt 16
Mit dem Reflektieren-Werkzeug duplizieren wir das Objekt und halten dabei die Umschalttaste + Alt-Taste gedrückt.
Schritt 17
Jetzt vereinen wir beide Hälften mit dem Pathfinder-Tool. Sie können die verbleibenden Ankerpunkte dieser Vereingung mit dem Minus-Stift-Werkzeug löschen.
Schritt 18
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.
Schritt 19
Zum Schluss erstellen wir einen einfachen Kreis, einen Vektor, der als LEDs verwendet wird, die die Schaltfläche in ihrem Hover-Zustand leuchten. Wir werden die Bearbeitung in Photoshop abschließen, um Maskierungstechniken für geformte Ebenen hinzuzufügen.
Schritt 20
Jetzt wählen wir alle Vektoren aus und drücken Strg + C (Windows), um sie in die Systemzwischenablage zu kopieren.
Schritt 21
Wir schließen Illustrator und öffnen Photoshop. Wir erstellen eine .PSD von 1024x768 Pixeln und diese Anfangskonfiguration.
Schritt 22
Wir lackieren die erste Schicht in Schwarz. Anschließend wenden wir einen Ebenenstil an, um einen Hintergrundverlauf zu erstellen.
Schritt 23
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.
Schritt 24
Jetzt fügen wir die Vektoren als Formebenen ein. Strg + V oder Bearbeiten> Einfügen.
Schritt 25
Wir haben die Vektoren in einer Formschicht und müssen sie in verschiedenen Schichten trennen. Wir duplizieren so viele Ebenen wie Teile, die wir in diesem Fall -4 haben, und entfernen die unnötigen Objekte auf jeder Ebene, wobei die Form verbleibt, an der wir interessiert sind.
Schritt 26
Die Reihenfolge der Ebenen ist die, die Sie auf dem 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.
Schritt 27
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 seine Größe auf 120% erhöht wird.
Schritt 28
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 hilft uns, die Schatten des unteren Bereichs zu verstärken. .
Schritt 29
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.
Schritt 30
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.
Schritt 31
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.
Schritt 32
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.
Schritt 33
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.
Schritt 34
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.
Schritt 35
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.
Schritt 36
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.
Schritt 37
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.
Schritt 38
Wir behalten unsere Auswahl (die mit Strg + H wieder sichtbar wird) bei und reduzieren 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.
Schritt 39
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.
Schritt 40
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 bringen.
Schritt 41
Erstellen Sie im umgekehrten Winkel einen neuen inneren Schatten, genau wie zuvor für die Hauptschaltfläche. Stellen Sie sicher, dass Sie die Werte hinzufügen, die Sie in diesem Bild sehen.
Schritt 42
Ein kleiner Strich repräsentiert nun eine Abschrägung zwischen beiden Objekten.
Schritt 43
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 Licht von oben empfängt.
Schritt 44
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.
Schritt 45
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.
Schritt 46
Jetzt erstellen wir das Power-Symbol der Schaltfläche. Laden Sie diese kostenlose Schriftart herunter: https://www.dafont.com/guifx-v2-transports.font. Sie können dieses Objekt mit der Taste "q" und dieser Schriftart in 48 Punkten erstellen.
Schritt 47
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.
Schritt 48
Mit dem Strichprägungseffekt als Option zum Erstellen einer abgeschrägten Kante können Sie den abgeschrägten Effekt des Symbols im Hintergrund erstellen.
Schritt 49
Zum Schluss fügen wir dem Symbol eine metallische Textur hinzu, indem Sie einen Farbverlauf verwenden, wie Sie in diesem Bild sehen können.
Schritt 50
Jetzt erstellen wir 3 LEDs, die die Schaltfläche 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.
Schritt 51
Mit der Formebene der Hauptschaltfläche erstellen wir eine Auswahl.
Schritt 52
Wir erweitern die Größe dieser Auswahl, indem Sie Auswählen> Ändern> Erweitern wählen.
Schritt 53
Wir setzen eine Erweiterung um 8 Pixel und drücken OK.
Schritt 54
Wir invertieren diese Auswahl mit Select> Inverse.
Schritt 55
Mit dieser umgekehrten Auswahl erstellen wir eine Maske, um die endgültige Form und Größe der LEDs um die Schaltfläche herum zu ermitteln.
Schritt 56
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.
Schritt 57
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).
Schritt 58
Mit invertiertem Inner Shadow und Multiply erzeugen wir eine Acrylreflexion über dem oberen Bereich dieser LEDs.
Schritt 59
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 nach unten drücken und um sie schattierte Bereiche erstellen.
Schritt 60
So sieht unser Button jetzt aus, aber es fehlen noch einige Effekte.
Schritt 61
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.
Schritt 62
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.
Schritt 63
Der Rollover-Status der Schaltfläche wird ausgeführt. 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.
Schritt 64
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.
Schritt 65
Wir setzen die Deckkraft dieser Kugel im Fenster Layer Styles Edition auf Null (0%).
Schritt 66
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.
Schritt 67
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.
Schritt 68
Wie immer nehmen wir die Deckkraft auf null.
Schritt 69
Mit einem Strich und diesen Werten erstellen wir das Basrelief dieser Schrägen im Hintergrund.
Schritt 70
Mit dem weißen Schatten- und Mischbildschirm erstellen wir den beleuchteten Bereich dieser abgeschrägten Kanten.
Schritt 71
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.
Fazit
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.
By
