Dies ist mein erstes Tutorial auf der-webdesigner.net und ich hoffe es wird euch ein wenig weiterbringen in eurer Arbeit mit Photoshop bzw dem Web.

Als Endergebnis dieses Tutorials wollen wir eine Website haben, erstellt mit PhotoShop CS und Image Ready. Hinzu kommt, dass wir das ganze startklar für das uploaden auf den Webspace machen, sodass ihr die Site sofort anschauen könnt. Das Hauptfeature der Site soll der Buttonrollover sein, der die Grundlage für HTML-Sites heutzutage ist.





Als erstes müssen wir natürlich PhotoShop öffnen (ich habe hier die Version CS2 benutzt). Wie man PS öffnet denke ich ist Grundlage, deshalb gehe ich hier darauf nicht ein. In PS angekommen machen wir ein neues Dokument mit den rot hervorgehobenen Einstellungen von pic_1.




Name: – Name eurer PS Datei
Breite und Höhe: – dürfte klar sein (kann in px = pixel und z.B cm = Centimeter angegeben werden)
Auflösung: – Die Auflösung des Dokuments in DPI (= Dots per Inch). Wichtig bei Ausdrucken, allerdings nicht bei Websites, von dem her eher niedrig halten, da sonst lange Ladezeiten vorkommen.
Farbmodus: – Ob es in RGB oder CMYK dargestellt werden soll. Auch eher für den Druck wichtig.
Hintergrund: – Farbe, bzw Eigenschaft eures Hintergrundes der Datei.

So. In unserem geöffnetem neuen PS-Dokument schalten wir zunächst ein Raster ein, dass uns später bei den Abmessungen weiter helfen wird und auch sonst ganz nützlich ist. Dieses aktivieren wir unter Ansicht // Lineale; bzw mit STRG+R. (siehe pic_2).



Nun sind alle Vorbereitungen abgeschlossen und wir können uns an das Layout der Site machen.
Hierfür aktivieren wir zunächst das Rechteck-Werkzeug in der linken Toolbar und ziehen damit auf unserer Arbeitsfläche ein Rechteck mit der Breite 600 Pixeln und einem Abstand zu den Rändern mit 50 Pixeln. Das Format 600 Pixel ist meiner Ansicht nach eine recht humane Lösung für die Leute (und das Tutorial sollte diese auch ansprechen), welche sich ein Portfolio erstellen oder eine private Site machen wollen. Die Höhe kann variieren, jedoch hat sich eine Höhe von 150 Pixeln bewährt.



Da wir nicht nur eine Fläche brauchen für die Buttons und den Banner / Header, sondern auch noch eine Fläche für den Content (, also eurem Inhalt wie zum Beispiel Text / Bild), kopieren wir das eben erstellte Rechteck noch einmal und schieben es mit ein wenig Abstand zu dem anderen Rechteck nach unten. Dies tun wir, in dem wir im Ebenenmanager rechts (siehe pic_4) das Rechteck (in dem Fall Form1) mit gedrückter linken Maustaste in Verbindung mit gedrückter ALT-Taste nach oben in der Hierarchie schieben.



Eine Kopie ist entstanden, welche wir mit so platzieren, dass ein wenig Platz zwischen den beiden ist. Durch die Tastenkombination STRG + T wird unser Rechteck skalierbar und wir können es durch verschieben der roten Kästchen (siehe pic_5) um das Rechteck vergrößern. Dies tun wir bis wir beim Raster ungefähr die Marke 750 Pixel erreicht haben.



Da wir unsere Website nicht nur schwarz haben wollen (was sie im Moment ist), klicken wir mit der rechten Maustaste auf das größere Rechteck im Ebenenmanager (siehe pic_4) und klicken dort auf Fülloptionen... . Es öffnet sich ein Fenster, indem wir genau das machen, was im pic_6 beschrieben wird.



Zuerst machen wir ein Häkchen bei Verlaufsüberlagerung,
danach klicken wir auf die Fläche hinter „Verlauf“
und stellen durch einen Klick auf die Fläche hinter „Farbe“ eine andere Farbe ein.


Dies verleiht unserem Content-Bereich einen schönen Verlauf von einem Braun/Roten Ton in das Schwarze. Weiterhin um unseren Content-Bereich noch aufzuwerten aktivieren wir eine Kontur um ihn herum. Beschreibung im pic_7.



Zuerst “Kontur” aktivieren,
dann die Größe auf 1 Pixel stellen.

Diese beiden Schritte wiederholen wir nun bei dem kleinen Rechteck  nochmals oder ihr klickt mit der rechten Maustaste im Ebenenmanager auf das große Rechteck und geht dort auf Ebenenstil kopieren …. Per Rechtsklick auf das kleine Rechteck und klicken auf Ebenenstil einfügen wird dieses Rechteck so formatiert, wie das größere der beiden.

Soweit steht das Grundlayout unserer Site. Was uns noch fehlt sind Buttons welche man verlinken kann. Diese erstellen wir nun.

Hierfür aktivieren wir das Text-Werkzeug per klick auf das Icon in der Toolbar links (siehe pic_8) oder per drücken der Taste T. Wir schreiben die gewünschten Buttons, platzieren diese am unteren Rand des kleinen Rechtecks und aktivieren, wie schon zuvor auch bei diesen die Kontur in den Fülloptionen.



