Mit kostenlosen Online-Tools aus einer Sketchnote ein digitales Arbeitsblatt erstellen.
Inhaltsverzeichnis
Annie ist gymnasiale Deutsch- und Philosophielehrerin. Sie soll eine Vertretung im Fach Deutsch in der 9. Klasse übernehmen. Zufällig stößt sie beim Scrollen durch ihren Twitter-Feed auf eine passende Sketchnote zur anstehenden Schulstunde mit dem Thema „Was ist ein gutes Referat?“. Das Foto ist mit der Creative-Commons-Lizenz „CC BY-SA“ ausgestattet. Julia kennt sich ein wenig mit Lizenzen aus und weiß, dass sie es im Unterricht verwenden darf. Nun möchte sie damit ein Arbeitsblatt erstellen.
Lösungsansatz
In sozialen Netzwerken wie z. B. Twitter oder in Fachgruppen auf Facebook verbreiten sich kostenfrei lizenzierte Inhalte rasch. Julia hat die gewünschte Sketchnote heruntergeladen und benötigt für die Umsetzung in ein Arbeitsblatt nun ein Bildbearbeitungswerkzeug, einen Vektorisierungsdienst, ein Illustrationsprogramm und ein Layoutprogramm für das Arbeitsblatt. Klingt sehr zeitaufwendig? In 30-60 Minuten ist das Arbeitsblatt einsatzbereit.
Lernziele
- Lizenzen erkennen und rechtliche Möglichkeiten ableiten
- Bildformate kennenlernen und speichern
- Datenformate einordnen und richtig anwenden
- Datenformate exportieren und importieren
- Grundlagen der Bildbearbeitung und Bildverbesserung kennenlernen und anwenden
- Unterschiede von pixel- und vektorbasierten Bildformaten kennenlernen
- nicht-destruktive Veränderungen an Vektoren exemplarisch durchführen
- Export von Teilvektordateien
- Medienformate in einem digitalen Arbeitsblatt zusammenführen (OER remix)
Schritt-für-Schritt-Anleitung
Die Lizenz
Die Voraussetzung für freie Bildungsmaterialien sind die passenden Lizenzen der genutzen Medieninhalte. Im folgenden Beispiel ist die Sketchnote im Bild mit einer CC BY-SA Lizenz ausgezeichnet und darf mit dem richtigen Lizenzhinweis für alle Einsatzzwecke genutzt werden.
SWA "Übung macht den Meister!" CC BY-SA 4.0
Tipp: Suchmaschinen wie Google und Bilderportale wie z.B. Flickr können speziell nach Creative-Commons-Material filtern.
Vorlage und Formate
Für den anstehenen Praxisteil wird ein Ausgangsbild benötigt. Ihr könnt die oben gezeigte Sketchnote nach einem Rechtsklick speichern oder selbstverständlich auch ein eigenes Bild nehmen.
Tipp: Im pädagogischen Umfeld ist der Flickr-Nutzer Ralf Appelt (adesigna) mit zahlreichen Sketchnotes sehr zu empfehlen.
In den nächsten Schritten entsteht aus einem sogenannten Pixelbild eine Vektorgrafik. Warum ist das wichtig? Vektorgrafiken können nachträglich verlustfrei vergrößert und verkleinert werden, sprich, wir können die erstellten Grafiken auf einer Briefmarke, auf dem Arbeitsblatt oder auf einem großen Poster mit gleichbleibender Qualität abbilden. Ein weiterer Vorteil ist, dass auch die Farben der einzelnen Elemente nachträglich angepasst werden können.
Bildbearbeitung
In diesem Schritt erfahrt ihr die Grundlagen der Bildbearbeitung mit dem Online-Tool polarr.co.
Polarr: Vorbereitung
- Öffnet den Online-Editor von polarr.co unter folgender Adresse: photoeditor.polarr.co.
- Das Programm wird in zwei Darstellungsvarianten für Anfänger und Profis angeboten. Wählt hier Express (deutsch: ausdrücken) aus und klickt auf den Button
Erste Schritte mit Express
. Wer bereits Erfahrungen mit Bildbearbeitung hat, kann auch die Profi-Variante für den Vollzugriff auf alle Werkzeuge und Bildeinstellungen auswählen. - Beim ersten Besuch wird eine kurze Tour gestartet (1 Minute). Absolviert diese, um eine Funktionsübersicht zu erhalten.
- Klickt anschließend auf den Button
Öffnen von Fotos
und fügt die Sketchnote ein.
Bildoptimierung
- Mit dem Zuschneiden-Werkzeug im Menü auf der rechten Seite kann das Bild bei Bedarf gedreht und zugeschnitten werden. Mit einem Klick auf die Ecken kann die Größe und rechts neben der Zuschnittsfläche am Gradmesser die Neigung des Bilds angepasst werden.
- Ist das Bild angepasst, könnt ihr die Änderungen mit einem Klick auf den Haken im Menü auf der rechten Seite bestätigen.
- Auch die Bildqualität (Helligkeit und Farbe) lässt sich optimieren: Mit einem Klick auf das Helligkeitsymbol im rechten Menü öffnet sich die "Licht"-Einstellungspalette.
- Die Einstellungen variieren je nach Motiv und Aufnahmeeinstellungen der Kamera. Bei der stark unterbelichteten (zu dunkel) Aufnahme der Sketchnote wurden folgende Einstellungen vorgenommen:
- Dehaze: 0
- Belichtung: 88
- Helligkeit: 20
- Kontrast: 36
- Highlights: 100
- Schatten: -100
- Weiß: 67
- Schwarz: -100
Speichern inklusive Metadaten
In diesem Abschnitt wird das optimierte Bild mit Metadaten versehen und für das nächste Tool unserer Toolchain bereitgestellt.
- Zunächst muss der Export-Dialog geöffnet werden. Dies geschieht mit einem Klick auf das Export-Icon in der unteren linken Ecke des Browsers.
- Im Dialog-Fenster befinden sich mehrere Tabs. Im Reiter Metadaten könnt ihr dem Bild eigenständige Informationen über den Button
Hinzufügen von Metadaten
hinzufügen. Unter Artist tragt ihr die Urheberin ein (Manuela SWA), unter Copyright den Lizenzhinweis (CC BY-SA) und unter Beschreibung den Alternativtext (Sketchnote: Wie gelingt ein gutes Referat?). - Wechselt nun zum Reiter Bild und wählt unter der Rubrik Format das Bildformat PNG aus.
- Abschließend könnt ihr auf den Button
Kopie speichern
klicken und das Bild nach der Fertigstellung herunterladen.
Aus Pixel wird Vektor
Dieser Schritt zeigt euch, wie aus einem Pixelbild eine veränderbare Vektordatei entsteht. Mit dem Online-Illustrationsprogramm Gravit.io können Layoutdateien kostenlos und ohne Anmeldung erstellt werden.
- Jedes Layoutprogramm benötigt eine sogenannte Zeichenoberfläche, ähnlich dem Papiermaß beim Zeichnen. Im ersten Schritt wird eine DIN-A4-große Zeichenfläche in den Feldern width (Breite) und height (Höhe) angelegt.
- Tragt dazu die Maße vom DIN A4 quer in die dafür vorgesehenen Felder ein:
Breite: 297 mm
undHöhe: 210 mm
. Standardmäßig ist die Maßeinheit px (Pixel) gewählt; ändert diese mit einem Klick auf mm (Millimeter) ab. Abschließend auf den ButtonCreate!
klicken. Es öffnet sich eine leere Seite, die mit Leben erfüllt werden kann. - Bevor wir mit dem diesem Tool beginnen können, muss aus dem optimierten Pixelbild eine Vektorgrafik werden. Öffnet hierzu einen Browser eurer Wahl und navigiert zum Webservice Vectorization.org.
- Öffnet das zuvor gespeicherte Bild über den Button
Durchsuchen
. - Als output format solltet ihr entweder SVG oder EPS auswählen und mit dem Button
Start
den Konvertierungsvorgang in Gang setzen. - Nach kurzer Wartezeit könnt ihr mit einem Klick auf den blau hinterlegten Link die Vektorgrafik auf dem Computer speichern.
Platzieren und Bildausschnitt wählen
Jetzt wird die umgewandelte Sketchnote in einzelne Elemente aufgeteilt und in der Farbgebung angepasst.
- Wechselt wieder in den Tab zu Gravit und öffnet über das Hauptmenü des Programms (am oberen Bildschirmrand)
File > Import > Place image ...
die gespeicherte SVG- bzw. EPS-Datei. - Nach erfolgreichem Import der Gesamtdatei kann diese über die Ebenenpalette (layer) auf der linken Seite in einzelne Objekte aufgeteilt werden. Aktiviert die Ebene mit einem Klick. Mit einem Rechtsklick öffnet sich das Kontextmenü - dort kann die Gruppierung mit dem Button
Split selection
aufgehoben werden. - Mit der Werkzeugleiste am oberen Bildschirmrand könnt ihr den Betrachtungsausschnitt des Programms verändern. Für die folgende Detailarbeit ist eine nahe Ansicht von Vorteil. Ändert über die Prozentanzeige die Zoomstufe; meist ist ein Wert von 200% angemessen.
- Nach dem Zoom kann der Bildausschnitt mit dem Hand-Werkzeug verschoben werden. Klickt dazu ebenfalls im Werkzeugmenü den Hand-Icon an. Mit gedrückter Maustaste könnt ihr den Arbeitsbereich verschieben.
Grafikelemente anpassen und speichern
Mit dem Verschieben-Werkzeug können einzelne freistehende Grafiken ausgewählt und bereits jetzt in Position und Farbe verändert werden. Teile der Sketchnote werden in diesem Abschnitt verändert und für das Arbeitsblatt fertig gemacht.
- Wird ein Element mit dem Verschieben-Werkzeug angeklickt, erscheint eine blaue Markierung um das Objekt. Bei gedrückter Maustaste könnt ihr es nun verschieben. Die Größe könnt ihr bei gedrückter
Shift-Taste
(Großschreibetaste) an den Ecken der Markierung anpassen. - Ist die Markierung aktiv, kann an der rechten Seite über das Paletten-Menü unter Fills die Farbe des Elements verändert werden. Klickt dazu auf den Farbwähler und wählt die gewünschte Farbe aus.
- Erstellt nun aus der Auswahl ein Symbol. Klickt mit der rechten Maustaste in der Ebenenpalette auf der linken Seite auf ein ausgewähltes Element (grau hinterlegt). Es öffnet sich das Kontextmenü. Sucht dort den Eintrag
Create Symbol
. Tragt einen Namen für das Symbol ein. - In diesem Schritt wird aus dem Symbol ein sogenanntes slice. Klickt hierfür in der unteren linken Ecke des Bildschirmrands in der Exportpalette auf den Button
Create Slice
. Die türkis hinterlegte Fläche um das Grafikobjekt zeigt den endgültigen Exportbereich; dieser kann wieder angepasst werden. Rahmt nun das gewünschte Objekt ein. - Anschließend auf den kleinen Export-Pfeil klicken. Es öffnet sich ein Untermenü, in dem unter der Einstellung Format der Dateityp SVG anstelle der Grundeinstellung PNG gewählt werden muss. Danach auf den Button
Export
klicken. Speichert jetzt das einzelne Vektorbild in dem gewünschten Ordner auf dem Computer ab.
Diese fünf Schritte können für die gewünschten Grafiken wiederholt werden.
Arbeitsblatt erstellen
Im letzten Teil dieser Toolchain werden die angepassten Grafiken in ein Arbeitsblatt eingefügt und mit Text sowie Beschriftungsfeldern ausgestattet.
Arbeitsblatt anlegen und Überschriften hinzufügen
- Öffnet in einem modernen Browser wie z.B. Firefox die Seite tutory.de. Auf Tutory wird ein Account benötigt, welcher in der Basisversion kostenlos ist. Dieser reicht für das Erstellen anschaulicher, übersichtlicher und interaktiver Arbeitsblätter vollkommen aus.
- Nach der Registrierung erscheint auf der Arbeitsblattübersicht der Button
Neues privates Arbeitsblatt
erstellen. Füllt die drei Pflichtfelder Titel, Fachbereich und Klassenstufe aus. Während der Erstellung ist das Arbeitsblatt nicht öffentlich. - Fügt nun über die linke Seitenleiste (sidebar) über den Button
Text > Überschrift > +
eine Überschrift in das Arbeitsblatt ein. Klickt mit einem Doppelklick auf die Platzhalterüberschrift. Auf der rechten Seite öffnet sich ein weiteres Menü zum Beschriften. Tragt dort den gewünschten Titel und die gewünschte Darstellungsgröße ein. Die Größe kann im Reiter Überschriftsebenen festgelegt werden. Dabei gilt es zu beachten, dass die GrößeTitel
nur einmal pro Dokument vergeben werden und die Standardüberschrift inEbene 1
sein sollte.
Sketchnote-Grafiken hinzufügen
- Nun werden die einzelnen slices aus dem vorherigen Schritt nacheinander auf das Arbeitsblatt übertragen. Klickt dazu auf der linken Seitenleiste auf den Button
Bild > Eigenes Bild > +
. - Auf dem Arbeitblatt wird ein Platzhalterbild mit Bildunterschrift eingefügt. In diesen Platzhalter muss nun ein Teil der gespeicherten Sketchnote eingefügt werden. Klickt dazu das eingefügte Bild an, damit es aktiv wird. Ähnlich wie bei Gravit Designer sind aktive Elemente mit einer blauen Linie und Anfassern an den Ecken gekennzeichnet. Klickt nun am oberen rechten Bildende den kleinen Button
Bearbeiten
an. - Auf der rechten Seite öffnet sich, wie bei den Überschriften, ein Kontextmenü mit mehreren Optionen. Zunächst lädt man eine gespeicherte Grafik hoch. Dies geschieht über den Button
Bild hier hochladen oder hineinziehen
. - Das Bild wird nun in den Platzhalter gelegt. Über den Regler im Bild selbst kann der Bildausschnitt angepasst werden. Zieht den Regler nach links, um die Grafik zu verkleinern, und nach rechts, um den Bildauschnitt zu vergrößern. Über die Eckpunkte des Bildes kann das Format nachträglich angepasst werden. Sollte das Bild angeschnitten sein, zieht über die Ecken den Bildauschnitt größer.
- Bei Bedarf kann noch eine Bildunterschrift über das rechte Seitenmenü unter dem Feld Bilduntertitel angelegt werden.
- Abschließend müsst ihr eine Lizenz für das verwendete Bild angeben. Ohne diesen Schritt kann das Arbeitsblatt nicht veröffentlicht werden. Ihr könnt das Arbeitsblatt an dieser Stelle mit den Schritten 1-5 fertigstellen und den nachfolgenden Schritt am Ende in einem Rutsch erledigen.
Creative Commons richtig ausweisen
In diesem Schritt werden die verwendeten Medieninhalte mit Lizenzhinweisen der Creative Commons rechtssicher angelegt.
- Tutory hat bereits einen CC-Lizenzgenerator integriert und verhindert eine Veröffentlichung, bevor nicht alle Medieninhalte ausgezeichnet sind. Mit einem Klick auf
Creative Commons
öffnet ihr das Lizenzfenster. - Im Reiter Baustein wählen seht ihr die Medieninhalte ohne Lizenz. Wählt nun ein Bild unter 2. Wer hat das Werk geschaffen (Urheber)? aus und wählt die Option
Ein Anderer
. Tragt nun unter 3. Lizenz generieren die Lizenz der Quelle (in diesem Beispiel BY-SA), die Lizenzversion (4.0) und den Namen des Urhebers (SWA) ein. Gebt unter dem Feld Link zum Inhalt den Ursprungsort der Mediendatei ein; in diesem Beispiel wäre es die URL zum Tweet. Mit einem Klick auf den ButtonSpeichern und weiter
werden die Lizenzangaben hinterlegt. - Wurden alle Medieninhalte mit Lizenzen ausgestattet, kann das Dokument optional über den Button
Creative Commons
öffentlich gemacht werden.
Beschreibbar machen und veröffentlichen
Im letzten Schritt werden Bereiche des Arbeitsblatts liniert, damit die Lehrenden und/oder Lernenden das Arbeitsblatt beschriften können. Ist dies geschafft, wird das Arbeitsblatt der Öffentlichkeit zur Verfügung gestellt.
- Erstellt über den Button
Text > Linien und Kästen > +
einen linierten Rahmen. Die Länge und Breite kann über die Anfasser an den Rändern des Feldes angepasst werden. Mit einem Klick auf den ButtonBearbeiten
öffnet sich das Kontextmenü, worüber das Papiermuster liniert, kariert und Millimeter bei Bedarf verändert werden kann. - Erstellt an den nötigen Stellen nun die beschreibbaren Textfelder.
- Zu guter Letzt kann das Dokument über den Button
Privat gespeichert
, am oberen Bildschirmrand in der Mitte, für Kolleginnen und Kollegen freigegeben werden. Es erscheint entweder ein Lizenzhinweis - dann sind nicht alle Elemente lizenziert - oder eine Zusammenfassung der Einstellungen. Überprüft diese und klickt zum Abschluss aufVeröffentlichen
PDF für den Druck erstellen
Benötigt ihr nun das Arbeitsblatt als Druckvorlage oder als Overheadfolie, kann über den Button PDF > Arbeitsblatt
eine Kopie auf dem Computer gespeichert werden.
Lizenz
Vom Tweet zum OER-Arbeitsblatt in 30 Minuten von Manfred Steger für das Universitätskolleg Digital der Universität Hamburg ist lizenziert unter einer CC BY 4.0 International Lizenz.
Schreibe einen Kommentar