Tutorial Wie Buttons in Photoshop erstellen, Think Tank
Sie können eine Schaltfläche in Adobe Photoshop erstellen, wie folgt:
- Erstellen Sie ein neues Dokument in Photoshop. Entsprechen, die Eigenschaften mit dem Bildschirm holen und stellen ein Gitter in Übereinstimmung mit den dafür vorgesehenen Spezifikationen auf.
- Wählen Sie eine Vordergrundfarbe, wählen Sie die abgerundeten Rechteck-Werkzeug und ziehen Sie Ihre Form. Die Gitterlinien sollten bis zum Knopfform entsprechen. Das Raster kann nun abgeschaltet werden.
- Die perfekte Pixel-Taste kann nun mit Stil Schichten gestylt werden. Drei Schichten müssen -Gradienten Overlay, innere Schatten und Schein nach innen hinzugefügt werden.
- Text muss nun auf die Schaltfläche hinzugefügt werden, mit Hilfe des horizontalen Typs Werkzeug. Die Tastenform und Tastentext sollten zentral ausgerichtet werden.
- Sie können schnell die Taste Ebenenstil-Effekte, die Vektormaske und das direkte Auswahl-Werkzeug bearbeiten.
Willkommen in meinem ersten Denkfabrik Tutorial. Hier erfahren Sie, wie Sie eine einfache Pixel perfekt Schaltfläche in Photoshop erstellen. Im Folgenden finden Sie den Unterschied zwischen einem Pixel perfekt Taste sehen können und eine, die nicht perfekt ist Pixel.
Erster Photoshop öffnen und ein neues Dokument (Datei> Neu) erstellen. Dann machen Sie die Eigenschaften, die denen in meinem Bildschirm greifen übereinstimmen.
Als nächstes werden wir ein Raster aktivieren und einrichten. Ich persönlich wirklich nur Grids verwenden, wenn ich schnell will Formen zeichnen, auch auf genauen Größen, so dass ich sie regelmäßig ein- / auszuschalten, wie und wann ich sie brauche. Zunächst ermöglichen das Gitter aus dem oberen Menü (Ansicht> Anzeigen> Grid), dann aktivieren Raster ausrichten (Ansicht> Snap To> Grid), wird dies dazu beitragen Ihre Form präzise Pixelgrößen zu beschränken, wenn Sie Ihre Taste ziehen.
Sie können meine Gitter Vorlieben unten sehen, Ich mag in der Regel eine Rasterlinie alle 10 Pixel haben. Stellen Sie sicher, dass Ihre Rasterlinie auf Pixel festgelegt, anstatt cm oder mm usw. Sorgen Sie sich nicht über das Netz Ihrer Sicht verdunkeln, sobald die Form gezogen wird, wir es ausschalten.
Jetzt haben wir unser Dokument und Gitter einrichten, können wir unsere Knopfform zeichnen. Zuerst wählen Sie eine Vordergrundfarbe (ich verwende # 00ABED).
Dann wählt das abgerundete Rechteck-Werkzeug (mit einem Eckradius von 3px aus dem Menü oben ausgewählt) und Ihre Form in der Mitte des Dokuments ziehen. Ich habe meine gezogen 180 Pixel x 40 Pixel sein.
Wenn Sie mit dem Zoom einen genaueren Blick zu nehmen (ich habe in 1200% vergrößert), sehen Sie, dass die Schaltfläche Form paßt bis zu den Gitterlinien und Pixel perfekt. Wir können jetzt schalten Sie die Rasteransicht (Ansicht> Anzeigen> Grid).
Nun, da wir unsere Pixel perfekte Knopfform haben, können wir es stylen. Wenn Sie nicht Ebenenstile verwendet haben, können Sie sie im unteren Bereich der Ebenen-Palette finden.
Wir werden Zugabe von 3 Ebenenstile: Gradient Overlay, inneren Schatten und Schein nach innen. Wir werden keine Farbe dieser Stile werden, indem die auf der Schaltfläche Farbe können sehr schnell in der Zukunft geändert werden, aber dazu später mehr. Zunächst einmal, lässt einen Gradienten-Overlay hinzufügen. Wählen Sie ‚Verlaufsüberlagerung‘ aus den Ebenenstilen Panel. Sobald diese geöffnet sind, klicken Sie auf dem Gradienten Feld, um den Gradienten-Editor zu öffnen. Stellen Sie sicher, dass beide Enden des Gradienten in der Farbe weiß sind, dann bringen die Opazität der linken Seite nach unten auf ‚0' und klicken Sie auf‚OK‘, um den Gradienten-Editor zu schließen. Jetzt auf dem Verlaufsüberlagerung Abschnitt des Ebenenstil-Panel, bringt die Opazität bis zu 40%. Ihre Schaltfläche soll nun einen subtilen Lichtfarbverlauf über seine blaue Farbe hat.
innere Glühen Ebenenstile - Jetzt können wir die inneren Schatten hinzufügen. Siehe Bildschirm packt unten für die Einstellungen, die ich verwendet habe.
Nun sollten Sie Ihre Schaltfläche in etwa so aussehen.
Der nächste Schritt ist Text hinzuzufügen. Wählen Sie das horizontale Text-Werkzeug aus dem linken Tool-Menü. Ändern Sie Ihre Vordergrundfarbe auf weiß, und klicken Sie in das Dokument und geben Sie Ihren Button-Text aus. In diesem Fall habe ich gewählt, meinen Text zu zentrieren. Sobald Sie Ihre Schaltfläche Text haben, können Sie die Schriftart und Schriftgröße ändern, können Sie sogar einen Schlagschatten mit Ebenenstile hinzufügen, wenn Sie es wünschen.
Jetzt wollen wir die Taste Form haben - Taste Text mittig ausgerichtet. Um dies zu tun das Verschieben-Werkzeug in der Werkzeugpalette auswählen, dann die beiden Schichten in der Schichtplatte auswählen (Sie können mehrere Ebenen auswählen, indem Kontrolle halten, während klicken oder wenn Sie ein Mac-Benutzer wie mich ist es cmd + klick). Sobald beide Schichten eine align Platte ausgewählt werden, im oberen Menü erscheint, können Sie die vertikale und horizontale Zentren dann auszurichten.
Jetzt haben wir eine fertige Pixel perfekt Taste. Das einzige, was ist, beide Schichten in einer Schichtgruppe setzen mehr zu tun Ihre psd-Datei ordentlich zu halten.
Jetzt haben wir einen fertigen Knopf, müssen Sie wissen, wie schnell es zu bearbeiten. Die Schönheit Schicht Arteffekten schaffen, die bestimmte Farben haben nicht (nur weiß - schwarz sind in den Ebenenstilen verwendet worden) ist, dass Sie schnell auf die Schaltfläche Farbe ändern können, indem einfach die Form Farbe ändern. Sie können dies auf der Ebenenminiatur in der Ebenen-Palette, indem Sie auf, dann einfach eine neue Farbe auswählen.
So bearbeiten Sie die Größe würde ich immer die Bearbeitung der Vektormaske empfehlen, im Gegensatz zu den freien Transformation mit dem Werkzeug. Dies wird helfen, Ihren Eckenradius hält an der Größe und Proportionen Sie bestimmt. Dazu wählen Sie zuerst die Vektormaskenminiatur in der Ebenen-Palette. Dann müssen Sie das Direktauswahl-Werkzeug aus der Werkzeugpalette, diese können Sie die Formpunkte auszuwählen, die Sie verschieben möchten. Sobald Sie diese ausgewählt haben, können Sie die Taste breiter oder schmaler machen. Ich persönlich bevorzuge, dies zu tun mit den Pfeiltasten. Aber wenn Sie dies tun ist es sehr wichtig, bei 100% Zoom-Ansicht zu arbeiten, andere weise können Sie möglicherweise das Pixel perfekt Ränder verlieren.
Also, das ist das Ende dieses Grundes Tutorial. Ich hoffe, Sie haben es nützlich gefunden. Wenn Sie einfach einen Blick auf diese Schaltfläche im Detail nehmen möchten, können Sie auch hier die Quelle psd-Datei herunterladen.