Verfasst von Alice am 29.05.2008 - wurde schon 60990 mal gelesen

HTML CSS Coding Layout Website Photoshop

Webseiten Layout mit Photoshop erstellen - Tutorial

Wir wollen uns ein ganz simples Layout mit Photoshop erstellen,
das kommt dabei am Schluss heraus...



Zur fertigen Website ...

Wir oeffnen ein neues Dokument in der Groesse von 760 x 500 Pixel,
Hintergrundfarbe transparent auswaehlen.

Mit dem Auswahlrechteck-Werkzeug ziehen wir nun am oberen Rand eine ca. 150

Pixel hohe Auswahl auf, die sich ueber die komplette Breite erstreckt.



Diese Auswahl fuellen wir nun mit einem Beigeton (#F0EFE1), entweder mit dem Fuell-Werkzeug oder per Rechtsklick => Flaeche fuellen... anschliessen die Auswahl aufheben.



Mit dem Buntstift-Werkzeug und diesen Einstellungen

zeichnen wir, genau unterhalb unserer Beigen Flaeche, eine 1 Pixel starke Linie in einem dunkleren Beigeton (#E3E3C7), die sich ueber die gesamte Breite erstreckt.
Damit die Linie auch schoen gerade wird, einfach beim Zeichnen die [ Shift ] Taste gedrueckt halten ;)

Genau unter die Linie zeichnen wir nun nochmals eine 1 Pixel starke Line, mit dem Buntstift-Werkzeug dieses Mal aber in einem ganz hellen Beigeton (#FDFCFB)



Die restliche frei Flaeche fuellen wir nun mit dem Fuell-Werkzeug [G] in einem etwas
dunkleren Beigeton (#EBEBD9)

So den Hintergrund haetten wir dann schon mal geschafft ...

Wir legen eine neue Ebenen an und stellen die Vordergrundfarbe auf weiss (#FFFFFF)

Mit dem Abgerundetes-Rechteck-Werkzeug [U] ziehen wir uns mittig ein weisses

(#FFFFFF) Rechteck auf, Radius bitte auf 5 Pixel stellen


Sollte das Rechteck nicht auf anhieb mittig sitzen,
einfach die beide Ebenen, mit gedrueckt gehaltener [Strg] Taste anklicken,
so dass nun beide Markiert sind, dann das Verschieben-Werkzeug [V] auswaehlen,
oben einmal auf Vertikale Mitten ausrichten klicken und
anschliessend dann auf Horizontalen Mitten ausrichten klicken...



Das abgerundete Rechteck bekommt nun einen Schein nach Aussen mit diesen Einstellungen verpasst



So schaut es nun mittlerweile aus


Wir legen nochmals eine neue Ebene an...

Nun ziehen wir mit dem Auswahlrechteck-Werkzeug [M] mittig ein Rechteck auf,

dieses fuellen wir mit einem weiteren Beigeton (#F2F3E9)

Sollte das Rechteck nicht auf anhieb mittig sitzen, auch hier wieder mit dem Verschieben-Werkzeug [V] arbeiten...



Nun nur noch Logo und Schriftzug drauf und dann haetten wir es auch schon fast geschafft



Aber auch nur fast ...

Mit dem Freistellungs-Werkzeug [C] beschneiden wir nun unsere Grafik,
damit keine ueberfluessigen Teile entstehen...



Komm wir nun zum Slicen, wir zerschnippeln nun unsere Grafik, mit dem Slice-Werkzeug [K] in mehrere Teile.
Das Slice-Werkzeug [K] wird wie das Auswahlrechteck-Werkzeug gehandhabt, einfach aufziehen und gut ist ...

Der erste Slice, den wir aufziehen, ist fuer unsere spaetere Hintergrundgrafik zustaendig



Der zweite Slice ist fuer unsere Headergrafik zustaendig



Beim Slice fuer den Header aufpassen, dass dieser auf jedenfall unterhalb unserer 1 Pixel staerken Linien endet, sonst koennten wir nachher ein kleines Problem beim Coden bekommen...



Der dritte Slice ist fuer unsere Footergrafik zustaendig



Insgesamt haben wir nun 4 Teile, den Hintergrund,
den Header den Footer und den mittleren Teil.



Der mittlere Teil ist viel zu gross, so gross braucht dieser garnicht sein, 10 Pixel davon reichen vollkommen aus!

Deshalb greifen wir noch einmal zum Slice-Werkzeug [K] und ziehen einen schmaeleren Slice unterhalb des Header auf



Damit unsere Grafik nun auch wirklich zerschnippelt wird, muessen wir sie nun ueber Fuer Web speichern ... abspeichern

Meine Voreinstellung fuer die Optimierung als JPG



Bevor wir nun auf speichern klicken, sollten wir noch die Ausgabeeinstellungen etwas bearbeiten,
sonst spuckt Photoshop nur 'unbrauchbares Zeugs'aus



Wir stellen die Ausgabe auf Ausgabe im XHTML-Format und unterdruecken, dass PS Kommentare in den Quelltext einfuegt


Wir bestimmen in welchem Ordner die Grafiken gespeichert werden


Und unter welcher Dateibezeichnungen die Grafiken gespeichert werden


So jetzt koennen wir unser Layout endlich abspeichern, als index.html in einen Ordner je nach Wahl ...

WICHITG!

Als Dateityp muss HTML und Bilder(*html) ausgewaehlt werden!



Nun muessten wir eine index.html haben und einen Order namens images,
welcher unsere 5 Bildschnippsel, die durchnummeriert sind von 01.jpg-05.jpg, enthaelt.

Da man sich aber nicht wirklich merken kann,
was nun hinter den Grafiken mit dem wundervollen Bezeichnungen wir z.B. 01.jpg verbirgt,
benennen wir diese einfach um.

- Grafik 01.jpg wird zu background.jpg
- Grafik 02.jpg wird zu header.jpg
- Grafik 03.jpg wird zu mitte.jpg
- Grafik 04.jpg wird zu footer.jpg

Und wie machen wir daraus nun eine richtige Website?

Das wird hier erklaert => Webseiten Layout mit Photoshop erstellen - das Coding

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...