Slicen (Ein Template aus einem Bild erstellen)
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
abnehmen
bild
code
datei
ding
funktion
grafik
haus
kasten
mache
machen
navigation
schein
schneide
speichern
stellen
tabelle
tag
vier
weben
-
Slicen mit Photoshop
Wofür slicen, wozu ist das gut? Angenommen du willst eine Homepage. Du brauchst ein Template! Wenn du einen Freund hast, der sich mit tag/grafik">Grafiken auskennt, ist das meißtens kein Problem, er macht dir eins und schickt dir ein Bild. Allerdings kommt dabei oft die Frage auf: \"Wie mache ich dieses Bild zu einer Homepage?\". Dazu haben Programme wie Photoshop oder PhotoImpact Tools integriert, die dir die sehr müsahme Arbeit des \"von Hand zerschneidens\" abnehmen!
Fangen wir an.
Step1:
Wähle das Slice Werkzeug aus [K]
Step2:
Ziehe einen Kasten um alle wichtigen Teile. Das ist leider recht schwer zu erklären... ich versuche es mal anhand dieses Bildes:
Alle markannten Stellen, wie z.B. Logo, Menu Top usw... wurden in einen Slice-Kasten gepackt...
Das wars eigentlich schon, jetzt wird das ganze nur noch fürs Web bereit gemacht!
Step3:
Und auch dabei hilft uns unser Photoshop aus dem Hause Adobe wieder. Mit der Funktion: \"Für Web und Geräte speichern..\" [Alt+Umschalt+Strg+S]
Step4:
Das speichern. Sollte sich eigentlich von allein erklären. Trozdem nochmal 2 Screenshots dazu:
Fertig! Anschließend finden wir am Speicherort alle Dateien:
___________________________________
Ich hoffe es war eine hilfe! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Dabei produziert Photoshop allerdings nur Müll.
Der HTML Code ist nicht zu gebrauchen und muss immer wieder überarbeitet werden.
Da mache ich mir lieber die Mühe und schneide es selber aus, wenn ich überhaupt Grafiken verwende. -
Habe mir neulich Adobe Fireworks angeschaut, damit ist es recht einfach zu realisieren (vor allem verschiedene Schaltflächen), der Code der dabei rasukommt ist allerdings (wie bei Photoshop) nur Müll. Trotzdem bin ich dazu übergegangen, die Grafiken mit PS zu slicen. Dann schreibe ich allerdings das HTML und CSS selber, damit ich DIVs statt Tabellen habe.
-
http://www.vokabel-trainer.ath.cx/foreign/tagung
Hier habe ich auch die Slice-Funktion von Photoshop genutzt, da dieses Portal schnell erstellt werden musste und ich keine Lust hatte, da mit CSS rumzuwerkeln um die Buttons zu platzieren. Das Ding lief sowieso nur in einem LAN von vier Rechnern für drei Tage...
Der Code ist Müll, das stimmt.
Aber man kann wenigstens die Graphiken verwenden und das ganze selbst zusammensetzen...
gruß
ferdinand24 -
hmm??? oke ich sehe das ich scheins keine ahnung habe :D
aber erklärt mir doch bitte wieso der code von ps müll ist??? ich habe meine page auch damit geclict und ich finden den nich schlimm.... -
wenn dus gesclient hast musst du oben auf datei dann speichern als
und Webdatei wenn du dann willst damit du reinschreiben kannst
immer table benutzen ^^
Navigations Tabelle:
<table align=\"center\" cellpadding=\"0\"
cellspacing=\"0\" width=\"162\">
<tbody>
<tr>
<td style=\"font-size: 6px;\"
background=\"OBERE .gif DATEI DEINER NAVIGATION\"
height=\"29\">
</td>
</tr>
<tr>
<td
style=\"padding: 0px 20px; font-size: 11px; font-family: Verdana; color: rgb(0, 0, 0);\"
background=\"MITTE DEINER .gif DATEI\">
</td>
</tr>
<tr>
<td style=\"font-size: 6px;\"
background=\"UNTEN DEINER .gif DATEI\"
height=\"10\"> </td>
</tr>
</tbody>
</table>
wie gesagt ist nur für navigation
EDIT:// für Coden des gesclienten Templates Emfehle ich dreamweaver CS3 (muss CS3 sein!)
oder NVU
Beitrag geändert: 12.2.2008 13:26:52 von xxjimi08xx -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
