Social Media Buttons mit Farbwechsel erstellen

Schon oft bekam ich Anfragen, wie ich denn meine Buttons in der Sidebar gemacht hätte und warum die die Farbe wechseln, wenn man mit der Maus darüber fährt. Das habe ich immer gerne erklärt. Vor kurzem habe ich auch eine Umfrage in meiner Sidebar gestartet, in der schon so einige dafür gestimmt haben, dass sie hier gerne ein paar Photoshop-Tutorials sehen würden. So kam das eine zum anderen und ich dachte mir: Gar kein Problem, dann schreibe ich doch einfach mal einen Post darüber, in dem ich alles schön bebildert erkläre! 

Heute zeige ich euch also anhand eines Beispiels, wie ich meine Social Media Buttons erstellt habe.

Bevor ich aber anfange, möchte ich euch warnen: Ich bin kein Profi und habe mir meine Photoshop- und HTML-Kenntnisse Learning-by-Doing-mäßig angeeignet. Was ich euch zeige, ist meine Art, wie ich vorgehe, und kein Patentrezept und kein Allheilmittel. Bestimmt gibt es auch eine Möglichkeit, wie Informatiker nicht die Hände über dem Kopf zusammenschlagen, aber so, wie ich vorgehe, funktioniert es auf jeden Fall auch.

Auf jeden Fall wünsche ich euch viel Spaß mit meiner Anleitung, vielleicht könnt ihr ja etwas Neues für euch mitnehmen!





Und das sieht dann so aus, wenn ihr mit der Maus drüber fahrt:




Zunächst öffnet ihr ein neues Dokument in Photoshop (in kostenlosen Programmen wie Gimp funktioniert das natürlich ebenfalls, nur sind die Schritte ein bisschen anders. Ich komme mit Photoshop etwas besser klar.) mit der Größe, die ihr für eure Buttons haben wollt, das kommt ganz darauf an, wie breit eure Sidebar ist und wie viele Buttons am Ende nebeneinander stehen sollen. 50x50 Pixel oder 40x40 Pixel sind meiner Meinung nach eine gute Größe. Auf jeden Fall sollten die Buttons quadratisch sein.


Bevor ihr irgendetwas anderes macht, fügt ihr zunächst eine neue Ebene ein. Klickt dafür auf den Button, den ich im folgenden Bild markiert habe. Anschließend löscht ihr die Ebene, auf der "Hintergrund" steht. Das hat den Grund, dass die Hintergrundebene nicht transparent ist. Wir brauchen aber einen transparenten Hintergrund. (Angenommen, euer Bloghintergrund ist blau - wenn der Button keinen transparenten Hintergrund hätte, würde ein weißer Rand entstehen!)


Nachdem ihr den Hintergrund gelöscht habt (klick auf die Ebene "Hintergrund" und dann auf das kleine Papierkorb-Symbol, erstellt ihr eine weitere neue Ebene. Anschließend überlegt ihr euch, welche Form eure Buttons haben sollen. Ich habe mich in dieser Anleitung für eine Sprechblase entschieden, ihr könnt natürlich auch runde Buttons erstellen, oder welche Form euch auch immer gefällt.


Klickt auf das Symbol "Eigene-Form-Werkzeug" in der Werkzeugleiste. Anschließend könnt ihr oben in der Leiste eine Form auswählen. Der Vorteil dieser Formen ist, dass es sich dabei um Vektorgrafiken handelt - d.h. sie können ohne Qualitätsverlust vergrößert werden.


Fügt die Form ein, die euch am besten gefällt, in einer Farbe, die ihr gerne mögt. Anschließend wird die Ebene, in der ihr die Form eingefügt habt, dupliziert. Klickt mit der rechten Maustaste auf die entsprechende Ebene und dann auf "Ebene duplizieren".




Weil ihr nun zwei gleiche Ebenen habt, muss von einer Ebene die Farbe noch geändert werden. Welche, das ist egal. Rechtsklick auf die Ebene. -> Fülloptionen -> Farbüberlagerung. Sucht hier eine Farbe aus, die der zweite Button haben soll.
Wenn ihr soweit seid und ihr nun Sprechblasen in 2 verschiedenen Farben habt, fügt ihr noch eine dritte Ebene ein. Hier fügen wir das Symbol ein, das auf dem Button erscheinen soll - zum Beispiel das "F" für Facebook. Jetzt fragt ihr euch bestimmt, wie ihr ein Symbol hinbekommt, das genauso aussieht wie das Facebok-Logo. 

Habt ihr schon mal etwas von Brushes gehört? Das sind Pinselspitzen, die es in allen möglichen Formen gibt. Sucht doch mal bei Deviantart nach "Brushes Social Media" oder "Brushes Social Media Buttons / Icons". Da gibt es sehr viele nette Menschen, die euch ihre Brushes kostenlos zur Verfügung stellen. Über "Download" ladet ihr sie herunter. Ihr erkennt die Dateien daran, dass sie auf .abr enden. 



Nun müsst ihr die Brushes nur noch einfügen. Und zwar klickt ihr in der Werkzeugleiste auf den Pinsel, anschließend in der oberen Leiste ebenfalls auf "Pinsel", dann auf den kleinen Pfeil in der rechten oberen Ecke und dann auf "Pinsel laden". Nun wählt ihr eure Brushes aus, die ihr heruntergeladen habt, und könnt sie fortan benutzen. Die Größe könnt ihr nach Belieben skalieren.


Wenn bei euch alles geklappt hat, sollte das Ergebnis bei euch so aussehen wie im folgenden Bild: Ihr habt eine Ebene mit dem "F"-Symbol, eine Ebene mit Farbüberlagerung in rosa, eine Ebene in Blau und eine leere Hintergrundebene. Und wisst ihr was das bedeutet? Ihr habt's geschafft!


Nun müsst ihr zwei Versionen abspeichern. Einmal die rosa Version (Ebene mit Farbüberlagerung) und einmal die blaue Version. Um die jeweiligen Versionen abzuspeichern, blendet ihr die Ebenen aus, die ihr nicht braucht. Für die rosa Version blendet ihr die blaue Ebene aus und umgekehrt. 


Wichtig: Speichert eure Buttons als PNG oder als GIF ab. So bleibt die Transparenz nämlich erhalten.



Fast geschafft! Jetzt müssen wir die Buttons nur noch einfügen. Ich lade meine Bilder immer auf Photobucket hoch und verwendet die Direktlinks zu den Bildern, weil ich mit Photobucket nur gute Erfahrungen gemacht habe. Ihr könnt natürlich auch einen anderen Upload-Dienst verwenden. 

Wenn ihr eure Buttons in der Sidebar haben wollt, legt unter der Rubrik "Layout" ein neues HTML-Widget an. Hier fügt ihr folgenden Code für jeden eurer Buttons ein:

<a href="SOCIAL MEDIA LINK"><img src="BUTTON-A" onmouseover="this.src='BUTTON-B'" onmouseout="this.src='BUTTON-A'"/></a>

Das sollte dann am Ende so aussehen:  

Natürlich könnt ihr damit herumspielen, wie ihr Lust habt. Ich habe für meine Social Media Buttons zum Beispiel keine zwei Farben verwendet, sondern nur eine Farbe, die einmal etwas transparenter ist.


War das interessant für euch oder wollt ihr so etwas nicht mehr sehen? Wenn ihr an weiteren Gestaltungsthemen interessiert seid (Zum Beispiel haben mich schon viele Leser auf meine Illustrationen angesprochen. Ich könnte z.B. auch mal einen Eintrag über mein Grafiktablett schreiben, wenn ihr mögt.), lasst es mich wissen! Wie ihr euch bestimmt denken könnt, habe ich sehr viel Spaß an solchen Themen (sonst wäre mein Layout etwas aufgeräumter! Haha.) und schreibe auch gerne darüber. Aber wie oben schon erwähnt, ich bin kein Profi und kann euch nur Tipps aus meiner Sicht geben.

Und wenn ihr Fragen zu meiner Anleitung habt oder ihr irgendetwas nicht versteht - fragt mich! 

Wenn ihr sonst noch irgendwelche Wünsche habt, schreibt mir doch auf ask.fm


Kommentare

  1. aber klasse erklärt (= ich hätte es nicht anders gemacht (=

    AntwortenLöschen
  2. Jipi :)
    Ich glaube das wird dann meine nächste Aufgabe nachdem ich es so "meisterlich" geschafft habe, meinen eigenen Buttons herzustellen und zu verlinken.
    Viiiiiielen Dank für die ausführliche Erklärung ☼

    Liebe Grüße
    strawberryred

    AntwortenLöschen
  3. Klasse gemacht :) habe ich gleich wieder etwas dazu gelernt :D
    Danke Lisa!

    Liebe Grüße
    Anett

    AntwortenLöschen
  4. Hallo ^^
    deine Anleitung ist klasse.
    Aber da habe ich gleich die nächste Frage: Woher hast du all die tollen Formen im PS? o.o Bei mir herrscht da gähnende Standard-Stille und ich baue mir spezielle Formen immer im Illustrator (in mühevoller Kleinarbeit - naher Nervenzusammenbruch: Hallo! (; )

    Ganz liebe Grüüüße ^^

    AntwortenLöschen
  5. Sehr, sehr schöne Anleitung :) Ich freue mich immer, wenn ich neue Photoshop-Kniffe lerne (habe vor ein paar Monaten erst die "Aktionen" für mich entdeckt, was eine Erleichterung!). Die Farbüberlagerung bei den Buttons gefällt mir richtig gut, vielleicht wirds beim nächsten Layout eingebaut!

    Liebste Grüße,
    Julia

    AntwortenLöschen
  6. liebe lisa,

    ein traumhafter post!
    wird auch probiert!!!

    liebste grüße
    nancy

    ps:
    ganz egal, worüber du postest.. mir gefällt es und ich lese sehr sehr gerne mit!

    AntwortenLöschen
  7. Bor super, danke ! Sowas haben ich schon ewig gesucht !
    Liebste Grüße

    AntwortenLöschen
  8. Hui danke für die schöne Anleitung. Bin gerade dabei meinen Blog zu verschönern und dann passt das ja wie die Faust auf's Auge. :-)
    TOLL TOLL TOLL, DANKE:

    AntwortenLöschen
  9. Also ich finde so Tutorials immer spannend :) Ich lerne immer gerne neues dazu und lustigerweise habe ich gerade erst auch meine Social Media Buttons erneuert :D

    AntwortenLöschen
  10. Hey! Darf ich dich mal fragen wie du dein Layout so hinbekommen hast? Ich rätsle jedes Mal wenn ich deinen Blog besuche und dacht ich frag dich jetzt einfach mal

    AntwortenLöschen
  11. Liebe Lisa,
    vielen herzlichen dank für das super tolle Tutorial! Davon gerne mehr. Es ist immer verständlicher wenn "nicht Profis" ein Tutorial verfassen, weil diese weniger voraussetzen ☺.
    Ich wage mich mal daran...

    AntwortenLöschen
  12. Bei Rechtsklick auf der Ebene kommt bei mir leider nicht der Menupunkt "Fülloptionen"?! Wo kann ich ihn sonst finden?
    Viele Grüße von einer verwirrten Susanne ;)

    AntwortenLöschen
  13. Sehr gut erklärt, aber ich hab ja zum Glück schon welche ;)
    Hast du nicht Lust an meiner Blogvorstellung teilzunehmen? Ich würde mich wirklich sehr freuen :) http://ronja-myworld.blogspot.de/2013/02/blog-introduction.html
    Lg Ronja

    AntwortenLöschen
  14. Danke für die anleitung - Toll wie einfach man Buttons designen kann

    AntwortenLöschen
  15. Hallo Lisa,

    ich als totale Blogger-Anfängerin wäre ohne diese Anleitung nie auf die Idee gekommen solche Buttons zu machen. Hab immer gedacht das ist nur was für Leute, die sich mit HTML und so super auskennen. Aber dank dir hab ichs gestern mal ausprobiert und es hat geklappt! Hat zwar ne Weile gedauert bis ichs geschnallt hab, aber das lag nicht an deiner Super-Anleitung! :-)

    VIELEN DANK!

    Liebe Grüße
    Vroni von vroniswunschblume.blogspot.de

    AntwortenLöschen
  16. Super toll erklärt! Vielen DANK dafür!
    LG Bine

    AntwortenLöschen
  17. Wirklich, ich schätze die Mühe, die Sie gemacht, um das Wissen zu teilen.
    Vektorgrafik erstellen groupdmt

    AntwortenLöschen
  18. Hilfeee!
    Ich habe mit dieser Technik versucht, so ein Bildchen direkt in eine Seite einzugeben, aber da ist immer dieser weiße Hintergrund, obwohl ich es ganz sicher transparent gespeichert und bei Photobucket hochgeladen hab! Wenn ich das in der Sidebar mache funktioniert es immer...kannst du mir helfen? :(

    AntwortenLöschen
  19. Liebe Lisa,
    ich habe gerade mit meinem Blog begonnen und bin über jede Anleitung froh. Um einen Blog richtig gut hinzubekommen, benötigt es nun mal einiger Vorarbeit und Feintuning. Dein Beitrag hat mich wirklich weitergebracht und er war suuuuper hilfreich. Vielen vielen Dank dafür!!!

    Mach weiter so, ich finde Deinen Blog wirklich gut gelungen und vielfältig.

    Liebe Grüße
    Uli von malvapoeding.blogspot.com

    AntwortenLöschen
  20. Hey super Anleitung! Ich habe leider nur noch nicht so richtig verstanden wie das mit dem verlinken geht:( Was fügt man denn bei den Button-A und Button-B ein? Ich habe dann am ende immer nur drei Bilder in meiner sidebar zwischen denen onmouseout und onmouseover steht:(

    AntwortenLöschen
  21. wow - genau das was ich gesucht habe. habe in dem zusammenhang auch noch was gefunden:

    brushes (also diese pinsel die du da in photoshop verwendest) - die gibts auch noch in anderen versionen - teilweise sogar kostenlos zum downloaden:

    http://www.brusheezy.com/brushes (tolle sache für individuelle brushes).

    danke nochmal und lg ! stefan

    AntwortenLöschen

Ich freue mich sehr über jeden eurer Kommentare, in dem ihr mir eure Gedanken, eure Meinung, eure Ideen und Anregungen zu meinem Beitrag mitteilt. Wenn ihr dringende Fragen habt, empfehle ich euch, mir eine Mail zu schreiben: hello@meinfeenstaub.com

Spam werde ich sofort löschen.