Quickpage Content Management System (CMS) Bilder einsetzen

Quickpage Content Management System (CMS) Bilder einsetzen Kulturinformatik Remigius Wagner Postfach 9050 Appenzell Tel.G.: 079 406 57 41 Fax G.: 086079 406 57 41 Büro Bern: 031 305 95 86 E-Mail: info@kulturinformatik.com Web: www.kulturinformatik.com

Inhaltsverzeichnis Das müssen Sie wissen:...2 Woher nehme ich die Bilder für unsere Quickpage?... 2 Welche Dateiformate eignen sich für Quickpage?... 2 Wie gross dürfen die Bilder in Quickpage sein?... 2 Vorgehen beim Einsetzen von Bildern...3 A. Kein Bild verwenden... 3 B. Bild verwenden (automatisch zuschneiden)... 3 C. Bild verwenden (Originalgrösse beibehalten)... 4 Dateiinformationen einer Abbildung anschauen...4 Eigene Bilddateien... 4 Bilddatei im Internet... 4 Bildbearbeitung mit Photoshop Elements 2.0....5 Bild drehen... 5 Bild skalieren (Bildgrösse bestimmen)... 5 Ausschneiden und Verschieben:... 6 Hintergrundfarbe und Zeichnen... 6 Helligkeit/Kontrast und Farbkorrektur... 6 Scharfzeichnen... 7 Bild speichern für das Internet... 7 Die eigene Bildgalerie im Internet...7 Einleitung... 7 Schritt für Schritt zum Erfolg... 7 Kontakt...12 Quickpage: Bilder einsetzen, Juni 2005 1

Das müssen Sie wissen: Woher nehme ich die Bilder für unsere Quickpage? Das Bildmaterial kann aus einer eigenen Datei (selber gestaltet, gescannt, digitales Foto,...) oder aus dem Internet importiert werden. Bildmaterial, das im Internet publiziert ist, ist aber meistens urheberrechtspflichtig! Beachten Sie deshalb die gesetzlichen Bestimmungen (Urheberrechtsgesetz, URG und Urheberrechtsverordnung, URV), über die Sie sich auf der Website der Bundesbehörde der Schweizerischen Eidgenossenschaft www.admin.ch, oder des Eidgenössischen Instituts für Geistiges Eigentum www.ige.ch informieren können. Die Gesetzestexte finden Sie am einfachsten auf der Seite www.gesetze.ch. Wir empfehlen Ihnen, auf Abbildungen zu verzichten, von denen keine Publikationsrechte für Ihren Internetauftritt schriftlich vorliegen. Die sicherste und einfachste Lösung ist es, wenn Angestellte Ihrer Institution während der Arbeitszeit Fotos erstellen. Welche Dateiformate eignen sich für Quickpage? Für Quickpage eignen sich die Dateitypen JPG und GIF. Andere Internetformate wie PNG werden von Quickpage automatisch in JPG umgewandelt. Formate wie EPS, Tiff, BMP oder ähnliches müssen dagegen manuell in JPG umformatiert werden (siehe S. Fehler! Textmarke nicht definiert.). Wie gross dürfen die Bilder in Quickpage sein? Ihr Server hat nicht unbeschränkt Speicherkapazität. Bilder aller Art sind wenn man diese nicht entsprechend formatiert und anpasst die grössten Speicherfresser auf dem Internet. Zudem ist die benötigte Aufbauzeit einer Website vor allem von den integrierten Bildern abhängig - Je grösser die Bilder, desto länger muss man warten. Bilddateien sollten idealerweise nicht grösser als 5-10 KB (rund 5'000 bis 10'000 Bytes) sein. Grafik und Layout sollen ein einheitliches Erscheinungsbild ergeben. Illustrationen müssen deshalb in Inhalt und Grösse zum Gesamtbild passen. Die Illustrationen sollten etwa 3-8 cm hoch, bzw. breit, sein (d.h. ca. 160 Pixel breit und 240 Pixel hoch). Tipp: Wählen Sie in Quickpage bei der Eingabe Bild verwenden (automatisch zuschneiden), so wird das ausgewählte Bild automatisch verkleinert (oder vergrössert) und ohne Qualitätseinbusse eingepasst. Das aufwändige Bildbearbeiten (verkleinern, Ausschnitt wählen, strecken/ zerren) wird dadurch überflüssig (Anleitung siehe S. 3). Quickpage: Bilder einsetzen, Juni 2005 2

Vorgehen beim Einsetzen von Bildern Wenn Sie ein Bild einsetzen wollen, haben Sie zwei Optionen: Bild verwenden (automatisch zuschneiden) oder Bild verwenden (Originalgrösse beibehalten). A. Kein Bild verwenden Standardmässig ist der Knopf kein Bild verwenden aktiv. Lassen Sie diese Standardeinstellung stehen, wenn Sie kein Bild verwenden möchten. B. Bild verwenden (automatisch zuschneiden) Wählen Sie bei der Eingabe Bild verwenden (automatisch zuschneiden), so wird das ausgewählte Bild automatisch verkleinert (oder vergrössert) und ohne Qualitätseinbusse eingepasst. Das aufwändige Bildbearbeiten (verkleinern, Ausschnitt wählen, strecken/zerren) wird dadurch überflüssig. Tipp: Das automatische Zuschneiden ist die einfachste Methode, ein Bild einzufügen. Im Normalfall brauchen Sie also Bilder nicht selbst in die richtige Grösse zu bringen. 1. Entsprechende Option aktivieren Aktivieren Sie zunächst die Option Bild verwenden (automatisch zuschneiden). 2. Bilddatei anwählen Klicken Sie dann auf die Fläche Durchsuchen, um auf Ihrer Festplatte / Ihrem Netzlaufwerk die entsprechende Datei auszuwählen. Wenn der Name des gewünschten Bildes im Fenster erscheint, können Sie durch Doppelklick auf den Namen oder durch den Button Öffnen das gewünschte Bild importieren. Wenn Sie das Bild nicht finden, prüfen Sie, ob Sie unter Dateityp Alle Dateien ausgewählt haben. Sobald Pfad und Dateiname im Fenster der Eingabemaske stehen, wird das Bild beim Speichern der Seite automatisch auf den Internet-Server geladen. Wichtig: Für Quickpage eignen sich die Datei-Formate JPG und GIF. Formate wie EPS, Tiff oder ähnliches müssen umformatiert werden (siehe S. Fehler! Textmarke nicht definiert.). Quickpage: Bilder einsetzen, Juni 2005 3

C. Bild verwenden (Originalgrösse beibehalten) Wenn Sie Ihr Bild in Originalgrösse auf der Seite anzeigen wollen oder wenn das automatische Zuschneiden nicht wie gewünscht funktioniert, wählen Sie Option C. Gehen Sie beim Auswählen der JPG-Datei dann vor wie oben beschrieben. Wichtig: Bearbeiten Sie das Bild vorher so, dass es ca. 5-10 KB und ungefähr 160 mal 240 Pixel gross ist. Dateiinformationen einer Abbildung anschauen Eigene Bilddateien Wählen Sie auf Ihrem Arbeitsplatz oder im Windows Explorer den Ordner an, in welchem sich das gewünschte Bild befindet. Klicken Sie den Dateinamen des Bildes an. Jetzt erscheinen die Dateiinformationen auf der linken Bildschirmseite. Sollte das auf diese Weise nicht klappen, klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie Eigenschaften aus (analog zur Beschreibung im nächsten Abschnitt). Dateiname Dateiformat Letzte Änderung Dateigrösse Vorschau Wichtig: Für Quickpage eignen sich die Formate JPG und GIF. Formate wie EPS, Tiff oder ähnliches müssen umformatiert werden (siehe S. Fehler! Textmarke nicht definiert.). Bilddatei im Internet 1. Bild mit RECHTER Maustaste anklicken Sie haben ein Bild auf ihrem Bildschirm angezeigt und wollen wissen, wie gross die Datei ist. Klicken Sie dazu mit der rechten Maustaste auf das Bild. 2. Eigenschaften anwählen Quickpage: Bilder einsetzen, Juni 2005 4

3. Dateiinformationen einsehen Die Dateiinformationen erscheinen in einem eigenen Fenster. Die Angaben beziehen sich auf die Abbildungsgrösse, die Sie aufgerufen haben. Bildbearbeitung mit Photoshop Elements 2.0. Bild drehen Auf der oberen Leiste des Programms befindet sich als dritter Befehl Bild, bei Klick darauf erscheint die Funktion Drehen, wo Drehungen um 90 Grad nach rechts oder links, bzw. um 180 Grad einfach möglich sind. Unter Eigene kann man den Winkel selbst bestimmen, was sich vor allem bei Fotos lohnt, die nur ein bisschen schief sind. Unter Transformieren kann das Bild auf verschiedene Arten gezerrt oder geneigt werden. Bild skalieren (Bildgrösse bestimmen) Ebenfalls unter dem Befehl Bild erscheint die Funktion Skalieren Bildgrösse. Dort lassen sich die gewünschten Formate des Bildes in Pixelzahlen eintragen. So können Fotos von Digitalkameras, die meist noch sehr gross sind, verkleinert werden und einheitliche Höhen oder Breiten erhalten. Unten sind die Masse in Zentimetern angegeben. Grössenempfehlung für Webbilder: Die längere Seite sollte zwischen 150 und 250 Pixeln liegen. Quickpage: Bilder einsetzen, Juni 2005 5

Nach einer Skalierung wird das Bild oft stark verkleinert angezeigt. Um die tatsächliche Grösse des Bildes am Bildschirm zu überprüfen geht man in der oberen Leiste zum 8. Befehl Ansicht und klickt Tatsächliche Pixel. Ausschneiden und Verschieben: Das Ausschneide-Werkzeug (Auswahlrechteck) befindet sich in der Werkzeug-Leiste links oben (gestricheltes Rechteck). Damit lassen sich einzelne Ausschnitte markieren (z. B. nur Gesichter auswählen, unwichtige Details am Bildrand wegschneiden) Nach der Markierung wird unter Bearbeiten Kopieren gewählt so rutscht der ausgewählte Bereich in die Zwischenablage. Datei Neu aus Zwischenablage : Das ausgeschnittene Bild erscheint und kann unter einem anderen Namen abgespeichert werden. Das alte Bild geht dabei nicht verloren. Einzelne Elemente des Bildes lassen sich mit dem Zauberstab auswählen: Der Zauberstab wählt allerdings nur Elemente aus, die nahezu die gleiche Farbe haben: Tricks: Nach einer ersten Auswahl die rechte Maustaste klicken: Ähnliches auswählen. Oder zuerst den Hintergrund auswählen (wenn er nahezu einfarbig ist) und dann mit rechter Maustaste Auswahl umkehren. Wieder Kopieren und Neu aus Zwischenablage. Zum Abschluss der Zauberstab-Funktion muss über die rechte Maustaste Auswahl aufheben geklickt werden, um andere Sachen mit dem Bild anstellen zu können. Mit dem Verschieben-Werkzeug (lila-farbener Pfeil) können einzelne Bildausschnitte innerhalb eines Bildes, aber auch ganze Bilder ineinander verschoben werden. Dabei entstehen dann mehrere Ebenen : Die Ebenen sind rechts oben angezeigt und können auch einzeln ausgewählt, bzw. gelöscht oder prioritär angeordnet werden. Hintergrundfarbe und Zeichnen Am unteren Ende der Werkzeug-Leiste befindet sich die Farbauswahl für Vorder- und Hintergrund. Will man nun beispielsweise die Vordergrundfarbe wechseln, klickt man auf das obere Feld und wählt aus dem Farbspektrum die gewünschte Farbe. Unten rechts kann man auch direkt den sechsstelligen Webcode für die Farbe eingeben. Schwarz hat die Nummer 000000, Weiss die Nummer FFFFFF. Will man eine Farbe auswählen, die im Bild bereits vorkommt, wählt man die Pipette so erscheint die Vordergrundfarbe automatisch in der gewünschten Farbe. Um eigene Linien ins Bild zu zeichnen, arbeitet man mit dem Pinsel (Werkzeugspitzenwerkzeug): Die passende Pinselstärke und struktur erhält man durch die Auswahl oben links, und schon geht s los. Um genauer malen zu können, lässt sich die Bildansicht vergrössern. Dies erreicht man über den Navigator in der Leiste oben rechts. Helligkeit/Kontrast und Farbkorrektur Damit Bilder im Internet gut wirken, muss auf ausreichenden Kontrast geachtet werden. Man klickt Überarbeiten Autokontrast und Auto-Farbkorrektur oder Überarbeiten Helligkeit/ Kontrast anpassen Helligkeit/Kontrast : Auf zwei Skalen lassen sich Helligkeit und Kontrast festlegen, was man in der Vorschau überprüfen kann. So können zu dunkle Fotos aufgehellt oder überbelichtete Fotos abgedunkelt werden. Quickpage: Bilder einsetzen, Juni 2005 6

