HTML CSS Coding Layout Website Photoshop
Webseiten Layout mit Photoshop erstellenTutorials » Photoshop Cs2 Tutorials » Webseiten Layout mit Photoshop erstellen
Verfasst von Alice am 29.05.2008 - wurde schon 61104 mal gelesen
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
Kommentar schreibenHinterlasse einen Kommentar
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 ...