HTML Export in PS6

[Der Schweisser]

Hallo,

bin ebend wieder an die Grenzen des machbaren geraten.

Ich habe das Problem das ich eine Webseite in Photoshop erstellt habe und diese nicht richtig konvertiert bekomme. Ich habe auch schon Blindtexte eingefügt und Slices um die entsprechenden Objekte und den Rest sind auch vorhanden.

Nun habe ich das Problem, wenn ich das exportiere, dass dann mein Text ein Bild ist (also der Text steht dann nach dem exportieren im Bild) und Texte in Bildern kann man ja schlecht mit dem Texteditor bearbeiten, besser gesagt garnicht. ;-)

Zum anderen wird die eine Seite immer um die 171 kb groß nach dem Export. Ich finde aber auch nichts wo man die Quali einstellen kann ...

Über nen Tip würde ich mich sehr freuen!

[extracuriosity]

wäre mir neu, dass man editierbaren text aus photoshop heraus exportieren kann (EDIT: abgesehen von PDF natürlich). unter der option für web speichern kannst du auf jeden fall die ausgabequalität herabsetzen.

[Terry]

Ähm - bis jetzt dachte ich immer, Photoshop sei ein Grafikprogramm und kein Editor

Nee, im Ernst: beim Slicen wird zwar ein HTML-Code für eine Tabelle mit ausgespuckt, aber die bezieht sich natürlich nur auf die Grafiken. Bei der kb-Größe solltest Du Dir überlegen, wo man noch sparen kann, indem man eine Grafik sich im Hintergrunde kacheln läßt. Nur die komplexen Teile als Grafik so stehen lassen. Da lassen sich bestimmt noch einige kb sparen.

Dort, wo der Text später stehen soll, muss auf jeden Fall entweder eine schlichte Farbe oder eine dezente Grafik als Hintergrund in die Tabellenzelle eingebunden werden, nicht als normaler Tabelleninhalt, wie Photoshop das erstmal macht. Die Tabelle, die PS ausspuckt, ist zwar vielleicht ein nettes Grundgerüst, bedarf aber in jedem Fall noch der Überarbeitung. Dann passt es auch in den Editor und Du kannst Text drüberschreiben.

Die Ebene mit dem Blindtext ist sicher gut, um im Photoshop einen Eindruck von der späteren Seite zu kriegen - darf aber nicht mitgesliced werden.

[Der Schweisser]

Mhh gut naja ich war ebend immer Fireworks gewöhnt, dort konnte man machen das die Hotspots wie die sich nennen als Text und nicht als Bild exportiert werden.

Nun gut nu muss ich mir mal Gedanken machen ...

[we*ge]

Wie mein Vorredner schon bemerkt, würde ich die Textebene beim HTML-Export ausschalten, sodass eine HTML-Tabelle entsteht, die nur aus Bildern in den Tabellenzellen besteht.
In die Tabellenzelle, die nachher einen editierbaren Text enthalten soll, würde ich das Bildteil als Hintergrundbild wählen.
Und dann den Text in einem HTML-Editor drübersetzen. Vielleicht für den Text noch CSS verwenden. Ist sicherer in der Umsetzung und in der Anzeige beim Benutzer.
Gruß
Werner

[Der Schweisser]

Gut danke, dass hab ich jetzt kapiert, aber wie kriege ich es denn hin das die Grafiken ein bisschen kleiner werden?

Also ich hab jetzt so das grobe Layout was eigentlich nur aus 10 Farben und paar Formen besteht und da ist es nun so, dass beim exportieren die ganzen Grafiken zusammen 179 kb groß sind und die Hälfte ist meiner Ansicht nach maximal machbar obwohl das schon viel ist ...

Viele meinen ja man soll ins ImageReady wechseln, aber dort finde ich nicht wirklich viele Optionen wo man die Quali einstellen kann. AUf den meisten Tutorials sieht man da immer diverse Einstellmöglihckeiten in den Screenshots, aber die werden wo nicht wie ich PS 6 haben sondern was neueres.

[we*ge]

Hallo,
ich arbeite in der Regel und in solch einem Fall auch mit Fireworks. Schon um die Kompatibilität zu Dreamweaver aufrecht zu halten.
Da ich leider nur Photoshop 5.5 habe, muss ich dort das Slicen in Image-Ready vornehmen. Da kann man jedem Slice eine andere Optimierung (Optimieren-Palette) mitgeben. Wenn ich, wie in Deinem Fall, nur flächige Farben habe, exportiere ich im Gif-Format. Sollten aber weiche Farb-Übergänge vorhanden sein, ist Jpg von Vorteil. Man kann meines Wissens in Image-Ready einem Slice Gif und einem anderen Jpg mitgeben. So musst Du eben sehn, wie Du die einzelnen Slices so optimieren kannst, dass insgesamt eine "kleine" Datei zustande kommt.
Gruß
Werner

[Terry]

2. Tipp:

Schau nach, wo sich evtl. was kacheln könnte! Wenn ein Slice einfarbig ist, reicht 1x1px, der sich im Hintergrund der Zelle kachelt. Ebenso bei waagerechten oder sekrechten Linien, von denen man nur einen schmalen Streifen braucht. Da gibts bestimmt auch noch was...