Scharfzeichnen Bevor das Bild fürs Web gespeichert wird, kann ihm mit dem Scharfzeichnungsfilter der letzte Schliff verliehen werden. Beim 7. Menupunkt Filter findet man unter Scharfzeichnungsfilter eine kleine Auswahl: Meist reicht Konturen scharfzeichnen. Doch bei Bildern mit Text (von Plakaten oder Buchtiteln) oder bei alten Schwarz-Weiss- Portraitfotos wählt man auch Stark Scharfzeichnen. Der Scharfzeichnungsfilter wirkt gut bei Webbildern, sollte für andere Zwecke (Printmedien, Ausdrucke) jedoch vorsichtig eingesetzt werden. Bild speichern für das Internet Normalerweise speichert man Bilder unter Datei Speichern unter. Wollen Sie ein Bild fürs Internet verwenden, kommt die Funktion Für Web speichern zum Zuge: Rechts oben legt man das Format fest: JPG oder GIF ist für Webbilder gut geeignet, die Qualität lässt sich durch Prozentzahlen oder die Kategorien Niedrig Mittel Hoch Maximal festlegen. Unter dem rechten Bild ist die KB-Grösse des Bildes angegeben. Bilder für die Quickpage sollten nicht mehr als 70 KB haben, als Richtwert gilt 5-15 KB für ein normales Webbild. Wichtig: Auf dem Bildschirm oder im Internet sehen 10 KB-Bilder gut aus, bei Vergrösserungen, Ausdrucken oder für den Druck jedoch muss die Auflösung unbedingt höher sein. Die eigene Bildgalerie im Internet Einleitung Wenn Sie sich bei ihrer Quickpage anmelden, entdecken Sie in der Homepage-Verwaltung den neuen Punkt "Galerien". Über diesen Punkt können Sie beliebig viele Bildgalerien erfassen und verwalten. Sie können damit z.b. auf der MinistrantInnen-Seite unter Gruppen eine Fotoserie des letzten Mini-Events einfügen oder in der Rubrik Informationen einen Foto-Rundgang durch Ihre Kirche erstellen. Die Verwaltung der Bildgalerien ist weitgehend intuitiv. Beachten Sie einfach, dass Sie nur Bilder im JPG-Format (auch: JPEG) verwenden und diese im richtigen Farbmodus abgespeichert sind (RGB, nicht CMYK). Andernfalls werden Ihre Bilder nicht korrekt angezeigt. Wenn Sie eine Bildgalerie erstellt und die gewünschten Bilder dazu heraufgeladen haben, können Sie die Bildgalerie an einer beliebigen Stelle einer bestehenden Quickpageseite platzieren. Dazu hat jede Bildgalerie einen sogenannten Einsetz-Code (z.b. <GAL 1>). An der Stelle, wo dieser Code eingesetzt wurde, wird die Galerie dann gegen aussen für BenutzerInnen angezeigt. Schritt für Schritt zum Erfolg 1. Schritt Melden Sie sich via www.kath.ch/quickpage an (via www.kathbern.ch/quickpage läuft die Bildgalerie noch nicht fehlerfrei), um eine Galerie neu anzulegen oder eine bestehende Quickpage: Bilder einsetzen, Juni 2005 7

Galerie zu bearbeiten. Nach dem Anmelden klicken Sie wie gewohnt auf Inhalte erfassen und mutieren. In der nun folgenden Übersicht wählen Sie Neue Galerie anlegen. 2. Schritt Im nun folgenden Fenster können Sie eine Galerie anlegen. Vergeben Sie einen passenden Titel (1), beschreiben Sie eventuell die Galerie (2) und geben Sie an, wie viele Spalten also wie viele Fotos nebeneinander angezeigt werden sollen (3). Wie gross die Bilder angezeigt werden sollen, ist vorgängig bereits eingestellt. Sie können die Bilder aber auch grösser oder kleiner darstellen lassen: Thumbnail bedeutet kleines Bild oder Miniaturbild. Damit sind jene Bilder gemeint, die in der Bildgalerie zunächst neben- und untereinander dargestellt werden. Wenn Sie 2 Spalten gewählt haben, empfiehlt sich für die Thumbnails eine Breite von 400 Pixeln, bei 3 Spalten 170 Pixel. Unter Grosse Bilder können Sie angeben, wie das Bild nach seiner Vergrösserung angezeigt werden soll. Der Idealwert liegt hier bei 500-600 Pixeln. So sieht das Resultat im Internet aus: die Thumbnail-Ansicht bei 3 Spalten à 170 Pixel. Wenn der Besucher bei einem Bild auf [+] klickt, sieht er das Bild im Modus Grosses Bild. Dort wiederum kann das Bild auch in der Originalgrösse angeschaut werden. Wenn Sie alle Informationen eingefügt haben, klicken Sie auf speichern. 3. Schritt Sie haben nun eine Galerie formal angelegt. Natürlich fehlen jetzt noch die Fotos. Nach dem Speichern bei Schritt 2 können Sie im folgenden Fenster direkt auf bearbeiten klicken. Quickpage: Bilder einsetzen, Juni 2005 8

