Publizieren auf dem NiBiS. Bildbearbeitung mit XnView. Information, Download und Voraussetzungen

Transkript

1 Publizieren auf dem NiBiS Kersten Feige Nicole Y. Männl , Uhr , Uhr Bildbearbeitung mit XnView Information, Download und Voraussetzungen XnView ist FREEWARE für die private, nicht-kommerzielle Nutzung, für Ausbildungszwecke und für Non-Profit-Unternehmen. XnView erlaubt schnelles Betrachten, Browsen und Bearbeiten von Bildern. Website: Download (Version 1.61 komplett; alle Sprachen, Plug-Ins & NConvert): ftp://ftp2.xnview.com/xnview/xnview-win-full.exe Hilfe: (mit Hilfe eines ZIP-Programmes entpacken und die Datei help-de.chm in das Verzeichnis C:\Programme\XnView\Help verschieben). Beschriebenes Anwendungsgebiet: Fotos (und Grafiken) in das erforderliche Format (Bildgröße und Dateigröße) bringen, um diese in die HTML-Seiten Infospalte oder Hauptseite einzubinden. Voraussetzung: eine Grafikdatei, die sich auf dem lokalen Rechner befindet. Es werden 360 Formate unterstützt, die häufigsten sind JPG (Fotos Digitalkamera), GIF und BMP als vorhandenes Format (Mindmanager Smart Dateien müssen erst (z. B. in BMP) umgewandelt werden). Foto für die Infospalte optimieren Foto 195 x 195 Pixel für Infospalte (Vorlage BSPinfobild.html): Starten Sie XnView und öffnen Sie die zu verändernde Bilddatei (Quelle: Digitalkamera, Aufnahme: Querformat) mit dem Befehl Datei -> Öffnen. Hinweis: Arbeiten Sie immer mit einer Kopie und behalten Sie das Original unverändert! Anderenfalls würde sich die Bildqualität durch das wiederholte Speichern (in einem komprimierten Grafikformat) unnötig verschlechtern falls Sie das Bild mehrmals bearbeiten wollen. Unterhalb des Bildes, in der Informationszeile Nicole Y. Maennl Seite 1 Letzte Änderung:

2 erhalten Sie genaue Daten: Dateiname Bildgröße und Bit Farbinfo Dateigröße Anzeigegröße xy123.jpg 1024x768x24 Echtfarben KB 100% Interessant ist hier die Angabe der Bildgröße 1024x768. Diese Werte sind in der Einheit Pixel, Breite x Höhe und sollen so angepasst werden, dass eine 195x195 Pixel große Grafik entsteht. Schritt 1: Die Grafik verkleinern, indem Sie Bild -> Größe ändern... auswählen, es öffnet sich das Fenster, indem Sie folgende Änderungen in der genannten Reihenfolge vornehmen: - Aktivieren oder belassen Sie das Häkchen bei Verhältnis beibehalten. - Bei Einheiten geben Sie 72 Pixel/Zoll an. - Tragen Sie als Höhe bei den Angaben zur Bildschirmgröße 195 Pixel ein (grundsätzlich beim kleineren Wert), - die Breite ändert sich automatisch (hier auf 260 Pixel). - Belassen Sie die anderen Angaben (Druckgröße und Neuberechnung). - Klicken Sie OK. Ihr geändertes Fenster sieht wie rechtsstehend aus: Schritt 2: Die Breite (260 Pixel) auf 195 Pixel durch Schneiden des Bildes anpassen: markieren Sie zunächst das Bild so, dass ein Ausschnitt die gesamte Höhe, aber nicht die ganze Breite ausfüllt, indem Sie mit dem Mauszeiger einen Begrenzungsrahmen aufziehen. Halten Sie dabei die linke Maustaste gedrückt. Gehen Sie jetzt mit der Maus (ohne zu Drücken) über einen Greifer bis ein Doppelpfeil entsteht. Greifer Ziehen Sie jetzt mit der Maus nach rechts oder links, um den Ausschnitt zu wählen. Die Größe des Ausschnitts wird Ihnen währenddessen in der Informationszeile angezeigt: Korrigieren Sie solange mit dem linken und rechten Greifer, bis die Anzeige (195x195) erreicht. Nicole Y. Maennl Seite 2 Letzte Änderung:

3 Klicken Sie dann auf das Symbol mit der Schere und Sie erhalten folgendes Ergebnis: Kontrollieren können Sie mit dem Befehl Bild -> Größe ändern. Sind Sie mit dem Ergebnis Ihrer Kontrolle zufrieden, dann können Sie an dieser Stelle Abbrechen wählen. Sichern Sie die Grafik unter einem neu gewählten Namen in Ihrem Verzeichnis, in dem Sie auch Ihre HTML-Dateien gespeichert haben (innerhalb der Site von Dreamweaver). Datei -> Speichern unter... Bitte benutzen Sie keine Sonderzeichen und nur Kleinbuchstaben. Bsp.: termine.jpg Wählen Sie als Dateityp bei einem Foto immer JPG! Bei einer Grafik ohne Farbverläufe mit klaren Linien wählen Sie am besten GIF. Ein Beispiel für eine GIF-Grafik: Binden Sie dann in Dreamweaver die soeben erstellte Datei (mit Hilfe der Anleitung Dreamweaver MX Arbeiten mit HTML-Vorlagen) ein. Nicole Y. Maennl Seite 3 Letzte Änderung:

