Erstellen von Web-Templates in Photoshop

[special007]

Ich möchte mit Adobe Photoshop eine Homepagevorlage erstellen. Zu diesem Zweck wären mir einige grundlegende Informationen hilfreich:


1. Welche Pixel- bzw. DIN-Größe (z. B. A4) sollte meine Seite in Photoshop haben? (Ich möchte die Site ähnlich wie die unter www.kempinski.com horizontal am Bildschirm zentrieren. Daher muss die Vorlage ja nicht 1024 px breit sein.) Sind zu diesem Zweck 800 x 1200 px angemessen? Oder ist es tatsächlich besser, das gesamte weit verbreitete Bildschirmformat voll auszunützen (1024 px oder sogar mehr)?

2. Will ich auf einer Seite in Photoshop diverse Felder farbig gestalten, nütze ich einfach das Rechteck-Werkzeug, oder gibt es hierfür eine elegantere Lösung?

3. Wie (und mit welchem HTML-Code) lässt sich am professionellsten die aktuelle Uhrzeit und das Datum in eine Website einbinden? Muss ich dazu bereits in Photoshop Einstellungen vornehmen bzw. Objekte einbinden, die dann diese Werte enthalten? Die Option, ob man die Werte dann letztendlich in der Homepage haben will, sollte sich auch zu einem späteren Zeitpunkt noch leicht ändern lassen.

4. Wie kann ich einen Login-Bereich definieren? Müssen hierbei Vorkehrungen in Photoshop getroffen werden, oder reicht es, einfach einen Text mit dem Inhalt "Login" zu verfassen, und ihn danach zu verlinken?

5. Die Verlinkung auf andere Seiten kann doch bereits in Photoshop erfolgen, oder muss auch diese mit HMTL (oder einer anderen Sprache) programmiert werden? Sollte der letztere Punkt zustimmen, wie lassen sich dann noch einzelne Textpassagen als Link definieren, wenn der Hauptinhalt der Seite schließlich als Bild (Photoshop) gespeichert ist.

6. Wie muss ich generell mit Text in mit Adobe Photoshop erstellten Templates verfahren, um sie später noch zu programmieren?

7. Was hat es mit RSS-Feeds auf sich? Wie kann ich schon bei der Erstellung von Templates für den späteren Verwender der Website vorsorgen, dass er diese Funktion nutzen kann? Wie lässt sich die RSS-Feed-Funktion abbonieren und welchen Nutzen haben der Homepagebetreiber bzw. Leser? Wie kann er Informationen verwenden (einsehen) und welcher Art sind diese?

8. Wie kann ich Felder (eigentlich Buttons) programmieren, dass sie als Links verwendet werden können? Muss ich schon in Photoshop den Bereich (vielleicht als eigenen Ebene) definieren, um ihn später noch gezielt anwählen zu können?

9. Wie lassen sich am einfachsten Rollover-Buttons erstellen? Ich habe bereits erfahren, dass der ImageReader zu ihrer Einrichtung gut geeignet sind, doch würde mich auch die entsprechende Vorgehensweise in Photoshop interessieren. Muss jedes für einen Rollover-Button vorgesehene Feld in einer eigenen Ebene liegen?

10. Sollte generell zu einer maximalen Freiheit in der späteren Veränderbarkeit des Templatedesigns jedes Objekt (Text, Formobjekt, Bild, ...) in einer individuellen Ebene liegen?

11. Ist die Ausrichtung der einzelen Objekte auf dem Bild mit Hilfslinien gut durchführbar? Welche Möglichkeiten bieten sich dazu noch (z. B.: Bearbeiten/Transformieren/Skalieren und dann genaue Ausrichtung der Objekte im Bezug auf ihre Position auf dem Bild)?

12. Wie lässt sich in Photoshop eine Linie ziehen, deren Breite usw. frei bestimmbar ist? Wähle ich den Linienzeichner aus, ist es aufgrund meiner fehlerhaften Einstellungen nur möglcih, einen Pfeil aufzuziehen.

13. Wodurch lassen sich Linien, Kreise, Rechtecke und ähnlichen Objekte in Photoshop einfach und schnell strichlieren? Oder ist das Programm, da es sich dabei ja um kein Vektorprogramm (wie CoralDraw) handelt, eher nicht zu solchen Zweck geeignet?

14. Muss ich, wenn in einem Feld (Rechteck mit weißer Füllung und 1 px breiter schwarzer Kontur) später auf der Website ein Inhalt vom Betrachter eingegeben werden können soll (z. B.: zur Eingabe der E-Mail Adresse für die Zusendung eines Newsletters), dieses Objekt bereits im Zuge der Bearbeitung in Photoshop auf diese Funktion vorbereiten?

15. Wie und mit welcher Programmiersprache kann ich ein solches Feld am besten definieren? Die E-Mail-Adresse soll in einer Datenbank (z. B.: Access) gespeichert werden und es soll automatisch eine vorgefertigte Datei (der Newsletter) an diese Adresse gesendet werden. In welchem Programm sollte dieser Newsletter erstellt und in welchem Dateiformat sollte er gespeichert bzw. gesendet werden? Zur Sendung muss ja ein Zugriff auf eine Datei erfolgen: Wie lässt sich dieser realisieren? (Da einige Fragen nicht wirklich etwas mit Photoshop zu tun haben; wo kann ich mich näher informieren?)

16. Will ich einen einfachen kleinen standardmäßigen Pfeil erstellen, der nur einen Link darstellen soll, wie kann ich diesen schnell anfertigen (Dreieck oder gibt es einen bessere Möglichkeit)?

17. Wenn ich mit Photoshop ein Template erstellen, dieses mit einer Programmiersprache (z. B. HTML) horizontal zentriere und den Hintergrund mit Verlauf (wie?) programmiere, und jemand über einen Link einen neuen Teil der Website öffnet, lädt sich die gesamte Bildschirmoberfläche neu? Die Frage ist nun, ob ich in Photoshop oder danach mittels Programmierung einen festgelegten Bereich (Sitemenü) bestimmen kann, der sich nicht immer neu laden muss. Mit welchem Programm kann ich das sonst verwirklichen?

18. Habe ich ein Bild (z. B.: hochauflösendes Foto) in Photoshop eingefügt und will es fürs Internet/für den Druck optimieren, wie gehe ich vor(Skalierung, ...)?

19. Wie verbreitet ist die von mir versuchte Variante, ein Template in Photoshop zu erstellen, es mit HTML (oder einer anderen Sprache) zu programmieren, und die beiden Dateien (.psd, .html) an einen Abnehmer weiterzugeben, der dann nach eigenem Ermessen Änderungen vornehmen kann?

20. Welche anderen wichtigen Tipps gibt es noch zu diesem Thema?


Ich bitte um eure Antwort: Solltet ihr mir bei einzelnen oder sogar mehreren Fragen helfen können, wäre ich sehr dankbar!

Danke!

[Rinaldo]

:O....

Also, ich geb Dir jetzt mal ein paar Links, die Dir einige Fragen sicher beantworten können:

http://www.photozauber.de/workshops/schulungen/ -> u.a. Webdesign mit Photoshop

http://de.selfhtml.org -> HTML - von A-Z (PS: HTML programmiert man nicht)
http://www.css4you.de -> HTML - von A-Z

Was Fragen bezüglich Formular etc. angeht, haben wir einen eigenen Bereich dafür -> Dynamik (u.a. mit einem sehr guten Workshop für ein Formular).

Und wegen den Pfeilen ein Screenshot .

PS: Bitte beim nächsten Mal die Frage(n) nicht so lang um umfangreich beschreiben, außer es geht nicht anders. Und viele Probleme aufteilen - so fällt dann das präzise Antworten leichter .

[special007]

Danke! Ich werde mir die Links einmal durchlesen und Antworten auf meine Fragen suchen.

[special007]

Wie kann ich Templates im Internet am besten als Download zum Verkauf anbieten? Auf welche Art muss ich das Formular aufbauen und wie lässt sich der Verkaufsprozess durchführen? Was muss man beachten?

Ich möchte, dass dem Käufer nach dem einmaligen Kauf des Templates, im Login-Bereich meiner Website diese Vorlage von da an immer zum Download zur Verfügung steht, falls er z. B. Teile davon versehentlich löscht (ähnlich wie bei McAfee).

