Eine benutzerfreundliche Oberfläche, gut gezeichnete Grafiken, die richtige Anordnung der Elemente auf der Seite - der halbe Erfolg der Site beim Besucher. Das Zeichnen von Schaltflächen für eine Website ist ein kleiner, aber wichtiger Teil der Arbeit an einem Online-Projekt.
Anleitung
Schritt 1
Versuchen Sie, einen runden Knopf zu zeichnen. Die unten angegebene Methode ist auch universell zum Erstellen von Logos und Avataren. Das Zeichnen ist nicht schwierig, trotz der Anzahl der Aktionen, die Sie ausführen müssen.
Schritt 2
Öffnen Sie Adobe Photoshop. Erstellen Sie ein neues Dokument, indem Sie die Kombination "Strg + N" drücken. Bildparameter 300 * 300, Auflösung 72 ppi. Der standardmäßige Hintergrund- und Farbmodus sind Weiß bzw. RGB.
Schritt 3
Zeichnen Sie am besten mit Vektoren, damit sich die Qualität der Schaltfläche nicht verschlechtert, wenn die Schaltfläche verkleinert wird. Wählen Sie das Oval-Werkzeug aus, halten Sie die Umschalttaste gedrückt und zeichnen Sie einen Kreis aus der Mitte.
Schritt 4
Wenden Sie nun einige Effekte auf den resultierenden Kreis an. Gehen Sie zum Menü "Ebenen" - "Ebenenstil" - "Überblendungsoptionen". Hier müssen Sie einen Farbverlauf anwenden.
Schritt 5
Als nächstes aktivieren Sie hier das Kontrollkästchen neben "Prägung", um der Schaltfläche die erforderliche Wölbung zu verleihen, und stellen Sie die folgenden Parameter ein: Stil - Konturprägung, Methode - Weicher Schnitt, Tiefe - 220%, Größe - 1 Pixel, Weichzeichnung - 5 Pixel, Winkel - 135® ohne Global Illumination, Höhe - 32, Highlight-Modus - Normal mit 30 % Deckkraft, Schattenmodus - Multiplizieren mit 25 % Deckkraft
Schritt 6
Um noch mehr Volumen zu geben, aktivieren Sie hier in den Mischparametern das Kontrollkästchen "Schatten" und stellen Sie die folgenden Parameter ein: Mischmodus - Multiplikation, Transparenz - 40%, Winkel - 125o mit globaler Beleuchtung, Offset - 5 Pixel, Größe - 20 Pixel.
Schritt 7
Das Ergebnis der durchgeführten Aktionen ist ein Bild wie in der Abbildung gezeigt.
Schritt 8
Erstellen Sie nun eine neue Ebene, wählen Sie erneut "Oval" und zeichnen Sie einen Kreis mit einem kleineren Radius als die erste Form. Öffnen Sie die "Blending Options", aktivieren Sie das Kontrollkästchen neben "Inner Shadow" und stellen Sie die Parameter ein: Blending Mode - Soft Light, Angle - 125o, Offset - 0px, Shrink - 45%, Size - 21px.
Schritt 9
Als nächstes aktivieren Sie hier in den Mischoptionen "Verlaufsüberlagerung" und erstellen Sie einen Verlauf mit den Parametern wie im Bild. OK klicken
Schritt 10
Als nächstes setzen Sie den Überblendungsstil auf Radial, Skalierung auf 124%
Schritt 11
Aktivieren Sie nun das Kontrollkästchen "Strich" und stellen Sie die folgenden Parameter ein: Größe - 5 Pixel, Position - Außen, Mischmodus - Normal, Deckkraft - 100%, Strichart - Farbverlauf.
Schritt 12
Als Ergebnis dieser Aktionen sollten Sie etwas erhalten, das eher wie eine Schaltfläche aussieht. Sie können die Mischoptionen erneut öffnen und damit experimentieren.
Schritt 13
Jetzt müssen wir die Hervorhebungsschaltflächen hinzufügen, damit die Schaltfläche eine Glasstruktur annimmt. Erstellen Sie dazu erneut eine neue Ebene, wählen Sie das Werkzeug Ovale Auswahl, erstellen Sie ein Oval über der Schaltfläche und füllen Sie es mit dem Werkzeug Füllen mit Weiß. Halten Sie die Strg-Taste gedrückt, klicken Sie auf die Ebene mit dem farbigen Kreis, kehren Sie die Auswahl um ("Auswahl" - "Umkehrung"). Drücken Sie nun Löschen. Das Oval sollte um den Umfang des Kreises getrimmt werden.
Schritt 14
Ändern Sie im Ebenenbedienfeld die Option Normal in Weiches Licht, klicken Sie dann auf das Vektormaskensymbol und wählen Sie das Füllwerkzeug – Verlauf. Füllen Sie die Markierung von unten nach oben. Der Knopf ist fast fertig.
Schritt 15
Sie können der Schaltfläche eine Beschriftung hinzufügen. Sie können auch Mischeffekte darauf anwenden, z. B. inneres, äußeres Leuchten, Farbverlauf usw. Scheuen Sie sich nicht zu experimentieren, je mehr Fantasie Sie bei Ihrer Arbeit einsetzen, desto schneller werden Sie sowohl den Editor selbst als auch das Webdesign beherrschen.
