Antworten auf deine Fragen:
Neues Thema erstellen
Status
Für weitere Antworten geschlossen.

Antworten zum Thema „PNG: Transparenter Verlauf fürs Web“

jonetsu

Noch nicht viel geschrieben

Ich versuche gerade einen Verlauf von Transparent zu Weiß für eine Website zu erstellen. In PNG 24 auch Grundsätzlich kein Problem, nur scheint der IE6 mit PNG-24 nichts anfangen zu können, da er aus dem Verlauf einen weißen Balken zaubert.

Wenn ich den Verlauf in Gif oder PNG-8 speichern will zeigt mir PS in der Vorschau bereits einen weißen Balken. Entsprechen ist dann auch das Ergebnis. Und mit Transparenz Dither siehts echt S****** aus.

Kann mir jemand sagen was ich da verkehrt mache ?
 

Herr_D

offline

AW: Transparenter Verlauf fürs Web

was willst du mit der Transparenz? Wechselnde Hintergrundfarben?


Ansosnten mach den Verlauf von weiß zur Hintergrundfarbe... wat auch immer... und nimm jpg
 

jonetsu

Noch nicht viel geschrieben

AW: Transparenter Verlauf fürs Web

Dieser Verlauf soll auf Bilder gelegt werden um dort noch ein paar Angaben ins Bild schreiben zu können.
 

jonetsu

Noch nicht viel geschrieben

AW: Transparenter Verlauf fürs Web

Das mit html/css ist mit einem Divtag und dessen Positionierung kein Problem.

Jedes Bild mit einem Verlauf zu versehen und die Daten aus der Datenbank per Hand einzutragen wäre allerdings sehr aufwendig, da der Bildbestand derzeit schon nicht klein ist und auch noch weiter wächst.

Der Verlauf soll halt auf der linken Seite recht weit unten horizontal ins Bild laufen. Um den Text(Schwarz) auch auf jeden Fall lesen zu können.

Wenn der IE6 nsich nicht an dem PNG-24 verschlucken würde wär der Drops auch schon lange gelutscht.

Und deinem Antworten entnehme ich jetzt einfach mal das ich das knicken kann eine meinen Wünschen entsprechende Gif/PNG-8 Grafik zu erstellen.

Dann wirds wohl eine Lösung mit PHP sein müssen.

Danke dir trotzdem.
 

jonetsu

Noch nicht viel geschrieben

AW: Transparenter Verlauf fürs Web

Oh ja. Sehr sogar. Gibt dann zwar immer noch Leute die durchs Raster fallen, aber wer heute noch IE6 nutzt und dazu noch JS blockt der hats nicht besser verdient. :D

Danke nochmal.
 

Gackoo_duz

Gackoo

AW: Transparenter Verlauf fürs Web

Erstelle eine dattei namens "iepngfix.htc" (ohne Anführungszeichen
füge folgenden Inhalt ein:

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />

<script type="text/javascript">

// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull JavaScript Menu, DHTML Menu, Popup Tooltip, Ajax Scripts - TwinHelix

// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: Creative Commons GNU Lesser General Public License


// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';


var f = 'DXImageTransform.Microsoft.AlphaImageLoader';

function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}

function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;

var bgImg = currentStyle.backgroundImage || style.backgroundImage;

if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}

doFix();

</script>
</public:component>

die Datei muss auf der Root der Website liegen!
Füge in der Html Datei folgenden Code hinzu:

Im Header

<style type="text/css">
<!--

img, div
{
behavior: url(iepngfix.htc);
}
</style>

fertig
 
Zuletzt bearbeitet:

Top_Gun

Aktives Mitglied

AW: PNG: Transparenter Verlauf fürs Web

Ja ne es gibt eine Möglichkeit die PNG8 Bilder IE6 Fähigzumachen, ich habe hier im Forum schonmal danach gefragt, kennen aber wohl nur wenige und ist auch scheinbar mit PS nicht zu machen...
 

michas

Nicht mehr ganz neu hier

AW: PNG: Transparenter Verlauf fürs Web

Also dann gebe ich auch mal meinen Senf dazu.

Der IE6 unterstützt keine 24Bit PNGs dahingehend, das er den Alphakanal korrekt wiedergibt. An der Stelle der (halb-)transparent blendet er die voreingestellte Hintergrundfarbe ein.

Bei 8bit PNGs, welche sich übrigens wunderbar mit PNGQUANT erstellen lassen, verhält sich der IE6 wie bei der Anzeige von GIFs...(zumindest annähernd). Die Alphatranzparenz wird in einer Binären Tranzparenz dargestellt...