Gruß!

[special007]

Ich bitte darum, diese Fragen noch gezielt zu beantworten: Die anderen haben sich für mich durch die Informationen auf den Websiten, die mir empfohlen wurden, erklärt.

1. Welche Pixel- bzw. DIN-Größe (z. B. A4) sollte meine Seite in Photoshop haben? (Ich möchte die Site ähnlich wie die unter www.kempinski.com horizontal am Bildschirm zentrieren. Daher muss die Vorlage ja nicht 1024 px breit sein.) Sind zu diesem Zweck 800 x 1200 px angemessen? Oder ist es tatsächlich besser, das gesamte weit verbreitete Bildschirmformat voll auszunützen (1024 px oder sogar mehr)?

2. Wie (und mit welchem HTML-Code) lässt sich am professionellsten die aktuelle Uhrzeit und das Datum in eine Website einbinden? Muss ich dazu bereits in Photoshop Einstellungen vornehmen bzw. Objekte einbinden, die dann diese Werte enthalten? Die Option, ob man die Werte dann letztendlich in der Homepage haben will, sollte sich auch zu einem späteren Zeitpunkt noch leicht ändern lassen.

3. Muss ich, wenn in einem Feld (Rechteck mit weißer Füllung und 1 px breiter schwarzer Kontur) später auf der Website ein Inhalt vom Betrachter eingegeben werden können soll (z. B.: zur Eingabe der E-Mail Adresse für die Zusendung eines Newsletters), dieses Objekt bereits im Zuge der Bearbeitung in Photoshop auf diese Funktion vorbereiten?

4. Wie und mit welcher Programmiersprache kann ich ein solches Feld am besten definieren? Die E-Mail-Adresse soll in einer Datenbank (z. B.: Access) gespeichert werden und es soll automatisch eine vorgefertigte Datei (der Newsletter) an diese Adresse gesendet werden. In welchem Programm sollte dieser Newsletter erstellt und in welchem Dateiformat sollte er gespeichert bzw. gesendet werden? Zur Sendung muss ja ein Zugriff auf eine Datei erfolgen: Wie lässt sich dieser realisieren? (Da einige Fragen nicht wirklich etwas mit Photoshop zu tun haben; wo kann ich mich näher informieren?)

5. Wenn ich mit Photoshop ein Template erstellen, dieses mit einer Programmiersprache (z. B. HTML) horizontal zentriere und den Hintergrund mit Verlauf (wie?) programmiere, und jemand über einen Link einen neuen Teil der Website öffnet, lädt sich die gesamte Bildschirmoberfläche neu? Die Frage ist nun, ob ich in Photoshop oder danach mittels Programmierung einen festgelegten Bereich (Sitemenü) bestimmen kann, der sich nicht immer neu laden muss. Mit welchem Programm kann ich das sonst verwirklichen?

Bitte gebt mir wenn möglich den genauen URL der Seiten an, die mir zur Beantwortung meiner Fragen hilfreich sein können.

Danke! Gruß!

[digimassa]

Benutz mal den search button hier im Forum, die Themen sind sehr ausführlich behandelt.
Abgesehen davon unterschätzt Du das Ding anscheinend grundsätzlich völlig, IMO brauchst Du einige Monate (Minimum!) Übung um das alles hinzukriegen.


Gruß

[koenixblau]

Ich bitte darum, diese Fragen noch gezielt zu beantworten: Die anderen haben sich für mich durch die Informationen auf den Websiten, die mir empfohlen wurden, erklärt.

1. Welche Pixel- bzw. DIN-Größe (z. B. A4) sollte meine Seite in Photoshop haben? (Ich möchte die Site ähnlich wie die unter www.kempinski.com horizontal am Bildschirm zentrieren. Daher muss die Vorlage ja nicht 1024 px breit sein.) Sind zu diesem Zweck 800 x 1200 px angemessen? Oder ist es tatsächlich besser, das gesamte weit verbreitete Bildschirmformat voll auszunützen (1024 px oder sogar mehr)?

