Homepagelayout Mit Adobe Photoshop Erstellen.

Hallo

In diesen Tutroial möchte ich euch zeigen wie Ihr ein Homepagelayout mit Adobe Photoshop und Adobe ImageReady (ein Teilprogramm von Adobe Photohop) erstellt.

Ich habe dieses Tutorial in folgende Bereich aufgeteilt:

1. Layout mit Adobe Photoshop erstellen
2. Das fertige Layout mit Adobe ImageReady Silicen
3. die Index-Seite erstellen

Was Ihr benötigt um das ganze zu erstellen:

1. Adobe Photoshop (ich benutze in diesem Tutorial Adobe Photoshop CS2, es kann während der Arbeit passieren, das vielleicht die befehle anders heißen)
2. Etwas Zeit, habe für das erstellen etwa 1h gebraucht, je nach Übung kann es etwas schneller gehen.
3. Spaß und Interesse mit dem Grafikprogramm Photoshop zuarbeiten und etwas dabei zulernen

So wird das ganze am Ende dann aussehen:

Na dann wollen wir mal mit dem Schritt 1 - Das Layout mit Adobe Photoshop erstellen anfangen. Wichtig ist noch, das Ihr regelmäßig Abspeichert, denn es gibt nichts Ärgerlicheres, wenn eure Arbeite durch ein Systemabsturz vernichtet wird.

1. Layout mit Adobe Photoshop erstellen

Zuerst öffnen wir Adobe Photoshop und erstellen ein neues Dokument mit den Maßen 955 Pixel (Höhe) und 600 Pixel (Breite). Dieses Maß bedeutet eine Monitor-Auflösung von 1024x768, diese wird bei 17“ CRT und 15“ TFT Monitoren benutzt und ist sehr weit verbreitet. .Bei Name tragen wir, Homepagelayout mit Photoshop ein. Als Hintergrund benutzen wir Transparent.

Homepageloayut mit Photoshop- Start

