Bilder bearbeiten

Ein Klick auf dieses Symbol lädt eine druckbare PDF-Datei in den Dowwnload-Bereich.

In diesem Artikel geht es um Bilder im Backoffice, Bildformate, Trennlinien, Rahmen, das Ändern von Bildunterschriften, ein Grafik-Programm und einiges mehr in Sachen Grafik. Hierzu diese Links:

1. Trennlinie mit hr

Eine dünne Trennlinie wie die obige in der Regio-Farbe (gelb) kann man recht einfach erstellen. Dafür reicht der Befehl

<hr>

"hr" steht für "horizontal row". Im Prinzip kann der Befehl in jedes Content-Element geschrieben werden, in dem auch Text steht. In einem "Artikel (Bild links)" muss dann aber der Text das Bild umfließen. Andernfalls wird nur der schmale Textteil mit der Linie versehen.
Man kann aber auch einen "Artikel (Nur Text)" anlegen und das mit einem einsamen "hr" füllen.

2. Trennlinie als Bild

Wenn die Farbe nicht gelb und//oder die Linie dicker sein soll, muss man die Trennlinie als Bild zeichnen und dann hochladen.
Der Trick an der ganzen Geschichte ist, dass ein Bild nicht mindestens 640x480 groß sein muss, sondern nur 640 Pixel breit, die Höhe ist egal.
Ein gutes, einfach zu bedienendes Programm ist das kostenlose Programm IrfanView.
Wie man das Programm herunter lädt und einrichtet, steht in in diesem Artikel, ansonsten auch, wie man Bilder auf eine Breite von 640 bringt.

Um eine dunkelblaue Linie zu zeichnen, rufe in IrfanView im Menü "Bild" den Punkt "Neues (leeres) Bild erstellen...". Der folgende (noch leere) Dialog öffnet.

Hier wurde ein Bild der Maße 640x3 eingefügt. Wenn die Linie noch etwas dicker sein soll, dann nehme eine Bildhöhe von 5.
Klicke anschließend auf "Hintergrundfarbe" und wähle eine passende Farbe aus.
Das "Kunstwerk" wird wie üblich als Bild gespeichert, z.B. als "linie_3_blau.jpg". Später beim Hochladen ins Backoffice achte darauf, dass "Kein Rahmen" angehakt wird, andernfalls rahmt ein weißes Rechteck und ein Rahmen die Linie ein. Habt ihr das vergessen, auch gut,ich zeige gleich, wie man den Rahmen nachträglich entfernen kann.
Die folgenden Bilder zeigen eine Linie ohne und eine mit Rahmen.

3. Bilder stapeln

IrfanView bietet im Bildmenü den Punkt "Panoramabild erstellen" und zwar horizontal und vertikal. Man muss aber nicht auf einem Stativ mehrere Bilder von einem Platz aufnehmen oder (vertikal) ein Hochhaus abschwenken, es reicht auch, um ganz verschiedene Bilder zu "vereinen".
Die Bilder werden einfach mit der Maus in einen Rahmen gezogen oder per Explorer geöffnet. Ein Klick auf "Bild erstellen", speichern, fertig.
Wie ein so entstandener Bilderstapel aussieht, zeigt das nebenstehende Bild.

Das Bild hatte vor dem Hochladen eine Größe von 640x1459, danach waren es 263x600 und zwar im Vollbild (Artikel "Bild groß"). Als "Bild links" schrumpft es auf 160x365.
Noch ein Versuch: Nachdem ein viertes Bild angehängt wurde, hatte das Original ein Größe von 640x1948, nach dem Hochladen waren es 197x600 im Vollbild.
Man sieht: Die Höhe wird auf 600 Pixel begrenzt, womit das Bild mit steigender Originalhöhe immer schmaler wird.
Wie sich verschiedene Bilder in ein- und zweispaltigen Seiten verhalten, zeigt dieser Artikel.

4. Bilder wechseln

