"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

[TUT] Einfache Websites mit Photoshop

grOOvekill@ 09.03.2006 - 11:38 10212 35 Thread rating
Posts

grOOvekill@

Legend
Vienna Badass
Avatar
Registered: Nov 2001
Location: @home
Posts: 2297
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.

click to enlarge

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.

click to enlarge

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

03.jpg

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:

click to enlarge

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.

click to enlarge

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.

click to enlarge

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.

07.jpg

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

click to enlarge

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

click to enlarge

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.

10.gif

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.

click to enlarge

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:

click to enlarge

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:

click to enlarge

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!
Bearbeitet von grOOvekill@ am 09.03.2006, 11:44

hynk

Super Moderator
like totally ambivalent
Avatar
Registered: Apr 2003
Location: Linz
Posts: 10894
nice tut
wird sicher einigen eine hilfe sein :)

Zitat
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. :)

afaik is der spacer da um leere tabellen zu befüllen (mit dem transparenten pixel). wenn man das betreffende gif in der tabelle auf die gewünschte spaltengröße bringt dann spart man sich auch die größenangabe für die tabelle selbst.

ich halts aber für eher sinnlos.

semteX

Risen from the banned
Avatar
Registered: Oct 2002
Location: Pre
Posts: 14308
das slicen sehr gut erklärt! :thumbsup:

dosen

Here to stay
Avatar
Registered: Feb 2003
Location: Wien
Posts: 5575
Nettes Tut, so werden auch die ganzen Pornoseiten erstellt :D

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 ;) :D

grOOvekill@

Legend
Vienna Badass
Avatar
Registered: Nov 2001
Location: @home
Posts: 2297
Zitat von dosensteck
Nettes Tut, so werden auch die ganzen Pornoseiten erstellt :D

Aha? :confused:

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 ;) :D

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. :D

bluefoxx

Legend

Avatar
Registered: Oct 2001
Location: Vienna
Posts: 7091
w00t :D ich wollte das immer schon wissen (wirklich :) )

hynk

Super Moderator
like totally ambivalent
Avatar
Registered: Apr 2003
Location: Linz
Posts: 10894
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

grOOvekill@

Legend
Vienna Badass
Avatar
Registered: Nov 2001
Location: @home
Posts: 2297
Zitat von bluefoxx
w00t :D ich wollte das immer schon wissen (wirklich :) )

Na, jetzt weißt Du's! Meine Kontodaten in der Schweiz schicke ich Dir per PM zu. :D

grOOvekill@

Legend
Vienna Badass
Avatar
Registered: Nov 2001
Location: @home
Posts: 2297
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! :D

.dcp

notamodbuthot
Avatar
Registered: Jul 2002
Location: new
Posts: 8881
nice, bastel eh grad was, da hilft das ungemein.

wie immer *BOTHTHUMBSUP*

master_burn

Editor
Loading . . 40% . . . 50%
Avatar
Registered: Jul 2001
Location: near Quasi
Posts: 2472
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 ;):D

grOOvekill@

Legend
Vienna Badass
Avatar
Registered: Nov 2001
Location: @home
Posts: 2297
Zitat von master_burn
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?

Ich würde auf iframes zurückgreifen. Verwende ich zwar nicht so gerne, aber es geht. Du definierst in der Content-Zelle einen iframe der in etwa den Maßen der Content-Zelle entspricht. Dann brauchst nur mehr die externe Seite basteln auf die das iframe zeigt und fertig.

Aber das spricht ja im Grunde gegen das oben genannte Prinzip von Tabellen. :)

hynk

Super Moderator
like totally ambivalent
Avatar
Registered: Apr 2003
Location: Linz
Posts: 10894
andre möglichkeit wäre ein scrollbarer div
so wie hier
im code stehts drinnen wennst dirs kopiern willst
ansonsten PM

master_burn

Editor
Loading . . 40% . . . 50%
Avatar
Registered: Jul 2001
Location: near Quasi
Posts: 2472
@ hynk:
wie wärs mit nem codebeispiel .. gibt sicher genug leute dies interessiert ..

edit: ich finds nämlich irgendwie ned .. naja bin auch ned so der coder ;)

btw was aus deiner Seite geworden is gfallt ma .. hatte das irgendwie aus den augen verloren

hynk

Super Moderator
like totally ambivalent
Avatar
Registered: Apr 2003
Location: Linz
Posts: 10894
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
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz