Templates im Photoshop CS2 erstellen

M

miketheking

Grünschnabel
Hallo,

ich will mit nem Freund von mir zusammen ne HP erstellen.

Er ist Informatiker und hat mit Grafiken nix am Hut.

Nun hat er mir gesagt ich soll im Photoshop n Template erstellen und Photoshop meine Grafik (auf dier wir uns geinigt haben) zerlegen und in HTML ausgeben lassen.

Hat Photoshop diese Funktion überhaupt, wenn ja wie gehts?

Gibts vielleicht n Tut dazu?

MfG

Michael
 
Hi

Such mal nach Slicen.

Kannst dein Template "Slicen" und dann über "Für Web speichern" als fertige HTML-Seite abspeichern.

Gruß
Max
 
exed hat gesagt.:
Kannst dein Template "Slicen" und dann über "Für Web speichern" als fertige HTML-Seite abspeichern.
Zum Vergrößern anklicken....

Genau!

Du musst einfach nur mit dem "Slice-Tool" in der Menüleiste (sieht aus wie ein Füller) dein fertig gestalltetes Template in einzelne Stückchen unteilen. Slicen sollte eigentlich ganz gut funktionieren.

Nachdem du dein Bild unterteilt hast, musst "Für Web speichern" unter "Datei" wählen und schon wir dir in dem "Für-Web-speichern-Fenster" angezeigt, wie dein Bild unterteilt wurde. Du kannst noch einige Einstellungen vornehmen.

Falls du Elemente mit transparentem Hintergrund bevorzugst, solltest du auf .gif speichern. Falls du normal mit .jpg speichert, würde ich eine Stufe von 40 % - 60 % Qualität wählen. So vermeidest du übertrieben lange Ladezeiten.
Das fertige Bildpacket ist nun in einem Ordner gespeichert und kann auch abgerufen werden.

Jedoch ist diese Angelegenheit - eine komplette Homepage in PS zu gestallten - meiner Meinung nach nicht zu empfehlen. Zu einfach und zu lange Ladezeiten.

MfG

nick
 
Hallo,

danke danke - ich habs zwischenzeitlich geschafft - google sei dank.

Jetz hab ich jedoch schon das nächste problem:

Auch wenn ich in dem Slice selbst "Hintergrund" festlege, ist es im HTML Gerüst als ganz normales gif im Vordergrund drin - somit kann man im Dreamweaver und co jedoch nicht ohne weiteres drüber (über die Grafiken) schreiben "z.B. Impressum, AGB, ..." wie mans will.

