Template aus Photoshop erstellen
-
Hei Leute.
Bin gerade dran ein Template mit Photoshop zu erstellen für eine Webseite.
Für typo3 genauer gesagt.Mein Problem ist nun dass ich mein gestalltetes Bild mit Slices in Photoshop aufgeteilt habe. Wenn ich nun dieses Bild als HTML Seite speichere erhalte ich eine Tabelle in der die Bilder dargestellt sind. Wie schafe ich es nun aber auf ein solches Bild einen Text mit Hilfe von HTML drauzuschreiben. Das Problem ist ja das die Bilder eingebettet sind und nicht als Hintergrundbilder definiert sind.
Kann mir da jemand helfen?
-
Zuerstmal solltest du dich von dieser ganzen Slice-Geschichte und Photoshop-Als-HTML-Exportieren distanzieren. Die, aus der Photoshopdatei exportierte, HTML-Geschichte die Photoshop da auspupst ist nicht mehr dem Standard entsprechend (und nicht mehr Endbenutzerfreundlich, sprich Smartphones, Tablets etc.). Tabellenlayouts werden heutzutage aus crossbrowser-Kompatibilitätsgründen nicht mehr verwendet und sollten nur dazu verwendet werden, um wirklich etwas tabellarisch darzustellen. Eine Ausnahme bieten da die Fox-Columns Varianten, die allerdings eine Lösung für eine andere Baustelle sind.
Ich bin am besten mit dieser Vorgehensweise gefahren:
Design erstmal komplett fertig machen. Die Aufteilung im Vorfeld klar festlegen und dann überlegen, welche Elemente dynamisch erzeugt werden können und welche übernommen werden müssen. Mit dynamisch meine ich Dinge wie "CssPIE" (um Gradienten oder beispielsweise runde Ecken per JavaScript zu erzeugen/zeichnen). Mit "übernommen" meine ich Dinge wie Logos, Schriften mit speziellen Effekten, Farbeinblendungen etc.Generell solltest du dir angewöhnen, mit dynamischen Divs zu arbeiten. Es gibt viele, gute Tutorials dazu im Netz.
Wenn du dennoch eine genaue Antwort auf deine Frage möchtest, dann poste doch mal etwas von dem generierten Code. Afaik sollte es kein großes Problem sein, in bebilderte Zellen zu schreiben.
-
Gerne gehe ich natürlich mit der Zeit.
Design erstmal komplett fertig machen.
Heißt ich habe mal mein Kompletten Hintergund Design.
Wie schaffe ich es dann meinen Inhalt genau an die Stellen zu bringen ohne Slices?
-
Indem du, wie bereits oben erwähnt, die Aufteilung im Vorfeld festlegst. Dafür kannst du die Linealfunktion (Strg + R) benutzen, mit der du die Bereiche in deinem Projekt festlegen kannst ("v" um das Movetool auszuwählen und dann einfach von der Seite ein Lineal reinziehen).
Beispiel:
Du möchtest dass der Kopfbereich deiner Webseite eine Höhe von 350px hat. Dann ziehst du dir im Vorfeld (bevor das eigentliche designen losgeht), das Lineal an die Position 350px. Wenn du dann später mit dem Webseiten-Coden anfängst, nutzt du dein Photoshop-Projekt als Stütze.Es ist am Anfang relativ schwer, ein aufgepimptes Design 1:1 als HTML umzusetzen. Faktoren, wie eben crossbrowser-Kompatibilität oder Formatierung, bereiten Anfängern schnell mal größere Probleme.
Weiter sollte gesagt werden, dass es oftmals vorkommt, dass das Photoshopdesign in Photoshop super aussieht, aber bei der späteren Umsetzung große Probleme bereitet. Eine sorgfältige Planung im Vorfeld vermeidet solche Zustände. Es war für mich persönlich immer hilfreich, das designen vom programmieren klar zu trennen.
-
Nochmal ich habe mein Design schon vertig.
Sprich ich habe in Photoshop ein Bild designt. Hier weis ich nun genau wo mein Inhalt hin gehört und wo meine Navigation gingehört usw.
Aber als was speichere ich nun das Bild ab? Einfach als jpeg und nutze dass dann als Hintergund bild. Oder wie?
-
Um die Ecke schrieb:
Aber als was speichere ich nun das Bild ab? Einfach als jpeg und nutze dass dann als Hintergund bild. Oder wie?
Nein, du holst dir einen Webdesigner der das Design in HTML/CSS umsetzt.
-
Na supi. Das ist mal ne Antwort. Wenn man nur so antworten bekommen würde in Foren könnte man die sofort abschaffen.
-
Um die Ecke schrieb:
Na supi. Das ist mal ne Antwort. Wenn man nur so antworten bekommen würde in Foren könnte man die sofort abschaffen.
Du hast ein Bild eines Motors gezeichnet und gehst jetzt zu einem Mechaniker und sagst: wie kann ich den Motor jetzt aus Photoshop fix und fertig exportieren.
Und das geht halt nicht.
Man nimmt die Photoshop Datei her und setzt das ganze dann in HTML/CSS um. Wenn man HTML/CSS nicht kann, dann muss man sich hilfe holen. So einfach ist das.
Wenn du eine Frage zu HTML hast, kannst du sie gerne stellen.
Aber ein "Wie baue ich einen Motor, ich habe hier ein Foto eines Autos als Vorlage" wird keine sinnvollen Antworten bekommen
-
Ich kann HTML und ich kann CSS um das gehts nicht. Aber ich habe eine Photoshopdatei die ist halt ein ganzes Bild. Und die besteht halt nicht aus einzelnen Bereich wie Header, Contentbereich usw.
Früher hat man das mit Slices gemacht, wenn man das halt dann nun nicht mehr so macht muss es ja andere Techniken geben.
Ich kann den entwurf gerne mal zeigen, vieleicht ist dann klarer:
-
Dann mach doch slices.
So ein Design macht man heute halt nicht mehr, weils enorm unpraktisch ist.
Aber technisch ist das ja immernoch moeglich.PS:
wenn dein Problem ist, dass Photoshop dir kein passendes HTML erzeugt, weil img Tags verwendet werden statt td backgrounds - dann musst du das halt umschreiben.Wie gesagt: die professionelle Variante ist, die Photoshop Datei zu nehmen und als Vorlage zu verwenden um das in HTML nachzubauen.
Alle automatischen exportfunktionen werden Probleme machen.
Aber diese Standard-Slices von Photoshop kann man schon verwenden wenn man ein tabellen-Layout machen will. Man muss es halt umschreiben.