Bildbearbeitung

Das Thema Bildbearbeitung kann hier nicht in seiner Gänze behandelt werden. Aber wir wollen Ihnen ein paar Grundlagen und Hilfsmittel in die Hand geben, so dass sie in relativ kurzer Zeit brauchbare Ergebnisse erzielen können.

Als industrieller Standard in der Bildbearbeitung hat sich in den letzten Jahren die Software Photoshop der Firma Adobe herausgestellt. Eine kostenlose, aber ebenfalls sehr umfangreiche Alternative bietet die Software Gimp. Ohne Vorkenntnisse sind aber beide Programme nicht einfach zu bedienen.

Sie können aber auch ein online Bildbearbeitungsprogramm nutzen, wenn Sie nicht extra ein eigenständiges Programm auf Ihrem Rechner installieren möchten. Die Seite pixlr.com bietet mit Ihrem pixlr Photo Editor eine Möglichkeit, Bilder schnell online zu bearbeiten. Das Design und die Handhabe ist dabei an Photoshop angelehnt und es stehen unterschiedliche Sprachversionen zur Verfügung.

Eine einfachere Variante stellt der pixlr Express Editor dar, der vor allem im Aufbau und der Bedienung einfacher gehalten ist. Einsteiger werden sich vermutlich eher in dieser Version zurechtfinden und leichter erste Ergebnisse erzielen können.

Bildausschnitte

Bildausschnitt aus einem Bild mit Tulpen
Bildausschnitt

Oft werden Sie z.B. für einen Teaser oder für den Headerbereich ein Bild mit bestimmten Maßen benötigen. Die entsprechende Vorlage liegt bereit, muss aber noch zurecht geschnitten werden. Hierfür eignet sich dann der oben bereits erwähnte Express Editor, sofern kein Bildbearbeitungsprogramm installiert ist. Im Folgenden wird stichpunktartig beschrieben wie Sie aus einem Vorlagenbild einen Ausschnitt mit den gewünschten Abmessungen erhalten.

  1. pixlr Express Editor öffnen, auf "Browse" klicken und das Vorlagenbild von Ihrem PC auswählen
  2. unten auf "Adjustment" klicken und im neuen Menü darüber auf "Crop" klicken
  3. die Variante "X:Y" wählen und bei "Width" (Breite) und "Heigth" (Höhe) die gewünschten Maße eintragen
  4. die helle Auswählfläche mit der Maus über den gewünschten Bildausschnitt ziehen
  5. unten auf "Apply" klicken
  6. oben rechts auf "Save" klicken
  7. evtl. neuen Dateinamen angeben und nochmals auf "Save" klicken
  8. gewünschten Ordner auf Ihrem PC auswählen und Datei abspeichern -> Fertig

Die idealen Abmessungen z.B. für ein Teaserbild finden Sie hier Anleitung: Teaser erstellen. Die Maße für ein Headerbild sind meist ähnlich. Allgemein lässt sich sagen, dass ein Bild welches, über die gesamte Breite der Homepage gehen soll, mindestens eine Breite von 960 Pixeln aufweisen sollte. Die Höhe kann individuell, je nach Anwendungsfall variieren.

Transparente Grafiken

Transparente Hintergründe in Grafiken sind ein gute Möglichkeit ein seperates Logo in ein Headerbild zu integrieren.

Leider ist es nicht bei allen Bildern, bzw. nur mit größerem Aufwand, möglich, transparente Komponenten einzufügen. Am besten geeignet sind Bilder, die eine klare Abgrenzung zum Hintergrund (oder den Bereichen, die transparent werden sollen) aufweisen. Bei dem unten aufgeführten Beispielbild war der Hintergrund weiß, da dies aber hier nicht zu erkennen gewesen wäre, wurde der Hintergrund der Einfachheit halber blau gefärbt. Die folgenden Schritte beschreiben, wie mit Hilfe des Photo Editors der blaue Hintergrund durch einen transparenten ersetzt wurde

  1. pixlr Photo Editor öffnen und über "open image from computer" das entsprechende Bild von Ihrem PC wählen.
  2. oben in der Menüleiste auf "Language" und dort die Sprache auf Deutsch umstellen (zur besseren Verständigung)
  3. links in der Werkzeugleiste das "Zauberstab-Werkzeug" (links, drittes von oben) wählen
  4. klicken Sie mit dem Zauberstab in den Bereich, der transparent werden soll (sollte die nun zu sehende Auswahl nicht dem erwarteten Ergebnis entsprechen, dann können Sie in der Leiste oben den Wert bei "Toleranz" variieren, und die Auswahl mit dem Zauberstab wiederholen)
  5. klicken Sie mit der rechten Maustaste auf Ihr Bild und wählen Sie "invert selection"
  6. oben in der Menüleiste auf "Bearbeiten" und dort "Kopieren" anklicken
  7. in der Menüleiste daneben auf "Datei" und dort "Neues Bild" wählen
  8. geben Sie dem Bild einen Namen und setzen Sie unten beide Haken bei "Bild aus Zwischenablage erstellen" und "Transparenz"
  9. jetzt sollten Sie Ihr Logo mit weiß-grauen Karos (was Transparenz bedeutet) im Hintergrund sehen. Klicken Sie in der Menüleiste oben auf "Datei" und dort auf "Speichern"
  10. Wählen Sie das Format PNG (da jpeg keine transparenz unterstützt) und klicken Sie auf "OK"
  11. Bild in gewünschten Ordner speichern -> Fertig