gibts da nen trick`?
 
@miketheking: Das Problem ist halt das Photoshop Dir nix abnimmt. Es teilt die Grafik in Slices und setzt alles in eine Tabelle. Das nützt aber nichts, wenn man sich nicht vorher mit der Realisation des Layouts beschäftigt hat.
Anhand Deiner Frage muss ich annehmen, das Du nicht viel von HTML und CSS verstehst.
Und um ehrlich zu sein ... eine gute Antwort wäre so umfangreich das man ein Buch damit füllen könnte (und es gibt bereits gute Bücher zu dem Thema).

Ich empfehle - wenn es nichts kosten soll: SELFHTML
Es gibt SELFHTML übrigens auch als Buch, wenn man nicht gerne am PC liest.

Wir können Dir gerne bei konkreten Problemen helfen, aber Privatlehrer wirst Du keine finden.
Ich hoffe Du faßt meine direkte Art jetzt nicht als Angriff gegen Dich auf, denn so ist es nicht gemeint.

Zu Deinem Problem: Du kannst die von PS generierte HTML-Datei am besten gleich wieder löschen und damit beginnen ein eigenes HTML-Dokument zu schreiben.
 
Genau das, war das Problem, welches ich dir vermitteln wollte. Ich hoffe, bzw. gehe mal davon aus, dass du die Grundlagen von DW beherrschst...

Soweit solltest du eigentlich wissen, dass es sowas wie "Rollover-Buttons" gibt und solltest auch wissen, wie du diese in DW anbringen kannst.
Für diese Option benötigst du eigentlich vier, aber in meinem Fall arbeite ich meistens mit zwei.

Nun musst du schauen, dass du deine Menüleiste mit Hilfe des "Crop-Tool" (auf Deutsch denk ich: Freistell-Tool) freistellen. D.h. du hast ein Bild, wo nur deine Menüleiste ist.
Jetzt fängst du an deine Menüpunkte (ich gehe mal von einem einfachem Farbwechsel der Schriftart aus) mit einer bestimmten Schrift einzufügen - sagen wir mal Arial.
Jetzt hast du die Grundlage für dein Menü.

Es folgt nun auch das Arbeiten mit dem Slice-Tool. Passe nur auf, dass sich die Slices nicht mit der Schrift überschneidet. Unterteile einfach das Menü in die einzelnen Buttons.
Nun kannst du alles auf eine Hintergrundebene bringen und die Buttons auch mit der "Für Web speichern"-Option in einem eigenen Ordner anlegen.
Du gehst einige Schritte zurück und editierst nun die Schrift so, wie du sie bei einem "Rollover" haben willst - achte darauf, dass die Slices noch vorhanden sind.
Wieder auf Hintergrundebene reduzieren und "Für Web speichern".

Mit diesen paar Schritten kannst du jetzt dein Rollover-Menü in deine Seite in DW einbauen.

Ich weiß nicht, ob es der einfachste Weg ist. Ich arbeite schon seit längerem nurnoch mit Ebenen.

Ich wünsche dir viel Glück beim ausprobiern.

MfG

nick

P.S. Hab heut Schule (in NRW gibts keine Ferien mehr)
 
der nick hat gesagt.:
Nun kannst du alles auf eine Hintergrundebene bringen und die Buttons auch mit der "Für Web speichern"-Option in einem eigenen Ordner anlegen.
Du gehst einige Schritte zurück und editierst nun die Schrift so, wie du sie bei einem "Rollover" haben willst - achte darauf, dass die Slices noch vorhanden sind.
Wieder auf Hintergrundebene reduzieren und "Für Web speichern".

Mit diesen paar Schritten kannst du jetzt dein Rollover-Menü in deine Seite in DW einbauen.

Ich weiß nicht, ob es der einfachste Weg ist. Ich arbeite schon seit längerem nurnoch mit Ebenen.
Zum Vergrößern anklicken....

Das kannst du alles auch in ImageReady machen, ohne dieses elende "Auf Hintergrundebene reduzieren". Jeden Buttonstatus kannst du da definieren.
Warum sollte man nicht die Möglichkeiten von Photoshop nutzen, wenn diese Dinge doch
alle machbar sind? Ich jedenfalls wüsste keinen Grund, warum man das unbedingt alles
von Hand und mit Hilfe von selfHTML nachbauen müsste. Ist alles nur eine Frage der
richtigen Einstellungen und natürlich der eigenen Zeichenkunst.

Gruß
Martin
 
Martin, Du hast so wie es klingt nicht viel mit Quelltexten gearbeitet, welche diverse Programme produzieren. Besonders Adobe hat sich auch hier einen Platz im Olymp gesichert (z. B. Golive Quelltext-Overkill). Allerdings im negativen Sinne. Der Quelltext ist und bleibt (in fast jedem Fall) ein Horror!

50 Zeilen die das gleiche Darstellen wie 10? Muss man das haben?

Und um ehrlich zu sein, warum sollte jemand der HTML-Dateien produzieren möchte eben dieses NICHT lernen? Funktionierender HTML-/CSS-Quelltext ist keineswegs eine Frage der richtigen Einstellungen und der eigenen Zeichenkunst. Gerade weil der Output so rudimentär ist und in vielen, vielen Fällen (unnötig) aufgeblasen - und was Tabellen angeht sogar fehlerhaft.

Ja, es ist empfehlenswert mit ImageReady zu arbeiten um die Webgrafiken (z. B. Buttons mit verschiedenem Status) zu exportieren. Das funktioniert auch einwandfrei. Aber der Quelltext der HTML-Datei taugt in 90% der Fälle nichts. Ich empfehle selfHTML nicht aus Überheblichkeit, sondern aus Erfahrung.
 
Neurodaemon, hast du schon mit Photoshop bzw. ImageReady gearbeitet?
Hast du schon damit hübsches XHTML + CSS ausgegeben?

Die Frage war nicht, wie man am besten HTML, XHTML, CSS schreiben lernt, sondern ob
und wie man es mit Photoshop machen kann. Und da gibt es reichlich Möglichkeiten.
Zum Einen die von mir genannte, die alle notwendigen Funktionen beinhaltet und brauchbaren
Quellcode ausspuckt. Zum Anderen kann man tatsächlich auch richtige Webtemplates
anlegen, die aber eher für das automatisierte Erstellen von Galerien gedacht sind.

Wenn man ausreichend Erfahrung mit HTML, XHTML & CSS hat, dann braucht man solche
Hilfsmittel nicht, aber wenn man eben diese Erfahrung noch nicht hat, dann ist Photoshop in
Verbindung mit ImageReady mittlerweile ein starkes Werkzeug.

Noch niemand ist von heute auf morgen Meister aller Klassen geworden und deshalb sind meiner
Meinung nach Hilfsmittel insbesondere am Anfang erlaubt. Bei aller Begeisterung für puristischen
Umgang mit den Webauszeichnungssprachen, es gibt tatsächlich Werkzeuge, die einem mächtig
helfen können, wenn man sich nur mal damit beschäftigt und etwas genauer hinschaut.

Ich habe nicht geschrieben, dass er oder jeder andere kein HTML lernen soll.
Aber bitteschön eins nach dem Anderen. Wetten, dass deine erste Webseite
auch nicht valide und hübsch strukturiert geschrieben war? Mit der Zeit kommt
das Können.

Gruß
Martin
 
Zuletzt bearbeitet von einem Moderator:
@martin: Ich glaube ich habe mich mißverständlich ausgedrückt (Du weißt ja, eigentlich verstehen sich die Menschen einander nicht wirklich) ;)
Ja, Photoshop und ImageReady geben validen, sauberen Code aus. Das möchte ich nicht in Absprache stellen.

Vielleicht bin ich auch zu sehr aus meiner Sicht an das Thema gegangen (ogott, ich werde alt und verbohrt :-) ). Ich habe nämlich zuerst HTML gelernt (in den frühen Neunzigern). Meine Website war valide und hübsch strukturiert mit dem Windows notepad geschrieben ;-]
Hübsch anzusehen war sie indes nicht wirklich :rolleyes:

Wenn man nun locker an das Ganze geht gebe ich Dir auch recht, der Quellcode ist "brauchbar", wie Du schon meintest.

Letztenendes wird miketheking entscheiden was er machen möchte. Da er wohl Photoshop UND HTML nicht beherrscht, dürfte es auf das gleiche Hinauskommen. ... ob er nun zuerst HTML oder Photoshop wählt.

@mikethekin: Sorry das wir so an Dir vorbeidiskutieren ;)

nochmal@martin: Leider haben wir aber scheinbar keine Tutorials zu dem Thema. Wenn Du Erfahrung damit hast via PS/IR vielseitige Layouts zu zaubern, wäre ein Tutorial doch eine feine Sache. Wenn ich helfen kann, und sei es nur als Versuchsperson oder zum Korrekturlesen bin ich gerne dabei ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück