Hallo ihr Lieben!

Ich kann mich noch ganz gut an eine Szene erinnern, als mich mein Fachleiter fragte, ob mir bewusst sei, was für eine Mühe ich mir mit der Optik meiner Materialien gäbe. Er hatte – mal wieder – den Nagel auf den Kopf getroffen, denn ich gehörte noch nie zu den Menschen, die einfach irgendwas in Word zusammenschreiben können, formatierungslos, 12pt Times New Roman #wasisteinblocksatz #istdaseinverwandterderblockschokolade?… Ich bin Formatierungs- und Büromaterialienfetischist, ich male Arbeitblätter gerne mal selbst #inklusivedeutschlandkarte oder versuche sie optisch so anzupassen, dass sie dem Original, an das ich erinnern oder das ich ein bisschen auf die Schippe nehmen will, möglichst ähnlich sehen. Wenn ich nicht gerade Sechstklässler vor mir habe, die von „CSI:Miami“ noch nie was gehört haben und denen ich deswegen „CSI:Ötzi – Auf Spurensuche im Eis“ halt doch mit gewöhnlichen Detektivgeschichten schmackhaft machen muss, beschert mir das dann doch das ein oder andere Mal das altbekannte „Frau Wehpunkt, ist das Photoshop?“ und macht mich ein bisschen stolz auf meine Arbeitsblätter und Folien.

Das kostet mich zugegebenermaßen auch immer wieder Zeit, aber gleichzeitig ist es – sobald der Inhalt einmal steht – auch mal ganz entspannend, noch ein bisschen sinnbefreit rumzuklicken und zu sehen, was man dem Inhalt noch Gutes tun kann, damit er eine reale Chance darauf hat, ordentlich abgeheftet zu werden statt verknickt zwischen Pausenbrot und leerem Klebestift zu landen. #gebichmirmühetunsieesauch #zumindestmanchmal

Alles fing damit an, dass ich schon während meiner Schulzeit ein wenig nerdig unterwegs war: Als mein Vater den ersten PC mit Windows 3.11 anschleppte, baute ich mit Paint Schreibtische, weil man die mit „Wingdings“ ausstatten konnte. Als der große „Miss Sixty“-Krieg an meiner Schule entbrannte, surfte ich lieber auf den ersten von Teenagern ziemlich professionell erstellten Webseiten der Selbstdarstellung und überlegte, ob der Binnenreim „Miss Kris“ nicht doch ein zu krasser Domainname wäre. #wurdenieumgesetzt Als ich meine Facharbeit zum „Dritten Reich“ schrieb, wählte ich eine Schriftart namens „Carolingia“ für die Überschriften – weder die richtige Epoche noch wissenschaftlich wertvoll – aber – immerhin – optisch recht ansprechend.

Und weil es eben auch heute noch so geblieben ist, dass ich meine Juris-Mappen mit selbstgestalteten Etiketten beklebe, meinem Schulplaner ein eigenes Etikett mit Dromedar verpasse, in unserer Wohnung einige Zitate verehrter weiser Menschen in Bilderrahmen hängen und und und dachte ich, es sei an der Zeit, daraus endlich mal Kapital zu schlagen #imübertragenensinne und ein Tutorial zu schreiben, das hoffentlich schnell und einfach erklärt, wie man digitale Sketchnotes ohne große Vorkenntnisse und ohne Investitionen selbst erstellen kann. Voilà, gleich kommt’s. Aber erst noch möchte ich all denen zuraunen, die auch mit Paint und Wingdings gespielt haben: Eigentlich wisst ihr schon, wie’s geht, vertraut mir!

EDIT (Oktober 2017):  Der ursprüngliche Beitrag vom März hat eine umfassende Überarbeitung bekommen, weil in der Ursprungsfassung noch Fonts verwendet wurden, die für den privaten Gebrauch lizenziert waren, aber nicht für den kommerziellen freigegeben. Meistens wird damit auch die Nutzung zu Unterrichtszwecken abgedeckt, da ich nach einiger Recherche aber darauf gestoßen bin, dass dies vereinzelt von den Autoren der Schriftarten unterschiedlich gehandhabt wird, die dann enstprechend „Lehrer-Lizenzen“ verkaufen, habe ich meine Font-Sammlung auf offene Lizenzen umgestellt (auch wenn der Blog nicht kommerziell ist!), denn die Auswahl an sich ist groß genug. 😉 Daher auch gleich mein Tipp an euch: Achtet bereits beim Installieren der Fonts auf die Lizenzen, dann müsst ihr euch diesen Stress später nicht machen und könnt erstellte Arbeitsblätter bedenkenlos kopieren und weitergeben. Fontsquirrel bietet nur „100% free for commercial use“-Schriftarten an und auch bei der Suche auf Dafont kann man per Voreinstellung auswählen, dass man nur solche angezeigt bekommen möchte. (In der Zeile über den Suchergebnissen „Mehr Optionen“ auswählen und Häkchen bei „100% kostenlos“ setzen.)