Arbeitsschritte beim erstellen eines tranparenten Hintergrunds


Hintergrund Bild mit Verlauf

Verlaufsbild im Hintergrund
Fertiger Seitenhintergrund mit Verlauf

Wenn Sie sich beim Seitenhintergrund für ein Bild oder Foto entscheiden, sieht dies im oberen Teil der Seite meist sehr gut aus. Sobald aber die Seiten länger werden, erreicht man irgendwann das Ende des Hintergrundbildes und ein "Wiederholen" (kacheln) ist mit unschönen Übergängen verbunden, da normale Bilder nicht darauf ausgelegt sind, vertikal oder horizontal wiederholt zu werden.

Die meisten Bilder lassen sich aber mit wenigen Handgriffen so umgestalten, dass sie problemlos als Hintergrundgrafik genutzt werden können. Der Trick ist, dass man einen Farbverlauf hin zur gewünschten Hintergrundfarbe an den Rändern des Bildes (bzw. nur nach unten, sofern das Bild eine ausreichende Breite besitzt) hinzufügt. Die gleiche Farbe wählt man dann als Seitenhintergrundfarbe und so geht das Bild fliessend in den Hintergrund über und man erkennt keine Ränder oder Übergänge mehr.

Um die Vorgehensweise und das Resultat zu verdeutlichen, werden im folgenden die einzelnen Schritte mit Hilfe des pixlr Photo Editors erklärt.

  1. pixlr Photo Editor öffnen und über "open image from computer" das entsprechende Bild von Ihrem PC wählen.
  2. oben in der Menüleiste auf "Language" und dort die Sprache auf Deutsch umstellen (zum besseren Verständnis)
  3. oben auf "Ebene" und dann auf "Neue Ebene" klicken
  4. Farbauswahl-Werkzeug auswählen (Taste I) und auf die gewünschte Hintergrundfarbe in Ihrem Bild klicken
  5. links in der Werkzeugleiste das "Gradient-Werkzeug" (links, sechstes von oben) wählen
  6. oben, unterhalb der Menüleiste auf die Grafik neben "Verlauf" klicken
  7. im erschienenen Fenster unten bei den Verlaufsarten in der ersten Zeile das 3. Bild anklicken
  8. im gleichen Fenster oben drüber auf Farbe klicken, und anschliessend mit der Pipette auf die gewünschte zukünftige Hintergrundfarbe in Ihrem Bild klicken. Unbedingt den 6-stelligen Farbcode (z.B. #001361) rechts notieren (wird später benötigt). Im Farbfenster "OK" klicken
  9. wieder oben unter der Menüleiste bei "Typ" linear, bei "Modus" normal wählen
  10. mit der Maus an den Rand des Bildes navigieren, an dem der Farbverlauf erzeugt werden soll (aber noch knapp im Bild bleiben)
  11. linke Maustaste klicken und gedrückt halten und die Linie gerade über ca 3/4 des Bildes ziehen. Anschliessend Maustaste loslassen
  12. Oben auf Datei und dann Speichern klicken. Als Format "PNG" wählen und den gewünschten Namen angeben und an gewünschter Stelle auf Ihrem PC abspeichern.

Sollte der bei Punkt 11 erzeugte Farbverlauf nicht zufriedenstellend sein, dann drücken Sie die Tastenkombination "Strg + Z" um den letzten Arbeitsschritt rückgängig zu machen und wiederholen Sie diesen Punkt bis der gewünschte Verlauf erstellt wurde. Die Länge der Linie gibt die Länge des Verlaufs wieder. Aber wie so oft gilt auch hier: probieren geht über studieren!

Das so erzeugte Bild mit Verlauf muss nun noch auf Ihrer Homepage über den Designeditor als Hintergrundbild integriert werden. Wählen Sie dort "Keine Wiederholung" und als Hintergrundfarbe den vorher bei Punkt 8 notierten Farbcode mit dem Sie den Verlauf erzeugt haben.

Unten sehen Sie Beispielbilder mit und ohne Verlauf. Auf der rechten Seiten können Sie das Beispielbild als Seitenhintergrund mit Verlauf sehen.

Beispielbild ohne Farbverlauf
Ausgangsbild ohne Verlauf
Beispielbild mit Farbverlauf
Bearbeitetes Bild mit Farbverlauf