Montessori-Kindergärten

Navigation

Home Gästebuch Kontakt BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA

Copyright

Der Inhalt unterliegt dem Copyright von ... es sei denn, es ist nicht anders vermerkt.

Best view

Best View you got with FF and a Solution of 1024x768 Pixels

Wie man ein Div-Lay mit Photoshop erstellt!


1. Öffne ein leeres Bild in der Größe 1024x768! klick & klick

2. Nun suchen wir uns ein Bild aus (Für Anfänger empfielt sich eines das schon bearbeitet ist!) dieses nehme ich

3. Jetzt drücken wir strg+c bzw. die rechte Maustaste und kopieren. Danach einfach strg+v bzw. rechte Maustaste und einfügen.

4. Meistens ist es so, dass das gewählte Bild zu groß oder zu klein ist. Um das zu ändern benutzen wir die "Free Transform"-Funktion. klick

5. Danach können wir das Bild an die gewünschte Stelle verschieben.

6. Es wird Zeit den Contentkasten einzufügen. Wie ihr das macht ist euch überlassen. Ich füge gerne den abgerundeten Kasten ein, aber ihr könnt auch den einfachen eckigen nehmen (der sich für Anfänger als einfacher erweist). Zuvor habe ich noch einen neuen Layer erstellt, damit ich dem Kasten später noch Effekte zuweisen kann (ist aber kein Muss). klick

7. Jetzt ist auch schon die Navigation dran. Je nachdem wie breit euer Contentkasten ist, könnt ihr sie beim Coden einfach dort einfügen, ansonsten sind eurer Fantasie keine Grenzen gesetzt. Ich habe mich für 2 große Kästen rechts & links am Rand entschieden, die einfach genauso eingefügt habe wie den Contentkasten klick

8. Kommen wir nun zum letzten Designschritt. Dem Hintergrund! (Den kann man aber auch als erstes machen, ist euch überlassen). klick

9. Zu guter Letzt müssen wir nur noch die Endlesslinie erstellen. Das ist eigentlich ganz einfach (sollte man mehrere Layer benutzt haben, muss man speichern & das layout nocheinmal öffnen) wir markieren am unteren Ende des Layouts ein schmales Stück und drücken strg+c bzw. rechte Maustaste & kopieren klick
10. Nun müssen wir wieder auf File -> New und einfach ein neues Bild erstellen (ohne Änderungen im Kasten einfach OK klicken). Jetzt drückt man einfach strg+v bzw. rechte Maustaste & einfügen schwups haben wir eine Endlesslinie klick

11. Damit ist die Arbeit mit Photoshop beendet & das Layout kann gecodet werden. Mein Layout
Gratis bloggen bei
myblog.de