Tipps & Tutorials, tutorial

Social Media Button erstellen mit GIMP

Hallo, ihr lieben Copy Paste Love Leser!
 
Ich bin Laura von worldwidedancer und darf hier für euch ein Tutorial machen 🙂
Ich werde euch zeigen wie ihr mit GIMP selbst Social Media Button erstellt und zusätzlich auch noch wie ihr sie in eure Seite einbaut.
Damit alle wissen, wovon ich überhaupt rede, ist hier ein kleines Beispiel meiner eigenen Sidebar (s.oben).
 
Um diese kleinen Dinger dreht sich das ganze hier 😀 Aber nicht viel drumrum geredet, los geht’s!

 

Teil 1 – Erstellen

1. Öffnet GIMP – Datei – Neu
(z.B. Maße 600×400, dass ist aber später egal weil ihr das im
Nachhinein auf eure Größe zuschneiden könnt)

2. Als nächstes zieht ihr euch
ein kleines Quadrat mit der rechteckigen Auswahl (je nachdem wie groß
euer Button sein soll) und füllt es mit dem Farbeimer mit der Farbe
eurer Wahl. Wenn ihr mit der Größe nicht zufrieden seid, könnt ihr das
Quadrat mit dem Skalierer verschieben und zurechtrücken.

 

 

3. Nun könnt ihr euren Button
designen. Entweder ihr radiert mit dem Radierer die Ecken rund oder
radiert, wie bei mir, das Feld bis auf den Rand aus. Oder ihr lasst euch
irgendwas anderes kreatives einfallen 😀 Und dann kommt der Text. Dazu
drückt ihr auf das große A und schreibt euren Text hinein (f für Facebook, B für Blogger, t für Twitter, etc.)

Ich habe euch hier ein paar
verschiedene Button gemacht. Tut mir leid, dass die so krüppelig
aussehen, aber ich denke das Prinzip ist klar 🙂 Und ihr seht: eurer
Kreativität sind keine Grenzen gesetzt!

4. Und jetzt müsst ihr nur noch das ganze weiße drumherum mit dem Zuschneider abschneiden (der ist schräg links über dem A) und euer Button ist fertig! ZUM SPEICHERN: Datei – Speichern unter – Name eingeben und die Endung .jpg dranhängen (z.B. socialmediabutton.jpg) damit euer Button ein Bild wird – Speichern – Exportieren – TADA 😀

Teil 2 – Einbinden und verlinken


Um euren Button auf eurem Blog einzubinden müsst ihr ihn zuerst einmal irgendwo hochladen (z.B. bei Photobucket, Tinypic, etc.) damit ihr eine URL zum einfügen habt. Danach geht ihr auf eurer Layout – Gadget hinzufügen – HTML/Javascript. Und nun fügt ihr diesen Code ein:
<a href="FACEBOOK/TWITTER/BLOGLOVIN LINK"><img src="BILD URL"/></a> 

In die erste Lücke kommt der Link zu dem der Button führen soll hinein (z.B. eurer Facebookseite, eurem Twitteraccount oder irgendeiner anderen Seite) In der zweiten eure Bild URL, von dem Button, den ihr gerade hochgeladen habt. 
Wenn ihr mehrere verschiedene Button nebeneinander haben wollt, müsst ihr einfach die Codes hintereinander schreiben. Falls ihr sie untereinander haben wollt, müsst ihr für jeden Code ein neues Gadget öffnen .. 

So, und das wars auch schon 🙂
Ich hoffe es ist gut verständlich und auch GIMP-Anfänger kommen gut hinterher.
Wenn ihr Fragen habt .. FRAGT! Die Kommentarbox steht euch zur Verfügung! 

Liebe Grüße, Laura ♥

 