4 Foto (Ausschnitt) für die Infospalte optimieren Foto 195 x 195 Pixel für Infospalte (Vorlage BSPinfobild.html): Öffnen Sie die zu verändernde Bilddatei (Quelle: Digitalkamera, Aufnahme: Querformat, 1024 x 768) mit dem Befehl Datei -> Öffnen. Schritt 1: markieren Sie zunächst das Bild so, indem Sie mit dem Mauszeiger einen quadratischen Begrenzungsrahmen aufziehen. Halten Sie dabei die linke Maustaste gedrückt. Die Größe spielt noch keine Rolle, der gewählte Ausschnitt ist wichtig, z. B. 730 x 730 Pixel. Klicken Sie dann auf das Symbol mit der Schere. Schritt 2: Die Grafik verkleinern, indem Sie Bild -> Größe ändern... auswählen, es öffnet sich das Fenster, indem Sie folgende Änderungen in der genannten Reihenfolge vornehmen: - Aktivieren oder belassen Sie das Häkchen bei Verhältnis beibehalten. - Bei Einheiten geben Sie 72 Pixel/Zoll an. - Tragen Sie als Höhe bei den Angaben zur Bildschirmgröße 195 Pixel ein, - die Breite ändert sich automatisch (hier auf 195 Pixel). - Belassen Sie die anderen Angaben (Druckgröße und Neuberechnung). - Klicken Sie OK. Ihr geändertes Fenster sieht wie rechtsstehend aus: Als Extra können Sie noch die Helligkeit und Kontrast anpassen: Der Befehl Bild -> Anpassen -> Helligkeit/Kontrast/... öffnet ein Fenster, in dem Sie die Einstellungen vornehmen können. Nicole Y. Maennl Seite 4 Letzte Änderung:

5 XnView schlägt Ihnen Werte vor, die das Programm errechnet hat. Das Häkchen Autovorschau sollte aktiviert sein, damit Sie die Veränderungen an der Grafik gleich sehen können. Sind Sie mit dem Vorschlag einverstanden, klicken Sie OK, andernfalls können Sie durch Ausprobieren, (Hin- und Herschieben der Regler) das Ergebnis korrigieren. Feste Werte gibt es hier nicht, da die Einstellungen immer ausgehend von der Ursprungsdatei berechnet werden. Null: stellt alle Werte zurück, so dass der ursprüngliche Zustand der Grafik wiederhergestellt wird. Vorheriger: merkt sich den beim Öffnen dieses Fensters erstmalig vorgeschlagenen Wert. Farbbalance: gleicht Farbstiche aus oder erzeugt sie. Hinweis: Weniger ist oft mehr, verändern Sie die Werte nur geringfügig, um geeignete Ergebnisse zu erzielen. Speichern Sie nach Ihren erfolgreichen Änderungen ihre Grafik! Bildgrößen Empfohlen für die Infospalte ist die Größe 195 x 195 Pixel, wenn nur ein kurzer Text oder keiner folgt. Bei langen Texten unterhalb eines Bildes sollte (um ein eventuelles Scrollen der Infospalte einzuberechnen) die Größe auf 180 x 180 Pixel reduziert werden. Folgende Tabelle hilft eine Übersicht zu erhalten: Einsatzgebiet HTML-Vorlage Grafik-Größen in Pixel Höhe x Breite Infospalte mit Bild, darunter Platz für einen kurzen Satz oder kein BSPinfobild.html 195 x 195 Text. 50 x 50 Setzen Sie diese Werte 100 x 100 nur ein, wenn Ihre Grafik 100 x 150 kein anderes Infospalte mit Bild, darunter viele Links und/oder Text, so lang, dass eventuell gescrollt werden muss. Hauptseite mit Tabelle in den Breiten 400 Pixel (mit Infospalte) und 600 Pixel (ohne Infospalte). Grundsätzlich sollten die Bilder links vom Text stehen und einen Abstand von 15 Pixeln zum Text und zur Grafik in der nächsten Zeile haben. 195 x 300 Format zulässt. BSPinfobildlang.html 180 x x 50 Setzen Sie diese Werte 100 x 100 nur ein, wenn Ihre Grafik 100 x 150 kein anderes 180 x 300 Format zulässt. BSPvorlage600grafik.html Horizontal Vertikal 100 x x x x x x x x x x 400 Nicole Y. Maennl Seite 5 Letzte Änderung: