Datum: 24. April 2009 Tipps - Kategorie Themen von Susann

Bilder auf Websites sehen besser aus, wenn sie einen feinen Rahmen haben. Vor allem wenn die Bildfarbe dem Hintergrund der Website entspricht. Oder auch wenn Sie Buch oder eine Zeitschrift mit einem weißen Einband darstellen möchten, schaut es professioneller aus wenn Sie dem Bild eine Haarlinie als Rahmen geben. Vergleichen Sie selbst die beiden Screenshots des Blogs Basicthinking die unten abgebildet sind. Jetzt können Sie natürlich grundsätzlich per CSS einem jeden Bild eine Linie geben.

img { outline:1px solid black; }

Wenn Sie jedoch nur gelegentlich Bilder einfügen macht es Sinn dem Bild in der Bildbearbeitung einen Rahmen zu geben. Im Paintshoppro geht das ganz einfach mit Rahmen hinzufügen – Sie müssen nur die Rahmenstärke angeben. Im Bildbearbeitungsprogram Fireworks zeichnen Sie ein Rechteck und geben als Füllfarbe transparent bzw keine an. Über die Eigenschaften des Rechtecks geben Sie die Höhe und Breite des Bildes an – mit einem X- und Y-Wert von 0; die Rahmen wählen Sie beliebig.

Rahmen ohne eigene Funktion
Wenn Ihre Bildbearbeitung eine solche Funktion nicht hat gehen Sie so vor: Sie vergrößern die Arbeitsfläche (oder Leinwand) Ihres Bild um jeweils 1 Pixel in jede Richtung. Also aus 70 x 60 machen Sie 72 x 62. Vergrößern Sie nicht Ihr Bild! Ihr Bild muss nun von einem transparenten Rahmen umgeben sein. Nun erzeugen Sie ein echteck in der Größe Ihres Bildes (72 x 62) und bringen diese Ebene ganz nach hinten. Eine weitere Möglichkeit ist, dass Sie ein neues Bild mit einer komplett schwarzen Farbe in der Größe 72 x 62 erzeugen und Ihr ursprüngliches Bild hier hineinkopieren.

Bild ohne Rahmen:
bs-r0-screenshot059

Bid mit einer feinen Haarlinie:
bs-r1-screenshot059

Schlagwörter: ,


Diese Artikel könnten Sie interessieren:


Tipps 3D-Bilder mit Photosynth – jetzt mit App

Auf der Website Photosynth aus Hause Microsoft können Sie coole 3D-Bilder ansehen und auch selbst erzeugen. Alles was Sie dafür brauchen sind mehrere Bilder von [...]


Tipps Google Webmaster Tools – Infos für Profis

Die Google Webmaster Tools zeigen Ihnen wie Sie Ihre Website optimieren, und die Zugriffszahlen steigern können. Sie geben Ihnen wichtige SEO-Infos zu Ihren Suchbegriffen, und [...]


Tipps WordPress Plugin – Image Size Optimizer

Der WordPress Bilderupload hat gleich mehrere Funktionen. Zum einen läd er das Bild auf den Server. Weiterhin fertigt er beim Upload von Bildern gleich mehrere [...]


Tipps WordPress Bilder optimieren – Bilderupload anpassen

Der Bilderupload mit WordPress in der Mediathek ist praktisch, komprimiert die Bilder aber nur sehr schlecht. WordPress läd Bilder auf den Server, und verkleinert sie [...]


Tipps ImLab

Dass es gute Bildbearbeitungstools jenseits von Photoshop gibt beweist das Tool ImLab. Es bietet bei Weitem nicht nur die Standardfunktionen mit denen man die Größe, [...]







Hier die Kommentare

Es gibt natürlich auch Fälle, bei denen ein Rahmen um das Bild nicht so viel Sinn macht. Man denke an transparente Grafiken, die genau darauf setzen, dass sie nicht als Grafik abgetrennt sind.
Insofern empfiehlt es sich beim Einsatz von CSS die Grafiken noch etwas gezielter anzusprechen, z.B. indem man den Wirkungsbereich auf bestimmte Bereiche begrenzt.

Ansonsten kann ich aber nur zustimmen: so ein dünner Rahmen wirkt schon chic.

Kommentar von Experimentator (http://www.blog-experiment.de) am 24.4.09, 19:34

Was meinen Sie dazu?



 

swa: Natürlich ist es sinnvoll den Speicher aufzurüsten. Dass es Geräte gibt bei denen das nicht geht ...
Timo: Ich tippe auch darauf das sich alle damit vertun!, denn eben habe ich auch die Klappe auf der Rücks ...
Metehan: Im Internet kursieren so viele Meinungen, man solle bei dem Gerät den Speicher auf 2 GB aufrüsten. ...
FibreFoX: Das ist ein toller Hinweis, um die Performance ein wenig zu optimieren, allerdings hat diese Optimie ...
Siggi: das ist ein tolles teil. leider bekomme ich diese eingabefeld-typen nicht richtig hin. ich möchte z ...
interdoc: So etwas suche ich schon lange, da ich mich nicht an die .htaccess heran wage.
Christian: Mag schon günstig sein, aber ob mit den Komponenten wirklich jemand etwas anfangen kann ist die and ...
Übersicht Kommentare

Themen im Tipps-Archiv

Social Media

TwitterUnter Social Media fallen so bekannte Dienste wie Facebook und Twitter. Ohne Kenntnisse von HTML kann jeder Inhalte veröffentlichen und mit Freunden networken.

Firefox

FirefoxDer Firefox ist der beliebteste Browser. Für ihn, aber auch für Google Chrome, gibt es eine Menge an Addons/Erweiterungen.

Windows

Windows TippsFast jeder nutzt Windows. Mit den richtigen Tricks und Kniffen kann man sein System optimieren und beschleunigen.

Notebook, Netbook Laptop

Notebook, Laptop-TestDie Schwächen von Notebooks und Netbooks sind meist versteckt. Das gilt auch für PCs und Tablet-PCs.

Webdesign, Server & SEO

Wer im Internet Inhalte veröffentlichen möchte, kommt an einem CMS wie Wordpress und einem eigenen Server nicht herum. Fürs eigene Business sollte man SEO-Grundkenntnisse besitzen.

Software, Downloads & Sonstiges

Zu den beliebtesten Themen zählt kostenlose Software und Downloads aller Art.
Das Tipps-Archiv
 36q, 0,450Sek,