Blogger ABC Blogging Tipps

Blogger ABC: I – Imagemap erstellen mit Gimp (Tutorial)

Imagemap erstellen mit Gimp Tutorial

Imagemaps sind vor allem bei Blogparaden ein beliebtes Mittel, um innerhalb des Bloggerteams schöne Verlinkungen zu erstellen. Aber auch für die interne Verlinkung eines Blogs z.B. bei längerfristigen Projekten, wie einem Blogger ABC sind Imagemaps ein echte Bereicherung.

Viele Blogger scheuen sich jedoch davor, sie zu erstellen. Imagemaps zu erstellen wäre schwierig und es würden dabei häufig Probleme auftreten, so lauten einige der Gerüchte. Ich möchte euch heute das Gegenteil beweisen. Ich zeige euch, wie ihr eine Imagemap mit Gimp erstellen könnt. Ich weiß, Gimp ist bei den meisten ebenso verhasst, wie Imagemaps. Ich mag es auch nicht besonders, aber dieses Tutorial zum Erstellen einer Imagemap mit Gimp wird ganz einfach und für jeden von euch umsetzbar, versprochen! Es sieht länger aus, als es ist, weil ich euch wirklich jeden kleinen Mini-Schritt erklärt habe, damit ihr es auch garantiert und ohne Probleme umsetzen könnt.

Was ist eine Imagemap?

Imagemaps sind Bilder, auf denen einige Bereiche verlinkt werden. Dies ist vor allem bei  Collagen zu Outfits, gemeinsamen Blogprojekten mit mehreren Bloggern oder für die interne Verlinkung von Blogbeiträgen sinnvoll. Natürlich ist das alles auch ohne Imagemap in Form einer Linkliste unter einem Bild umsetzbar, mit einer Imagemap sieht es meist aber einfach schöner aus.

Der größte Nachteil von Imagemaps ist, dass sie mobil nicht oder nur stark verschoben klickbar, also quasi nicht nutzbar sind.

Imagemap erstellen mit Gimp – Videotutorial

Mit diesem kurzen Videotutorial versteht ihr ganz fix, wie einfach man eine Imagemap mit Hilfe des kostenfreien Programmes Gimp erzeugen kann:

Imagemap erstellen mit Gimp – Schritt für Schritt Anleitung

Bild vorbereiten und öffnen

Für die Erstellung der Imagemap ist es extrem wichtig, dass das Bild die Breite eures Postbereichs einnimmt. Ist euer Bild größer, als der Beitragsbereich eures Blogs, wird sich bei der fertigen Imagemap später alles verschieben und die Links werden einfach nie an den richtigen Stellen sitzen.

Deshalb solltet ihr euer Bild immer in die perfekte Größe bringen, bevor ihr es schließlich in Gimp öffnet. Wie ihr seht, zeige ich euch das Tutorial am Beispiel meiner Imagemap für die Blogger ABC Beiträge.

Bilder öffnen in GIMP_Gimp Imagemap erstellen_Bildbearbeitung GIMP:Floral Heart_Blogtipps_Blogging Tipps

In den Imagemap Bereich wechseln

Um die Imagemap zu erstellen, müsst ihr bei Gimp auf Filter -> Web -> Imagemap klicken:

Imagemap erstellen mit GIMP_Menüauswahl Imagemap erstellen in GIMP

Anschließend öffnet sich ein neues, kleineres Fenster mit eurem Bild:

Fenster zum Imagemap erstellen mit GIMP_Floral HEart_Blogtipps

Dieses öffnet ihr so weit, bis ihr das Bild in der kompletten Breite sehen könnt (den komischen aussehenden Bereich rechts vom Bild ignorieren wir gekonnt):

im Bild verlinken_Imagemap erstellen_arbeiten mit GIMP

Bildbereiche verlinken

Oben links könnt ihr die drei möglichen Formen sehen, mit denen ihr Linkbereiche erstellen könnt. euch steht ein rechteckiges, ein rundes und ein freies Auswahlwerkzeug zur Verfügung:

im Bild verlinken_Imagemap erstellen_arbeiten mit GIMP_

Ich habe als erstes das freie Werkzeug ausgewählt und die Überschrift „Blogger ABC Blogging through the Alphabet“ verlinkt. Hierfür habe ich als erstes am unteren linken B geklickt und habe dann nach und nach die äußeren Punkte meines gewünschten Bereichs markiert:

Auswahl für Imagemap machen in GIMP_verlinkter Bereich auswählen Imagemaperstellung

Mit einem Doppelklick öffnet sich ein kleines Fenster:

BEreichseinstellung Imagemap erstellen GIMP_Verknüpfungstyp Imagemap in GIMP erstellen

Hier klickt ihr auf Internet-Seite und tragt neben dem „http://“ den Link zu der jeweiligen Seite, die ihr verlinken wollt ein. Wenn euch das zu viel hin und her zwischen Gimp und Browser ist, vergebt ihr einfach ein anderes Wort und könnt den Link dann später noch hinzufügen. Ich gehe auch immer letzteren Weg und habe an dieser Stelle deshalb einfach ABC eingetragen, um zu wissen, dass dieser Code später das komplette ABC verlinken soll.

Imagemap erstellen mit GIMP_Blogtipps_Imagemaps machen_Bilder verlinken

Fertig ist euer erster, verlinkte Bereich:

Floral Heart Blogtipps Blogger ABC_ Imagemap erstellen mit GIMP

Bei einem runden oder rechteckigen Bereich geht ihr äquivalent vor.

Imagemap exportieren

Sobald alle Bereich von euch ausgewählt und verlinkt wurden, könnt ihr die Imagemap exportieren, um den fertigen HTML Code zu bekommen.

Hierfür klickt ihr auf Datei -> Speichern oder auf das bekannte Speichern Symbol und wählt anschließend den Speicherort aus.

Bild verlinken für Imagemap_fertige Imagemap GIMP

Imagemap auf dem Blog einfügen

Nun wurde die Imagemap in eine HTML-Textdatei umgewandelt. Ihr geht nun zu dem gewählten Speicherort und öffnet die Imagemap z.B. mit Word. Anschließend kopiert ihr den kompletten Text / Bereich aus Word…

Imagemap erstellt mit GIMP_HTML Text Imagemap_Imagemaps erzeugen_Imagemap konfigurieren_Imagemap kostenfrei erstellen

…und geht auf eurem Blog in den Textbereich, in dem ihr HTML Codes einfügen könnt.

Imagemap in Blog einfügen_Imagemap in WordPress erstellen_Wordpress Imagemaps_Wordpress Bilder verlinken

Hier fügt ihr nun eure Imagemap ganz einfach ein:

Imagemap in WordPress einbinden_Imagemaps erstellen für Blogs_Imagemaps in Blog einbinden

Damit euer Blog nun versteht, auf welches Bild sich die Codes beziehen, müsst ihr das Bild zu eurer Imagemap nun ganz normal hochladen und seine URL kopieren:

Imagemap Bild hochladen und URL in Imagemap verlinken

Diesen Link fügt ihr nun in die Imagemap ein, indem ihr den pink unterstrichenen Bereich zwischen den zwei Anführungszeichen löscht

Imagemap funktioniert nicht GIMP_Bild in Imagemap einfügen_Imagemap erstellen_

und dafür euren Link einfügt:

Imagemap erstellen mit GIMP_

Nun müsst ihr noch diese fünf Zeilen mit den Pfeilen löschen:

Imagemap verändern damit sie funktioniert_Imagemap bearbeiten_Imagemap nicht klickbar

Solltet ihr bereits in Gimp die URL’s eingesetzt haben, seit ihr nun fertig. Ansonsten müsst ihr für eure Abkürzungen nun noch die URL’s eintragen.

Wir machen das jetzt am Beispiel von ABC. Ihr markiert den Bereich http://ABC (bei meinem Beispiel heißt er so):

Bilder verlinken_Teile von Bildern verlinken_Links in Imagemap einfügen_

und fügt dafür eure URL ein:

Imagemap erstellen mit GIMP_Links in Imagemap einfügen_

So macht ihr jetzt mit all‘ euren Links weiter und fertig ist eure Imagemap:

fertige Imagemap_HTML Code Imagemap_gecodete Imagemap

Am besten probiert ihr in der Vorschau eures Beitrags alle Link ein mal aus, denn es kann immer etwas schief gehen. Ansonsten ist eure erste eigene Imagemap mit Gimp nun fertig erstellt und einsatzbereit.