Platzieren der Buttons / Fülloptionen

Soweit unser Zwischenergebnis. Um weiter arbeiten zu können müssen wir nach Image Ready wechseln, welches per Klick des entsprechenden Icons in der Toolbar gemacht wird.



Wechsel nach Image Ready





In Image Ready angekommen müssen wir unsere Website, welche nun noch ein Stück ist in mehrere aufteilen und die Buttons festlegen.

Zuerst kümmern wir uns um die Buttons. Wir aktivieren das Slice-Tool in der linken Toolbar. Mit diesem kann man die Website zerschneiden, sodass sie aus mehreren Bildern besteht. Wir ziehen also um unseren ersten Button ein Rechteck.



Slicen des ersten Buttons

Dies wiederholen wir mit allen anderen Buttons, bis wir zu folgendem Ergebnis kommen…



Als nächstes brauchen wir ein Slice für den Content-Bereich, in den ihr später per HTML-Editor einen Text schreiben könnt.
Hierfür zücken wir wieder das Slice-Tool und ziehen ein Rechteck ähnlich dem im pic_9_3 …



Slice des Contents

Fertig mit dem Slicen, selektieren wir unser vorheriges Slice des ersten Buttons und fügen diesem einen Rolloverstatus hinzu. Hierzu selektieren wir den Button (also die Textebene „Home“) und wählen mit der rechten Maustaste Rolloverstatus hinzufügen … aus.

Um nun das Rollover auch richtig zu erstellen kopiert ihr zunächst die Textebene „Home“ im Ebenenmanager. Dies machen wir, damit wir einen Status haben, der aktiv ist, wenn die Maus darüber ist (das Rollover) und einen Standartstatus. Ihr seht im Web-Inhalt Fenster nun euer Slice mit zwei Zuständen. Der obere ist der normale, also wenn keine Maus darüber ist. Darunter ist der Rolloverstatus. Diesen selektieren wir mit einem Klick darauf. Nun blenden wir die Textebene „Home“ aus, damit diese nicht mehr angezeigt wird. Dies tun wir, in dem wir das Auge davor wegklicken. Danach ändern wir die Farbe der Textebene „Home Kopie“, welche über der ausgeblendeten Ebene ist. Dies tun wir indem wir doppelklicken auf das große T und dann eine andere Farbe auswählen am oberen Bildschirmrand. Damit Image Ready nun wirklich weis, welche der beiden Ebenen wann aktiv sein soll klicken wir nochmals im Web-Inhalt-Fenster auf die obere Ebene und machen die Textebene „Home Kopie“ unsichtbar durch klicken auf das Auge und die Textebene „Home“ wieder sichtbar durch klicken auf das vorher weggeklickte Auge.

Nun sollte euer Button zwei Zustände haben. Nachprüfen könnt ihr das, indem ihr schaut, ob im Web-Inhalt-Fenster bei der kleinen Anzeige des Rollovers wirklich sich etwas verändert hat.



ZUSTAND: NICHT AKTIV
Beim Grundzustand ist die veränderte Textebene ausgeblendet
und die Ebene „Home“ eingeblendet.



ZUSTAND: AKTIV

Diese Schritte wiederholen wir bei allen anderen Buttons, wobei darauf zu achten ist, dass ihr die Reihenfolge einhaltet.

Wenn dies getan ist, können wir die Website in ihren Einzelteilen speichern, sodass wir sie nun in einem HTML-EDITOR bearbeiten können.






Image Ready hat uns einige Arbeit abgenommen. Es hat uns die jeweiligen Bilder schon in eine Tabelle eingefügt, sodass wir diese nur noch zentrieren müssen.

Also öffnen wir die HTML-Datei, welche Image Ready für uns erstellt hat und richten die Tabelle mittig aus.

In Dreamweaver sieht das so aus: Man selektiert die Tabelle und wählt zentriert aus.



Für alle die nicht Dreamweaver verwenden, sondern dies zum Beispiel per Hand machen wollen, gibt es noch die einfache Möglichkeit den align-Wert selbst zu editieren. Der Wert muss hierbei auf “center“ gesetzt werden.



Was nun noch stört beim Hochladen auf den Webspace, also auf den Server, ist, dass die ganzen Bilder noch Verlinkungen haben auf den Speicherplatz unseres Rechners. Diese sollen aber alle auf den Server und somit müssen wir diese noch richtig verlinken.
Image Ready hat zum Glück alle Bilder im Ordner Bilder/ abgespeichert. Von dem her müssen wir im Code selber nur noch „Bilder“ durch die URL des Server ersetzen. In Dreamweaver macht man das wie im Bild...






Dies kann man natürlich auch mit anderen Programmen machen. Sogar der „editor“ bietet die Suchen uns Ersetzen Funktion.

Am Schluss kommt also unsere fertige Site dabei raus, die sofort auf den Server geladen werden kann. Den Content müsst ihr selber noch einfügen. Dies am besten in Verbindung mit „background“ was euch ermöglicht den Contentbereich als Hintergrund darstellen zu lassen. Dadurch könnt ihr auf der Grafik schreiben.

Bei Fragen
eine Mail an info@nuartdesign.de, eine PN an mich schicken oder natürlich IM Forum fragen.

Danke und Adios.

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!