Mit ein wenig Übung und einer gescheiten Bildwahl kann man so PNGs verwenden, die im IE6 noch halbwegs vernünftig aussehen...

Ansonsten gibt es im Netz sehr viele Beschreibungen dazu, wie man mit einem Hack den IE6 die PNG-Tranzparenz aufzwinget :
z.B. hier
ie png | sehr beliebt | Mister Wong

Was auch gehen würde ist eine "pseudo-transparente" Darstellung des Verlaufen mit GIFs.. Schon mal darüber nachgedacht?

Empfehlen kann ich als PHP-Lösung übrigens phpThumb !!! Arbeite öfter damit... Da kannst du bspw. auf deine Bilder ein overlay-zur Laufzeit erzeugen. Und einfach in der handhabung ist es auch.

Gruß
 

Top_Gun

Aktives Mitglied

AW: PNG: Transparenter Verlauf fürs Web

Also ich hab jetzt einiges probiert aber komme immer zum selben Ergebnis:
Der transparente Hintergrund wird nicht transparent dargestellt sondern bekommt immer die in den Windows-Einstellungen eingestellte Hintergrundfarbe.
Also alles was bei dir transparent ist und man den #eee Hintergrund durchsehen kann, ist bei mir undurchsichtig und dunkel grau (standard-windows-grau).

Was mache ich falsch? Bzw wie machst du das?
 

blackout

Schaf im Wolfspelz

AW: PNG: Transparenter Verlauf fürs Web

Keine Ahnung was man da falsch machen kann :s

PS öffnen, zufälligen Brush auf ansonsten transparente Ebene klatschen, save for web and devices ...
PNG8, transparency an, speichern :\
 

Top_Gun

Aktives Mitglied

AW: PNG: Transparenter Verlauf fürs Web

blackout ich könnte dich küssen...

Aber jetzt erklärt mir mal bitte jemand wo genau der oder die Unterschiede zwischen dem normalen Speichervorgang und dem für Web und Geräte?
Und warum in aller Welt hat mir das niemand vorher gesagt (Und ich habe solch eine Diskussion ja schon im PS-Bereich angestoßen gehabt)?
 

blackout

Schaf im Wolfspelz

AW: PNG: Transparenter Verlauf fürs Web

Huch, nicht so stürmisch :s

Beim Speichern für's Internet hat man halt mehr Optionen, die einen beim normalen Speichern nur stören würden. Speichern als PNG-8 ist z.B. ziemlicher Blödsinn, wenn das Bild nicht direkt hochgeladen wird. Das Vorschaufenster kann außerdem helfen, die gespeicherten Graphiken maximal zu komprimieren, ohne dass Artefakte auffallen.
 

Top_Gun

Aktives Mitglied

AW: PNG: Transparenter Verlauf fürs Web

Beim Speichern für's Internet hat man halt mehr Optionen,
Das ist doch mal totaler Blödsinn und die Programmierer die sich das ausgedacht haben gehören bei Microsoft unter Vertrag genommen...

Ich erwarte von einem Programm unter dem "normalen" Speicherdialog ALLE Einstellungsmöglichkeiten. Gerne über ein Zusatzmenu oder so, aber trotzdem erwarte ich da die volle Kontrolle.
Extra Menus sollen oder können mir das Leben leichter machen in diesen Zusatzmenus sollten aber nicht mehr Optionen möglich sein als im normalen Speicherdialog...

Könnte ich mich tierisch drüber aufregen, aber bringt ja nichts...

Danke für die Aufklärung, ich kann gar nicht sagen wie ich mich darüber freue ^^
 

blackout

Schaf im Wolfspelz

AW: PNG: Transparenter Verlauf fürs Web

Ich glaube auch, dass das irgendwann abgeschafft werden wird. Letztendlich ist der Grund wohl historisch: ImageReady wurde komplett in Photoshop integriert, und der Internet-Speicherdialog ist halt noch von ersterem übrig.
 

Herr_D

offline

AW: PNG: Transparenter Verlauf fürs Web

Ich hab mal alles rausgeschmissen, was nicht zur Frage gehört...


Kleine Ergänzung noch meinerseits:

Den Dialog "für Web speichern" (Alt Shift Strg S) gab es auch schon in den Vorgängerversionen (zumindest ab PS6) im Programm. Dazu mußte man IR nicht öffnen.



geschlossen
 
Status
Für weitere Antworten geschlossen.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.189
Beiträge
2.582.078
Mitglieder
67.258
Neuestes Mitglied
SaschMasch1312
Oben