Wählt nun das Füllwerkzeug aus und wählen die Farbecode #404040 aus und füllt damit das Bild.
Erstellt jetzt 2-3 hellgraue (mit dem Farbcode #b4b4b4) Rechtecke mit dem Rechteckwerkzeug. Die erste Box die Ihr erstellt sollte recht groß werden denn das wird die Box, wo dann später euer Text stehen wird. Die 2. kleinere Box wird dann die Navigationsschaltflächen beinhalten. Die 3. Box habe ich nahtlos an die Box-2 anheftet, dort kann man dann später den Counter und diverse Zertifikate eintragen.

Informationsboxen

Um das ganze zu verschönern machen wir noch einen Rahmen drum. Diesen rahmen erstellt man ganz einfach, indem man die eben gezeichnete Box-1 dupliziert und mit dem Zauberstab das ganze auswählt. Auf Auswahl verändern -> Auswahl abrunden, dort trägt man den Wert, 10 ein. Nun geht man noch einmal auf, Auswahl -> wählt aber jetzt Auswahl verkleinern aus. Dort trägt man den Wert 15 ein. Abschließend drückt man die Entfernen Taste.

Jetzt per Rechtsklick öffnet man auf der Ebene, die Fülloptionen-Box. Und wählt als erstes den Reiter, Schlagschatten aus. Dort gibt man im Bereich Struktur, Distanz: 0 Px ein, bei Überfüllen:10% und bei Größe: 15 Px ein

Nun in den Reiter Schein nach außen wechseln, bei Struktur, klickt man auf das kleine Gelbe Kästchen und gibt bei Farbcode, den Code: e9e9e9 ein. Die restlichen Einträge verbleiben so.

Abschließend wählt man den Reiter, Farbüberlagerung aus. Dort klickt man auf das Rote Kästchen und gibt bei Farbcode, den Code: e9e9e9 ein.

Nun richtet den erstellten Rahmen, an der großen hellgrauen (Contentbox) Box aus. Um das bei der Navigationsbox und der Informationsbox zu wiederholen, dupliziert Ihr jeweils immer den ersten Rahmen.
Um wie bei meinem Layout den Überlauf der Navibox und der Infobox hinzubekommen, bedarf es wenig aufwand. Löscht beim Rahmen der Navibox den Ebenstil. Diesen Schritt macht Ihr auch bei der Infobox, vorher müsst Ihr jedoch den Ebenstil speichern, das macht Ihr über den gleichnamigen Eintrag. Schiebt gegebenenfalls die beiden Boxen so weit an einander damit sie schon jetzt wie aus einem Guss sind. Markiert nun beide Ebenen und klickt per Rechtsklick auf eine Ebene reduzieren. Nun müsst Ihr noch den Ebenstil einfügen. Das war’s schon sieht es genauso aus wie die Contentbox ist dafür aber wie aus einem Guss.

Rahmen und Hintergrund

Jetzt habt Ihr eigentlich schon das schwerste im 1. Teil gemeistert. Jetzt widmen wir uns der Verschönerung der Seite.
Wer schon ein eigenes Logo hat kann das jetzt hier mit einbringen. Wer noch keins hat, kann auch ein Bild oder ähnliches benutzen. Fügt nun diese Grafik ein und passt die Größe so an das es gut, in die obere linke Ecke passt. Nun könnt Ihr noch einen kleinen Text einbauen. Zum Beispiel, „Das ist die Homepage von...“ Benutzt dafür am besten eine andere Schriftart oder ladet euch eine der unzähligen freien Schriftarten herunter. Um das ganze noch zu veredeln benutzt Ihr wieder, die Fülloptionen. Dort kann ich euch dies mal aber keine Vorlage geben da das zum einem vom Geschmack des Erstellers und vom Style der verwendeten Schrift abhängt.

Das ganze kann zB so aussehen

Logo und kurzer Text

Das ganze kann man noch etwas Gliedern, indem man das ganze mit Vertikalen Linien versieht. Benutzt dazu das, Linienzeichner-Werkzeug. Und zeichnet eine Linie, in etwa so groß wie euer Logo ist. Dupliziert nun diese Eben so oft, das die Linien in etwa immer den gleichen Abstand zu einander haben. Wer das nicht richtig hinbekommt, oder sich diese Arbeit erleichtern möchte. Kann hier noch mal eine Linie zeichnen, diese aber in Horizontaler Ausrichtung. Schiebt nun diese Linie an eine Vertikale und nehmt eine 2. Vertikale Linie und setzt diese an das andere Ende der Horizontalen Linie. Wiederholt diese Schritte dann mehrfach. Zum Schluss kann man dann die Horizontale-Linie wieder löschen.
Da die Linien-Enden so hart abgetrennt wirken, runden wir das ganze etwas ab. Indem wir ganz einfach mit dem, Radiergummi. Wählt dann einen Durchmesser von ca. 25-30 Px und einen Rund-Weichen Pinsel. Damit könnt Ihr dann jeweils die Enden der Linien löschen.

Das ganze könnte dann in etwa so aussehen:

Vertikale Linien

Mit dem Schritt, Vertikale Linien, habt Ihr eigentlich auch den Schritt 1. dieses Tutorials fast abgeschlossen, denn das Layout steht jetzt. Es fehlt aber noch ein ganz wichtiger Punkt für das fertige Layout. Die Navigationsbuttons.

Wie man diese erstellt zeige ich euch jetzt.

Erstellt ein Recheck, mit dem Rechteck-Zeichner Werkzeug. Mit dem Polygonlasso erstellt Ihr nun an einem von beiden Enden des Rechtecks, ein Dreieck und drückt die Entf-Taste um dieses Dreieck zulöschen. Markiert nun ein Viereck, wo das Stückchen Dreieck und etwas vom Button zusehen ist drückt nun die Taste STRG+C um diesen Bereich zukopieren. Drückt darauf dann die Taste, STRG+V um den eben kopierten Bereich wieder einzufügen. Schiebt das Dreieck an das andere Ende des Rechtecks und Reduziert die beiden Ebenen auf eine Ebene.

Das ganze sollte in etwa so aussehen:

Navigations-Schaltfläche

Nun runden wir die Ecken etwas mit dem Radiergummi ab, dabei benutzen wir die gleichen Einstellungen wie vor hin, aber ändern die Größe des Pinsels auf 150 Px.. Nun nehmt Ihr den Pinsel und schiebt ihn soweit über den Button bis der Kreis des Pinsels, etwas den Button überdeckt.
Auf dem Bild ist, links abgerundet und rechts sieht man wie weit der Pinsel gesetzt werden muss.

Das sollte jetzt ungefähr so aussehen:

Navigations-Schaltfläche Abrunden

Der Button sieht jetzt aber noch etwas Trostlos aus, deshalb wenden wir auch hier ein Ebenenstil bzw. Fülloption an. Mein Vorschlag dafür wäre dieser Button.

Navigationsbutton mit Ebenstil

Wenn Ihr diesen Button haben möchtet, müsst Ihr folgende Ebenfülloptionen auswählen.

Den Reiter Schlagschatten, im Bereich Struktur. Distanz: 0 Px, Überfüllen: 5% und bei Größe: 10Px. Alle anderen Einträge bleiben bestehen.
Nun wechseln wir zum Reiter, Schatten nach Innen. Unter Struktur, geben wir bei Distanz: 5 Px ein, bei Überfüllen 0% und bei Größe wieder 0 Px. Alles andere bleibt unverändert.

Abschließend wechseln wir noch zum Reiter, Abgeflachte Kante und Relief. Dort geben wir unter Struktur, Größe: 10 Px und bei Weichzeichnen: 10Px ein.

Damit habt Ihr den Ausgangsbutton erstellt. Nun müsst Ihr nur noch die Buttons jeweils immer duplizieren und sie dann in der Navigationsbox ausrichten.
Nun müsst Ihr noch jeweils die Buttons beschriften. Dafür wählt Ihr das Text-Werkzeug aus. Schreibt dann jeweils immer einzeln die Seiten Namen auf, z.B. Impressum. Gestalten könnt Ihr das ganze wieder mit einem Ebenstil bzw. Fülloption und einer Schriftart. Benutzt dort aber eine die gut ins Konzept passt und gut lesbar ist.

Dann könnte das ganze so hier aussehen:

Homepaglayout mit Navigations buttons

Nun habt Ihr den ersten Teil aus diesem Tutorial geschafft. Ihr habt euer eigenes Homepagelayout mit Adobe Photoshop erstellt.
Ich empfehle euch das ganze jetzt noch etwas Ordentlich zumachen. Das geht ganz einfach, in dem Ihr, eine neue Gruppe erstellt. In meinem Bsp. Waren es insgesamt 2 Gruppen. Die erste Gruppe war, Homepagelayout, wo alle Bilder drin waren außer der Bildhintergrund, und die Navigationsbuttons, diese haben ihre eigene Gruppe bekommen. Außerdem ist es hilfreich, wenn Ihr die einzelnen Bilder einen Aussagekräftigeren Namen, als die Standardbezeichnung gebt. Zudem solltet Ihr auch jetzt das ganze nochmals Abspeichern.

Somit können wir jetzt gleich zum Schritt 2 des Tutorials, Das fertige Layout mit Adobe ImageReady Silicen wechseln.

2. Das fertige Layout mit Adobe ImageReady Silicen

Um das ganze in ImageReady Silicen zukönnen, müssen wir erst mal ImageReady Starten, das geht ganz einfach, denn IimageReady hat schon eine Verknüpfung in Adobe Photoshop.

Adobe ImageReady von Adobe Photoshop aus Starten

Je nach Rechner Geschwindigkeit kann das Starten und das Import- bzw. Export der Datei etwas dauern. Wenn Ihr dann i ImageReady drin seit, sieht eure Homepage vor erst mal so aus.

Homepagelayout ohne Silices

Nun wählt Ihr das Silice-Werkzeug aus. Und „zerschneidet“ das Bild. Dabei kommt es drauf an, das Ihr nicht zu gründlich also, jedes Bildchen einzeln schneidet, aber auch nicht zu grob, also nur 3-4 Bereiche schneidet.
Am besten schaut Ihr euch mal dieses Bild an dort kann man das besser sehen.

Homepagelayout fertig gesilict

Hier kann man gut erkennen worauf es an kommt. Außerdem sollte man den erstellten Silices Aussagekräftige Namen geben, z.B. die große hellgraue Fläche wo das Copyright zusehen ist, habe ich Contentbox genannt. So macht man das dann weiter.

Hat man das gemacht, klickt man auf, Datei, Optimierte Version speichern unter und wählt ein Verzeichnis aus, in meinem Bsp. Speichere ich direkt auf das Laufwerk C ab, was aber jeden selbst überlassen ist. Bevor Ihr auf Speichern klickt, gebt Ihr den Namen index ein, damit sich das ganze dann später, einfachere bearbeiten lässt.

Nachdem das geschehen ist, ist auch Teil-2 erfolgreich absolviert worden. Beachtet aber bitte, das Ihr die eben erstellte Seite nicht, einfach so auf euren Webspace uploaden könnt. Es bedarf noch etwas Überarbeitung, des sogenannten Quellcodes der index.html-Datei. Damit beschäftigt sich der 3. und letzte Abschnitt in diesem Tutorial, die Index-Seite erstellen.

3. die Index-Seite erstellen

Im abschließenden Teil-3 bearbeiten wir den von Adobe ImageReady ausgegebenen HTML-Quellcode. Dieser ist zu Beginn, weder W3C-Zertifiziert noch irgendwie brauchbar.

Zuerst öffnen wir die Datei, index.html entweder mit einem WYSIWYG (eng. = What You See Is What You Get ; deu. = Was du siehst, ist, was du bekommst)-Editior. Damit könnt Ihr Texte, Bilder, Diagramme auf eure Homepage einbauen. Bekannte Vertreter für diese Reihe der Software sind, Adobe GoLive oder Macromedia Dreamweaver. Ebenfalls bekannt aber weniger verbreitet ist Microsoft FrontPage, womit ich euch auch diesen Abschnitt helfen werde. Für all diejenige unter euch, die sich bereits mit HTML gut auskennen, brauchen solche umfangreichen Programme nicht. Dort werden die Programme Windows Editor oder NVU von den Mozilla Entwicklern.

So nun wollen wir mal an anfangen, öffnet das Verzeichnis wo Ihr die Homepage abgespeichert habt, in meinem Bsp. war es direkt auf das Laufwerk C. Dort befinden sich zum einem der Ordner „Bilder“ dort befinden sich alle Bilddateien. Außerdem ist sollte noch die Datei index.html vorhanden sein.
Öffnet diese Datei mit einem WYSIWYG-Editor oder einem anderen einfachem Editor. In meinem Beispiel ist es Microsoft FrontPage.

Es sollte nun wie folgt bei euch auf dem Bildschirm aussehen:

index.html Datei in Microsoft FrontPage

Als erstes fügen wir in der 1. Zeile des HTML-Quellcodes ein Leerzeichen ein. Diese Zeile angewählt lassen und dort folgendes eintragen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Damit wird die Homepage W3C-Kompatibel. Danach geben wir der Seite erst mal einen richtigen Namen, z.B. „Das ist die Homepage von Max Mustermann aus Musterstadt“. Das machen wir in ganz einfach in,

Zeile: 5

Dort steht zu beginn,

<title>Homepagelayout mit Photoshop</title>

Das tauschen wir z.B. mit

<title> Das ist die Homepage von Max Mustermann aus Musterstadt</title>

aus. Als nächstes Entfernen wir, folgende Zeilen:

Zeile 9:



und

Zeile 133:



Diese beiden Zeilen, stören den weiteren Verlauf des Bearbeiten. Doch damit sind wir noch nicht fertig. Jetzt löschen wir Einträge aus der Zeile 8 und 9.

Zeile 8:

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Dort geben wir statt #FFFFF,

<body bgcolor="#FFFFFF"

den Code,

#404040

ein, damit ist der Seitenhintergrund in der gleichen Farbe wie das Homepagelayout. Dann löschen wir die Einträge:

leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
Dadurch sollte nun die Zeile 8 wie folgt aussehen:

Zeile 8:

<body bgcolor="#404040>

Nun müssen wir nur noch in der Zeile 9 folgenden Eintrag löschen

Zeile 9:

<table id="Tabelle_01" width="956" height="601" border="0" cellpadding="0" cellspacing="0">

Dort löschen wir einfach nur den Eintrag

height="601"

Somit müsste Zeile 9 wie folgt aussehen:

Zeile 9

<table id="Tabelle_01" width="956" border="0" cellpadding="0" cellspacing="0">

Somit ist eure Homepage W3C-Zertfiziert. Dadurch könnt Ihr euch auch das W3C-Zertifizierungslogo auf eure Homepage einbinden. Den entsprechenden Link dafür bekommt Ihr unter, http://validator.w3.org/ .Die Homepage sieht jetzt aber noch nicht sehr gut aus, denn das ganze wurde nach oben links in die Ecke gesteckt. Dadurch sieht die Homepage nicht gerade gut aus, das ändern wir in dem man das ganze Zentriert in der Mitte des Bildschirms präsentiert.. Das ist ganz einfach, denn man trägt nur in Zeile 9 folgenden Zusatz ein, align="center".

Zeile 9:

<table id="Tabelle_01" width="956" border="0" cellpadding="0" cellspacing="0">

Jetzt setzen wir zwischen width=“956“ und border=“0“ den Eintrag, align="center" ein. Also müsste Zeile 9 so aussehen.

Zeile 9:

<table id="Tabelle_01" width="956" align="center" border="0" cellpadding="0" cellspacing="0">

Damit ist zwar eure Homepage im W3C-Standard, doch richtig bearbeiten und nutzen lässt sie sich dadurch nicht. Das ist aber auch recht schnell behoben. In dem Ihr in die Zeile 27 und Zeile 28 wechselt.

Zeile 27:

<td colspan="2" rowspan="10">

Zeile 28:

<img src="Bilder/textbox.gif" width="634" height="347" alt=""></td>

Markiert und Schneidet nun den Bereich

"Bilder/textbox.gif" width="634" height="347" alt=""

und fügt in der Zeile 27 folgenden Zusatz ein,

Zeile 27:

background=

Dahinter setzt Ihr ohne Leerzeichen den eben Ausgeschnittenen Bereich ein. Damit sollte Zeile 27 wie folgt aussehen:
Zeile 27

<td colspan="2" rowspan="10" background="Bilder/textbox.gif" width="634" height="347" alt="">

Dadurch sollte Zeile 28 wie folgt aussehen,

Zeile 28:

<img src=></td>

Dort löscht Ihr jetzt diese Zeichen:

<img src=>

Damit sollte Zeile 28 jetzt so aussehen:

Zeile 28

</td>

Dadurch könnt Ihr jetzt Text in diesen Bereich eingeben, ohne das euer Layout zerstört wird. Diesen Schritt könnt Ihr mit Bild im HTML-Quellcode wiederholen.

Um die Navigationsbuttons Ihrer Grundaufgabe zu zuweisen, bedarf es folgenden Schritt, wechselt in die Zeile 33 und Zeile 34, das sind jetzt nur Bsp, bei den anderen Buttons klappt das genauso,

Zeile 32

<td>

Zeile 33

<img src="Bilder/home.gif" width="175" height="33" alt=""></td>

Nun geben wir den Titel und den Link des Buttons ein. Fügt in Zeile 32 eine Leerzeile ein
Und gebt dort folgendes ein:

<a title="zur Startseite" href="index.html">

Zeile 32 sollte nun so aussehen:

<td>
<a title="zur Startseite" href="index.html">

Nun tragen wir in Zeile 33 nur noch </a> ein. Das tragen wir hinter border=0"> und vor </td> ein.

Dadurch sollte Zeile 34 so aussehen

Zeile 34:

<img src="Bilder/home.gif" width="175" height="33" alt=""></a></td>

Doch jetzt befindet sich ein Rahmen um das Bild. Diesen bekommt man ganz einfach weg, in dem man in Zeile 34, den Zusatz border="0" .Dieser kommt hinter alt=""< und vor </a>

Also, müsste Zeile 34 so aussehen:

Zeile34:

<img src="Bilder/home.gif" width="175" height="33" alt="" border="0" ></a></td>

Diesen Schritt Wiederholt man dann bei jedem Button, man tauscht dabei einfach nur den Titel und den Link zur Seite aus.

Damit sind wir auch schon am Ende dieses Tutorials. Ich hoffe es hat euch Spaß gemacht und Ihr habt dabei bestimmt auch einige gelernt. Ich würde mich über euer Feedback freuen.

Ausserdem habe ich dieses sehr umfangreiche Tutorial + einigen Erläuterungen als Adobe-PDF-Datei erstellt. Diese kann man entweder mit dem Adobe Reader oder mit Foxit betrachten.

Hier ->Homepagelayout_erstellen_mit_Adobe_Photoshop.pdf<-kann man sich die PDF-Datei herunterladen.

WinFuture-Forum.de: Homepagelayout Mit Adobe Photoshop Erstellen. - WinFuture-Forum.de

Hinweis