[TUT] Einfache Websites mit Photoshop
URL: https://www.overclockers.at/pixelfreaks/tut_einfache_websites_mit_photoshop_159815/page_1 - zur Vollversion wechseln!
grOOvekill@ schrieb am 09.03.2006 um 11:38
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:
<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:
<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:
<td colspan="5"><img src="images/index_09.jpg" width="727" height="363" alt=""></td>
wird zu
<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:
<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:
<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:
<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!
hynk schrieb am 09.03.2006 um 11:47
nice tut
wird sicher einigen eine hilfe sein
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 schrieb am 09.03.2006 um 11:50
das slicen sehr gut erklärt! :thumbsup:
dosen schrieb am 09.03.2006 um 11:51
Nettes Tut, so werden auch die ganzen Pornoseiten erstellt 
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 
grOOvekill@ schrieb am 09.03.2006 um 12:06
Nettes Tut, so werden auch die ganzen Pornoseiten erstellt
Aha? 
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.
bluefoxx schrieb am 09.03.2006 um 12:14
w00t ich wollte das immer schon wissen (wirklich )
hynk schrieb am 09.03.2006 um 12:17
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@ schrieb am 09.03.2006 um 12:22
w00t ich wollte das immer schon wissen (wirklich )
Na, jetzt weißt Du's! Meine Kontodaten in der Schweiz schicke ich Dir per PM zu.
grOOvekill@ schrieb am 09.03.2006 um 12:23
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!
.dcp schrieb am 09.03.2006 um 12:29
nice, bastel eh grad was, da hilft das ungemein.
wie immer *BOTHTHUMBSUP*
master_burn schrieb am 09.03.2006 um 12:45
Erstmal danke für das TUT!
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
grOOvekill@ schrieb am 09.03.2006 um 12:49
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 schrieb am 09.03.2006 um 12:53
andre möglichkeit wäre ein scrollbarer div
so wie hier
im code stehts drinnen wennst dirs kopiern willst
ansonsten PM
master_burn schrieb am 09.03.2006 um 13:00
@ 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 schrieb am 09.03.2006 um 13:14
<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
overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025