*.PSD vià Photoshop als webfähiges Pic speichern

B

BlackFladder

Grünschnabel
Hi,

ich habe mich bereit erkärt für einen Verein ne Website zu gestalten. Dies habe ich ansatzweise bereits online gestellt. Soll heißen das Layout ist ohne Inhalt online zu sehen unter:

http://www.mv-herlikofen.de/testindex/index.htm

Gleich beim ersten Betrachten wird deutlich, wo das grafische Problem zu suchen ist:

In den roten Grafiken mit ihrem "unschönen Aussehen", also den Rändern und ihrem Gesamterscheinungsbild - sie sind, so wie ihr sie jetzt seht, als gif abgespeichert.
Ursprünglich wurden sie mit Photoshop als psd abgespeichert.
Hier die roten Grafiken in "Urform" zum Saugen:

wappen.psd

Folgende Anforderungen muss ich an das Format der Grafiken stellen:

  1. Das Format muss Transparenz browserübergreifend darstellen können.
  2. Qualitätseinschränkungen müssen verglichen mit dem psd möglichst gering ausfallen

Problem:

Drei webfähige Formate tun sich mir auf:

*.jpg
*.gif
*.png

Jpg fällt raus, weil es keine Transparenz darstellen kann.
Pngs werden vom IE nicht korrekt angezeigt
Gifs stellen Transparenz richtig dar, bescheren mir offensichtlich aber erhebliche Qualitätseinbußen.


Meine Frage:

Wie kann ich die Grafik wappen.psd als webfähige Grafik abspeichern und dabei die in der Liste genannten Punkte möglichst vollständig berücksichtigen?

Herzlichsten Dank,
Fladdy

P.S. *Sektaufmach* my first topic *g* ^^"
 
Alles versucht - für Web Speichern ermöglicht keine besseren Ergbnisse - dien Screenie zeigt mir auch nur eine Konfiguration, wie ich sie bereits versucht hab - die weißen Ränder dürfen nicht sein - sie müssten auch transparent sein - hätte den selben Effekt, als wenn die ganze Grafik weiß wär - kommt oben aus dem Thread aber eigentlich raus,

danke dir trotzdem

Fladdy
 
In der Zwischenzeit hab ich noch einiges experimentiert, komm aber nicht weiter - die Proportionen passen dann auch irgendwann nimmer - deshlab hab ich mich entschlossen nochmal neu anzusetzen - ich werd das Layout neu aufziehn - etwas verkleiner, meld mich dann wieder,

Fladdy
 
Hi du!

Vielleicht wäre es erstmal wichtig das du die Unterschiede zwischen den Formaten verstehst. Habe diese vor kurzer Zeit mal im Forum erklärt:

http://www.tutorials.de/tutorials166526.html

Bei gif ist es nämlich so, das du diese weißen Ränder niemals wegbekommen wirst, da diese zum Verlauf gehören. gif kennt nur: Transparent oder Nicht-Transparent.

Alternativen: PNG, auch wenn das nicht gerade IE freundlich ist oder der Verzicht auf einen Verlauf oder einen transparenten Hintergrund.

Lieben Gruß,
Manuel ;-]
 
@ShadowMan:

Vielen Dank für deinen Post, dann wäre das nun auch mal geklärt - nur bringt mich diese Erkenntnis nicht gerade weiter, eher das Gegenteil ist der Fall >.<

Ich werde mich auf jeden Fall daran machen müssen ne neue Grafik, die vielleicht formgleich ist, zu entwerfen - die Ränder sollten dann wohl mit klaren Kanten abgetrennt sein und Schattierungen sollten, zumindest an den äußeren Rändern der Grafik, vermieden werden.

Mein Gott - das erste css-Layout und gleich so viel Theater >.<' Wenn's nur das Grafikprob gewesen wär, würd ich ja gar nix sagen, aber die Vorgeschichte allein schon hat mehrere Seiten in nem anderen Forum beansprucht -.-' Und alles ehrenamtlich - nya - so ist des halt ^^"
 
Mal ne "dumme" Frage, aber wieso müssen es unbedingt GIFs sein? Wieso machst du dein Layout nicht und sliced es dann als jpg? Das schaut sehr viel besser aus und sooo groß sind die daraus entstandenen Slices nun auch wieder nicht. Einfach "Fürs Web speichern" => Qualität auf 60 und das sieht bei weitem besser aus als solch verpixelte Kanten.

Oder hat es einen besonderen Grund warum es so gemacht werden muss?!

Lieben Gruß,
Manuel ;-]
 
Ich würde es auch als .jpg machen und dann einfach nicht nur das Logo sondern auch einen Teil der Naviagtion mit in das Bild einbinden, dann hast du dieses Problem nicht mehr.
 
Japp das hat nen Grund - per slicen wäre die Sache auch um einiges einfacher - ich hab das ganze Layout relativ gestaltet - es können theoretisch bis zu ner bestimmten min-width keine horizontalen Scrollbalken entstehen - hatte zur Folge, dass die Balken, die ihr seht, im Prinzip gar keine sind, sondern nur "Minigrafiken", die 1 Pixel breit bzw. hoch sind und einfach per css mit repeat-x or repeat-y dupliziert werden - ich werd, wenns denn wirklich net geht, und danach siehts verdammt aus, doch noch slicen, allerdings so, dass die roten Grafiken jeweils noch Teile des Balkens beinhalten - somit kann ich auf die Transparenz verzichten - nya mal schaun

Danke für euer Bemühen,
Fladdy
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück