[TUT] Einfache Websites mit Photoshop

S'gott,

nachdem ich in letzter Zeit immer wieder gefragt werde, wie ich Websites bastle und einige offensichtlich nicht wissen, wie einfach das mit Photoshop geht, hab' ich mal ein Tut gebastelt, das es jedem ermöglichen sollte eine Website mit PS zu erstellen. Here goes:

1 - Ich habe mal schnell ein einfaches, unspektakuläres Design gebastelt, das uns als Vorlage dienen soll.



2 - Nun slicen wir das Ganze. Sprich, wir schnappen uns horizontale oder vertikale Hilfslinien mit der Maus und plazieren sie auf einzelnen Elementen der Seite. Die Headergrafik oben bekommt eine Zelle, die Navigation darunter jeweils eine, der Hauptcontentbereich darunter ebenfalls. Hier solltet ihr (auch wegen der abgerundeten Ecken) darauf achten, dass ihr ein wenig Abstand zum Rand einhaltet, da ansonsten später der Text ganz am Rand klebt. Zu guter Letzt auch noch unten beim Footer eine Zelle einrichten, sofern man da unten irgendwelche Informationen anzeigen will.



3 - Nun wählen wir das Slice-Tool aus (Taste K)



4 - Mit dem Slice-Tool ziehen wir nun um jede einzelne Zelle einen Rahmen. Sofort erscheint bei dieser Zelle eine Nummer, die sie als einzelnes Slice kennzeichnet. Ihr dürft auf keinen Fall irgendetwas auslassen, es muss alles gesliced werden, da Photoshop nachher das gesamte Image zerschneiden und in eine html Tabelle einbauen wird. Habt ihr alles gesliced, sollte es ca so aussehen:



5 - Im grunde war's das schon. Nun drücken wir die Tastenkombination STRG+SHIFT+ALT+S (für Web speichern) und es erscheint das dazugehörige Speicherfenster. Hier könnt ihr nun bestimmen, ob ihr das Layout bzw. die einzelnen Elemente als jpg oder gif abspeichern wollt. Ebenso könnt ihr rechts die Qualität festlegen. Sicherheitshalber solltet ihr, bevor ihr speichert STRG+A drücken, damit auch alle Slices ausgewählt und die Settings bei ihnen angewendet werden. Habt ihr die richtigen Einstellungen ausgewählt, einfach auf "Save/Speichern" klicken.



6 - Nun öffnet sich das Datei-Speicherfenster. Hier müßt ihr nun unten beim Dateityp "HTML and Images" auswählen. Als Dateinamen habe ich "index.html" angegeben. Danach Speicherort, am besten einen neuen, leeren Ordner, angeben und speichern.



7 - Tataa! Das war's! Naja, fast. Wenn wir in den Ordner schauen, werden wir feststellen, dass eine index.html und ein "images" Ordner angelegt wurden.



8 - Ab hier kommt meine persönliche Vorgehensweise. Ich öffne die index.html in meinem Texteditor und sehe mir das Ganze mal an.



9 - Nun könnt ihr den html Teil noch ein wenig verschönern, verbessern, Seitentitel eingeben oder die Tabelle zentrieren.



10 - Ganz unten im Code werdet ihr feststellen, dass einige Zellen erstellt wurden, die ein Image mit dem Namen "spacer.gif" beinhalten. Löscht diese Images nicht, die werden aus layouttechnischen Gründen erstellt. Warum das allerdings der Fall ist, wenn man das Design gesliced hat, entzieht sich bis heute meiner Kenntnis. Vielleicht ist da ja wer schlauer als ich.

Egal, weiter im Text. Die Seite können wir uns nun in einem Browser ansehen. Paßt. Nun gibt es aber noch ein paar wichtige Punkte. a) Die Navigation, b) der Hauptcontentbereich und c) der Footer. Alles keine große Sache. Was wir zuerst machen, sind die einzelnen Navigationslinks. Die html Zeile eines Links sieht so aus:

Code: PHP

<td colspan="2"><img src="images/index_02.jpg" width="157" height="37" alt=""></td>

