Bilder ans Design anpassen

Wenn ein einheitliches Design gewünscht ist, können Bilder, vor allem Fotos, zum Problem werden. Die verschiedenen Tricks können jeweils meist nur bei einem bestimmten Typ von Bildern angewandt werden.

Fotos:

Sollen Fotos in die Webseite integriert werden, kann man dies mit einem einfachen (zum Beispiel schwarzen) Rahmen tun. Besser ist allerdings einen Rahmen zu verwenden, der bereits dem Design entspricht.
ohne Rahmen einfach, schwarz designvoll
Wenn der selbe Rahmen für jedes Bild auf der Webseite angewandt werden soll, kann man dies im -Bereich der HTML-Datei oder in einer separaten CSS-Datei definieren.
<head>-Bereich CSS
in der HTML-Datei:
        <html>
        <head>

        <style type="text/css">

                img{
                        border: 1px black solid;
                }

        </style>

        </head>
        <body>

        ...

        </body>
        </html>
in der HTML-Datei:
        <html>
        <head>

        <link rel=stylesheet type="text/css" href="style.css">

        </head>
        <body>

        ...

        </body>
        </html>

in der CSS-Datei:
        img{
                border: 1px black solid;
        }

Rasterbilder mit einfarbigem Hintergrund

Wenn ein Rasterbild mit einer einheitlichen Hintergrundsfarbe vorliegen sollte, kann man das ausnutzen und diese auf transparent schalten.
einfarbiger Hintergrund transparenter Hintergrund
Wenn man noch nicht erfahren genug im Umgang mit seinem Grafikprogramm ist, entstehen bei diesem Vorgehen Übergangsfehler:
Hier hilft es oft, wenn man die Hintergrundsfarbe in einem hoch aufgelösten Bild entfernt und anschließend das Bild verkleiner.

Vektorgrafiken:

Vektorgrafiken lassen sich manchmal besonderst schön in ein Design anpassen, da es bei manchen möglich ist, den Hintergrund transparent zu machen. Vektorgrafiken haben außerdem nicht den unschönen Übergang wie bei Rasterbildern.
ursprünglicher Hintergrund transparenter Hintergrund

Bild im Hintergrund:

Soll ein Bild im Hintergrund angezeigt werden, kann man neben den oben erwähnten Tricks noch eine halbtransparente Ebene über das Bild legen. Die Ebene sollte die selbe Farbe haben, wie der Hintergrund der Webseite. Dann ist vorallem Schrift besser lesbar.
ohne Ebene mit Ebene


Tipp: Homepage Counter / Webdesign-Dresden.de Portal / Webdesign