Willst du lieber erstmal einen Überblick gewinnen, bevor du dir den Tutorial-Roman durchliest? Dann empfehle ich dir die zusammenfassende Sketchnote als .png-Datei oder PDF (GoogleDrive)!  😁


1. Installieren von Software & Fonts

Du brauchst zwei Dinge auf deinem Rechner (ich beziehe mich auf einen stinknormalen Windows-Desktop-PC #arbeitsgeräthalt #nixmitfancy):

Paint.NET ist ein Programm, das ähnlich ist wie das gute alte Paint von Windows – allerdings hat es einen deutlich größeren Funktionsumfang und es ermöglicht das Arbeiten mit transparenten Hintergründen und mehreren Ebenen, was für die Sketchnotes dringend gebraucht wird. (Man könnte sie auch mit Paint erstellen, aber dann wäre Fehler machen verdammt anstrengend und das will doch keiner…)

Schriftarten hast du ja schon einige auf dem PC. Mit denen kannst du natürlich auch Notizen gestalten, allerdings finde ich die typischen Standard-Fonts ziemlich lahm. Comic Sans kann ich einfach nicht mehr sehen und außer meiner Standard-Schriftart „Cambria“, die ich für alle offiziellen Dokumente nutze, verwende ich viele heruntergeladene Fonts – zumindest dann, wenn ich das Dokument nur an meinem eigenen Rechner öffnen will.

Die Schriftarten brauchen wir aber nicht nur für’s ABC, sondern auch für die Illustrationen. Alle Bildchen, die ihr auf meinen Sketchnotes sehen könnt, sind nämlich auch Fonts, sogenannte Dingbats. Hier wurden vom Programmierer statt der einzelnen Buchstaben jeweils Bildchen eingefügt, die nach der Installation auf dem eigenen Rechner durch einen einzelnen Tastendruck in allen Programmen, die freie Schriftartwahl unterstützen, angezeigt werden können, sofern die Fonts auf dem Rechner installiert sind. Damit sind sie in der Größe und in der Farbe prinzipiell leicht veränderlich, haben keine hässlichen weißen Ränder und mit ein paar Downloads und Installationen kann man eine große Bandbreite an Themen illustratorisch abdecken. Wie das geht erklärt dir Chip!


Hast du paint.net heruntergeladen und das Programm ebenso wie die Fonts installiert, können wir loslegen. Zuerst brauchen wir dafür eine neue Datei (paint.net verwendet standardmäßig das .pdn-Format und das brauchen wir auch). Hierbei wähle ich immer eine Größe von 2245*1600 Pixeln, das entspricht einer Arbeitsleinwand von DinA2-Größe, die aber vom PC beim Drucken automatisch auf A4 „verkleinert“ wird. Damit ist garantiert, dass der Ausdruck bei A4 nicht pixelig wird, weil die Leinwand groß genug ist, wir können gut arbeiten, weil wir nahe ranzoomen können ohne Unschärfe zu sehen und außerdem wahren wir damit das Seitenverhältnis für den Ausdruck.

Auch für Ausdrucke, die DinA5 werden sollen, empfehle ich diese Größe, denn verkleinern und trotzdem die nötige Schärfe zu haben, ist kein Problem – umgekehrt dagegen schon.


Als nächstes bekommst du einfach eine weiße Arbeitsfläche zu sehen – wer jemals Windows-Paint genutzt hat, kennt das. Als Werkzeugleisten tauchen der Verlauf (Schritte, die du zuletzt gemacht hast), die Werkzeuge (von Ausschneiden über Text einfügen bis Formen einfügen), die Farbpalette (freie Auswahl! Jedes Los gewinnt! #hauptsacheschwarz) und – ganz wichtig – die Ebenenübersicht auf.

Die goldene Regel lautet jetzt: Arbeite NIE! auf der Hintergrundebene. Lege gleich beim Erstellen der Datei auch eine neue Ebene an, das machst du mit dem kleinen weißen Feld mit dem grünen Plus (im Bild links unten). Das Problem bei Paint.net im Gegensatz zu teuren Grafikprogrammen ist nämlich, dass einmal eingefügter Text nicht mehr als solcher bearbeitet, sondern nur noch als Bildteil gelöscht werden kann und das nervt tierisch, wenn mittlerweile noch etwas anderes darüber liegt. Jede neue Ebene dagegen musst du dir vorstellen wie die gute alte Overhead-Folie, die darübergelegt wird: Du kannst auf dieser Ebene arbeiten ohne andere Inhalte zu verändern und musst dann bei Problemen auch nur in dieser Ebene löschen.

Ich nutze mindestens eine Ebene pro erstelltem Arbeitsschritt der Sketchnote – manchmal bearbeite ich auch den Text und die Illustrationen für einen Schritt in zwei Ebenen und füge diese dann zusammen. Im .pdn-Format werden dann auch alle Ebenen einzeln gespeichert.


Um den Überblick zu behalten, benenne ich meine Ebenen nach dem, was sie enthalten. Das kannst du ganz einfach, indem du auf „Ebene 1/2/…“ doppelklickst – dann taucht dieses Fenster auf, mit dem du sie auch ausblenden und ihre Deckkraft bestimmen kannst (steht hier z.B. 123 statt 255, ist die Ebene halbtransparent).

Ebenen können nicht nur neu eingefügt, sondern auch neu angeordnet  (Pfeile nach oben und unten im Reiter „Ebenen“), dupliziert (also komplett verdoppelt), gelöscht oder zusammengeführt (zwei halbe Blätter mit blauem Pfeil) werden. Ganz allgemein versuche ich meine Ebenen nach zusammenhängenden Arbeitsschritten (z.B. „Überschrift“, „Schritt 1 – Text“, „Schritt 1 – Illustration“, „Pfeile für Reihenfolge“) zu gliedern, sodass ich nur Einzelteile neu bearbeiten muss, wenn mal etwas nicht passt und dass in größeren Bereichen, die sich nicht berühren, die aber thematisch etwas miteinander zu tun haben (z.B. die Nummerierung oder die Pfeile) nur eine Ebene existiert, um den RAM-Bedarf nicht zum Äußersten zu treiben.


Außerdem verwende ich auch Hilfsebenen, die später wieder gelöscht werden. z.B. einfache Rechtecke oder Quadrate und eine Ebene, in der ich mir eintrage, welche Schriftarten ich für die einzelnen Sketchnote-Teile verwende, wenn ich es nicht analog auf einem Notizzettel machen will.

Damit laufe ich nicht so schnell Gefahr, die Struktur der Notes aus dem Auge zu verlieren und trotzdem kann ich diese Ebene jederzeit umstrukturieren, wenn ich mich für andere Gestaltungen entscheide. Einfache Formen wie Rechtecke und Kreise fügst du ganz einfach über die entsprechende Schaltfläche in den Werkzeugen (siehe Screenshot) oder die Taste „O“ ein.


Wie bereits erwähnt, sind in einer digitalen Sketchnote alle Elemente Buchstaben, bestehen also aus einem Tastendruck in der richtigen Schriftart. Bei Text ist das total einfach, denn wenn man „a“ drückt, kommt für gewöhnlich „a“ raus und damit das passiert, musst du einfach nur unter den Werkzeugen „Text“ auswählen oder die Taste „T“ drücken:

In deiner Lieblingsschriftart sieht damit sogar eine Überschrift wie „Differenzialfunktionen“ oder „Das Hebelgesetz“ sehr schnell fancy aus. #seitenhiebeaufnaturwissenschaftenmüssenerlaubtsein Weil alles in einer Schriftart erstens langweilig ist und zweitens nicht der Idee der Sketchnote entspricht, überlege ich mir vorher eine Kombination aus verschiedenen Fonts, die ich nutzen möchte, z.B.:

  1. Titel
  2. Untertitel
  3. Aufgabenstellungen
  4. Überschriften der einzelnen Handlungsschritte
  5. Notizen des Schülers
  6. Gedanken des Schülers

Klar, 6 Schriftarten wirken auf den ersten Blick ganz schön verwirrend. Sind alle gut lesbar und klar einer Funktion zugeordnet, finde ich, dass sie einen guten Beitrag zur Übersichtlichkeit leisten können, denn sie wirken eben auch auf unsere Wahrnehmung und an der Tafel bin ich schon oft daran gescheitert, dass ich eben nicht fett, kursiv oder in einer komplett anderen Handschrift schreiben kann.

Natürlich mache ich mir bei der Auswahl ein paar Gedanken und verwende nicht jeden Font für jeden Kontext. Arbeitsanweisungen beispielsweise erscheinen in eher geraden Großbuchstaben, Schülern weise ich Handschriften zu: Sie „denken“ in Schreibschrift und schreiben in Druckschrift, für den Titel wähle ich eine künstlerische Schriftart und für Aufgabenstellungen Maschinenschrift, die an Schreibmaschinen erinnert.

Ich finde, dass sich schon hier das Potenzial der Sketchnote ziemlich gut erkennen lässt, denn wo sonst nutzt man so viele verschiedene Schriftarten sinnvoll? (Kennen wir nicht alle diese herrlichen ersten PowerPoints, wo jede Folie ihre eigene Schriftart hat? Lassen wir das, das führt zu weit…)


Alle Illustrationen werden schließlich auch mit Schriftarten erstellt. Hierfür ladet ihr euch einfach zum Thema passende „Dingbats“-Fonts herunter (ich suche immer auf dafont.com): Ob Tiere, Schulsachen, Computer-Icons, Tintenspritzer, menschliche Silhoutten – es ist für jeden etwas dabei und mit ein bisschen durchklicken wird man auch fündig. Habt ihr die Schriftarten installiert (wie das geht, erklärt euch chip.de), könnt ihr sie ebenfalls in paint.net verwenden. Ein einfacher Tastendruck auf „z“ produziert dann beispielsweise in der Schriftart „Schooldays“ einen Globus, wie ihr am Screenshot sehen könnt.

Weil es mega-mühselig wäre, alle einzelnen Buchstaben und Sonderzeichen durchzutippen, nutze ich die Windows-Zeichentabelle (= vorinstalliertes Systemprogramm), um die passenden Buchstaben auszusuchen, denn hier kann man sich alle installierten Schriftarten ansehen. Per Copy and Paste gelangen sie dann schnell in paint.net und wenn ihr die richtige Schriftart eingestellt habt, könnt ihr den Globus, den Bleistift oder auch das Dromedar schnell an der richtigen Stelle platzieren.


Anschließend werkelt ihr, wenn ihr ein DinA4-Blatt erstellen wollt, ein Weilchen vor euch hin und ich will nicht verhehlen, dass man als Anfänger mit dem Programm und ohne große Schriftartauswahl sicher für die erste Sketchnote ein Weilchen braucht. Wenn man aber dann erstmal einen Fundus hat, diesen einigermaßen kennt und ein bisschen Übung gekriegt hat, dann läuft das Sketchnote-machen wie von alleine und kann sogar ein bisschen von diesem kreativ-entspannenden Gefühl geben, das man sonst nur beim Laminieren hat. 😉 #hüstel #warspaß #laminierenmachtkeinenspaß #dasistbittererernst

Beim Werkeln läuft alles nach dem Prinzip

  1. An die Stelle klicken, wo man Text oder Illustration hinhaben möchte
  2. Text/ Tastenkombination eingeben
  3. bei Nichtgefallen mit den Verschiebewerkzeugen (die oberen fünf Felder bei den Werkzeugen, vor allem die ersten zwei sind wichtig) umplatzieren
  4. immer wieder neue Ebenen einfügen
  5. Zwischenspeichern nicht vergessen
  6. Notizen machen, welche Fonts in welcher Größe für wiederkehrende Textteile verwendet wurden
  7. Löschen einzelner Bestandteile geht ganz einfach: mit dem ersten Werkzeug auswählen, dann „Entf“ auf der Tastatur drücken

Damit ihr ein Gefühl für die einzelnen Bestandteile bekommt, habe ich euch hier mal eine Mini-Sketchnote angefertigt, in der alle verwendeten Schriftarten und Illustrationen verzeichnet sind und bei der ich auch mal die Ebenenstruktur aufgelöst habe, um euch zu zeigen, wie es aussieht, wenn nur der Text oder nur die Illustrationen auf dem weißen Hintergrund zu sehen sind.


Seid ihr dann fertig, könnte eure Sketchnote ungefähr so aussehen: Ein hoffentlich gut strukturiertes Wirrwarr aus vielen Ebenen (bei mir wie empfohlen immer eine pro Arbeitsschritt, eine für den Titel, eine für die Annotationen und eine für die Pfeile zwischen den Schritten). Dann könnt ihr die Hilfskästchen entfernen, die ihr vorher gezogen habt. Wollt ihr eine Ebene nicht angezeigt bekommen, entfernt einfach das Häkchen. Alternativ könnt ihr sie auch mit dem roten „X“ löschen.

Speichern solltet ihr die Sketchnote unbedingt einmal im programmeigenen .pdn-Format. Um eine druckbare und speichertechnisch kleinere  Variante zu erhalten, die auch an andere weitergegeben werden kann, speichere ich das Ganze nochmal als .png-Datei ab, wobei diese deutlich kleiner ist, denn alle (!) Ebenen werden zu einer einzigen zusammengefasst (auch das .gif-Format oder das .jpeg-Format wären möglich). Hierfür muss vorher unbedingt alles ausgeblendet werden, was nicht gespeichert werden soll, sonst landen die Hilfslinien auch in der neuen Datei und das ist natürlich nicht ganz so schick…
Wollt ihr einen Ausdruck von der Sketchnote machen, drückt auf „Drucken“ (im Menü unter Datei) und wählt dann „Ganzseitiges Foto“ aus, dann wird der Ausdruck an das Papiertformat im Drucker angepasst. Bei allen gängigen DinA-Formaten kann die Größe durch die richtigen Seitenverhältnisse problemlos runtergerechnet werden und ihr erhaltet keinen Verschnitt.

Wichtig ist: Entfernt das Häkchen von „Bild an Rahmen anpassen“ (unter dem Bild neben der Kopienanzahl), denn sonst wird beim Drucken etwas abgeschnitten.

Wenn ihr die Sketchnotes als .pdf speichern wollt, empfehle ich die Installation eines PDF-Creators (ich nutze hierfür und viele andere Belange PDF24), der dann als „Drucker“ auswählbar ist und das Bild ruck-zuck in ein PDF umwandelt, womit ihr das Wirrwarr um Dateiformate & Co. sauber umgehen könnt. 😊


Alles Wichtige auf einen Blick – Die zusammenfassende Sketchnote gibt’s als .png-Datei oder PDF (GoogleDrive) zum Download durch Klick auf die Links!  😁

 Alles klar? Es würde mich sehr freuen, wenn es so wäre, aber ich wundere mich auch nicht, wenn ich in diesem Roman über den ich selbst schon fast keinen Überblick mehr habe #hüstel irgendwas übersehen/ nicht ausführlich genug oder irritierend erklärt habe. Das kommt dann einfach daher, dass ich schon ein Weilchen mit diesem Programm und mit dieser Art des Illustrierens arbeite. Nimm dir also einfach ein Minütchen Zeit und kritzel mir einen Kommentar oder frag‘ auf Twitter/ Instagram – nur wer um seine Schwachpunkte weiß, kann sich verbessern, nech?

Ich freu mich auf euer Feedback und ich möchte uuuuuunbedingt sehen, was ihr so bastelt. Wenn du deswegen ein Foto auf Twitter/ Instagram postest, nutz doch einfach den Hashtag #bastelnmitfraudromedar und/ oder verlinke mich bitte!

Von  💚💛❤️-en alles Liebe

Kristina


Creative Commons LizenzvertragWie für alle Beiträge dieses Blogs gilt: Die Frau mit dem Dromedar von Kristina W. ist lizenziert unter einer Creative Commons Namensnennung – Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.

One thought on “Tutorial: Digitale #sketchnotes erstellen”

  1. Liebe Frau Dromedar,

    total interessant. Ich habe mir auch ein Buch zu Sketchnotes gekauft und versuche momentan selber welche zu malen.
    Wenn man die Schriften herunterläd, kann man diese dann auch für Arbeitsblätter nutzen?
    Bei den Dingbats stand zum Beispiel, dass diese nur für den privaten Gebrauch geeignet sind.
    Kann man diese dann für Arbeitsblätter überhaupt nutzen?
    Viele Grüße und danke für deine ausführliche Beschreibung.

Kommentar verfassen