Ein kleiner, schneller Guide über die optimalen Abmessungen von Grafiken für Tumblr Posts. Vielleicht ist es manchen schonmal passiert, dass ihr eine Grafik hochladet, im Editor soweit alles gut aussieht und beim posten sich die Qualität des Images komplett verabschiedet. Das liegt daran, dass Tumblr Bilder autosized, um in die Posts zu passen. Sehr große Bilder (vor allem Gifs) werden dazu herunterkomprimiert, um den Datenaufwand in Grenzen zu halten. Aber auch Grafiken, die zu klein sind für Tumblrs native Postgröße, werden autosized und ggf. vergrößert, was die Qualität verschlechtert. Ich würde generell davon abraten, mit Bildern zu arbeiten, die schon nativ zu klein sind aber diese in Photoshop (oder eurer Bildbearbeitungsapp) vorher auf die richtigen Dimensionen anzupassen, kann zumindest ein bisschen Verlust ausgleichen.
Der Mobile Header ist ein Sonderfall und kommt mit den spezifischen Abmessungen 640x360 daher. Er sollte nach dem Hochladen gestreckt werden, um optimal zu passen.
Die folgenden Abmessungen sind für Standard Tumblr Posts und gelten für statische Bilder und Gifs.
Ein Dash Icon ist normalerweise 100x100 groß. (In der mobilen App wird die Ansicht auf die gesamte Breite gestreckt, was auf Deutsch gesagt, beschissen aussieht!)
Viele Rollenspieler bevorzugen eine Border (auch inklusive Icon) über simple Dash Icons. Diese sehen auch in der mobilen Ansicht normalerweise gut aus. Diese hier ist beispielsweise 540x120 groß und enthält das Dash Icon. Border sind allerdings sehr individuell gestaltbar, lediglich die Breite von 540px sollte eingehalten werden. (Man kann eine Border, da diese eben sehr klein sind und normalerweise Schriftzüge enthalten, auch doppelt so groß machen, z.B. 1080x240, damit man beim anklicken mehr Details sieht.)
Für dieses Tutorial werde ich als Beispiel das Blog Banner für die Guides erneuern und ihm mithilfe einer Clipping Mask eine neue Form geben. Dieses Bildbearbeitungstool gehört zu den Basics der Basics und wird in verschiedensten Edits immer wieder gebraucht, egal ob für ein Pinned Banner, eine große Promo oder eine Icon Border.
Als erstes sucht man sich ein Image aus, welches die spätere Form des fertigen Edits vorgibt, in meinem Fall ist das eine transparente (!) Border aus Kaffeebohnen, die ich in Photoshop geöffnet habe.
Der nächste Schritt ist File -> "Place Embedded" - hier wähle ich meine Bannergrafik aus und lege sie über die Base. Generell nimmt man hier die Grafik, mit der man die Clipping Mask erzeugt. Auf diesen Layer macht man einen Rechtsklick und wählt -> "Create Clipping Mask". Die Grafik nimmt die Form der Hintergrundgrafik an und in der Layerebene ist ein kleiner Pfeil zu sehen. (Die ursprüngliche Grafik sah wegen des Fliesenhintergrunds sehr seltsam aus, weswegen ich ein anderes Motiv genommen habe!)
Danach verändere ich den Blendmodus, damit die Kaffeebohnen darunter etwas durchscheinen. In diesem Beispiel habe ich den Layer ein zweites Mal kopiert, den ersten mit dem Blendmode "Hard Light" und 100% Opacity und die Kopie ist im Blendmode "Linear Dodge (Add)" mit 30% Opacity. Diese Einstellungen sind sehr davon abhängig was man für Grafiken verwendet und müssen jeweils angepasst werden. Was hier gut aussieht, kann beim nächsten vollkommen verkehrt aussehen, probiert hier herum, bis euch das Ergebnis gefällt.
Mit der wieder eingefügten Schrift sieht das Banner nun so aus.
___
Als nächstes möchte ich ein Icon in Form einer Kaffeetasse machen. Das Prinzip ist dasselbe wie oben, dieses zweite Beispiel dient nur zur Wiederholung.
Mit File -> "Place Embedded" kommt die Grafik, die das Icon ausfüllen soll als Layer darüber. Rechtsklick -> "Create Clipping Mask" erzeugt dann die gewünschte Form. Danach kann mit Effekten und Blendmodi nach Belieben gearbeitet werden. Das waren im Grunde die Basics für die Verwendung von Clipping Masks. Es gibt zahlreiche weitere, spezifische Fälle wo sie verwendet werden, zum Beispiel für partielles Einfärben bestimmter Bereiche in einem Bild, für das Arbeiten mit Shapes, uvm. Ich kann unmöglich alle Fälle abhandeln aber bin gerne bereit Fragen hierzu nach meinen besten Möglichkeiten zu beantworten.
Diese Version funktioniert nun mit Photopea, jedoch nicht länger mit Photoshop. Bitte achtet darauf die richtige Version herunterzuladen, je nachdem welches Programm ihr benutzt. Link zum PSD HIER oder im Sourcelink.
Die Photoshop-Version ist hier.
Die Datei hat einen Vorschau-Error auf dem Drive Laufwerk, lässt sich aber ohne Weiteres herunterladen. Öffnet danach photopea.com in eurem Browser. Klickt auf "Start using Photopea" > "Open from Computer" und öffnet das heruntergeladene PSD.
Wählt File > Open & Place... und ladet euer eigenes Bild hoch. Löscht danach den "delete/replace with your image" Layer. Am Ende croppt die Grafik auf die richtige Größe, falls euer eigenes Bild nicht quadratisch ist, sonst stehen transparente Ränder vom Overlay über.
Wenn ihr zufrieden seid, klickt File > Export as.. > GIF. Ist eure Datei sehr groß kann es passieren, dass ihr eine Warnung bekommt. "OK" verkleinert die Datei, "Cancel" behält die Originalgröße. Wählt hier nach eigenem Ermessen.
Ich empfehle zum Schluss unbedingt die Exportgröße manuell zu prüfen und die Breite auf 540px zu stellen für Tumblr. Wer möchte, kann das Häkchen bei "Dither" aktivieren. Achtet darauf, dass die Datei nicht größer als 10 MB wird. Weitere Export Einstellungen zur Verbesserung der Qualität lassen sich bei Photopea leider nicht machen aber das Ergebnis ist nicht bedeutend schlechter als in Photoshop!
Editing 101, Pt. 7: Beispiel Edit (vorerst letzter Teil)
Basierend auf den bisher erschienenen Posts lässt sich jetzt eigentlich schon eine komplette Grafik machen. Die Komposition ist natürlich immer Geschmackssache und vom Thema eures Blogs abhängig, aber die Werkzeuge sind immer dieselben. Um diesen Edit zu machen wiederhole ich Teile aus den anderen Guides und gehe hier nicht mehr bei jedem Schritt ins Detail.
Am besten startet man mit einem neuen, leeren Canvas, in meinem Fall 1080x1080 (die exportierte Grafik wird 540x540 groß, also halbiert). Ich möchte einen Ripped Paper Effekt, der das Bild diagonal in der Mitte teilt, den lade ich mir also als erstes hinein mit File -> Place embedded. Dann passe ich die Größe an und rotiere das Bild, bis es die Ecken ausfüllt (Edit -> Transform -> Scale bzw. Rotate). Von diesem Layer mache ich eine Kopie für später und blende sie erst einmal aus (den unteren Layer der beiden).
Jetzt lade ich die Grafik aus dem Cutouts Guide rein und erzeuge eine Clipping Mask, sodass sie sich an den Papiershape anpasst. Als Blendmodus nehme ich "Vivid Light" mit 50% Opacity. Danach nehme ich die (zurückgelegte) Kopie von Layer 1 und verschiebe sie so, dass die Papiertextur den freien Bereich unten ausfüllt. Um den unteren Layer zu bewegen, muss man ggf. die oberen kurzzeitig ausblenden oder das kleine Häkchen neben "Auto-Select" oben links unter der Menüleiste rausnehmen.
Jetzt lädt man ein zweites Bild hoch und schiebt es über den untersten Layer an die zweite Stelle von unten und nimmt einen passenden Blendmodus nach Vorliebe, in meinem Fall "Linear Light" mit 50% Opacity. Das Bild benötigt auch etwas Farbkorrektur, damit es in etwa einen ähnlichen Hue hat wie das erste. Das mache ich mit Image -> Adjustments -> Color Balance. Wichtig ist hierbei, die Modifizierung nur auf diesem Layer vorzunehmen. Will man später das gesamte Bild korrigieren, macht man dafür einen neuen Adjustment Layer, der nach ganz oben über alle anderen Layer kommt.
Als nächstes kommen Textur Overlays, zwei verschiedene, komplett entsättigt via Image -> Adjustments -> Vibrance, mit Vibrance und Saturation beides auf -100. Die erste Textur bedeckt nur die Tassen, die zweite das gesamte Bild. Die Layer müssen hierfür an die richtige Stelle geschoben werden, der erste an die dritte von unten und der zweite ganz nach oben. Als Blendmodi habe ich hier "Vivid Light" und "Overlay".
Für den Schriftzug habe ich den Font "Milky Matcha" von DaFont. Mit Rechtsklick auf den Textlayer lässt sich die Funktion "Warp Text" auswählen. Hier nehme ich den Effekt "Flag" und passe die Regler an, bis er mir gefällt. Danach stelle ich den Blendmodus auf "Overlay" und füge mit "fx" (ganz unten Rechts in der kleinen Symbolleiste) ein Color Overlay hinzu, außerdem den Effekt "Bevel & Emboss". Direkt im Anschluss mache ich eine Kopie vom Textlayer und stelle dort den Blendmodus auf "Soft Light". Ich habe für Fonts noch keinen Guide gemacht, die Funktionen sind ansich aber selbsterklärend, da muss man herumprobieren was gut aussieht.
Zuletzt kommen noch zwei Gif Overlays drüber, animierte Herzen und ein Noise Filter. Fertig! Und ein kleiner Reminder, meine anderen Guides erklären die meisten Schritte hier nochmal mehr im Detail.
Editing 101, Pt. 5: Hyperstilisiertes Coloring (für RP Edits)
Bitte lest zuerst diesen Guide. Ich versuche nun ein typisches Coloring zu machen, welches man häufig in RP Edits und Promos findet. Wie schon erwähnt, habe ich nie zuvor solche Colorings gemacht, das Ergebnis wird nicht perfekt sein! Passend zum Thema dieses Blogs nenne ich das Coloring "Mochaccino" und tue es am Ende zum herunterladen in den Sourcelink. Ihr könnt das gerne benutzen, Credits sind hierfür nicht notwendig, gebt es bitte nur nicht als eure eigene Arbeit aus.
Um verschiedene, natürliche Farben an eine bestimmte Farbpalette anzupassen, benutzt man den Hue/Saturation Layer und geht dort sämtliche Farben durch, die man in den gewünschten Farbtönen haben will. Ich wandele für dieses Coloring Cyan, Grün und Blau in einen Mocha-Ton um. Für den "körnigen" Look, den diese Colorings häufig haben, kopiert man den Hue/Saturation Layer in den Blendmodi "Color Burn" und "Hard Mix", als Beispiel. Da bieten sich auch andere Modi an, je nachdem wie das Coloring aussehen soll.
Hier sind drei Beispiele mit dem fertigen Coloring:
Man findet in Rollenspiel- und Fandom Spaces grob gesagt zwei unterschiedliche Arten von Colorings: Erstens die Sorte Colorings, die von Gif Makern gemacht werden, um die Qualität ihrer Gifs zu verbessern. Gif Colorings zielen auf Farbkorrektur in Richtung Weißabgleich (das Entfernen unangenehmer Farbstiche), High Contrast und High Vibrance. Natürlich lässt sich diese Farbkorrektur auch auf normale Fotos anwenden! Zweitens gibt es RP Coloring PSDs, die oft hochstilisiert aussehen und an einer bestimmten Farbpalette orientiert sind, z.B. Herbstfarben, Lilatöne usw. Ich selber komme aus dem Lager der Gif Maker und kann deswegen keine gute Anleitung für RP Colorings geben, da das Neuland für mich ist. Ich werde im Rahmen dieses Guides aber versuchen ein Beispiel zu geben.
Hier ist meine Ausgangssituation, unbearbeitet:
Mein Basic Coloring enthält Layer für Curves, Brightness/Contrast, Exposure, Vibrance, Hue/Saturation, Channel Mixer, Color Balance und Selective Color. Man braucht nicht zwingend alle Layer für jedes Bild, das man einfärbt, es ist aber praktisch alle zur Hand zu haben bei Bedarf. Um den Rahmen hier nicht zu sprengen, kann ich nicht jede Funktion jedes Layers erklären, hier lohnt es sich herumzuprobieren und zu schauen was jede Funktion macht, so habe ich es auch gelernt.
Eins der besten Tools ist der Curves Layer. Klickt hier einfach auf "Auto" und schaut was passiert. Oft ist das Ergebnis schon so gut, dass man danach gar nicht mehr soviel weiter korrigieren muss.
Was ich aber grundsätzlich immer mache ist den Kontrast zu erhöhen, Helligkeit und Sättigung anzupassen. Um das Bild heller zu machen, verwende ich nicht "Brightness" im Contrast/Brightness Layer, sondern erhöhe den Wert im Exposure Layer. Exposure wäscht schwarz weniger aus, "Brightness" dagegen lässt schwarz stumpf erscheinen wenn man den Wert zu hoch stellt. Im Vibrance Layer verwende ich immer "Vibrance", niemals "Saturation", außer das Bild bedarf zusätzlicher Sättigung. Als Gif Maker bin ich aus Gewohnheit sehr mutig mit dem Vibrance Setting, für normale Bilder kann man einen niedrigeren Wert als 100 nehmen. Macht, was für euer Auge gut aussieht.
Ich möchte nun, dass der Himmel und das Meer etwas blauer werden und die Stühle im Vordergrund weißer aussehen. Insgesamt ist mir das Bild zu gelbstichig. Hierfür nehme ich den Color Balance Layer, als nächstes korrigiere ich mit dem Selective Color Layer. Auch hier ist das Ergebnis sehr abhängig vom Ausgangsbild. Dieses Bild ist nicht so schwierig zu korrigieren, es gibt aber auch Kandidaten, bei denen man sich die Haare ausreißen will, weil sie sehr dunkel sind oder einen extremen Farbstich haben, den man ums Verrecken nicht rausbekommt. Die Devise ist hier nicht so schnell aufzugeben und das folgende Prinzip zu verinnerlichen: Cyan gleicht sich aus mit Rot, Magenta mit Grün, Gelb mit Blau.
Am Ende sieht das Ergebnis so aus. Insgesamt hat es nur ein paar Minuten gedauert, dieses Bild einzufärben, kleiner Aufwand, großer Effekt.
Als Antwort auf diese eingegangene Frage, kommt hier mein Noise Filter Guide. Notiz: Ich verwende hierfür Photoshop und die Videotimeline. Ich bin mir relativ sicher, dass alternative Programme wie Photopea, Canva usw. leider keine Files händeln können, die mit Videotimeline-Animationen arbeiten. Wenn hierzu aus der Community jemand Rat weiß, gerne einreichen! Außerdem ist mein Programm auf Englisch, ich entschuldige mich! Am Ende des Guides versuche ich das fertige Overlay sowohl als PSD als auch als einfaches Gif hier hochzuladen, sodass es verwendet werden kann, wenn kein Photoshop vorhanden ist. Bloß sonderlich anpassen/tweaken lässt es sich dann nicht, aber das sollte trotzdem besser als nichts sein.
Die Photopea Version ist hier.
ANIMIERTES NOISE OVERLAY (from scratch)
Kreiert eine neue Datei. Ich benutze die Abmessungen 1080x1080 (für etwas feineren Grain bei großen Bildern) und die Hintergrundfarbe #ababab, ein neutraler, heller Grauton. Die korrekten Tumblr Dimensionen wären 540x540, empfehlenswert für Grafiken, die bereits auf 540px Breite zugeschnitten sind.
Der Hintergrund ist nun ein solides, graues Quadrat. Kreiert als erstes eine Videotimeline (Window > Haken bei "Timeline" setzen, dann am unteren Bildschirmrand auf "Create Video Timeline" klicken). Der Layer 0 sollte im Anschluss auf zwei Frames verkürzt werden. Hierfür kann man die Timeline am Ende mit der Maus fassen und nach links ziehen, bis die Dauer zwei Frames beträgt.
Macht nun 4 Kopien vom Layer 0 und schiebt diese im Anschluss hintereinander auf dieselbe Linie. Dabei wird automatisch eine Video-Gruppe von Photoshop erstellt. Rechtsklickt auf die Video-Gruppe und wählt "Convert to Smart Object". Ändert danach den Blendmodus des Smart Objects von Normal zu "Soft Light" oder "Overlay". Bitte diesen Step nicht vergessen!
Klickt oben im Menü auf Filter > Noise > Add Noise. Es öffnet sich ein Popup für weitere Einstellungen. Ich verwende hier 20% Amount, Gaussian und aktiviere den Haken bei "Monochromatic", aber diese Einstellungen können nach Belieben gemacht werden.
Optional: Um die Frequenz etwas zu verlängern kann das Smart Object ein oder zwei Mal kopiert und auf der Timeline so geschoben werden, dass sich die Abspieldauer verdoppelt- bzw. verdreifacht. Wenn man zufrieden ist, fügt man die zwei oder drei Smart Objects erneut zu einem einzigen Smart Object zusammen. ÄNDERT ERNEUT DEN BLENDMODUS zu "Soft Light" oder "Overlay".
Klickt nun auf File > Place Embedded... und ladet euer gewünschtes Hintergrundbild hoch. Zieht das Bild so, dass es am Ende unter dem Noise Filter liegt. Falls es auf der Timeline länger ist als das Overlay, verkürzt die Abspieldauer der Grafik auf dieselbe Länge. Falls das Overlay die Grafik nicht abdeckt, kann die Größe angepasst werden mit Edit > Transform > Scale. Hierbei kann entweder die Hintergrundgrafik oder das Overlay vergrößert/verkleinert werden. Bei enormen Größenunterschieden wird der Grain/Noise Effekt entweder zu grob oder zu fein, hier müssen persönliche Tweaks gemacht werden nach Bedarf! Am Ende croppt die Grafik auf die richtige Größe, falls euer eigenes Bild nicht quadratisch ist, sonst stehen transparente Ränder vom Overlay über.
Um nun den sich bewegenden Effekt auf der fertigen Grafik zu erhalten, muss die Datei als GIF exportiert werden. Klickt hierfür auf File > Export > Save for Web (Legacy). Die maximale Größe für Tumblr beträgt 10 MB. Ich empfehle die Grafik in 540px Breite zu exportieren für Tumblr.
Das Endergebnis kann dann zum Beispiel so aussehen! (Oben mit Effekt "Soft Light" und unten mit Effekt "Overlay")
Die PSD Datei für dieses Noise Overlay findet ihr HIER oder im Sourcelink des Posts. Ich bitte um Rückmeldung, falls es Probleme mit der Datei gibt. Außerdem sind unten die beiden Gifs ohne Hintergrund, ich kann aber leider keine Anleitung dazu geben, wie sie ohne Photoshop über eine Grafik gelegt werden. Aber vielleicht lassen sie sich verwenden! Ich glaube allerdings die Gifs sind nicht transparent, müssten also noch angepasst werden.
