Blogging Tipps
Es ist mal wieder Zeit für ein Tutorial. Nein es wurde kein Schminkpinsel geschwungen. Ich möchte euch heute eine einfache Variante, zu erstellen eigener Social Media Buttons, zeigen. Ich selber habe immer wieder rum experimentiert um solche Buttons zu erstellen (mein Freund lehrte mir dies). Alles was ihr dafür braucht ist das Logo von dem Social Media und Picmonkey! Außerdem zeige ich euch wie ihr diese anschließend verlinkt!
<img src="LINKBILD1" onmouseover="this.src='LINKBILD2'" onmouseout="this.src='LINKBILD1'"/>
</a>
*Hier kommt euer Link rein (Zb. von euer Facebookseite)
Das ist die Grafik die angezeigt werden soll (Bild 01), hier kommt der Link zur Grafik rein!
Kommen wir nun zum Hover Effekt. Hier kommt der Link von euer zweiten Grafik rein.
wollt ihr mehr picmonkey Tutorials? :)
[Tutorial] Social Media Icons mit picmonkey erstellen+ verlinken
Anleitung
Schritt 1:
Als erstes müsst ihr euch überlegen welche Social Media Plattform als Button dagestellt werden soll (z.B Facebook). Nun ladet euch das jeweilige Logo oder auch Silhouetten genannt runter, bei Bloglovin könnt ihr ein " ♥" oder ein normales "B" verwenden. Wichtig ist das ihr die Logos als PNG speichert. Logos findet ihr zb hier. Achtet drauf das die Logos gleich sind!
Schritt 2:
Ihr geht auf die Seite www.picmonkey.com und fährt mit der Maus über "Design" und wählt dann "Square" aus. Die Maßen sind für den Anfang ganz egal, die könnt ihr später anpassen.
Schritt 3:
Als nächstes klickt ihr auf "Overlay" (Schmetterling) und klickt dann auf "Geometric", dort könnt ihr zwischen einen Kreis oder einem Viereck wählen. (Wie ihr die Buttons haben wollt). Wenn ihr diesen nach dem Hinzufügen anklickt öffnet sich ein kleines Fenster, dort könnt ihr die Farben des Kreises bearbeiten! Hier könnt ihr einmal den Rand eine Farbe verpassen und die Füllfarbe des Kreises bestimmen.
Schritt 4:
Als nächstes kehrt ihr wieder zum "Overlay" (Schmetterling) zurück und wählt "Your Own" aus. Hier könnt ihr das Logo von einem Social Media Kanal auswählen ( Ihr solltet drauf achten das dies Transparent ist). Sobald ihr das Logo eingefügt habt verkleinert ihr dies und platziert es mittig in den Kreis. Wenn ihr das Logo anklickt öffnet sich ein weiteres Fenster, hier könnt ihr ebenfalls die Farbe verändern.
Schritt 5:
Kommen wir nun zum Anpassen! Zunächst geht ihr auf "Basic Edits" (ganz oben) und wählt dann "Crop" aus. Zieht den Ausschnitt um den Kreis kleiner. Klickt auf "Apply" um die Einstellung zu speichern.
Schritt 6:
Ob ihr den Hintergrund vor dem Ausschneiden transparent macht ist euch selbst überlassen - Hierzu geht ihr auf "Basic Edits" und wählt "Canvas Color" und setzt ein Haken bei "transparent", vergesst nicht bei den schritt auf "apply" zu klicken. Auf "Save" klicken und das fertige Bild speichern.
Schritt 7:
Jetzt passen wir die Größe an! Dazu geht ihr auf "Basic Edits" und klickt auf "Resize" und setzt den Haken bei "Keep proportions". Hier kommt es auf die größe eurer Sidebar an - ich habe hier die Größe "50 x 50" gewählt, ich denke dies sollte für die meisten Blogs angemessen sein.
Soll eure Icon ein Hover Effekt haben? Dazu ändert ihr einfach die Hintergrundfarbe des Kreises oder das Social Logo. Um weitere Icons zu machen braucht ihr nur das Logo austauschen und anpassen (verkleinern und mittig platzieren) Speichern und Fertig (achtet drauf das sich entweder die Farbe des Hintergrundes verändert oder das Logo von dem Social Media Kanal).Ihr solltet beide Icons unter verschiedene Namen speichern um diese beim Hochladen besser auseinander halten zu können.
Das Verlinken
Kommen wir nun zum HTML Teil. Als aller erstes brauchen eure Icons einen Link. Hierzu ladet ihr einzel die Icons auf TinyPic hoch (macht eins nach dem anderen). TinyPic erstellt euch einen Link für die Grafik.
ohne Hover? Je nachdem wie viele Social Icons ihr darstellen wollt, könnt ihr diesen Code verwenden!
<a href="EUER LINK (SOCIAL)"><img src="LINK der Grafik" width="30px" / /></a>
*Hier kommt euer Link von euren Social Kanal rein - Hier kommt der Link von der Grafik rein, damit euer Icon auch angezeigt wird.
*Hier kommt euer Link von euren Social Kanal rein - Hier kommt der Link von der Grafik rein, damit euer Icon auch angezeigt wird.
mit Hover?
Hier ist es wichtig das ihr beide Grafiken hochgeladen habt! Geht dazu auf layout ->Gadget hinzufügen und wählt HTML/ JavaScript aus. Schiebt das Gadget zur gewünschten Stelle und Speichern.
<a href="DEINLINK"><img src="LINKBILD1" onmouseover="this.src='LINKBILD2'" onmouseout="this.src='LINKBILD1'"/>
</a>
*Hier kommt euer Link rein (Zb. von euer Facebookseite)
Das ist die Grafik die angezeigt werden soll (Bild 01), hier kommt der Link zur Grafik rein!
Kommen wir nun zum Hover Effekt. Hier kommt der Link von euer zweiten Grafik rein.
Schaut mal :)
wollt ihr mehr picmonkey Tutorials? :)
Sehr schön! sehr informativ. so bringst du mir picmonkey etwas näher und zeigst, was man mit machen kann :) LG
AntwortenLöschenSehr schöner Post! :)
AntwortenLöschenDa ich die Social Media Icons auf meinem Blog bald mal in Angriff nehmen wollte, blieb ich direkt bei deinem Beitrag hängen und bin hoch erfreut darüber! :) Das hat mir wirklich gut geholfen, auch wenn man sich bei picmonkey wohl erst einmal ein wenig "reinfuchsen" muss, aber mit Anleitung ist das ja auch immer leichter. :)
Liebe Grüße
Moony