Huhu,
da ich gerade nichts besseres zutun habe,
dachte ich mir, ich mache ein Tutorial für Anfänger.
Es wird zwar nichts beeindruckendes herauskommen,
aber für den "Laien" wird es reichen ;)
Voraussetzungen:
- Grundkentnisse mit Photoshop
- Grundkenntnisse mit Dreamweaver
- HTML Kentnisse
- Iframe Kentnisse
Benötigte Programme:
- Adobe Photoshop CSx
- Adobe Dreamweaver x
Die Version ist relativ banane...
Was wird in diesem Tutorial geschehen?
In diesem Tutorial werde ich auf das Designen eingehen,
in Part2 wirds ans Coden gehen ;)
Ich weiß dass das dann eigentlich zu e*pvp Coders gehört,
aber ich möchte die beiden Tutorials gerne in eine Sektion quetschen.
So...
Dann fangen wir mal an :)
---------------------------------------------------------------------
Bevor ich jetzt mit dem Tutorial beginne, möchte ich darauf hinweißen
das dieses Turoial für Anfänger gedacht ist!
Es soll nur eine einfache Homepage werden, ohne viel Schnickschnack.
---------------------------------------------------------------------
Ich werde natürlich jeden Schritt genau dokumentieren.
Natürlich kann ich nicht alles in Bildern festhalten,
aber ich werde zwischendurch Bilder posten.
1. Der Anfang
Wir öffnen Photoshop und erstellen ein neues Dokument mit den Maßen
1024*768, und nennen es "index"
2. Hintergrundfarbe.
Diese werdet ihr im laufe des Tutorials noch ändern können,
und ich nehme in diesem Fall die Farbe blau.
Ihr könnt die Ebene natürlich umbenenne, damit ihr einen besseren Überblick habt.
3. Rechteckwerkzeug.
(Standartgemäß unter dem Textsymbol)
Zieht einen Kasten in die Mitte eures Hintergrundes.
(Am besten eine hellere Farbe, da die HP ja ins Auge stechen soll)
Bild:
4. Speichern
Alles in einer PSD abspeichern.
Am Besten einen komplett neuen Ordner für euer Projekt erstellen.
5. Der Header.
Natürlich brauch jede Homepage einen Header.
Ich würde euch empfehlen einen Header von diese Page zu holen:
Ich benutze in meinem Fall aber einen eigenen Header.
Wenn ihr euch einen netten Header ausgesucht habt,
dann speichert ihn auf eurer Festplatte.
Öffnet ihn mit Photoshop.
Strg + A (Alles auswählen); Strg + C (Kopieren); Strg + D (Auswahl aufheben)
Nun könnt ihr eueren Header schließen.
Geht nun wieder zu eurer Homepage, und fügt den Header per
Strg + V (einfügen) ein.
Natürlich passt er nicht auf die Homepage,
da diese viel grüßer ist. Drückt hierzu Strg + T (transformieren),
um die Grafik eurer HP anzupassen.
Sollte sie verschwommen sein, sucht euch eine größere aus.
Danach klickt ihr auf "Transformation anweden".
Bild:
6. Zwischenspeichern (Strg+ S)
7. Trennlinien.
Da unser Header im Moment in der "Luft" schweb,
sollten wir ihm noch Trennlinien verpassen um ihm einen festen Halt zu geben.
Dazu geht ihr wieder auf das Rechteckwerkzeug.
Nehmt aber eine Farbe aus dem Header um die Trennlinien zu zeichnen.
Zieht die Trennlinie direkt unter dem Header.
Sollte sie nicht passen, dann transformiert sie mit STRG + T.
Fals sie nicht richtig sitzt, dann nehmt das Verschieben - Werkzeug (V).
Nun könnt ihr die Ebene rastern.
Bild:
8. Die Trennlinie verschönern.
Da unsere Trennlinie im Moment etwas makaber aussieht,
wollen wir sie noch verschönern.
Dazu macht ihr einen Rechtsklick auf die Ebene -> Fülloptionen.
Hier könnt ihr alles anpassen wie ihr wollt.
In meinem Fall habe ich diese Optionen verwendet:
Bild:
Wenn ihr Zeit|Lust habt, könnt ihr anstatt den Effekten auch Brushes, ect. verwenden.
Da ich diese Zeit nicht habe, gebe ich mich mit den Effekten zufrieden.
9. Die Trennlinie oben
Da wir unsere 1. Trennlinie jetzt unten haben, wollen wir oben natürlich auch eine.
Dazu machen wir einen Rechtsklick auf die 1. und kopieren sie. (Strg + J)
Nun verschieben wir die 2. Trennlinie mit dem Verschiebenwerkzeug (v) nach Oben.
Bild:
10. Die Trennlinie ganz unten
Ganz unten ist auch keine Trennlinie.
Wiederholt Schritt 9, auser das ihr die Trennlinie nun ganz nach unten verschiebt.
11. Zwischenspeichern und alle drei Trennlinien rastern.
12. Das Navigationsmenü
Natürlich brauch jede Homepage ein Navigationsmenü.
Hierzu kopieren wir die Trennline nocheinmal!
Und fügen sie wie auf dem Bild zu sehen ein.
Bild:
Natürlich brauchen wir jetzt auch Buttons.
Dazu nehmt ihr einfach das Textwerkzeug, und schreibt euren gewünschten Text
zwischen Trennlinie 1 und Trennlinie 4.
Text rastern.
Nun könnt ihr auch diesen Text mit Fülloptionen füttern.
Dies ist euch überlassen, und ich werde auch nicht darauf eingehen.
13. Context - Menü
Wer nicht weiß was ein Contextmenü ist, der kann an dieser Stelle abbrechen :p
Ihr zieht euer Contextmenü dort hin wo ihr es wollt.
In meinem Fall ist es die rechte Seite.
Bild:
Da dies nun unsere Homepage ist, könnt ihr einige Änderungen vornehmen.
Habe meins noch etwas verändet:
Sieht zwar genauso scheiße aus wie vorher, aber banane :)
14. Zwischenspeichern & als .PNG speichern.
Danach die PSD - Datei schließen.
15. Slicen
Wer nicht weiß was slicen ist, der kann hier ebenfals wegklicken.
Gewisse Grundkentnisse sollten vorhanden sein.
Wenn ihr nicht wisst was es ist. (Google ist dein Freund ;))
Bzw:
Gesliced wird:
- Der Context Bereich
- Der Header
- Die Navigationsleiste
- Was ihr wollt
Nach dem Slicen sollte es so aussehen:
Nun geht ihr auf "Datei" - "Für Web und Geräte speichern"
- "Dateityp: PNG" - "Alle Dateien (html und Bilder)"
Nun könnt ihr Photoshop schließen.
Wenn ihr jetzt auf index.html klickt, öffnet sich Firefox, und ihr seht eure Homepage.
Leider ist noch nichts verlinkt, ect.
Dies wird dann im 2. Tutorial erklärt.
P.S: Dieses Tutorial hat sehr viel Zeit gekostet,
fals jemand jetzt kommt mit "deine Arbeit ist scheiße",
dann unterlasst bitte solche Kommentare.
Ich weiß selbst das es nichts geworden ist, aber es geht ja
um die Grundlage. Wenn ihr es besser könnt, dann macht doch eure
eigene Homepage und zeigt sie hier im Thread :)
Grüßchen - Joshi, [Only registered and activated users can see links. Click Here To Register...]
da ich gerade nichts besseres zutun habe,
dachte ich mir, ich mache ein Tutorial für Anfänger.
Es wird zwar nichts beeindruckendes herauskommen,
aber für den "Laien" wird es reichen ;)
Voraussetzungen:
- Grundkentnisse mit Photoshop
- Grundkenntnisse mit Dreamweaver
- HTML Kentnisse
- Iframe Kentnisse
Benötigte Programme:
- Adobe Photoshop CSx
- Adobe Dreamweaver x
Die Version ist relativ banane...
Was wird in diesem Tutorial geschehen?
In diesem Tutorial werde ich auf das Designen eingehen,
in Part2 wirds ans Coden gehen ;)
Ich weiß dass das dann eigentlich zu e*pvp Coders gehört,
aber ich möchte die beiden Tutorials gerne in eine Sektion quetschen.
So...
Dann fangen wir mal an :)
---------------------------------------------------------------------
Bevor ich jetzt mit dem Tutorial beginne, möchte ich darauf hinweißen
das dieses Turoial für Anfänger gedacht ist!
Es soll nur eine einfache Homepage werden, ohne viel Schnickschnack.
---------------------------------------------------------------------
Ich werde natürlich jeden Schritt genau dokumentieren.
Natürlich kann ich nicht alles in Bildern festhalten,
aber ich werde zwischendurch Bilder posten.
1. Der Anfang
Wir öffnen Photoshop und erstellen ein neues Dokument mit den Maßen
1024*768, und nennen es "index"
2. Hintergrundfarbe.
Diese werdet ihr im laufe des Tutorials noch ändern können,
und ich nehme in diesem Fall die Farbe blau.
Ihr könnt die Ebene natürlich umbenenne, damit ihr einen besseren Überblick habt.
3. Rechteckwerkzeug.
(Standartgemäß unter dem Textsymbol)
Zieht einen Kasten in die Mitte eures Hintergrundes.
(Am besten eine hellere Farbe, da die HP ja ins Auge stechen soll)
Bild:
4. Speichern
Alles in einer PSD abspeichern.
Am Besten einen komplett neuen Ordner für euer Projekt erstellen.
5. Der Header.
Natürlich brauch jede Homepage einen Header.
Ich würde euch empfehlen einen Header von diese Page zu holen:
Ich benutze in meinem Fall aber einen eigenen Header.
Wenn ihr euch einen netten Header ausgesucht habt,
dann speichert ihn auf eurer Festplatte.
Öffnet ihn mit Photoshop.
Strg + A (Alles auswählen); Strg + C (Kopieren); Strg + D (Auswahl aufheben)
Nun könnt ihr eueren Header schließen.
Geht nun wieder zu eurer Homepage, und fügt den Header per
Strg + V (einfügen) ein.
Natürlich passt er nicht auf die Homepage,
da diese viel grüßer ist. Drückt hierzu Strg + T (transformieren),
um die Grafik eurer HP anzupassen.
Sollte sie verschwommen sein, sucht euch eine größere aus.
Danach klickt ihr auf "Transformation anweden".
Bild:
6. Zwischenspeichern (Strg+ S)
7. Trennlinien.
Da unser Header im Moment in der "Luft" schweb,
sollten wir ihm noch Trennlinien verpassen um ihm einen festen Halt zu geben.
Dazu geht ihr wieder auf das Rechteckwerkzeug.
Nehmt aber eine Farbe aus dem Header um die Trennlinien zu zeichnen.
Zieht die Trennlinie direkt unter dem Header.
Sollte sie nicht passen, dann transformiert sie mit STRG + T.
Fals sie nicht richtig sitzt, dann nehmt das Verschieben - Werkzeug (V).
Nun könnt ihr die Ebene rastern.
Bild:
8. Die Trennlinie verschönern.
Da unsere Trennlinie im Moment etwas makaber aussieht,
wollen wir sie noch verschönern.
Dazu macht ihr einen Rechtsklick auf die Ebene -> Fülloptionen.
Hier könnt ihr alles anpassen wie ihr wollt.
In meinem Fall habe ich diese Optionen verwendet:
Bild:
Wenn ihr Zeit|Lust habt, könnt ihr anstatt den Effekten auch Brushes, ect. verwenden.
Da ich diese Zeit nicht habe, gebe ich mich mit den Effekten zufrieden.
9. Die Trennlinie oben
Da wir unsere 1. Trennlinie jetzt unten haben, wollen wir oben natürlich auch eine.
Dazu machen wir einen Rechtsklick auf die 1. und kopieren sie. (Strg + J)
Nun verschieben wir die 2. Trennlinie mit dem Verschiebenwerkzeug (v) nach Oben.
Bild:
10. Die Trennlinie ganz unten
Ganz unten ist auch keine Trennlinie.
Wiederholt Schritt 9, auser das ihr die Trennlinie nun ganz nach unten verschiebt.
11. Zwischenspeichern und alle drei Trennlinien rastern.
12. Das Navigationsmenü
Natürlich brauch jede Homepage ein Navigationsmenü.
Hierzu kopieren wir die Trennline nocheinmal!
Und fügen sie wie auf dem Bild zu sehen ein.
Bild:
Natürlich brauchen wir jetzt auch Buttons.
Dazu nehmt ihr einfach das Textwerkzeug, und schreibt euren gewünschten Text
zwischen Trennlinie 1 und Trennlinie 4.
Text rastern.
Nun könnt ihr auch diesen Text mit Fülloptionen füttern.
Dies ist euch überlassen, und ich werde auch nicht darauf eingehen.
13. Context - Menü
Wer nicht weiß was ein Contextmenü ist, der kann an dieser Stelle abbrechen :p
Ihr zieht euer Contextmenü dort hin wo ihr es wollt.
In meinem Fall ist es die rechte Seite.
Bild:
Da dies nun unsere Homepage ist, könnt ihr einige Änderungen vornehmen.
Habe meins noch etwas verändet:
Sieht zwar genauso scheiße aus wie vorher, aber banane :)
14. Zwischenspeichern & als .PNG speichern.
Danach die PSD - Datei schließen.
15. Slicen
Wer nicht weiß was slicen ist, der kann hier ebenfals wegklicken.
Gewisse Grundkentnisse sollten vorhanden sein.
Wenn ihr nicht wisst was es ist. (Google ist dein Freund ;))
Bzw:
Gesliced wird:
- Der Context Bereich
- Der Header
- Die Navigationsleiste
- Was ihr wollt
Nach dem Slicen sollte es so aussehen:
Nun geht ihr auf "Datei" - "Für Web und Geräte speichern"
- "Dateityp: PNG" - "Alle Dateien (html und Bilder)"
Nun könnt ihr Photoshop schließen.
Wenn ihr jetzt auf index.html klickt, öffnet sich Firefox, und ihr seht eure Homepage.
Leider ist noch nichts verlinkt, ect.
Dies wird dann im 2. Tutorial erklärt.
P.S: Dieses Tutorial hat sehr viel Zeit gekostet,
fals jemand jetzt kommt mit "deine Arbeit ist scheiße",
dann unterlasst bitte solche Kommentare.
Ich weiß selbst das es nichts geworden ist, aber es geht ja
um die Grundlage. Wenn ihr es besser könnt, dann macht doch eure
eigene Homepage und zeigt sie hier im Thread :)
Grüßchen - Joshi, [Only registered and activated users can see links. Click Here To Register...]
