Diese Anleitung geht den Weg durch, den das Werkzeug selbst vorgibt — die acht Schritte in der linken Spalte. Sie bleibt dabei nicht bei den Beschriftungen stehen, sondern erklärt, was man nicht sieht: was ein Klick wirklich tut, was sich rückgängig machen lässt und was nicht, und an welchen Stellen Leute regelmäßig hängenbleiben.
Du musst sie nicht von vorn bis hinten lesen. Wenn du eine bestimmte Frage hast, nimm das Inhaltsverzeichnis.
Was das Werkzeug ist – und was es nicht ist
Das Vorlagenwerkzeug ist eine einzelne Seite im Browser. Es gibt keinen Login, keinen Server und keine Datenbank. Alles, was du eintippst, auswählst und hochlädst, bleibt auf deinem Gerät — hochgeladen wird nichts.
Beim Öffnen holt sich das Werkzeug zwei Dinge aus dem Netz: die CI-Farben aus dem CMS und die Schriften. Solange das läuft, steht oben „Schriften und Farben werden geladen …“. Ist das CMS nicht erreichbar, arbeitet es mit der eingebauten Fassung weiter; unter dem Herunterladen-Knopf steht dann „Farben aus der eingebauten Fassung (CMS nicht erreichbar)“ statt „Farben live aus dem CMS“.
Dein aktueller Stand wird etwa eine halbe Sekunde nach jeder Änderung automatisch im Browser gesichert. Schliesst du den Tab und kommst später zurück, ist dein Motiv wieder da — im selben Browser auf demselben Gerät, und ohne die Fotos, die du selbst hochgeladen hast.
Fallstrick: Privates Fenster oder gesperrter Seitenspeicher: dann wird gar nichts gesichert, auch der letzte Stand nicht. Das merkst du erst, wenn du zurückkommst und alles leer ist. Nutze in dem Fall „Als Datei sichern“.
Schritt 1 · Vorlage — der Anfang ist ein Neuanfang
Eine Vorlage ist mehr als eine Liste von Feldern: Sie bringt Hintergrund, Anordnung, Schriftgrössen, Abstände und beim Logo auch Motiv, Farbe und Ecke mit. „Krake gross“, „Aushang“ und „Foto & Satz“ sind zum Beispiel auf hellen Grund gebaut, damit das Logo in seinen Farben stehen darf — auf dunklem Grund verschwindet der farbige Verlauf.
Dreizehn Vorlagen stehen zur Wahl. „Wir sind vor Ort“ gibt es nur als Story, alle anderen als Story und als Beitrag; die Papierformate stehen jeder Vorlage offen.
Einige Vorlagen ziehen Inhalte aus dem CMS: Termin, Hilfenummern, Angebot, Was ist Awareness, Ein Mensch bei uns, So erreicht ihr uns. Bei ihnen erscheint oben im Abschnitt „Inhalt“ eine Auswahl „Aus dem CMS übernehmen“.
Fallstrick: Ein Vorlagenwechsel ist ein Neuanfang: deine eingetippten Texte, hinzugefügten Bausteine und verschobenen Elemente sind weg, weil die Bausteine der neuen Vorlage andere sind. Rückgängig (Strg+Z) holt den alten Stand zurück — aber nur, solange du den Tab nicht neu geladen hast.
Schritt 2 · Format — Story, Beitrag, Papier
„Story / WhatsApp“ ist 1080 × 1920 Pixel, also hochkant für Instagram-Storys und den WhatsApp-Status. „Instagram-Beitrag“ ist 1080 × 1350, das hohe Format für den Feed. Beide kommen als PNG-Bild heraus.
Darunter stehen die Papierformate: A6 (Flyer, 105 × 148 mm), A5 (Handzettel, 148 × 210 mm), A4 (Aushang, 210 × 297 mm) — alle mit 300 dpi — und A3 (Plakat, 297 × 420 mm) mit 200 dpi. Papierformate kommen als PDF heraus, und der Knopf unten heisst dann „Druck-PDF herunterladen“.
Du kannst jederzeit zwischen den Formaten wechseln, ohne neu anzufangen: Alle Positionen liegen anteilig, nicht in Pixeln. Unter der Vorschau gibt es dafür den Knopf „Als Instagram-Beitrag weiterbauen“ beziehungsweise „Als Story / WhatsApp weiterbauen“.
A3 hat absichtlich nur 200 dpi. Safari und iPhone geben bei sehr grossen Zeichenflächen ein leeres Bild zurück, ohne Fehlermeldung; mit 300 dpi wäre das A3-Plakat auf dem Laptop perfekt und auf dem Telefon leer.
Fallstrick: Nach einem Formatwechsel stimmt die Höhe nicht mehr von selbst: Was in der Story mittig sass, sitzt im Beitrag anders. Schau die senkrechte Anordnung noch einmal an — das Werkzeug sagt das nach dem Wechsel auch an. Und wenn beim Herunterladen „Dieses Format ist zu gross für den Browser“ kommt, probiere es am Rechner statt am Telefon.
Schritt 3 · Gestaltung — Hintergrund, Farbband, Rahmen
Der Hintergrund kommt aus Kacheln: Verlauf dunkel, Schein, Berry, Wellen, Punktraster, Soft Lilac, Weiss, Eigene Farbe und Spektrum. Jede Kachel zeigt wirklich, was sie tut — sie wird mit demselben Maler gezeichnet wie das Motiv.
Das Farbband ist davon unabhängig: „ohne“, „Regenbogen“, „Trauer“ oder „Eigene Farbe“, dazu die Seite (links, rechts, oben, unten). Du kannst also jeden Grund mit jedem Band mischen. Das Trauerband ist bewusst einfarbig schwarz und etwas breiter.
„Eigene Hintergrundfarbe“ steht immer da, auch wenn gerade eine andere Kachel aktiv ist. Sobald du dort etwas anfasst — Art, Farbe oder Richtung — schaltet der Hintergrund automatisch auf „Eigene Farbe“ um. Bei „Verlauf“ zählen beide Farbfelder und die Richtung, bei „Strahl“ beide Farben ohne Richtung, bei „Einfarbig“ nur die erste Farbe.
„Rahmen“ legt einen Zierrahmen ums ganze Motiv. Er gehört zum Motiv, nicht zu einem einzelnen Element, deshalb steht er hier und nicht in der Seitenleiste.
Fallstrick: Wenn du den Regenbogen als Fläche willst, ist das der Hintergrund „Spektrum“ — beim Farbband ist der Regenbogen ein Streifen. Und ein Farbband „unten“ ist in der Story zur Hälfte von Instagram verdeckt; das Werkzeug sagt es an, verbietet es aber nicht.
Das Motiv kippen
Der Haken „Motiv waagerecht kippen“ dreht die Anordnung um: Was links stand, steht rechts. Der Text wandert auf die andere Seite, das Logo in die gegenüberliegende Ecke, das Farbband an den anderen Rand, ein Verlauf läuft in die andere Richtung.
Gebraucht wird das vor allem für Paare: zwei Beiträge nebeneinander im Feed wirken gespiegelt zusammengehörig. Und wenn auf deinem Foto jemand nach links schaut, will der Text meistens rechts stehen.
Wichtig ist, was nicht gekippt wird: die Schrift bleibt lesbar, das Logo steht richtig herum, der QR-Code bleibt scannbar. Gekippt werden die Plätze, nicht die Inhalte. Ein einfach gespiegeltes Bild sähe im ersten Moment ähnlich aus — hätte aber seitenverkehrte Schrift und einen QR-Code, den kein Gerät mehr liest.
Fallstrick: Auch von Hand verschobene Elemente kippen mit. Das ist gewollt — sonst überlappte dein Foto plötzlich den Text, der eben noch daneben stand. Ziehen und die Pfeiltasten arbeiten danach weiter so, wie du hinsiehst.
Der Farbschleier
Der Farbschleier legt eine Farbe über Hintergrund und Bilder, aber unter den Text. Der Regler geht von 0 bis 90 Prozent in Fünferschritten, die Farbe wählst du aus der Palette oder frei.
Er hat zwei Aufgaben. Erstens macht er Schrift auf unruhigen Fotos lesbar. Zweitens ist er ein Gestaltungsmittel: ein Foto in Magenta getaucht, ein ruhiger dunkler Schleier über einem Club-Bild.
Fügst du ein Bild ein, zieht das Werkzeug den Schleier von selbst so weit hoch, wie es der schlechteste Textkasten braucht — nie herunter, und es sagt an, was es getan hat.
Fallstrick: Sobald du den Regler oder die Schleierfarbe einmal selbst anfasst, ist die Automatik für dieses Motiv aus. Danach kommt kein Schleier mehr von allein, auch wenn du später ein sehr helles Foto einfügst. Und beim Logo hilft der Schleier grundsätzlich nicht: er liegt unter dem Logo, nicht darüber.
Schritt 4 · Kontakt & QR
Hier stehen Webseite, E-Mail, Instagram, WhatsApp, Signal und Telefon — mit den Daten aus dem CMS, nicht abgetippt. Wer dort die Nummer ändert, ändert sie auch hier.
Jede Zeile hat zwei Knöpfe. „Text“ setzt die lesbare Zeile als Baustein ins Motiv. „QR“ setzt einen QR-Code ein, der auf dasselbe Ziel führt.
Beides wird gebraucht, und zwar aus einem handfesten Grund: In einem Bild ist kein Link anklickbar — weder auf Instagram noch auf einem Plakat. Wer dich erreichen will, tippt ab oder scannt. Nur im Druck-PDF werden Adressen zusätzlich anklickbar, und zwar dann, wenn im Feld eine echte Webadresse, eine E-Mail-Adresse oder eine Domain steht.
Der QR-Code wird sofort neu gerechnet, wenn du das Adressfeld änderst. Er kann bis zu 213 Zeichen und hat die Fehlerkorrekturstufe M, verträgt also rund 15 Prozent Beschädigung.
Fallstrick: Wird die Adresse länger als 213 Zeichen, erscheint die Warnung „Die Adresse für den QR-Code ist zu lang“ und es wird kein Code gezeichnet. Kürze den Link — ein abgeschnittener Code führt ins Leere, und das merkt niemand, bis jemand ihn scannt.
Schritt 5 · Bilder
„Bild hinzufügen“ nimmt eine oder mehrere Dateien und legt sie als Objekte auf die Fläche — hinter den Text, leicht versetzt. „Als Hintergrund“ legt ein Foto über die ganze Fläche und ganz nach hinten. Unter „Aus unserer Sammlung“ liegen sechs mitgelieferte Bilder, die du ohne Hochladen nehmen kannst.
Jedes Bild wählst du in der Vorschau aus; die Seitenleiste zeigt dann drei Regler. „Deckkraft“ blendet es zurück. „Ausschnitt vergrössern“ zoomt von 100 auf bis zu 300 Prozent hinein. „Ausschnitt ⇆“ und „Ausschnitt ⇅“ schieben den Bildausschnitt im Kasten, von −100 bis 100 Prozent. Das Foto füllt den Kasten immer ganz aus; was überhängt, wird beschnitten. Die Ecke unten rechts am ausgewählten Kasten zieht die Grösse.
Ein Entwurf speichert Bilder nicht mit. Sonst wöge jeder Entwurf und jeder Rückgängig-Schritt mehrere Megabyte. Bilder aus der Sammlung und Fotos aus dem CMS kommen beim Öffnen trotzdem von selbst zurück, weil sie im Bündel beziehungsweise auf dem Server liegen — nur selbst hochgeladene Fotos fehlen dann.
Fallstrick: Wo ein selbst hochgeladenes Foto fehlt, steht ein gestrichelter magentafarbener Rahmen. Der Kasten sitzt noch richtig, das Bild musst du über „Bild hinzufügen“ neu einsetzen. Wenn du einen Entwurf weitergibst, gib die Fotos getrennt mit.
Schritt 6 · Inhalt — Felder, Bausteine, Symbole
Jedes Feld hat ein Zeichenlimit und rechts unten einen Zähler. Die Limits sind keine Schikane: Je kürzer ein Satz, desto grösser darf er stehen. Wird der Text zu lang, warnt das Werkzeug mit „Der Text ist zu lang für diese Vorlage“.
Neben jedem Feld steht „Ausblenden“. Das zeichnet den Baustein nicht mehr, behält deinen Text aber — derselbe Knopf heisst dann „Einblenden“. Leerst du ein Feld einfach, verschwindet der Baustein ebenfalls und kommt zurück, sobald wieder etwas darin steht.
Unter „Noch etwas dazunehmen“ hängst du frei an, was die Vorlage nicht vorsieht: Überschrift, Textabsatz, Kleine Zeile, Betonte Zeile, Aufzählung, Linie. Diese Bausteine bekommen ein eigenes Feld mit eigenem „Entfernen“.
„Symbol einfügen“ bietet 22 Strichzeichnungen an. Sie tragen keinen Text; Farbe und Grösse stellst du danach in der Seitenleiste ein. Emojis kannst du übrigens einfach in ein Textfeld tippen — sie landen farbig im Bild.
Fallstrick: Bei Vorlagen mit dem Schalter „Länge: Kurz / Ausführlich“ hängen manche Felder an der ausführlichen Fassung. Du tippst dann in „Stichpunkte“ und siehst nichts — weil die Vorlage auf „Kurz“ steht. Der Hinweis unter dem Feld sagt es, aber man liest ihn selten.
Verschieben, Ebenen, Sperren
Alles, was du siehst, kannst du in der Vorschau anklicken und ziehen. Beim Ziehen rasten Kanten und Mitten am Raster der Vorlage und an den Nachbarn ein; die dünnen magentafarbenen Linien zeigen, was gerade hält.
Solange du nichts anfasst, steht ein Element in der automatischen Anordnung — dem „Fluss“. Verschiebst du es, wird es herausgelöst und bleibt, wo du es hinlegst. Mit „Zurück in den Fluss“ gibst du es der Automatik zurück; dabei verliert es auch seine von Hand gesetzte Breite.
Die Seitenleiste zeigt für das ausgewählte Element „Von links“, „Von oben“, „Breite“ und „Schrift“ in Zahlen. Das ist nicht nur der Weg ohne Maus, sondern oft der bessere: „von links 12 Prozent“ trifft man mit dem Finger nie zweimal.
Mit den vier Ebenen-Knöpfen schiebst du ein Element nach vorn oder hinten. „Gesperrt“ schützt es vor versehentlichem Verschieben — das Logo ist von Haus aus gesperrt.
Fallstrick: Ein gesperrtes Element zeigt keine Anfasser, und die Pfeiltasten antworten mit „Dieses Objekt ist gesperrt“. Das ✕ zum Wegnehmen bleibt aber da — die Sperre schützt vor dem Verschieben, nicht vor dem Wegnehmen. Wenn sich am Logo nichts bewegen lässt: erst den Haken „Gesperrt“ herausnehmen. Wählst du beim Logo eine Ecke, springt es zurück in die Automatik — auch wenn du es vorher von Hand gesetzt hast.
ENTFERNEN und AUSBLENDEN sind nicht dasselbe
Am ausgewählten Kasten sitzt oben rechts ein rundes ✕. Was es tut, hängt davon ab, woher das Element kommt — und der Kurzhinweis am Knopf sagt es dir vorher.
Gehört das Element zur Vorlage (Überschrift, Text, Zeile, Liste, Anführungszeichen), heisst das ✕ AUSBLENDEN. Der Baustein wird nicht mehr gezeichnet, dein Text bleibt im Formular stehen, und über „Einblenden“ neben dem Feld kommt er zurück.
Hast du das Element selbst dazugenommen — ein Bild, ein Symbol, eine freie Überschrift, eine Kontaktzeile, einen QR-Code, eine Kopie — heisst es ENTFERNEN. Dann ist es wirklich weg; nur Rückgängig holt es zurück.
Derselbe Unterschied steht auch als Knopf unten in der Seitenleiste, dort ebenfalls mit der Aufschrift „Entfernen“ oder „Ausblenden“.
Blendest du einen Baustein aus, der kein eigenes Feld hat — die Anführungszeichen der Zitatvorlage, die Zierlinie, die Kontaktwege —, erscheint unter den Feldern eine Zeile „Ausgeblendet — hier wieder einblenden“ mit einem Knopf je Baustein. Ohne sie wäre der Weg zurück nur über Rückgängig gegangen.
Fallstrick: Das Logo hat als einziges Element kein ✕ und lässt sich weder entfernen noch duplizieren — das ist Absicht, und in der Seitenleiste steht ein Satz dazu, statt dass der Knopf einfach fehlt. Sonst gilt: Das ✕ erscheint bei jedem ausgewählten Element, auch bei gesperrten. Findest du es nicht, ist nichts ausgewählt.
Die Kontrastprüfung und die Zahl 4,5:1
Wählst du einen Textkasten aus, rechnet das Werkzeug aus, ob die Schrift auf dem liegt, was darunter ist — und zeigt das Ergebnis als Verhältnis: „Kontrast 7,2:1 — reicht (nötig sind 4,5:1)“ oder „Kontrast nur 1,4:1, nötig sind 4,5:1. Der Hintergrund ist stellenweise zu hell.“
4,5:1 ist die Schwelle für normalen Text nach den Barrierefreiheitsregeln, 3:1 für grossen Text. Gemessen wird nicht der Durchschnitt des Hintergrunds, sondern die schlechteste Stelle an beiden Enden — auf einem halb hellen, halb dunklen Foto gibt es keine Textfarbe, die überall funktioniert, und genau das soll die Zahl zeigen.
Jetzt der Teil, den man nicht sieht: Als „gross“ zählt nicht, wie gross die Schrift in deinem 1080er Motiv ist, sondern wie gross sie beim Betrachten erscheint. Gerechnet wird mit rund 400 Pixel Anzeigebreite — so breit ist eine Story auf dem Telefon. Damit gilt eine Schrift in Story und Beitrag erst ab etwa 65 Pixel als gross, bei fetter Schrift ab etwa 50. Eine 60-Pixel-Überschrift muss also die strengeren 4,5:1 halten, obwohl sie in der Vorschau riesig wirkt. Bei den Papierformaten wächst diese Grenze mit dem Format mit.
Reicht es nicht, bietet das Werkzeug einen Knopf an: „Schleier auf 35 % setzen“ — die kleinste Deckkraft, die reicht. Hilft auch ein voller Schleier nicht, sagt es das ebenfalls und rät zu einer anderen Textfarbe oder einem anderen Bild.
Auch das farbige Logo wird geprüft, gegen 3:1. Steht es auf dunklem Grund und hebt sich kaum ab, schlägt das Werkzeug vor, die weisse Fassung zu nehmen.
Fallstrick: Die „Kontur um die Schrift“ hilft dem Auge auf unruhigen Fotos, zählt bei der Prüfung aber nicht mit — die Zahl bleibt schlecht, obwohl es besser aussieht. Das Werkzeug sagt das beim Einschalten einmal an. Und es verbietet nie etwas: Du kannst alles so lassen, du weisst dann nur, was du tust.
Der Haken „Von Instagram verdeckte Bereiche zeigen“
Unter der Vorschau steht ein Haken, der zwei schraffierte Streifen einblendet: oben rund 13 Prozent der Höhe, unten rund 16 Prozent. Dort liegen in der Story der Profilname mit den Fortschrittsbalken und unten das Antwortfeld mit den Bedienelementen.
Was du dort hinlegst, ist in der veröffentlichten Story halb verdeckt — im Werkzeug sieht es aber vollkommen in Ordnung aus. Genau deshalb gibt es den Haken.
Schiebst du ein Element in einen dieser Bereiche, erscheint ausserdem in der Seitenleiste der Hinweis „Instagram blendet oben eigene Bedienelemente ein — hier wird es verdeckt“, und beim Verschieben mit der Tastatur wird es angesagt.
Fallstrick: Der Haken erscheint nur beim Format Story. Im Instagram-Beitrag gibt es dort nichts zu verdecken — wer den Schalter dort sucht, sucht vergeblich, und das ist kein Fehler. Umgekehrt: Der Haken ist nur eine Anzeige, er verschiebt nichts. Du musst selbst Platz lassen.
Vorbefüllung aus dem CMS
Bei den Vorlagen Termin, Hilfenummern, Angebot, Was ist Awareness, Ein Mensch bei uns und So erreicht ihr uns steht ganz oben im Abschnitt „Inhalt“ eine Auswahl „Aus dem CMS übernehmen“. Du wählst einen Eintrag, und die Felder darunter füllen sich.
Das überschreibt alle Felder dieser Vorlage auf einmal — auch die, in denen schon etwas stand. Danach kannst du alles frei ändern; das Werkzeug fasst deinen Text dann nicht mehr an.
Bei „Ein Mensch bei uns“ kommt das Portraitfoto mit, samt Bildbeschreibung. Übernimmst du eine zweite Person, ersetzt das neue Foto das alte, statt sich darüberzulegen, und der Text beginnt automatisch unterhalb des Fotos.
Bei den Terminen stehen nur kommende Veranstaltungen zur Wahl; abgesagte und nicht öffentliche fehlen, Vergangenes fällt mit einem Tag Nachlauf heraus. Bleibt nichts übrig, verschwindet die Auswahl ganz.
Ist Leichte Sprache eingeschaltet, kommt die leichte Fassung der CMS-Texte — aber nur dort, wo es sie wirklich gibt. Wo sie fehlt, bleibt die normale stehen.
Fallstrick: Die Auswahl erscheint erst, wenn die CMS-Daten geladen sind — das geschieht im Hintergrund und kann einen Moment dauern oder ganz ausbleiben, wenn das CMS nicht erreichbar ist. Ist sie nicht da, tippst du einfach selbst; das Werkzeug funktioniert vollständig ohne sie.
Schritt 7 · Entwürfe — Browser oder Datei
Gib deinem Stand oben einen Namen (bis 40 Zeichen) und drücke „Sichern“. Er erscheint dann unter „Gesicherte Entwürfe“ mit Datum und lässt sich dort öffnen oder löschen. Derselbe Name überschreibt den vorherigen Entwurf; es werden bis zu 30 aufbewahrt.
Diese Entwürfe liegen im Browser dieses Geräts. Ein anderer Rechner, ein anderes Telefon, ein anderer Browser sieht sie nicht, und wer den Browserspeicher leert, nimmt sie mit.
Dafür gibt es „Als Datei sichern“. Das legt eine kleine Datei mit der Endung .awn-entwurf.json in deine Downloads, die du weitergeben, per Mail schicken oder aufbewahren kannst. „Datei öffnen“ liest sie wieder ein.
Unabhängig davon sichert das Werkzeug deinen letzten Stand automatisch. Schliesst du den Tab versehentlich, ist beim nächsten Öffnen alles wieder da.
Fallstrick: In keinem Fall sind die selbst hochgeladenen Bilder mit dabei — weder im Browser-Entwurf noch in der Datei. Zweitens: „Löschen“ fragt einmal nach und ist danach endgültig, auch mit Rückgängig. Und wenn nach dem Sichern „Der Browser lässt kein Sichern zu“ kommt, bist du vermutlich im privaten Fenster; dann hilft nur „Als Datei sichern“.
Schritt 8 · Bildbeschreibung fürs Posten
Ganz unten steht ein Feld mit einer fertigen Bildbeschreibung. Sie wird aus deinem Motiv gebaut: Hintergrundart, dann alle Texte in Leserichtung, dann die Beschreibungen der Fotos, dann der Hinweis auf das Logo. Bis zu 600 Zeichen.
„Kopieren“ legt sie in die Zwischenablage. Beim Posten fügst du sie auf Instagram unter „Erweiterte Einstellungen“ ins Feld für den Alt-Text ein. „Neu vorschlagen“ baut sie aus dem aktuellen Stand neu.
Das ist kein Beiwerk. Instagram hat dieses Feld, und fast niemand füllt es aus — weil man es im Moment des Postens formulieren müsste. Hier steht der Text schon da, denn das Werkzeug weiss ja, was auf dem Bild steht. Für ein Awareness-Kollektiv wäre ein Beitrag über Zugänglichkeit, den blinde Menschen nicht lesen können, ein Widerspruch in sich.
Fallstrick: Die Beschreibung wandert automatisch mit, solange du sie nicht anfasst. Sobald du ein einziges Zeichen selbst hineinschreibst, bleibt sie stehen — auch wenn du danach den ganzen Text des Motivs änderst. Dann noch einmal „Neu vorschlagen“ drücken. Und: Sie steckt nicht im heruntergeladenen Bild; du musst sie beim Posten wirklich einfügen.
Drucken: Anschnitt, Schnittmarken, CMYK
Wählst du ein Papierformat, erscheinen unten die Druckhinweise: Masse, Auflösung und der Haken „Für die Druckerei: Anschnitt und Schnittmarken“.
Ohne Haken ist das PDF randlos und exakt in Papiergrösse. Das ist richtig zum Ansehen, zum Verschicken und zum Selberdrucken.
Mit Haken kommen rundum 3 Millimeter Zugabe dazu und Marken, die zeigen, wo geschnitten wird. Die Zugabe fällt beim Schneiden weg; sie verhindert, dass durch kleine Schnittabweichungen ein weisser Blitzer am Rand entsteht. Wichtig: Dein Motiv verändert sich dadurch nicht — es kommt genauso heraus wie ohne Haken, es hat nur einen Rand darum. Beim Ansehen am Bildschirm siehst du Zugabe und Marken mit; das ist normal.
Das PDF ist RGB, mit eingebettetem sRGB-Profil. Damit weiss die Druckerei, was die Zahlen bedeuten, und rechnet selbst nach CMYK um — besser, als das Werkzeug es pauschal könnte.
Fallstrick: Wenn ein Regenbogen im Motiv ist (Farbband „Regenbogen“ oder Hintergrund „Spektrum“), erscheint eine zusätzliche Warnung, und die solltest du lesen: Die Flaggenfarben liegen ausserhalb dessen, was CMYK mischen kann. Vor allem das Blau wird im Offsetdruck deutlich stumpfer. Im Digitaldruck ist das meist unkritisch; bei grösserer Auflage lohnt ein Probedruck.
Leichte Sprache
Der Schalter „Leichte Sprache“ in der Kopfzeile tut zwei Dinge auf einmal.
Erstens die Oberfläche: Beschriftungen, Knöpfe, Hinweise, Platzhalter und die Ansagen für den Screenreader kommen in leichter Fassung.
Zweitens die Vorbefüllung: Was du danach aus dem CMS übernimmst, kommt aus den Feldern für einfache Sprache — dieselben Sätze, die auf der Webseite stehen. Für ein Plakat sind sie oft sogar die besseren: kurz, ein Gedanke pro Zeile, ohne Schachtelsatz.
Wo es keine leichte Fassung gibt, bleibt die normale stehen. Eine Lücke wäre schlimmer als ein Satz, der einmal nicht vereinfacht ist.
Deine Wahl wird gemerkt, bis du sie änderst.
Fallstrick: Der Schalter ändert nichts an dem, was schon in deinen Feldern steht — das wäre ein Übergriff auf Text, den du vielleicht von Hand geschrieben hast. Willst du die leichten Texte im Motiv haben, schalte zuerst um und übernimm dann noch einmal aus dem CMS. Ausserdem gilt die Einstellung nur für dieses Werkzeug: Auf der Webseite des Kollektivs schaltest du getrennt um.
Ohne Maus, und am Telefon
Über der Vorschau liegt für jedes Element ein unsichtbares Feld. Mit Tabulator springst du von einem zum nächsten, von hinten nach vorn; das ausgewählte Element wird angesagt, samt Ort („oben links“) und Ebene („Ebene 2 von 5“). Mit den Pfeiltasten verschiebst du es, mit Umschalt gröber, mit Alt und Links/Rechts änderst du die Breite. Alle Kürzel stehen in der Tabelle.
Die Zahlenfelder in der Seitenleiste sind der zweite Weg dorthin, und oft der genauere: Prozentwerte trifft man mit den Fingern nicht.
Am Telefon liegt die Vorschau oben und nimmt knapp die Hälfte der Höhe ein. Mit dem Knopf „⤡ Kleiner“ über der Vorschau schrumpft sie auf ein Fünftel, damit beim Tippen Platz für Tastatur und Felder bleibt; „⤢ Grösser“ holt sie zurück. Diesen Knopf gibt es nur im schmalen Layout — am Rechner fehlt er, weil dort beides nebeneinander passt.
Am Telefon lässt sich alles mit dem Finger bewegen: antippen wählt aus, ziehen verschiebt, die runden Anfasser ändern die Breite. Die Kästen sind dort dauerhaft leicht angedeutet, weil es kein Überfahren mit der Maus gibt, an dem man sähe, wo etwas anzufassen ist. Wenn du es genau haben willst, bleiben die Zahlenfelder „Von links“ und „Von oben“ der präzisere Weg.
Fallstrick: Die Vorschau klebt am schmalen Bildschirm oben fest und nimmt Platz weg. Mit dem Knopf „⤡ Kleiner“ in der Werkzeugleiste schiebst du sie zusammen, solange du tippst.
Wenn etwas schiefgeht
Steht rot unter dem Formular „Die Vorschau konnte nicht gezeichnet werden …“, ist das Werkzeug an einer Stelle hängengeblieben. Drücke Rückgängig — du kommst zum letzten funktionierenden Stand zurück und kannst weiterarbeiten.
Bricht das Herunterladen mit dem Hinweis ab, ein eingefügtes Bild stamme von einer anderen Seite, dann lade dieses Bild erst als Datei auf dein Gerät herunter und füge es über „Bild hinzufügen“ ein.
Die gelbe Warnung über dem Abschnitt „Entwürfe“ meldet drei Dinge: zu langer Text, fehlendes Bild oder zu lange QR-Adresse. Sie verhindert nichts, sie sagt nur, was gleich auffallen wird.
Fallstrick: Die fertigen Dateien heissen awn-<vorlage>-<format>.png beziehungsweise .pdf und landen im Download-Ordner — nicht dort, wo du gerade arbeitest. Wenn du meinst, es sei nichts passiert, schau zuerst in die Downloads.
Alle Tastenkürzel
Das ganze Werkzeug lässt sich ohne Maus bedienen. Mit Tab springst du von
Element zu Element; was du angesprungen hast, wird angesagt — auch für Menschen, die den
Bildschirm nicht sehen.
| Taste | Wirkung |
|---|---|
Tab / Umschalt+Tab | Von Element zu Element auf der Fläche, in Zeichenreihenfolge von hinten nach vorn. Das angesprungene Element ist ausgewählt und wird angesagt (Art, Anfang des Textes, Ort, „Ebene 2 von 5“). |
Pfeiltasten | Ausgewähltes Element um 0,5 % verschieben. Danach wird der neue Ort angesagt — und ob er in der Story von Instagram verdeckt wird. |
Umschalt+Pfeiltaste | Dasselbe in Schritten von 2 %. |
Alt+Pfeil links / Alt+Pfeil rechts | Breite des Elements ändern (mindestens 8 %, höchstens 100 %). |
Alt+Pfeil hoch / Alt+Pfeil runter | Ohne Wirkung — die Höhe ergibt sich aus dem Zeilenumbruch. |
] | Eine Ebene nach vorn. |
[ | Eine Ebene nach hinten. (Eckige Klammern, weil Strg+Pfeil im Browser belegt ist.) |
Esc | Auswahl aufheben. |
Strg+Z bzw. Cmd+Z | Rückgängig. |
Strg+Umschalt+Z, Cmd+Umschalt+Z oder Strg+Y | Wiederholen. |
Enter / Leertaste | Auf einem Element in der Vorschau: wählt es aus (mehr passiert nicht). Auf Knöpfen wie gewohnt. |
Strg+C | Im Feld „Bildbeschreibung“, falls „Kopieren“ nicht darf: der Text ist dann schon markiert. |
Ein gesperrtes Element antwortet auf die Pfeiltasten mit der Ansage „Dieses Objekt ist gesperrt“ und bewegt sich nicht. Zum Wegnehmen drückst du Entf oder Rücktaste — oder du nimmst das ✕ am Kasten oder den Knopf in der Seitenleiste.
Ist das Motiv gekippt, fahren die Pfeiltasten dorthin, wo du hinsiehst: „rechts“ heißt rechts auf dem Bildschirm, nicht rechts in der gespeicherten Fassung.
Was man dem Werkzeug nicht ansieht
Die Dinge, die sich nicht von selbst erklären — gesammelt an einer Stelle.
Die Dinge, die man dem Werkzeug nicht ansieht und die in die Anleitung müssen:
- Das ✕ tut zwei verschiedene Dinge. Bei Vorlagenbausteinen blendet es aus (Text bleibt, kommt über „Einblenden“ zurück), bei selbst Hinzugefügtem entfernt es wirklich. Der Kurzhinweis am Knopf sagt es vorher, der Knopf sieht aber in beiden Fällen gleich aus. Das ✕ erscheint bei jedem ausgewählten Element, auch bei gesperrten — mit einer einzigen Ausnahme: dem Logo.
- „Motiv waagerecht kippen“ kippt die Plätze, nicht die Inhalte. Text, Logo, Farbband und Bilder wandern auf die andere Seite; die Schrift bleibt dabei lesbar und der QR-Code scannbar. Das ist der Unterschied zu einem gespiegelten Bild — dort stünde die Schrift seitenverkehrt und der Code wäre für jedes Gerät unbrauchbar, ohne dass man es ihm ansieht.
- Die Kontrastschwelle rechnet mit 400 Pixel Anzeigebreite, nicht mit den 1080 des Dokuments. Deshalb gilt in Story und Beitrag Schrift erst ab rund 65 px (fett rund 50 px) als „gross“ und darf 3:1 statt 4,5:1 — eine 60-px-Überschrift wird streng bewertet, obwohl sie riesig aussieht.
- Die Schleier-Automatik schaltet sich selbst ab, sobald jemand Regler oder Schleierfarbe einmal von Hand anfasst (
vonHand). Danach zieht sie auch bei einem neuen, sehr hellen Foto nichts mehr nach. - Die „Kontur um die Schrift“ zählt bei der Kontrastprüfung nicht mit. Es sieht besser aus, die Zahl bleibt schlecht.
- Beim Logo hilft der Schleier nie — er liegt im Stapel unter dem Logo. Dort hilft nur ein anderer Hintergrund oder die weisse Fassung.
- Ein Vorlagenwechsel wirft alle Eingaben weg (neues Dokument aus
dokumentBauen). Der Verlauf bleibt erhalten, Rückgängig rettet also — ein Neuladen des Tabs nicht. - Entwürfe und der automatische „letzte Stand“ enthalten keine Bilddaten. Sammlungsbilder und CMS-Portraits werden beim Öffnen nachgeladen; selbst hochgeladene Fotos fehlen und hinterlassen einen gestrichelten magentafarbenen Rahmen.
- „Aus dem CMS übernehmen“ überschreibt alle Felder der Vorlage, auch gefüllte — und das Portraitfoto ersetzt ein vorher übernommenes, statt sich darüberzulegen.
- Der Haken „Für die Druckerei“ verändert das Motiv nicht. Die Koordinaten liegen relativ zum Endformat; es kommt nichts anderes heraus, nur mit 3 mm Zugabe und Marken darum.
- CMYK-Warnung nur bei Regenbogen/Spektrum — die CI-Farben überstehen den Druck gut, die Flaggenfarben nicht (Blau
#004DFF→ etwa#3165A2). - Der Haken für die verdeckten Bereiche existiert nur im Story-Format, und er blendet nur ein, er schiebt nichts.
- Leichte Sprache tauscht nichts aus, was schon in den Feldern steht, und gilt getrennt von der Einstellung auf der Webseite (anderer Ursprung, anderer localStorage).
- Entwürfe merken sich auch den Haken „Kippen“. Wer einen gekippten Entwurf öffnet, bekommt ihn gekippt zurück.
- Touch: Nur die Anfasser (
.anfasser) tragentouch-action: none; die Objekt-Stellvertreter (.obj) nicht. Das Ziehen eines Elements mit dem Finger kann deshalb als Seiten-Scrollen enden — am Telefon sind die Zahlenfelder der verlässliche Weg. Das wäre die eine Stelle, an der sich die Touch-Bedienung mit einer CSS-Zeile spürbar verbessern liesse. - A3 hat 200 dpi, weil Safari und iOS über 16,78 Megapixel eine leere Zeichenfläche liefern — sonst käme das Plakat auf dem iPhone leer heraus.
- QR-Grenze 213 Zeichen; darüber wird kein Code gezeichnet, nur gewarnt.
- Anklickbare Adressen gibt es nur im Druck-PDF, und nur wenn im Feld eine erkennbare Webadresse, E-Mail oder Domain steht. Im PNG ist nichts klickbar — dafür der QR-Code.