Grafische Homepage erstellen

 

Hallo Fotofreunde und Webmaster!

Heute möchte ich euch zeigen, wie ihr ganz einfach mit Photoshop eine Homepage erstellen könnt. Gut nicht ganz eine Homepage, aber das fertige grafische Layout, in etwa so wie meine Webseite, ein Bild, in dem bestimmte Bereiche Funktionen haben, andere aber nicht.

Hierzu gestalten wir erstmal ein Layout, also das Aussehen unserer Homepage. Ich habe mich für den Workshop für eine einfache grafische Homepage entschieden, mit einem Balken (evtl. mit Banner) oben, und der Navigation klassisch links.

So in etwa:

Wolltet ihr nicht immerschon eine Homepage aus Plüsch? :) (Vielleicht zeig ich die Technik auch noch in einem Quicktipp) Also, das nur als Beispiel, links die vier Felder sollen die Navigationslinks sein, z.B. Home, Galerie, Gästebuch usw. Und oben ist Platz für ein Banner, oder ein Logo.

Jetzt nehmen wir uns das Slice-Werkzeug:
Das sieht nicht nur aus wie ein Skalpell, das funktioniert auch wie eins... jetzt teilen wir das Bild in etwa so in einzelne Slices (einfach reinklicken und aufziehen (wie mit dem Auswahlwerkzeug)):

(Anklicken für große Version)
   

Warum hab ich das jetzt genau so aufgeteilt?

- Links die Schaltflächen sollen später die Links bekommen, damit sie auch als Schaltflächen funktionieren, deshalb bekommt jede einen Slice der sie sehr genau umschließt
- Oben das Banner habe ich als einen Slice, so kann man es später leicht austauschen
- Links vom Banner, der fast quadratische Slice: nun, hier könnte man noch ein Logo platzieren
- die ganze weiße Fläche unten rechts: also die kann man dann leichter raus nehmen, und durch Text ersetzen

Wenn wir das getan haben, und mit allen Slices zufrieden sind, dann klicken wir auf "Fürs Web Speichern":

Im folgenden Einstellfenster, bekommen wir die Dateigröße nach dem Speichern angezeigt (roter Kreis).

Wenn wir das Slice-Auswahlwerkzeug (rotes Quadrat) mit gedrückter UMSCHALT-Taste benutzen können wir mehrere oder alle Slices markieren, um die Gesamtgröße der einzelnen Slices zu sehen. Mit dem Qualitätsregler spielen wir jetzt so lange rum, bis uns ein geeigneter Kompromiss zwischen Bildqualität und Dateugröße (Ladezeit) gelungen ist. und dann klicken wir auf Speichern.


(Anklicken für große Version)
Jetzt fordert uns das Programm auf, einen Ort zum Speichern anzugeben. Hier ist es vor Allem wichtig, bei dem Punkt Dateityp "HTML und Bilder" zu wählen. Sonst speichert er nur die Bilder, nur die HTML oder teilweise nur den markierten Slice (Punkt ganz unten "Alle Slices").
   

Wenn wir das jetzt getan haben, so speichert Photoshop im angegebenen Ordner zwei Sachen. Einmal die von euch benannte html, am besten index.html, wenn es gleich die Startseite wird, und einen Ordner der "Bilder" heisst. in dem stecken die ganzen Slices.

Die HTML-Datei besteht nur aus einer Tabelle, in der die Position der Bilder steht. Noch keine Links oder anderer Text.

Diese HTML-Datei könnt ihr nun in euren Web-Editor laden, oder wenn ihr HTML fließend sprecht in den Windows-Editor :). Und dort Links hinzufügen, die weiße Fläche löschen und Text einfügen, Mouseovereffekte mit den Schaltflächen veranstalten, und was man noch so alles machen kann...

Ich zeige euch hier nur das Grafik-Gerüst, den Rest müsst ihr schon selber machen, wir sind hier bei der EBV, nicht im Webdesignkurs :)

Wenn ihr keine Ahnung von HTML habt, so könnt ihr die Seite auch mit einem sogenannten WYSIWYG-Editor bearbeiten (WYSIWYG = What You See Is What You Get, Was du siehst wirst du bekommen). Das sind HTML-Editoren die mehr wie ein Textverarbeitungsprogramm arbeiten, und ganze Webprojekte ausgeben, oder einzelne HTML's. Da könnt ihr wie in Word Bilder einfügen, Texte schreiben, und Links setzen, ohne viel HTML können zu müssen. Von Adobe gibt es da den Dreamweaver, von Microsoft gibts Frontpage, und noch eine Menge mehr.

Wenn ihr HTML könnt, ein bisschen zumindest, euch fehlen aber noch ein paar Kniffe, oder ihr wollt es jetzt endlich lernen, so schaut euch SELFHTML an, das findet ihr hier:

 

Viel Spass beim Nachmachen!