Stichwort: "Viewport".

Zwar etwas altbacken dennoch interessant: http://www.drweb.de/weblog/weblog/?p=709 .
Die auf der Grafik vorgestellten 800 x 600 wird gegenwärtig wenig bis kaum genutzt - 1024 x 768 dürfte sich mittlerweile (vorrübergehend) eingebürgert haben.
Bei der Design-Erstellung, in Photoshop, dürfte eine Breite von max. 1000px ausreichen. Die Höhe ist abhängig vom Inhalt bzw. von deinem Vorhaben.

Die horizontale Zentrierung ist u.a. mittels CSS möglich,
siehe an Hand des Bsp.: http://www.intensivstation.ch/files/...es/temp09.html (v. Intensivstation)

2. Wie (und mit welchem HTML-Code) lässt sich am professionellsten die aktuelle Uhrzeit und das Datum in eine Website einbinden? Muss ich dazu bereits in Photoshop Einstellungen vornehmen bzw. Objekte einbinden, die dann diese Werte enthalten? Die Option, ob man die Werte dann letztendlich in der Homepage haben will, sollte sich auch zu einem späteren Zeitpunkt noch leicht ändern lassen.

Solche Spielereien werden nicht in Photoshop eingebunden, sondern im "Quelltext" der entsprechenden Seite.
Wie eine Seite im "Hintergrund" aussieht kannst du in deinem Browser, bsp. IE mittels "Bearbeiten > Ansicht > Quelltext anzeigen", herausfinden.

Zeitangaben sind bspw. mit PHP oder Java möglich.

Vorgehensweise mittels PHP, vorrausgesetzt das PHP unterstützt wird:
http://www.schattenbaum.net/php/datum.php , mittels Java:
http://www.rener.de/node/277 .

3. Muss ich, wenn in einem Feld (Rechteck mit weißer Füllung und 1 px breiter schwarzer Kontur) später auf der Website ein Inhalt vom Betrachter eingegeben werden können soll (z. B.: zur Eingabe der E-Mail Adresse für die Zusendung eines Newsletters), dieses Objekt bereits im Zuge der Bearbeitung in Photoshop auf diese Funktion vorbereiten?

Es handelt sich hierbei Formular-Feld:
http://de.selfhtml.org/html/formular...tm#allgemeines

In unzähligen Script-Archiven gibt es bereits fertige Scripte wie u.a. bei:
http://www.pa-s.de/php/script-Newsle...+MySQL)-58.php (Voraussetzung: PHP & eine MySQL-Datenbank)

In welchem Programm sollte dieser Newsletter erstellt und in welchem Dateiformat sollte er gespeichert bzw. gesendet werden? Zur Sendung muss ja ein Zugriff auf eine Datei erfolgen: Wie lässt sich dieser realisieren? (Da einige Fragen nicht wirklich etwas mit Photoshop zu tun haben; wo kann ich mich näher informieren?)

Newsletter können im HTML oder "Nur-Text"-Format versandt werden,
mit dem entsprechenden Script ist dies auch mit Outlook & Co. möglich.

Ohne die entsprechenden Grundkenntnisse wird dein zukünftiges schwer durchsetzbar.

5. Wenn ich mit Photoshop ein Template erstellen, dieses mit einer Programmiersprache (z. B. HTML) horizontal zentriere und den Hintergrund mit Verlauf (wie?) programmiere, und jemand über einen Link einen neuen Teil der Website öffnet, lädt sich die gesamte Bildschirmoberfläche neu? Die Frage ist nun, ob ich in Photoshop oder danach mittels Programmierung einen festgelegten Bereich (Sitemenü) bestimmen kann, der sich nicht immer neu laden muss. Mit welchem Programm kann ich das sonst verwirklichen?

Bitte gebt mir wenn möglich den genauen URL der Seiten an, die mir zur Beantwortung meiner Fragen hilfreich sein können.

Danke! Gruß!

Beispielsweise wäre es über Frames/iFrames möglich, entsprechende Seiten liegen bereits in den obigen Posting vor.

Ein Verlauf als Hintergrund kann man zum Beispiel mittels CSS definieren:
siehe allg. dazu: http://de.selfhtml.org/css/eigenscha...tm#allgemeines

Empfehlenswert wenn du die vorgestellten Seiten ansiehst,
die dortigen Haupt- und Folge-Seiten inbegriffen.
Entsprechend dieses wäre Eigeninitiative gefragt.

Auch wie schon empfohlen ist die Suche sehr hilfreich,
da wenige Lust haben wiederkehrende Fragen zu beantworten.

Sollte Grundkenntnis-Beschaffung nicht gewünscht sein,
wäre das hier befindliche Job-Board empfehlenswert,
oder eine Beauftragung einer Agentur/Firma.

[special007]

Vielen Dank für die guten Informationen und Tipps bezüglich meiner Fragen!
Gruß!

[special007]

Hallo!

Welche Dateien soll ich dem Kunden bei folgendem Angebot am besten zur Verfügung stellen?
Aufbau der Websitevorlage:

4 Seiten einer Website mit gleichem Design aber unterschiedlichem Inhalt (Menüpunkte z. B.: Home, Design, Template und Kontakt) - Kunde kann den von mir frei zusammengefügten Text, der in Photoshop in Textfelder erstellt wurde, nach eigenem Ermessen verändern (natürlich auch das Design, wenn ihm die Arbeitsschritte bekannt sind)

Die einzelnen Bilder wurden mit Slices bearbeitet (die Bildteile werden in die Unterordner: bilder_home, bilder_design, bilder_template und bilder_kontakt, in den Ordner mit allen benötigten Dateien gespeichert).

Soll ich nun die 4 Photoshop-Dateien, die 4 von ImageReader angefertigten html-Dateien sowie die 4 Bilderordner an den Kunden weitergeben in diesem Paket an den Kunden weitergeben?
Ist es denn dann einfach genug für ihn, Veränderungen vorzunehmen?

PS:
1. Die von ImageReader erstellten html-Dateien wurden von mir dahingehend in Dreamweaver bearbeitet, dass die Bilder am Bildschirm zentriert und der Seitenhintergrund auf die gewünscht Farbe eingestellt wurden. Sind noch andere Arbeitsschritte zu empfehlen bzw. notwendig?
2. Wenn ich die Photoshop-Bilder einfach als gesamte Website verwende und obwohl ich zwar interaktive Rollover-Buttons verwende, jedoch keine weiteren dynamischen Inhalte auf der Seite eingerichtet habe, stellt sich das Problem, dass beim Ansehen der Site im IE die Symbole für Drucken, Speichern usw. erscheinen. Was wäre eine einfach Lösung? Vermutlich mit CSS definierte Ebenen in Dreamweaver.

Eine andere Website, die ich bereits erstellt habe, wurde von mir rein in GoLive zusammengabaut. (Siehe: Ferienhaus Erwin) Jedoch ist es für den Zweck der Weitergabe des Templates an Kunden vermutlich besser geeignet, ein Photoshop-Design als Basis für die Site zu verwenden. Was meint ihr dazu? (Wie repräsentiert sich der Umstand, dass sich dann keine Textinhalte der Site kopieren lassen?)

Ich wäre sehr dankbar, wenn mir jemand behilflich sein kann!

[Rinaldo]

Dem Kunden reicht die HTML-Datei vollkommen, um Inhalte zu ändern...

[special007]

Wenn auch der gesamte Text in Photoshop erstellt wurde, reicht den Kunden die html-Datein nicht. Er kann dann lediglich die mit Slices bearbeiten Bilder austauschen. Änderungen des Designs lassen sich dann doch auch nicht verändern.

Vielleicht wurde meine Frage auch falsch verstanden: Ich habe nicht wie üblich in Dreamweaver mit Tabellen (meist ohne Ränder) den Grundaufbau erstellt und dann in die einzelnen Zellen entweder in Photoshop erstellte Bilder bzw. Text eingebunden. In einem solchen Fall wäre mir klar, dass die html-Version des Templates für Veränderungen ausreicht.

