VHS-Kurs Homepage Tutorial zum Kursnachmittag 1, Bilder für Homepage skalieren mit GIMP

Transkript

1 VHS-Kurs Homepage 2016 Tutorial zum Kursnachmittag 1, Bilder für Homepage skalieren mit GIMP Nachdem wir im Kurs die grundsätzlichen Möglichkeiten besprochen haben, die es gibt um eine Homepage zu erstellen, uns Gedanken darüber gemacht haben, welche Inhalte wir auf unserer Seite platzieren wollen und uns das Template angeschaut haben, das die Grundlage für unsere neue Homepage sein soll, beginnen wir jetzt also damit, unsere eigenen Bilder auf der Startseite einzubauen. Ausdrucksstarke Bilder machen einen großen Teil des Eindrucks aus, den eine Website beim Besucher hinterlässt. Daher ist es auch ein Erfolgserlebnis, wenn wir unsere eigenen Bilder im Internetbrowser sehen können. Für die Bildbearbeitung verwenden wir die kostenlose Open-Source-Software GIMP, die wir von einer seriösen Quelle heruntergeladen und auf unserem Rechner installiert haben. In unserer Homepagevorlage wollen wir nun die dort als Muster enthaltenen Bilder durch unsere eigenen ersetzen. Direkt von der Digitalkamera gelieferte Bilder sind für das Internet ungeeignet und müssen zunächst auf die richtige Bildgröße skaliert werden. Die Bildgröße der Musterbilder finden wir, wenn wir im Windows-Explorer die entsprechende Bilddatei mit der rechten Maustaste anklicken, Eigenschaften auswählen und im dann erscheinenden Fenster die Registerkarte Details auswählen. Die Diashow-Bilder unserer Vorlage haben eine Abmessung von 960x483px (Pixel), die kleinen Bilder haben 220x155px. Um nun unsere eigenen Bilder auf diese Bildgröße zu skalieren, starten wir das Bildbearbeitungsprogramm GIMP, das wir zuvor auf dem Rechner installiert haben. Nun öffnen wir unser zu bearbeitendes Bild, entweder über das Menü mit Datei Öffnen oder indem wir das Bild einfach mit gedrückter Maustaste auf die GIMP-Arbeitsfläche ziehen. Wir sollten folgende Ansicht sehen: Wenn der Werkzeugkasten und/oder die Werkzeugeinstellungen nicht angezeigt werden, so können wir diese über die entsprechenden Menüpunkte unter dem Hauptmenüpunkt Fenster einschalten.

2 Wir wollen unser Bild nun im Beispiel auf die Abmessungen für die Diashow skalieren, also auf 960x483 Bildpunkte. Dazu wählen wir zunächst das Rechteckauswahlwerkzeug (1), setzen einen Haken bei fest (2), wählen im Dropdownmenü den Auswahlpunkt Seitenverhältnis und tragen dann in den Werkzeugeinstellungen unser gewünschtes Seitenverhältnis 960:483 (mit Doppelpunkt zwischen den Zahlen) ein (3). Nun ziehen wir mit der Maus ein Rechteck in unserem Bild auf (4), das von GIMP automatisch im richtigen Seitenverhältnis dargestellt wird. Bitte unbedingt darauf achten, dass das Auswahlrechteck nicht über das Bild hinaus gezogen wird, sonst stimmt hinterher das Seitenverhältnis nicht mehr. Wenn unser Rechteck die richtige Größe für den gewünschten Bildausschnitt hat, können wir es optimal positionieren, indem wir den Mauszeiger in der Mitte des Auswahlrechteck platzieren und dieses mit gedrückter Maustaste auf dem Bild beliebig verschieben, jedoch keinesfalls über den Rand hinaus. Nun wählen wir im Menü Bild und dann Auf Auswahl zuschneiden (5). Anschließend wählen wir Bild skalieren (6) und tragen in dem sich öffnenden Fenster unsere gewünschte Bildgröße 960px Breite ein. Das Feld Höhe sollte nach Drücken der Tabulator-Taste oder Klick mit der Maus in ein anderes Feld automatisch richtig sein. Falls nicht, haben wir das Auswahl-Rechteck über den Bildrand hinaus gezogen oder einen falschen Wert bei den Werkzeugeinstellungen eingetragen. Im Feld X-Auflösung tragen wir jetzt noch den Web-Standardwert 72 Pixel/inch ein und klicken dann auf skalieren.

3

4 Fertig, nun müssen wir unser Bild nur noch als.jpg-bild abspeichern, indem wir im Menü Datei den Unterpunkt Exportieren als auswählen. In dem sich öffnenden Fenster navigieren wir an den gewünschten Speicherort, legen wenn nötig einen Unterordner an (7), in dem wir unsere Bilder später wiederfinden wollen, tragen bei (8) den Namen ein, den wir dem Bild geben wollen (sinnvoll sind sowohl Namen, die das Bild identifizieren, aber auch solche, die den zukünftigen Ort in der Webseite angeben, z.b. startseite-dia-1.jpg) und klicken zum Schluss auf Exportieren. Wenn GIMP die Dateiendung in Großbuchstaben darstellt (..JPG), sollten wir diese gleich durch Kleinbuchstaben ersetzen, also im Beispiel hoehe-moehr-1.jpg komplett inkl. der Dateiendung jpg eintragen. Im nächsten Fenster müssen wir nur noch die gewünschte Bildqualität einstellen. 80% ist ein guter Standardwert, der eine noch sehr gute Bildqualität mit akzeptabler Dateigröße garantiert. Wer Wert auf eine besonders gute Qualität oder besonders geringe Dateigröße legt, kann hier auch einen höheren oder niedrigeren Wert einstellen. Zum Schluss klicken wir auf exportieren und bauen unser Bild anschließend in die Webseite ein.

5 Dazu öffnen wir die Datei index.html mit dem Editor Notepad++, den wir zuvor auf unserem Rechner installiert haben. Dann scrollen wir bis an die Stelle, die im folgenden Bild zu sehen ist und tragen die Namen unserer eigenen Bilder an der entsprechenden Stelle im Quellcode ein. Um mehr als drei Bilder in der Slideshow abzuspielen, kopieren wir einfach eine komplette Zeile und fügen sie unterhalb der letzten <li>-zeile in den Code ein. Dort tragen wir dann den jeweils nächsten Bilddateinamen ein. Wenn das erledigt ist, können wir auch gleich noch unser eigenes Hauptmenü bearbeiten. Die Menüpunkte befinden sich in dem Block oberhalb der Slideshow. Der Dateiname der Startdatei index.html muss unverändert bleiben. Alle anderen Dateinamen können wir nach eigenen Wünschen benennen. Am häufigsten werden die Dateien nach ihrem Inhalt benannt, also z.b. produkte.html, kontakt.html oder anfahrt.html.