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.
In den Imagemap Bereich wechseln
Um die Imagemap zu erstellen, müsst ihr bei Gimp auf Filter -> Web -> Imagemap klicken:
Anschließend öffnet sich ein neues, kleineres Fenster mit eurem Bild:
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):
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:
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:
Mit einem Doppelklick öffnet sich ein kleines Fenster:
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.
Fertig ist euer erster, verlinkte Bereich:
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.
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…
…und geht auf eurem Blog in den Textbereich, in dem ihr HTML Codes einfügen könnt.
Hier fügt ihr nun eure Imagemap ganz einfach ein:
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:
Diesen Link fügt ihr nun in die Imagemap ein, indem ihr den pink unterstrichenen Bereich zwischen den zwei Anführungszeichen löscht
und dafür euren Link einfügt:
Nun müsst ihr noch diese fünf Zeilen mit den Pfeilen löschen:
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):
und fügt dafür eure URL ein:
So macht ihr jetzt mit all‘ euren Links weiter und fertig ist eure 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
Miriam
1. Mai 2016 at 22:42Hallö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!
Kosmetikmaus
2. Mai 2016 at 12:47Sehr cool, vielen Dank.
Svenja
4. Mai 2016 at 20:23Total 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
Floral Heart
6. Mai 2016 at 9:15Ja, irgendwie funktioniert das bestimmt. Aber Gimp ist ja eh kostenfrei. Von daher: go for it 😉
Anne
6. Mai 2016 at 21:37Hallo Julia, vielen Dank für das ausführliche Tutorial. Das teile ich doch gleich mal weiter 🙂
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 […]
Hollis Allerlei
15. Mai 2016 at 12:43Hallo 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
Floral Heart
15. Mai 2016 at 13:03Hallo 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 🙂
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) […]
Die Social Web News aus der 18. KalenderwocheSocial Web News
20. August 2016 at 17:02[…] Eine Imagemap mit Gimp erstellen […]