Anzeige

PNG: Transparenter Verlauf fürs Web

PNG: Transparenter Verlauf fürs Web | PSD-Tutorials.de

Erstellt von jonetsu, 21.10.2008.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. jonetsu

    jonetsu Noch nicht viel geschrieben

    Dabei seit:
    27.06.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    PS CS3
    PNG: Transparenter Verlauf fürs Web
    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 ?
     
    #1      
  2. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    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
     
    #2      
  3. jonetsu

    jonetsu Noch nicht viel geschrieben

    Dabei seit:
    27.06.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    PS CS3
    PNG: Transparenter Verlauf fürs Web
    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.
     
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    AW: Transparenter Verlauf fürs Web

    ah ha? wie soll das sein? Mach doch die Bilder gleich mit dem Verlauf oben... wie willst du das den per html/ css umsetzen?
     
    #4      
  5. jonetsu

    jonetsu Noch nicht viel geschrieben

    Dabei seit:
    27.06.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    PS CS3
    PNG: Transparenter Verlauf fürs Web
    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.
     
    #5      
  6. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    #6      
  7. jonetsu

    jonetsu Noch nicht viel geschrieben

    Dabei seit:
    27.06.2008
    Beiträge:
    30
    Geschlecht:
    männlich
    Software:
    PS CS3
    PNG: Transparenter Verlauf fürs Web
    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.
     
    #7      
  8. Gackoo_duz

    Gackoo_duz Gackoo

    Dabei seit:
    03.09.2008
    Beiträge:
    285
    Geschlecht:
    männlich
    Software:
    CS6 Masterkollection, C4d, u.a
    Kameratyp:
    Nikon D5000, D90
    PNG: Transparenter Verlauf fürs Web
    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: 21.10.2008
    #8      
  9. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    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...
     
    #9      
  10. michas

    michas Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2007
    Beiträge:
    199
    Geschlecht:
    männlich
    Ort:
    Halle
    Software:
    GIMP, PDT Eclipse, Inkscape
    PNG: Transparenter Verlauf fürs Web
    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ß
     
    #10      
  11. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    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?
     
    #11      
  12. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    PNG: Transparenter Verlauf fürs Web
    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 :\
     
    #12      
  13. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    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)?
     
    #13      
  14. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    PNG: Transparenter Verlauf fürs Web
    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.
     
    #14      
  15. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    AW: PNG: Transparenter Verlauf fürs Web

    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 ^^
     
    #15      
  16. blackout

    blackout Schaf im Wolfspelz

    Dabei seit:
    12.09.2005
    Beiträge:
    3.359
    Geschlecht:
    männlich
    Ort:
    Würzburg
    Kameratyp:
    Rollei 35 S
    PNG: Transparenter Verlauf fürs Web
    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.
     
    #16      
  17. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    PNG: Transparenter Verlauf fürs Web
    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
     
    #17      
Status des Themas:
Es sind keine weiteren Antworten möglich.
x
×
×
teststefan