Wenn auf dem Platz eines Bildes nacheinander verschiedene Bilder angezeigt werden sollen, nennt man das Wechselbilder. Es ist so eine Art Dia-Show. Das Bild links ist ein Beispiel erstell mit "Unfreeze".
Wie genau zum Erstellen von Wechselbildern vorzugehen ist, steht in diesem Artikel.
Auch dort steht, dass alle Einzelbilder gleich groß sein müssen und vom Typ GIF. Dafür braucht man zweites Programm, das hier schon genannte IrfanView.

5. Vorhandene Bilder ändern

Man kann in einem vorhandenen Bild zwar nicht den Bildinhalt ändern, aber immerhin den Namen, die Bildunterschrift und bestimmen, ob das Bild einen Rahmen hat oder nicht.

Nach einem Klick auf "Elemente" und dann auf "IMG" (siehe linkes Bild), öffnet der bekannte Dialog zum Anlegen oder der Suche von Bildern. Das sieht im oberen Teil erst einmal genau so aus als ob man ein neues Bild für ein Content-Element der Art "Artikel (Bild groß/links/rechts)" anlegt.

Der obere Teil (Neues Bild anlegen) kann genutzt werden, um Bilder hochzuladen, wenn noch gar kein Artikel dazu existiert. Später muss man dann über "Bild suchen" diese Bilder finden.

Interessanter ist das Suchen von vorhandenen Bildern. Im Erfolgsfall öffnet dann das folgende Fenster:

Der grüne Haken hat hier keine Funktion, doch dafür kann der Hammer (das T) umso mehr, wie das folgende Bild zeigt.

Ändern bzw. ergänzen lassen sich:

6. Bilder in der rechten Spalte
Die Bilder in "Artikel (Bild links/rechts)" sind ja nicht besonders groß. Doch wenn ihr die Bilder anklickt, je nach Browser auch mit einem Doppelklick, öffnet ein Fenster, das die Bilder vergrößert zeigt. Deshalb kann ein Hinweis der Art "Klickt auf die Bilder, um sie zu vergrößern" sinnvoll sein.

Wichtig: Wenn das Bild in der rechten Spalte steht, muss jedes Bild als „Artikel (Bild links)“ oder als „Artikel (Bild rechts)“, also als grüner Block, abgelegt sein. Wenn man es als „Bild groß“ ablegt, geht das zwar auch, doch dann stimmen das kleine und das große Bild nicht überein (zeigen verschiedne Ausschnitte).

7. Bildhintergrundfarbe anpassen
Es gibt mehrere Gründe, die Hintergrundfarbe eines Bildes zu ändern oder sie ganz zu entfernen.
Das Problem bei letzterem: Die Hintergrundfarbe einer Regionalseite ist nicht weiß, sondern ein ganz helles Gelb. Als Web-Farbe hat die Farbe die Nummer #FFFFFE oder dezimal 255, 255, 239.
Das muss man im Grafik-Programm einstellen und dann mit dem Farbeimer den Hintergrund füllen. Das rechte Bild zeigt das Ergebnis.
Nun hat das Füllen mit dem Farbeimer aber manchmal auch Nachteile.

So seht ihr auf der Hildesheimer Seite die drei Botschafter als runde Bilder, doch praktisch sind Bilder immer rechteckig, sie liegen also immer auf einem Rechteck, oft einem weißen.
Würde man jetzt diese weiße Fläche mit der FA-Hintergrundfarbe füllen, kann diese in das runde Bild hinein laufen, wenn der Kreis nicht ganz dicht ist.
Um das zu vermeiden, legt man ein gleich großes Rechteck an und füllt das mit der FA-Farbe.
Nun braucht man noch ein Grafik-Programme, das runde/ovale Bereiche auswählen kann, z.B. GIMP, das es hier gibt. Damit wählt man das runde/ovale Objekt aus, kopiert es in die Zwischenablage (Strg+c) und fügt es dann in das Bild mit dem Hintergrund ein (Strg+v).