Erstellen von Web-Templates in Photoshop

  • 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!

  • :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 ;).

  • 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ß!

  • 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ß!

  • 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ß

    der BalkanTuna

  • 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 [wiki=CSS]CSS[/wiki] möglich,
    siehe an Hand des Bsp.: http://www.intensivstation.ch/files/templates/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 [wiki=Adobe_Photoshop]Photoshop[/wiki] 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 [wiki=php]PHP[/wiki] oder [wiki=Java_%28Programmiersprache%29]Java[/wiki] 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/fo…efinieren.htm#allgemeines


    In unzähligen Script-Archiven gibt es bereits fertige Scripte wie u.a. bei:
    http://www.pa-s.de/php/script-…-V.1.0-(PHP+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/eig…ntergrund.htm#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.

  • 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!