Wenn man das gesamte Design in PS erstellt hat und es dann in ImageReader mit Hilfe des Slicing in Einzelteile ausplittet wurde, kann man zwar sofort eine html-Datei erstellen, diese ist aber inhaltlich (Text, usw.) nicht mehr veränderba. Natürlich kann ich in Dreameaver einzelne Bildteile löschen und neue einfügen, doch ist eine leichte Veränderung des Seitenaufbaues wie in Photoshop nicht möglich.

Ich bitte nochmals um eine Antwort. Danke!

[max.m]

Der Text gehört auch nicht in das Template sondern wird in das HTML eingepflegt. Nicht nur dass man den Text dann im Nachhinein nicht mehr ändern kann, sondern auch weil das für Suchmaschinen äussert schlecht ist.

[special007]

Danke, ich wollte nur sichergehen.

Soll ich daher auf die erwähnte Art das Design zuerst in Dreamweaver mit Tabellen (oder doch besser mit Ebenen) erstellen, um dann in die einzelnen Zellen Photoshop-Bilder einzufügen? Dann sollte es doch möglich sein, alleine die html-Datei weiterzugeben.

Wurde auch die Seite http://www.bioholz.at auf diese Art erstellt? Wie wurde dann zum Beispiel die gekrümmte Linie (alleine mit Tabellen nicht möglich) eingebaut? Wie der Hintergrund? Wie die Seitenstruktur? Der obere Teil besteht vermutlich aus einer einzigen Zelle, die mit einem geslicten Bild gefüllt wurde (als Zellenhintergrund oder doch als Bild in Dreamweaver)? Vielleicht sieht jemand am Aufbau genau, wie es gemacht wurde. Das würde mir sehr helfen, da es ja im Grund immer auf die selbe Art erstellt wurde.

Mit welchen Schritten wird eine solche Site erstellt (Dreamweaver oder Editor), usw.?

Danke für eure Antworten!

[koenixblau]

Wäre doch logisch die *.psd auszuliefern bzw. eine Arbeit abliefern die ein weiterverarbeiten ermöglicht.

Welche Dateien soll ich dem Kunden bei folgendem Angebot am besten zur Verfügung stellen?

"Design"-*.psd, HTML-Seiten des Erstelldatums (Slices inbegriffen),
eventuelle Logo die erstellt wurden etc.

Solche, wie die obengenannte, Frage solltest du dich selbst fragen,
Stichwort: Kundenfreundlichkeit. Wir führen schließlich nicht dein Unternehmen.

EDIT

Danke, ich wollte nur sichergehen.

Soll ich daher auf die erwähnte Art das Design zuerst in Dreamweaver mit Tabellen (oder doch besser mit Ebenen) erstellen, um dann in die einzelnen Zellen Photoshop-Bilder einzufügen? Dann sollte es doch möglich sein, alleine die html-Datei weiterzugeben.

Wurde auch die Seite http://www.bioholz.at auf diese Art erstellt? Wie wurde dann zum Beispiel die gekrümmte Linie (alleine mit Tabellen nicht möglich) eingebaut? Wie der Hintergrund? Wie die Seitenstruktur? Der obere Teil besteht vermutlich aus einer einzigen Zelle, die mit einem geslicten Bild gefüllt wurde (als Zellenhintergrund oder doch als Bild in Dreamweaver)? Vielleicht sieht jemand am Aufbau genau, wie es gemacht wurde. Das würde mir sehr helfen, da es ja im Grund immer auf die selbe Art erstellt wurde.

Mit welchen Schritten wird eine solche Site erstellt (Dreamweaver oder Editor), usw.?

Danke für eure Antworten!

Hä?

In dem Beispiel "Holz" kann ich keine Tabelle erkennen.
Es wurde mit Div's gearbeitet. Siehe das "CSS-Kompendium"
Dreamweaver ist ein Editor,
es wäre empfehlenswert mit einem Editor zu arbeiten.
Wie und womit der Entwickler gearbeitet hat,
kann er dir nur persönlich sagen.


Worauf willst du hinaus?

ps: Und wer bewertet diesen Thread mit 5 Sternen?!

[SonKite]

EDIT

ps: Und wer bewertet diesen Thread mit 5 Sternen?!

Ich war es zwar nicht aber einen gewissen Unterhaltungswert hat der Thread schon