8. Juli 2009

Photoshop Tutorial: Download Button

Filed under: Tutorials von Britta um 21:59
 

Was wäre ein Download-Portal ohne Download-Buttons? In diesem Tutorial wird dir erklärt, wie du auf einfache Art und Weise eine schicke Schaltfläche kreieren kannst.

Öffne zunächst einmal ein neues Dokument in der gewünschten Größe und aktiviere das abgerundete-Rechteck-Werkzeug. Wähle hierfür einen Radius von 50px und ziehe das Rechteck so weit auf bis es groß genug ist. Die genaue Größe hängt hier von der Größe deines Dokuments ab.

Nun geben wir dem Rechteck etwas Farbe! Natürlich kannst du hier jede Beliebige wählen, möchtest du jedoch exakt den selben Farbeffekt wie ich erziehlen, klicke auf der Ebenenpalette auf „Ebenenstil hinzufügen“ und übernehme die selben Einstellungen wie auf den folgenden Bildern.

Soweit so gut, die Grundlage wäre schonmal geschaffen! Nun aktiviere das Horizontale Text Werkzeug und schreibe das Wort „Download“ in den Button. Ich habe hierbei die Schriftart Arial gewählt. Kleiner Tip: Die Eigenschaften der Schriftart habe ich in folgendem Fenster nochmals angepasst.

Hast du diesen Schritt nun ebenfalls erledigt, kannst du dich jetzt an die Linie vor dem Schriftzug machen. Benötigt wird also das Linienzeichner-Werkzeug, mit welchem du sie nun von oben nach unten (oder auch umgekehrt) runter ziehen kannst. Als Stärke habe ich 3 Px gewählt. Die Farbe lässt sich nun selbstverständlich wieder nach eigenem Geschmack wählen. Für meinen Button nehme ich ein helles grau mit leichtem Schein.

Nun geht es an die Erstellung des Pfeils! Hierzu kommt das Eigene-Form-Werkzeug zum Einsatz, in dessen Palette du nun einen schon in der Photoshop enthaltenen Pfeile wählen solltest. Achte hierbei darauf, dass du in den Einstellungsmöglichkeiten der Form „ohne Einschränkungen“ wählst um den Pfeil anschliessend in Höhe und Breite frei aufziehen zu können. Mein Ergebnis sieht folgendermaßen aus:

Du fragst dich, wie der Pfeil plötzlich Farbe bekommen hat? Klicke erneut auf „Ebenenstil hinzufügen“ und übernehme folgende Einstellungen für die Pfeilebene.

Jetzt noch den Pfeil an die richtige Stelle schieben und ihn per „bearbeiten“ – „Transformieren“ – „Um 90 Grad im UZS drehen“ in die Richtige Richtung zeigen lassen.

Was jetzt noch fehlt ist die Linie unter dem gerade erstellten Pfeil. Also wieder ab zum Linienzeichner-Werkzeug und rauf mit der Geraden auf unseren Download-Button! Als kleine Hilfe empfiehlt es sich zur genaueren Größenabstimmung zum Pfeil mit Hilfslinien zu arbeiten. Klicke hierzu einfach an den Rand deines Arbeitsfensters (idealerweise hast du die Liniale eingeblendet) und ziehe eine nach der anderen an die zwei Seiten deines Pfeils. Auf diese Art siehst du genau von welchem Punkt aus du die Linie zeichnen musst und wo sie aufhören soll!

Fertig! Wenn du möchtest kannst du deinem neuen Button noch einen hübschen Spiegelungs-Effekt verpassen! Wie das geht? – Schau mal hier!


4 Comments »


    Joe schreibt, am 16. Oktober 2010 um 01:05 von

    Can I use this button for my website?


    Jon schreibt, am 31. Januar 2011 um 05:52 von

    Darf ich diese Taste für meine Website? Ich verstehe das Tutorial, aber ich bin sehr beschäftigt.


    Britta schreibt, am 31. Januar 2011 um 08:18 von

    Hallo Jon,

    zum Kopieren ist der Button leider nicht gedacht. „Nachmachen“ ist hier die Devise.

    lg
    Britta


    BondAge schreibt, am 19. April 2012 um 11:29 von

    Zuerst einmal ein Dankeschön für die ausführliche Anleitung.

    Das ähnliche Nachbauen lohnt sich doch auf jeden Fall, den so hat man gleich eine Vorlage für weitere Buttons. Eine Homepage kommt meistens nicht nur mit einen Download-button aus. Es sollten schon alle Buttons gleich aussehen und zum Design der Webseite passen.


Leave a comment




Ähnliche Beiträge zum Thema: "Photoshop Tutorial: Download Button"


Weitere Beiträge zum Thema: