Conterest ツ

Clever Bloggen

  • Blogtipps
  • Blogstart
    • Anleitung in 18 Schritten
    • Blog schreiben für Einsteiger
  • Blogtraffic
  • Gratisbuch
  • Archiv
    • Liste absolut aller Blogbeiträge
  • 1001 Gründe
    • Warum es gut und richtig ist ein Blogger zu sein

Guck! Mich! An! Zugkräftige Fotos für Twitter und Facebook erstellen

Erschienen 19.10.2015 | von Dirk Metzmacher |

  • merken  14 
  • teilen  15 
  • twittern  
  • teilen 

fotos-fuer-facebook-twitter

Social Media ist hauptsächlich Mikrocontent und Communitymanagement. Im Netz geht der Trend zum Informationshäppchen: Geschwind geschluckt und verträglich verdaut. Snackable Content.

Apropos ... kennst du schon mein Buch?

Bildungssprache Buch CoverNEU! Wörter der Bildungssprache und was sie bedeuten. Hier ist das praktische Handbuch schlauer Wörter. Über 500 Begriffe aus der Bildungssprache, erläutert und mit Beispielen für den praktischen Einsatz oder mit Zitaten versehen. Texte besser verstehen und schlauer schreiben. Mehr erfahren

Damit die Minitexte wahrgenommen werden, würze sie mit Fotos. Denn im Nachrichtenstrom gehen auch hochwertige Textinhalte schnell unter.

Ich habe für dich Tipps und Wissen für optimale Fotos gesammelt.

Inhaltsverzeichnis

  • Hier sind meine 5 Social Media-Gesetze…
  • § 1  — Sage nichts, was du nicht auch zeigen kannst
  • § 2 — Erzeuge eigene Inhalte
  • § 3 — Verdopplung der Nachricht
  • § 4 — Die Welt in einem Bild
  • §5 — Achte die Regeln der Plattform
  • Bildmaterial für [icon id=“facebook“]acebook – Auf die Größe kommt es eben doch an
  • Bildmaterial bei [icon id=“twitter“]Twitter – 140 Zeichen minus ein Foto
  • Kurzanleitung für Photoshopnutzer
  • Die Regel-Brecher: VaynerMedia
  • Fazit: Lass dich sehen!

Hier sind meine 5 Social Media-Gesetze…

… für deine Inspiration und zum bewussten Brechen. Twitter und Facebook unterscheiden sich übrigens in der Art der Darstellung sowie der Ansprache der Zielgruppe.

§ 1  — Sage nichts, was du nicht auch zeigen kannst

Wir benötigen den „Bildbeweis“. Unterstreiche jede Nachricht mit mindesten einem visuellen Reiz. So könntest du etwa ein selbst erstelltes Bild, ein Stockfoto, eine GIF-Animation, eine Infografik oder auch ein Video anfügen, die zum Text passen. Dieser besteht oft nur aus zwei Sätzen und einem Link. Auch sich allein gestellt werden diese Sätze (besonders bei Facebook) gerne übersehen.

fotos-social1

§ 2 — Erzeuge eigene Inhalte

Eigens produzierte Inhalte sind origineller als das Bildmaterial, das die Konkurrenz einsetzen kann. Es ist sinnvoll, wenn du selbst oder jemand im Team ein Programm zur Bildbearbeitung benutzen kann. Es reichen Grundkenntnisse. Die genügen, um Fotos aufzuwerten oder einfache Collagen zu erstellen.

fotos-social2

Online-Bildbearbeiter, wie Pixlr oder Picmonkey sind empfehlenswert. Beide sind einsteigerfreundlich und in der Grundform kostenlos. Eine besondere Social Media-Verbindung hat auch Canva. Dort werden auf Basis von Vorlagen zum Beipsiel Facebook-Cover oder -Posts gestaltet.

fotos-social3

§ 3 — Verdopplung der Nachricht

Ein geschriebener Text ist ein Muss und doch bietet es sich an, den Inhalt (da er schön kompakt ist) ein weiteres Mal und zwar  diesmal direkt im Bild zu integrieren, als Wiederholung oder mit anderen Worten. Selbst in Videos werden Texte integriert, die auch beim Teilen des Videos stehen bleiben. Auch eine Handlungsaufforderung, als „Call-to-Action“, kommt häufig doppelt vor.

fotos-social4

§ 4 — Die Welt in einem Bild

Bilder können eine komplette Geschichte erzählen. So zeigt das Foto vielleicht ein Ergebnis, wobei Text – im Bild gut lesbar eingebunden – die wenigen Schritte dahin präsentiert. Oder die Aufnahme wird mit einem Zitat unterstrichen. Selbst eine Checkliste könnte mit dem Foto zusammenspielen.

Beliebt ist der #Hashtag. So gewinnt die visuelle Komponente eine zweite Ebene als Informations- und Emotionsträger dazu.

fotos-social5

§5 — Achte die Regeln der Plattform

Jede Plattform, sei es Facebook, Twitter, Instagram oder Pinterest, hat eigene Regeln. Es reicht nicht, größentechnisch angepasste Grafik zu verteilen. Man muss sich gezielt der Sprache der Plattform zu bedienen.

Wird bei Facebook eine Seite des aktuellen Werbeflyers hochgeladen, dürfte das kaum jemand beachten. Besser ist da das Zusammenspiel mit aktueller Kommunikation oder zeitnahen Ereignissen (die Jahreszeit, das Wetter, Feiertage, Sportereignisse, lustige Geschehnisse) mit den angebotenen Produkten oder Dienstleistungen. Wobei der Unterhaltungs- und Informationswert immer über der puren platten Werbung steht.

fotos-social6

Bildmaterial für [icon id=“facebook“]acebook – Auf die Größe kommt es eben doch an

1 — Eigene Fotos

Die empfohlene Größe für hochgeladenes Bildmaterial wird mit 1200 x 630 Pixel angegeben. In der Timeline wird dieses Foto auf eine maximale Breite von 470 Pixel herunter gerechnet. Die Proportionen bleiben 1:1 erhalten.

Wie bei allen Aktivitäten auf Facebook werden mehr Anwender dieses Foto sehen, je mehr Personen damit interagieren, also etwa „Gefällt mir“ drücken oder einen Kommentar schreiben. Die Daten dazu von Facebook: Best Practices Open Graph

fotos-social7

2 — Verlinkte Inhalte

Liegt das Foto in einer Auflösung von mindestens 600 x 315 Pixel vor (empfohlen werden 1200 x 630 Pixel), nutzt Facebook die große, rechteckige Darstellung von 470 x 246 Pixel. Ist das Foto kleiner als die genannte Mindestgröße, wird die quadratische Darstellung im hinterlegten Kästchen verwendet. Dabei ist das Quadrat 158 x 158 Pixel groß.

fotos-social8

Als perfektes Verhältnis gibt Facebook den etwas krummen Wert von 1,91 zu 1 an, um ein unerwünschtes Zurechtschneiden beim Verlinken zu vermeiden. In Photoshop kannst du diesen Wert beim Freistellungswerkzeug in der Optionsleiste  eingeben. Damit sorgst du gezielt für den perfekten Ausschnitt.

In jeder beliebigen Bildbearbeitung kannst du aber auch ein neues Dokument anlegen, gleich mit den empfohlenen Maßen, um dieses dann mit einem Foto auszustatten.

fotos-social9

Um sicher zu gehen, welches Foto auf der Seite von Facebook als schmückendes Element zum Link eingesetzt wird, hilft das og:image Attribut. Wird dieses Tag nicht genutzt, bietet Facebook dem Anwender die Auswahl der möglichen Bilder an, wobei damit auch Fotos schlechterer Qualität genutzt werden könnten.

Hier ein Beispiel, bei dem du nur noch die Verlinkung zu der gewünschten Datei austauschen musst:

<meta property="og:image" content="http://url.com/artikel/einfoto.jpg" />

3 — Bilder in Folge

Was ist besser als ein Foto zu jeder Meldung: gleich eine ganze Serie in Folge. Facebook präsentiert die ersten Fotos einer Galerie in einer einfachen Collage, wobei alle weiteren verfügbaren Fotos mit einer Zahl und einem Pluszeichen im letzten Abschnitt schon angedeutet werden.

Du generierst damit weitaus mehr Klicks, als mit einem einfachen Foto, und kannst in der Abfolge sogar eine kleine Geschichte erzählen.

fotos-social10

Die Aufnahmen für die Galerie können gleichzeitig hochgeladen werden, wobei die Reihenfolge dann noch in Facebook direkt angepasst werden kann. Ziehe dazu die Bilder per Drag & Drop zurecht, bevor der Beitrag veröffentlicht wird.

Übrigens: ist ein Foto auffällig breiter oder höher (wie etwa ein Hochkant-Foto), so passt sich die Galerie daran an und präsentiert start vier gleicher Kästchen ein größeres Rechteck.

fotos-social11

Bildmaterial bei [icon id=“twitter“]Twitter – 140 Zeichen minus ein Foto

In-Stream-Fotos

Im Stream erscheinen die Fotos (Stand 12/2015) mit einer Breite von 505 x 505 Pixel, was einem Verhältnis von 1 zu 1 entspricht. Hochgeladen werden Sie größer, wobei Twitter die Bilder mit 1024 x 1024 Pixel als größtmögliche Anzeige präsentiert. Passt ein Foto nicht automatisch zum Verhältnis, das Twitter bevorzugt, wird das Bild beschnitten.

In der In-Stream-Vorschau sehen wir dann den Ausschnitt, den Twitter festgelegt hat. Um das komplette Bild als Vorschau zu sehen, muss es einmal angeklickt werden. Ein weiterer Klick zeigt dann die größte Ansicht.

fotos-social12

Doch wie können wir bestimmen, welcher Ausschnitt dargestellt wird. Natürlich könntest du leicht die größte Variante 1024 x 1024 Pixel mit einem Bild füllen und hochladen, da hierbei nur etwa 6% des oberen und unteren Bildbereiches weg geschnitten werden, die kaum wichtige Inhalte zeigen.

fotos-social13

Werden aber Hochkant-Fotos angefügt, ist die Darstellung als Vorschau nicht mehr ganz so klar. Möchtest du sicher gehen so merke, dass die Hälfte der Breite die Höhe der Vorschau ergibt. Generell bleibt also nur ein schmales Rechteck stehen. Und dieses orientiert sich an der Bildmitte.

Ist das Foto etwa 505 Pixel breit, ist die Höhe des Rechtecks 252 Pixel, von der Mitte ausgehend 126 Pixel nach oben und 126 Pixel nach unten. Dies funktioniert seit 12/2015 nicht mehr wie beschrieben.

fotos-social14

Linktipp: Maße für Social Media Grafiken (du kannst also jederzeit die aktuellen Maße ablesen. Wir haben zur Sicherheit eigene Screenshots erstellt, um die Größen abzugleichen)

Kurzanleitung für Photoshopnutzer

Vorschaubereich Schritt #1: Die Höhe der Mitte

Gehe im Menü auf Bild > Bildgröße. Da wird die Breite des Dokumentes abgelesen. Die Hälfte dieses Wertes ergibt die Höhe der Vorschau. Bestätige über OK.

kurztut1

Vorschaubereich Schritt #2: Auswahl bestimmen

Aktiviere das Auswahlrechteck-Werkzeug und stelle in der Optionsleiste die Art von Normal auf Feste Größe um. Bei der Breite gibst du 100% an, bei der Höhe den im ersten Schritt berechneten Wert.

kurztut2

Vorschaubereich Schritt #3: Die Größe als Fläche

Erstelle eine neue Ebene über Umschalt+Strg+N und klicke in das Dokument. Fülle die Auswahl mit schwarzer Farbe, etwa über Umschalt+F5. Strg+D hebt die Auswahl auf.

kurztut3

Vorschaubereich Schritt #4: Vorschaubereich erkennen

Wähle im Ebenenbedienfeld beide Ebenen bei gedrückter Strg-Taste aus. Aktiviere das Verschieben-Werkzeug und klicke in der Optionsleiste auf den Button An vertikaler Mittelachse ausrichten. Der abgedeckte Bereich entspricht der Vorschau.

kurztut4

Überrasche deine Leser mit einer raffinierten Galerie

Du kannst diesen Effekt auch ausnutzen, um eine Galerie zu simulieren. So zeigt die Mitte das Foto, das auch als Vorschau dienen soll. Der Klick darauf offenbart dann die weiteren Aufnahmen, wobei die Anzahl und Position der Bilder stark variieren darf. So kommt es zu einer angenehmen und geplanten Überraschung nach dem ersten Klick. Hier das Ganze in Aktion.

fotos-social15

Natürlich kannst du bei Twitter bis zu vier Bilder direkt zu einer Galerie kombinieren, wobei die Aufnahmen nacheinander hochgeladen werden.

Die Regel-Brecher: VaynerMedia

VaynerMedia ist eine Social Media-Agentur aus New York, dessen Kopf Gary Vaynerchuk bei YouTube in seiner eigenen Show (etwas hyperaktiv) stetig Tipps zum Thema gibt.

Schauen wir uns die hauseigenen Facebook-Kanäle (VaynerMedia und Gary Vaynerchuk) an fällt auf, dass hier eben nicht die empfohlenen Maße umgesetzt werden, sondern ein quadratisches Motiv in den Maßen 800 x 800. Damit wird erreicht, dass in der Timeline das Foto eine weitaus größere Fläche ausmacht und sich damit auch die Sichtbarkeit erhöht.

fotos-social16

Anmerkung von Sven: Auch die maximale Breite hier im Layout von Conterest ist mit exakt 800 Pixel definiert.

Fazit: Lass dich sehen!

Um Aufmerksamkeit zu erreichen, arbeitest du ab jetzt plakativer und augenfälliger. Auch wenn deine Inhalte im Text schon enthalten sind, braucht es doch ein Foto (oder auch gleich eine Minigalerie), um diese Informationen so zu transportieren, dass sie auch ankommen.

Der tägliche Strom an Meldungen ist einfach zu breit und zu rasant. Die Aufmerksamkeitsspanne der Internetanwender hingegen zu schmal, um diesen Verlust an Sichtbarkeit zu akzeptieren. Der Mensch braucht Visuelles mehr denn je: zumindest im sozialen Netz.

 

Wenn du Blogger bist, interessiert du dich vielleicht auch für attraktive Beitragsbilder …

Kategorie: Social Media, Schrift & Grafik | ** Blogarchiv

Mehr zum Thema

  • 31 irrsinnig schöne Brush Script Fonts kostenlos
  • Mockups — So passt du vorgefertigte Designs schnell an 📲 Hier sind 30 Downloads
  • Kostenlose Stockfotos in Bilddatenbanken — Die 59 besten Quellen
  • Die 10 besten Instagram Tricks der Profis 📸
  • Rette dein online Leben, bevor es zu spät ist‼️So legst du Backups für Social Media und Blogs an
  • Die Schönheit des Hashtags (#) in 26 Google Fonts
  • Die besten Adressen für lizenzfreie Videos 📽 kostenlos
  • So findest du die schönsten Google Fonts und Font Kombinationen
  • Mehr Traffic mit attraktiven Social Media Plugins, Bars & Buttons
  • Ein Logo für das Blog selbst erstellen
  • Das Fragezeichen (?) in 34 fabelhaften Google Fonts
  • Wie du Cover für Sachbücher attraktiv gestaltest 👌

Conterest ist als Projekt beeendet, bleibt aber online

Aus diesem Grund gibt es keine Kommentare mehr. Danke an alle für das Lesen! Ich habe mich in der Zwischenzeit als Schriftsteller Lenny Löwenstern neu erfunden. In der übrigen Zeit kümmere ich mich um schöne und alte Wörter.

 

Die Themen

  • Bloggen
  • Blogstart
  • Blogtraffic
  • Pinterest
  • Schreiben
  • Schrift & Grafik
  • Wordpress

Blogtipps

  • 22 Blogbegriffe, die du kennen solltest
  • Achte gut auf deine URLs, wenn du Änderungen vornimmst, umziehst oder dein System wechselst
  • 50 Seiten, die deiner Inspiration garantiert auf die Sprünge helfen
  • Das Lexikon der Bloggersprache – Wichtige Blogbegriffe verständlich erklärt
  • Hallo Blogger! So heißt Du Deine Leser willkommen
  • Wenn Blogger sich nicht trauen — Die Angst vor der Veröffentlichung
  • Wordpress Themes 🍪 Worauf es wirklich ankommt
  • 14 Fragen – Teste dein Blogwissen (Blogger Quiz)
  • Bloggen ganz wie von selbst — Flowblogging (✿◠‿◠)
  • Wie du als Blogger Erfolg mit Pinterest 📌 auf Deutsch hast

Favoriten der Redaktion

  • Gastbloggen Gratis Badges
  • Langzeitmotivation
  • Von Links profitieren
  • Wieso Bloggen?
  • Warum Blogger SEO brauchen
  • Was du mit 100€ fürs Blog tun kannst

Beliebt

  • Blog schreiben für Einsteiger
  • 23 Zitate von Bloggern
  • Tricks mit Text
  • Schnelleinstieg mit WordPress

Empfehlungen

  • Der perfekte Blog Post
  • Lexikon Bloggersprache
  • Beitragsbilder erstellen
  • Ideen finden

Auch interessant

  • Mein Blogger Kodex
  • Ist eine Sidebar nötig?
  • Alltag der Vollzeitblogger
  • Logo selbst machen

conterest.de · Das Blog für Blogger von Sven Lennartz · 2015 - 2018 · Datenschutz · Impressum