Welche Zelle ihr gerade bearbeitet, könnt ihr ganz leicht in Photoshop überprüfen, da ja jede Zelle nummeriert wurde. Beim index_02.jpg Image handelt es sich demnach um das 2'er Slice in Photoshop.

Nun müssen wir in dieser Zeile vor das <img> Tag einen Link auf die jeweilige Seite plazieren. Das 2'er Image ist der home-Button. Also machen wir folgendes:

Code: PHP

<td colspan="2"><a href="index.html"><img src="images/index_02.jpg" width="157" height="37" title="home" border="0"></a></td>

Wir geben dir Url an, ändern beim image-Tag das alt="" in ein title="home" und geben auch noch ein border="0" an, damit kein blauer Linkrahmen um das Image erscheint.



Das tun wir nun für alle Links in der Navigationsleiste. Zu einem späteren Zeitpunkt werde ich dieses Tutorial auch noch um die Möglichkeit von Rollover-Buttons ergänzen.

Damit hätten nun alle Buttons einen Link, auf den sie zeigen.

11 - Nun müssen wir in der Zelle des Hauptcontents noch das <img> Tag verschieben. Dazu ändern wir die folgende Zeile wie folgt:

Code: PHP

<td colspan="5"><img src="images/index_09.jpg" width="727" height="363" alt=""></td>

wird zu

Code: PHP

<td colspan="5" background="images/index_09.jpg" width="727" height="363">Hier steht Content!</td>

Das Image ist nun als Hintergrundimage deklariert. Ergo können wir ab sofort Conten über dem Image einfügen. Wie ihr den Content einfügt, bleibt euch überlassen. Ich füge hier gerne eine komplett neue Tabelle ein, die ich nach Belieben formatieren kann. Bei einfachem Text reicht es aber auch, wenn ihr die Ausrichtung der Zelle folgendermaßen ändert:

Code: PHP

<td colspan="5" background="images/index_09.jpg" width="727" height="363" valign="top">Hier steht Content!</td>

Aber wie gesagt, eine neue innere Tabelle wäre hier sicher sinnvoller.

Das gleiche tun wir nun auch beim Footer ganz unten, was zur Folge hat, dass wir hier danach einen beliebigen Text einfügen können. Zum Schluss kucken wir uns das Ding mal in einem Browser an.



12 - Eigentlich war's das schon. Es gibt aber noch einen sehr wichtigen Punkt, der nicht zuletzt für den Einsatz von Tabellen in Websites spricht. Was, wenn der Text im Contentbereich länger ist, als der im Layout vorgesehene Platz? Probieren wir das mal aus. Ich knalle also jede Menge Text rein und sehe dann folgendes Bild:



Jesses! Mon Dieu! Marandjoseff! Die Seiten beim Content haut's auseinander! Nun, keine Angst, das haben wir ganz schnell gefixt! Was wir hier tun müssen und eigentlich sicherheitshalber für jede Seite machen können, wo diese Tabelle zum Einsatz kommt ist folgendes:

Das hier ist die html-Zeile für das Image links Vom Content:

Code: PHP

<td><img src="images/index_08.jpg" width="21" height="363" alt=""></td>

Hier machen wir das gleiche wie bei der Content-Zelle. Wir stellen das Image als Hintergrundbild rein:

Code: PHP

<td background="images/index_08.jpg" width="21" height="363"></td>

Das selbe machen wir natürlich auch beim Image, das sich rechts von der Content-Zelle befindet. Und was passiert? Unsere Seite sieht so aus:



Geil, oder? Egal, wie viel Content nun abgezeigt wird, die Höhe der Tabelle geht automatisch mit, ohne dass es das Layout zerfetzt.

Ja, das war's nun wirklich, denke ich mal. Nachdem dieses Tutorial noch jede Menge Erweiterungsmöglichkeiten bietet, werde ich es vermutlich zukünftig noch ein wenig erweitern. Aber für den Anfang sollte das mal reichen, denke ich.

Have Phun!

das slicen sehr gut erklärt! :thumbsup:

Zitat von dosensteck

Nettes Tut, so werden auch die ganzen Pornoseiten erstellt

Aha?

Zitat von dosensteck

Für mich ist das aber nix, aufjedenfall aber ein Schneller weg um eine einfache Seite zu erstellen die wie eine Gnackwatschn für Modemuser ist

Darf ich fragen, wie Du Deine Websites bastelst? Und ob die Seite für Modemuser eine Gnackwatschn ist oder nicht, bestimmt man letzten Endes selber. Schließlich designed man die Seite ja auch selbst und beeinflußt dadurch selber die Dateigröße. Und ganz ehrlich: Um Modemuser kümmere ich mich schon lange nimmer.

wieso a gnackwatschn?
soweit ich weis kann man ja angeben welche dateiart verwendet werden soll und auch unterschiedliche nehmen.
und wennst mal wo eine einfärbige fläche haben solltest dann nimmst einfach statt dessen eine kachel oder wenns eine webfarbe is stellst sie im hintergrund ein.
jedenfalls gilt das alles fürs imageready.

der einzige wirklich schlechte weg is imho wennst eine page mim frontpage erstellst. frontpage servererweiterung ... brr

Zitat von hynk

wieso a gnackwatschn?
soweit ich weis kann man ja angeben welche dateiart verwendet werden soll und auch unterschiedliche nehmen.
und wennst mal wo eine einfärbige fläche haben solltest dann nimmst einfach statt dessen eine kachel oder wenns eine webfarbe is stellst sie im hintergrund ein.
jedenfalls gilt das alles fürs imageready.

der einzige wirklich schlechte weg is imho wennst eine page mim frontpage erstellst. frontpage servererweiterung ... brr

Ack! Wie ich schon sagte, bestimmt man das Design ja selber. Muss ja nicht zu 100% aus Fotomaterial bestehen.

Und wer eine Seite in Frontpage baut, gehört ja sowieso ins Eckerl!

Erstmal danke für das TUT!

Zitat von grOOvekill@

Geil, oder? Egal, wie viel Content nun abgezeigt wird, die Höhe der Tabelle geht automatisch mit, ohne dass es das Layout zerfetzt.

Ja, das war's nun wirklich, denke ich mal. Nachdem dieses Tutorial noch jede Menge Erweiterungsmöglichkeiten bietet, werde ich es vermutlich zukünftig noch ein wenig erweitern. Aber für den Anfang sollte das mal reichen, denke ich.

Have Phun!

Wie würdest du das lösen wenn ich jetzt innerhalb dieses Slices durch einen Text scrollen wollen würde und nicht die Seite endlos nach unten erweitern wollen würde?

- btw ich würde das wollen

andre möglichkeit wäre ein scrollbarer div
so wie hier
im code stehts drinnen wennst dirs kopiern willst
ansonsten PM

Code: PHP

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
    <tr>
  	<td>hier drinnen ist der div -> </td>
  		<td rowspan="2">
  		<div style="width: 382; height: 287; overflow: auto;">
  		  <p>und der wird mit text befüllt und dann mit noch mehr text befüllt und ein bischen geht noch und hier noch und da noch hier auch noch ein bischen dort drüben noch </p>
  		  <p>und der wird mit text befüllt und dann mit noch mehr text befüllt und ein bischen geht noch und hier noch und da noch hier auch noch ein bischen dort drüben noch </p>
  		  <p>und der wird mit text befüllt und dann mit noch mehr text befüllt und ein bischen geht noch und hier noch und da noch hier auch noch ein bischen dort drüben noch </p>
  		  <p>und der wird mit text befüllt und dann mit noch mehr text befüllt und ein bischen geht noch und hier noch und da noch hier auch noch ein bischen dort drüben noch </p>
  		  <p>und der wird mit text befüllt und dann mit noch mehr text befüllt und ein bischen geht noch und hier noch und da noch hier auch noch ein bischen dort drüben noch </p>
  		  <p>und der wird mit text befüllt und dann mit noch mehr text befüllt und ein bischen geht noch und hier noch und da noch hier auch noch ein bischen dort drüben noch </p>
  		</div>
  	  </td>
  	</tr>
    <tr>
  	<td> </td>
  	</tr>
  </table>

das sollte es sein

hier nochmal zum anschaun