JPG in SVG umwandeln. SVG-Dateien erstellen für Kurs-, Gruppen- und Ordner-Icons. Stand: 15. November 2017

Transkript

1 ! JPG in SVG umwandeln SVG-Dateien erstellen für Kurs-, Gruppen- und Ordner-Icons Stand: 5. November 07! Supportstelle für ICT-gestützte, innovative Lehre Hochschulstrasse 6 0 Bern info@ilub.unibe.ch Diese Anleitung zur Lernplattform ILIAS ist folgender Creative Commons-Lizenz (V..5) unterstellt: This work is licensed under a Creative Commons License: - by: Namensnennung - nc: Nicht-Kommerziell - sa: Weitergabe unter gleichen Bedingungen

2 Inhalt Diese Anleitung informiert darüber, wie Sie Bilddateien wie JPG- und PNG in SVG-Dateien umwandeln können. Für eigene ILIAS Kurs-, Gruppen- oder Ordner-Icons werden SVG-Dateien benötigt.. Auswahl der Software. Variante mit INKSCAPE: JPG in SVG umwandeln. Variante mit ADOBE ILLUSTRATOR: JPG in SVG umwandeln. Icon in ILIAS einfügen SVG ist ein XML-basiertes Dateiformat und im Gegensatz zu Pixelformaten wie JPG oder PNG vektorbasiert. Um ein Responsive Design in ILIAS gewährleisten zu können, sind alle Icons in ILIAS nur noch im SVG-Format möglich. Die Icons lassen sich so ohne Qualitätsverlust vergrössern und verkleinern, was wichtig für die Darstellung auf unterschiedlichen mobilen Endgeräten ist. PNG SVG

3 . Auswahl der Software Für das Umwandeln eines pixelbasierten Bildes (z.b. JPG, PNG) in ein vektorbasiertes Bild, wird ein Bildbearbeitungsprogramm benötigt, welches Vektorgrafiken bearbeiten kann. Dabei empfehlen wir eines der folgenden Programme. INKSCAPE (Open Source und kostenlos) ADOBE ILLUSTRATOR (kostenpflichtig) Gehen Sie auf die Webseite: Klicken Sie auf «Herunterladen» und wählen Sie Ihr Betriebssystem. Erwerben Sie eine gültige Lizenz des Adobe Illustrators. Auf der Adobe-Website erhalten Sie als Angehörige einer Hochschule Rabatt auf deren Produktpalette: Laden Sie die Installationsdatei herunter, indem Sie auf das Icon mit dem grünen Pfeil klicken. (bei Mac benötigen Sie zusätzlich die Installation von XQuartz. Laden Sie auch diese Datei herunter). Installieren Sie Adobe Illustrator auf Ihrem Computer. Prüfen Sie, dass das Programm gestartet werden kann. Installieren Sie die heruntergeladene(n) Datei(en) auf Ihrem Computer. 5 Prüfen Sie, dass das Programm gestartet werden kann.

4 . INKSCAPE: JPG in SVG umwandeln Mit folgenden Schritten kann im Programm INKSCAPE ein Pixelbild (z.b. JPG, PNG) in eine SVG-Datei umgewandelt werden. Importieren Sie über «Datei» - «Importieren» Ihre JPG- oder PNG-Datei. Wählen Sie Ihre Bilddatei, die Sie in ein SVG umwandeln möchten und klicken Sie «Open».

5 Übernehmen Sie die Standardeinstellungen für den Import und klicken Sie auf «OK». Ihr Bild wird nun auf der Arbeitsfläche angezeigt. Klicken Sie auf Ihr Bild, um es zu markieren. Sie sehen verschiedene Pfeile in allen Richtungen, wenn Sie das Bild angeklickt haben. 5 5 Wählen Sie aus dem Menü «Pfad» die Option «Pixelkunst nachzeichnen...».

