Grafiken

Homepage selber erstellen

Was muss ich als Grafik umsetzen?
Genau diese Frage stellen sich viele beim Erstellen einer Homepage. Was dabei raus kommt sind meistens Websites die viel zu überladen sind mit Grafiken. Denn heutzutage kann man mit fast jedem Grafikprogramm eine Homepage erstellen. Das Ergebnis sind Seiten die nur aus Grafiken bestehen wenn man es nicht richtig macht.

Was Sie sich auf jeden Fall merken sollten ist, dass Texte gerade Linien und Rahmen nicht unbedingt Grafiken sein müssen. Diese Elemente können über HTML oder CSS erstellt werden. Die einzigen Elemente, die wirklich über Grafikdarstellung gelöst werden, sind Spiegelungen, Rundungen, Verläufe, außergewöhnliche Buttons und Schatteneffekte. Wenn Sie ihr Layout erstellt haben, sollten Sie sich, bevor Sie anfangen es in HTML zu schreiben, überlegen welche Elemente Sie wirklich als Grafik benötigen.

Wenn Sie das wissen fangen Sie an und zerlegen das Layout in seine einzelnen Elemente. Wenn Sie dass nicht machen und das komplette Layout als Grafik speichern haben Sie vielleicht eine schön gestaltete Website aber unnötig große Ladezeiten. Gehen Sie bewusst an die Sache und teilen Sie ihr Layout auf in z.B. Head, Content, Navigation usw.

Eine Grafik sollte bei einer Übertragungsrate von 128 kbit/s nicht länger als 20 Sekunden beanspruchen. Man kann natürlich sagen, ja gut aber ich will ja auch die beste Qualität haben auf meiner Website. Wenn Sie mit so einer Einstellung eine Website erstellen wollen, dann müssen Sie entweder wirklich berühmt sein und jeder ihrer Besucher nimmt die langen Ladezeiten in kauf oder Sie legen keinen Wert darauf dass ihre Seite oft angeschaut wird. Denn wenn Sie einmal von sich selber ausgehen, warten Sie bei einer Unbekannten Seite 30-50 Sekunden ab damit sich diese vollständig aufgebaut hat nur um an Informationen zu kommen wie z.B. Kontaktdaten?

Deswegen legen Sie ihr Layout an und überlegen Sie schon während der Erstellung wo Sie Grafiken einsetzen und wo nicht. Wenn Sie dann Grafiken einsetzen, optimieren Sie diese für das Web, damit ihre Benutzer auch Spaß haben beim Durchstöbern Ihrer Seite.

Für Adobe Photoshop Nutzer heißt das „Für Web und Geräte speichern“.

JPG, GIF oder doch PNG?
Jetzt weiß man welche Elemente man als Grafiken benutzen will doch welche Formate soll man da benutzen? Hier sollte man nach dem Grundsatz gehen JPG für Bilder, GIF für Text und PNG hm für was soll man das verwenden? PNG ist eigentlich der Nachfolger vom GIF Format nur das es keine Animationen speichern kann. Alle heutigen Webbrowser unterstützen eigentlich das PNG Format. Deswegen nehmen Sie ruhig das PNG Format wenn Sie eine Grafik mit Transparenz haben oder Grafiken mit Schriftzügen. Jedoch sollten Sie hier auch wieder auf die Datengröße achten manchmal muss es eben doch ein GIF sein. Ich gehe eigentlich immer so vor dass ich schaue wie groß meine Grafik ist unter den verschiedenen Formaten und ob mir das von der Qualität ausreicht. Einzig bei Bildern verwende ich ausschließlich JPG weil hier die Kompression und die Farbdarstellung am besten ist. Bei Grafik Elementen wie Head einer Homepage wäge ich ab zwischen sauberer Darstellung mit guter Transparenz Darstellung (PNG 24) oder kleinerer Datenrate und etwas gröberer Transparenz (PNG 8; GIF).

Anhang zu diesem Thema:
-PNG-Format