Anschliessend klicken Sie auf Zusätzliche Bilder erfassen 4. Schritt Nun können Sie die gewünschten Bilder in die Galerie einfügen. Sie können den Bildern einen Titel geben und sie näher beschreiben und auch angeben, wer die Fotos geschossen hat: Um ein Bild hinzuzufügen, klicken Sie zunächst auf Durchsuchen (1) und wählen das gewünschte Bild auf Ihrem Arbeitsplatz aus. Geben Sie diesem anschliessend einen Titel (2), beschreiben Sie es (3) und nennen Sie den Fotografen (4). Quickpage: Bilder einsetzen, Juni 2005 9

Wenn Sie alle gewünschten Bilder eingefügt und betitelt haben, dann klicken Sie ganz unten auf Speichern. Wenn Sie mehr als 10 Bilder in Ihrer Galerie verwenden möchten, speichern Sie zunächst die ersten zehn Bilder ab und klicken anschliessend erneut auf Zusätzliche Bilder erfassen. Vorsicht: Wenn die Originalbilder sehr gross sind (über 1 MB), können Sie jeweils nur 3 bis 5 Bilder aufs Mal erfassen! Nach dem Speichern werden unten auf der Seite jene Bilder aufgeführt, die Sie der Galerie zugeteilt haben. Hier können Sie Bilder auch wieder aus der Galerie löschen. Reihenfolge der Bilder Bilder innerhalb einer Bildgalerie werden nach Namen sortiert angezeigt, und zwar nach folgender Regel: 1. Wenn Quickpage ein einheitliches Namenssystem entdeckt, versucht die Software zunächst, die Bilder numerisch zu sortieren. Wenn Ihre Galerie beispielsweise aus den Bildern Test_1 und Test_2 besteht, erscheint Test_1 vor Test_2, weil 1 die kleinere Zahl ist. 2. Erkennt Quickpage kein einheitliches Namenssystem oder keine Möglichkeit zur numerischen Ordnung, werden die Bilder lexikalisch sortiert. Ein Bild mit dem Titel DSC_302 kommt vor DSC_35, weil 302 lexikalisch vor 35 kommt (0 kommt lexikalisch vor 5). Sie haben damit die Möglichkeit, neue Bilder an jeder gewünschten Position einzufügen. Geben Sie dem Bild dazu einfach vor dem Upload den entsprechenden Namen. (1 also vor 2, a vor b usw.) 5. Schritt Wie können Sie nun eine Galerie in einer Information oder Veranstaltung einfügen? Dazu brauchen Sie den Einsetz-Code. Sie haben bei Schritt 4 schon einmal auf Speichern geklickt. Dann erscheint das Bild oben. Klicken Sie noch einmal auf Speichern. Nun wird der Einsetz-Code sichtbar. Kopieren Sie diesen, gehen Sie zurück zum Hauptmenu. Dort klicken Sie auf Bestehende Information mutieren bzw. Bestehende Veranstaltung mutieren und wählen bei derjenigen Information, in die Sie die Galerie einsetzen wollen, bearbeiten. Hier können Sie nun den Code an einer beliebigen Stelle in den Text einfügen. Quickpage: Bilder einsetzen, Juni 2005 10

Fügen Sie den Code an beliebiger Stelle im Text ein. Rechts sehen Sie ein Beispiel mit einer Information. Fügen Sie den Einsetz-Code am Anfang, am Schluss oder im Text selber ein. Das Gleiche Vorgehen wenden Sie auch bei der Erfassung einer Veranstaltung an. Tipp: Sie können den Einsetz-Code auch in den Kurzbeschrieb Ihrer Website einfügen oder bei Übersichtstexten (Kontakt, Veranstaltungen) etc. Quickpage: Bilder einsetzen, Juni 2005 11

6. Schritt Nun können Sie die Resultate auf ihrer Homepage ansehen und gegebenenfalls Veränderungen vornehmen. Kontakt Haben Sie Fragen, Feedback oder Verbesserungsvorschläge zu QuickPage, melden Sie sich bitte bei Remigius Wagner oder Annina Schneller: EG Internet kathbern.ch Postfach 7662, 3001 Bern Tel.: 031/ 306 06 41, Fax: 031/ 306 06 09 E-Mail-Adressen: remigius.wagner@kathbern.ch, annina.schneller@kathbern.ch Quickpage: Bilder einsetzen, Juni 2005 12