Alle weiteren Beiträge meines Blogger ABC’s findet ihr in unserer gerade erstellten Imagemap (leider nicht mobil klickbar):

10 Comments

  • Reply
    Miriam
    1. Mai 2016 at 22:42

    Hallöchen Jule!
    Vielen Dank für diese ausführlichen und absolut verständlichen Erklärungen! Das werde ich sicherlich bei Gelegenheit mal ausprobieren (:
    Liebe Grüße!

  • Reply
    Kosmetikmaus
    2. Mai 2016 at 12:47

    Sehr cool, vielen Dank.

  • Reply
    Svenja
    4. Mai 2016 at 20:23

    Total cool! Ich habe leider kein Gimp, aber das wird bestimmt mit Lightroom und anderen Programmen auch funktionieren. Oder ich alde mir Gimp herunter 🙂 Das sieht toal schön aus!

    Liebe Grüsse,
    Svenja

    • Reply
      Floral Heart
      6. Mai 2016 at 9:15

      Ja, irgendwie funktioniert das bestimmt. Aber Gimp ist ja eh kostenfrei. Von daher: go for it 😉

  • Reply
    Anne
    6. Mai 2016 at 21:37

    Hallo Julia, vielen Dank für das ausführliche Tutorial. Das teile ich doch gleich mal weiter 🙂

  • Reply
    Food ABC: F - Frucht Crumble - The inspiring life
    10. Mai 2016 at 8:43

    […] Bild, gelangst du direkt zu den ehemaligen Food ABC Beiträgen. Jule hat eine Anleitung für ein Gimp Tutorial geschrieben/gefilmt, die einfach super verständlich ist. So kann auch ich, ab sofort Imagemaps […]

  • Reply
    Hollis Allerlei
    15. Mai 2016 at 12:43

    Hallo Jule,
    ich hoffe das Du auch offen für Kritik bist.
    Was mich an den Bildern auf dieser Webseite stört ist die Größe
    So hat das Bild
    Imagemap-erstellen-mit-Gimp-Tutorial-1080×831.png

    766,44 KB
    Es gibt noch User auf dem platten Land die mit niedrigen Bandbreiten surfen und für die ist es echt schlimm derartig große Bilddateien laden zu müssen.

    Noch schlimmer kann es für Deine Besucher werden die über eine Smartphone Tarif zu Dir surfen und nun schon beim Besuch einer Seite gleich 3 GB oder Mehr ihrer Flatrate einbüßen.

    Webseiten Bilder dürften meines Erachtens nie mehr als 100 KB haben.
    Ist eigentlich auch sehr einfach das auch mit Gimp oder einem anderen Programm Userfreundlicher zu gestalten.
    Allein schon das Abspeichern der Bilder als .jpg Format anstatt das .png zu wählen macht die Datei kleiner bei dennoch guter Qualität.

    Hast Du Dir da schon mal Gedanken gemacht??
    Was hältst Du von der Idee ?

    Grüße
    Lothar
    alias Holli von Hollis Allerlei

    • Reply
      Floral Heart
      15. Mai 2016 at 13:03

      Hallo Lothar,

      danke für deinen ausführlichen Kommentar.
      3GB mit einer Seite ist natürlich mehr als übertrieben. Die meisten Bilder bei mir werden recht klein abgespeichert, was aber nicht an allen Stellen möglich ist.
      Die Größe der Bilder für die Zukunft noch weiter zu verkleinern steht auf meiner To-Do-List, die aber vorerst noch andere Prioritäten hat. Ich denke, ich bin da im Vergleich zu anderen auch schon sehr gut dabei, da meine Bilder nicht in 3000px und mehr Breite hochgeladen werden 🙂

  • Reply
    Blogger ABC: K - Kameramodi im Überblick - Schritt für Schritt in den manuellen Modus - Floral Heart
    30. Mai 2016 at 21:07

    […] I – Imagemap erstellen mit Gimp (Tutorial) […]

  • Reply
    Die Social Web News aus der 18. KalenderwocheSocial Web News
    20. August 2016 at 17:02

    […] Eine Imagemap mit Gimp erstellen […]

  • Leave a Reply

    Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

    Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

    Schließen