24 Comments

  1. Marie

    3. May 2012 at 13:13

    Wow danke, das klingt total toll! Werde ich sobald ich kann ausprobieren! Dankeschön <3

  2. Maja..x3

    3. May 2012 at 18:59

    Ich habe leider kein GIMP wo kann ich es herunterladen wenn ich fragen
    darf? Ich will das auch nämlich testen :DD

  3. Sharon ♥

    7. May 2012 at 16:33

    bei mir kommt dann das bild aber dadrüber ist der link ;s
    Also wenn man auf meine seite geht ist da der link zB jz von ask
    und dadrunter das bild was ich extra dafür gemacht habe ;s
    Was soll ich tun ;s ?

    1. worldwidedancer

      8. May 2012 at 14:27

      schau mal nach ob du alles richtig eingefügt hast und keine " vergessen hast .. 🙂

  4. janina

    5. June 2012 at 19:57

    wo soll ich denn die links einfügen? 😮
    bei mir ist da nur "titel" und "content"
    ich bin überfordert…

  5. Lena♥

    11. October 2012 at 17:49

    SUPER! bei mir funkt es echt gut (Y)
    Lena♥

  6. Rini

    5. December 2012 at 0:45

    Bei mir hat es super funktioniert. GIMP ist ein bisschen eine Herausforderung, aber geschafft, DANKE!

  7. troublelovesme

    12. January 2013 at 19:03

    danke fuer die anleitung!
    kannst du mir vielleicht noch verraten, ob ich den unsagbar haesslichen 'mitglied dieser seite werden' von gfc auch hinter einem solchen button verbergen kann, und wenn ja, wie ich an dessen link komme?
    lieben gruss

  8. ThuThuy

    27. January 2013 at 13:01

    funktioniert das auch mit einem bild welches nicht auf gimp erstellt wurde ?(:

    1. Si~ist~Mone

      5. April 2013 at 20:26

      Ich denke das funktioniert mit jeder Jpeg Datei!

  9. Nur-Aylin.

    13. April 2013 at 1:22

    hat jemand so einen social media button für kleiderkreisel? 😀

  10. Anonym

    24. June 2013 at 8:54

    Hallo du Liebe, leider klappt das mit dem Nebeneinander bei mir nicht (WP). Ich habe sie direkt nebeneinander geschrieben und sie werden einfach nur in einer REihe nach unten angezeigt.
    Gibt es da noch andere Möglichkeiten`

    Liebe Grüsse

    1. lovemira

      3. August 2013 at 19:48

      Hast du aus versehen Leerzeichen zwischen den Codes oder sogar
      ?

      Wenn alles nicht klappt, mach davor und dahinter das hier:

      < div style="display:inline;" > … < /div >

      (ohne Leerzeichen vor und nach den < & > )

  11. Diamond93

    3. July 2013 at 12:10

    Vielen Dank für diese tolle Anleitung! Dank deiner Hilfe habe ich es endlich hinbekommen 🙂

    Liebe Grüße
    Sibel

  12. Lena

    10. August 2013 at 15:50

    Super Anleitung! Hat endlich geklappt 🙂

    LG Lena

  13. Susanne Arendt

    18. August 2013 at 18:32

    Super Anleitung !!! Vielen herzlichen Dank !

    LG Susanne

  14. Susanne Arendt

    18. August 2013 at 18:33

    Super Tutorial, hat prima geklappt. Vielen Dank!!!

    LG Susanne

  15. Susanne Arendt

    18. August 2013 at 18:33

    Super Anleitung !!! Vielen herzlichen Dank !

    LG Susanne

  16. Lay

    26. September 2013 at 20:12

    hey, super anleitung – allerdings würde mich noch interessieren, wie ich die Icons in der Sidebar dann noch mittig setzen kann, weil momentan kleben die jetzt zu dritt am linken Rand und das passt von der Struktur nicht ganz so in den Blog

  17. Line Uni

    17. December 2013 at 15:02

    Danke schön!!! Eine super Hilfe!!!

    Frohe Feiertage und einen guten Rutsch 😉

  18. Anonym

    28. May 2014 at 19:12

    Danke Danke Danke !!!!!!
    Einfach nur Danke !

  19. -M-

    11. October 2014 at 22:12

    Hallo, habe alles sp gemacht aber die bilder werden nicht angezeigt. woran kann das liegen

  20. Laura

    2. January 2015 at 10:40

    Danke hat super geklappt! 🙂
    Liebe Grüße, Laura von lauraskreativecke.blogspot.de

Leave a Reply