ps_tut5

{{{ D I V - L A Y E R   L A Y O U T }}} So, hab ich mir mal die Mühe gemacht, um euch zu erklären, wie man ein schönes Div-layer Layout mit Photoshop macht ^^ Ist ja sehr begehrt so ein Layout-tut xD Dann fangen wir mal an *gg* 1. Öfnnet Adobe Photoshop und irgendein Bild, ich habe das hier gewählt: 2. Nun öffnet ihr eine neue Datei, mit der Größe 1024 x 768. Ihr könnt sie jetzt mit irgendeiner Hintergrundfarbe füllen, oder einen eigenen Hintergrund erstellen (also die Datei mit einem Muster füllen) 3. Zieht nun das Bild, das ihr zuvor geöffnet habt in die neue Datei rüber und schiebt sie auf der neuen Datei so, wie ihr es haben wollt (ich habe es nach links geschoben) Meine Datei sieht nun so aus : *klick*. Wer wissen will wie ich den hg gemacht hat, kann mir ja mal mailen *fg*. 4. Jetzt sieht das Bild aber noch sehr eckig aus. Um das zu ändern wählt ihr das Auswahlelipse-Werkzeug aus. Ihr geht auf die Ebene, auf der das Bild liegt. Dann stellt ihr oben in der Leiste folgendes ein: 5. So in dem Bild oben seht ihr ja dann auch gleich, wie ihr es anwenden müsst. Also immer am Rand des Bildes das Werkzeug benutzen, einen Auswahl-kreis neben dem anderen ^^ Das fügt sich dann von alleine zusammen. Dann müsst ihr auf der Tastatur Entfernen (Entf) drücken, solange bis nichts mehr von den eckigen Rändern zu sehen ist. Ihr könnt nun die Auswahl aufheben. 6. Nun wollen wir die Plätze einbauen, auf dem wir später die Hauptseite und die Navi eintragen können! Erstellt eine neue Ebene und wählt das Auswahlrechteck aus (VORSICHT: Vorher oben in der Leiste die "Weiche Kante" wieder áuf "0" stellen!). Ihr zieht nun ein Rechteck unter dem Bild für die Hauptseite und ein lang gezogenes Rechteck für die Navi neben dem Bild (ihr könnt es ja so platzieren wie ihr wollt ^.~). Jetzt stellt ihr bei der Farben ein, dass vorne Schwarz ist und hinten weiß (also normal) Dann macht ihr Bearbeiten >> Fläche füllen. Es tut sich ein Fenster auf und ihr tragt folgendes ein: 7. Dann (die Auswahl NICHT aufheben ) klickt ihr mit rechts auf die Auswahl und wendet "Kontur füllen an". Diesmal mit diesen Einstellungen (leider kein Bild <.<) Breite: 1px Farbe : (könnt ihr euch eine passende aussuchen) Position: Mitte Modus: Normal Deckkraft: 100% 8. Nur kommt der letzte Schliff *gg* Ihr könnt jetzt noch über die beiden Kästchen "Concent" und "Navigation" schreiben (qam besten in Minischrift). Jetzt könnt ihr das Bild noch mit Brushes u.s.w. verschönern ^.~ Meins sieht so aus: *klick* 9. Ihr müsst nun mit dem Freistellungswerkzeug einen schmalen Streifen vom Bild und oben das ganze Bild einzeln freistellen. Etwa so:   <<< verkleinerte version ^.~ So jetzt seid ihr mit PS feddich :D Ich weiß ja leider net, was ihr für Schreibproggys habt, also ich hab Microsoft Dreamweaver. Trotzdem mach ich mal ne Beschreibung (aber ohne Bilder) wies geht zur fertigen Seite. Ich mach dass immer ganz ohne HTML-texte einfügen ^^''' 1. Zuerst fülle ich die Neu erstellte seite mit dem Hintergrund (dem schmalem Streifen) den ich gerade in PS gemacht habe. Das mache ich indem ich auf Modifizieren >> Seiteneigenschaften klicke. Dann stelle ich bei Modifizieren >> Seiteneigenschaften auch noch folgendes ein: "Linker Rand: 0 ; Rechter Rand: 0 ; Oberer Rand: 0 ; Unterer Rand: 0" 2. Jetzt füge ich einfach das Bild in die Seite ein. Wenn man alles richtig gemacht hat, dann stimmt der Hintergrund mit dem Bild überein ^.~ 3. Nun zeichne ich 2 Ebenen für die Navi und für die Haupseite (natürlich auf den Feldern, die ich auf dem Bild gemacht hab ^^). Dort schreib ich dann Text u.s.w. FERTIG So sieht mein Layi am Ende aus ^^: klick me