6 6 7 An der rechten Seite erscheint ein Fenster. Geben Sie die folgenden Werte ein. Diese Werte können Sie auch anpassen, falls Sie mit dem Ergebnis nicht zufrieden sind. Klicken Sie auf «OK». 6 7

7 8 9 Sie erhalten eine Kopie Ihres Bildes. Markieren Sie das Original und löschen Sie dieses. Sie sollten nun nur noch das vektorbasierte Bild vor sich haben. Die Standardgrösse eines Icons ist x. Passen Sie Ihr Bild auf diese Grösse an. 9 8

8 Im folgenden Schritt werden wir die Arbeitsfläche an die Grösse Ihres Icons anpassen. Klicken Sie auf «Datei» - «Dokumenteinstellungen...». Klicken Sie auf «Ändern der Seitengrösse auf Inhalt...». Klicken Sie auf «Seite in Auswahl einpassen».

9 Klicken Sie auf «Datei» - «Speichern unter...». Wählen Sie einen für Sie passenden Speicherort. Ändern Sie das Dateiformat zu «Normales SVG (*.svg)». Klicken Sie auf «Save».

10 . ADOBE ILLUSTRATOR: JPG in SVG umwandeln HINWEIS: Für ADOBE ILLUSTRATOR CC (Creative Cloud) empfehlen wir Ihnen folgendes Videotutorial: Mit folgenden Schritten kann im Programm ADOBE ILLUSTRATOR CS5 ein Pixelbild (z.b. JPG, PNG) in eine SVG-Datei umgewandelt werden. Öffnen Sie Ihre Bilddatei in Adobe Illustrator über «Datei» - «Öffnen». Sobald die Datei geöffnet ist, wählen aus dem Menü «Objekt» - «Schnittmaske» - «Nachzeichneroptionen...».

11 5 6 Wählen Sie als Vorgabe «Benutzerdefiniert» und geben Sie die Einstellungen wie unten sichtbar ein. Sie können diese selbstverständlich anpassen, wenn andere Werte ein besseres Ergebnis für Ihr Bild geben. Markieren Sie das Häkchen «Vorschau» um direkt die Auswirkung Ihrer Einstellungen auf das Bild zu sehen. Klicken Sie auf «Nachzeichnen», sobald Sie mit Ihren Einstellungen zufrieden sind. Es kann einen Moment dauern, bis Ihr Bild nachgezeichnet wurde. 6 5

12 7 Markieren Sie das nachgezeichnete Bild und ändern Sie die Grösse auf xpx. Sie können dies oben in der Menüzeile anpassen.

13 Im folgenden Schritt werden wir die Arbeitsfläche an die Grösse Ihres Icons anpassen. Markieren Sie Ihr Bild und wählen Sie unter «Objekt» - «Zeichenflächen» - «An ausgewählte Grafik anpassen». Die Arbeitsfläche passt sich nun genau an Ihr Bild an. Klicken Sie auf «Datei» - «Speichern unter...», um die Datei als SVG auf Ihrem Computer zu speichern. Wählen Sie als Format «SVG (svg)». Klicken Sie auf «Sichern».

14 . Icon in ILIAS einfügen Wenn Sie eine SVG-Datei haben, können Sie diese wie folgt als Kurs-, Gruppen- oder Ordner-Icon einfügen. Die Anleitung ist ausgelegt auf das Ändern eines Kurs-Icons, funktioniert aber gleich für Gruppen und Ordner. Gehen Sie in Ihren Kurs und klicken Sie auf das Register «Einstellungen». Klicken Sie auf das Submenü «Icon». Klicken Sie auf «Datei auswählen» und wählen Sie das SVG-Icon auf Ihrem Computer aus.

15 5 Ihre Datei ist nun ausgewählt. Klicken Sie auf «Speichern». 5 6 Ihr Icon wurde erfolgreich hochgeladen und ist neu anstelle des üblichen ILIAS-Icons ersichtlich. 6