Hoe ontkartel ik mijn GIF knoppen? Photoshop CS3

[Anoniem: 466666]

Hi, ik zit met vervelend probleempje, ben bezig knoppen te ontwerpen voor mijn website. In photoshop heb ik de randen van mijn knoppen van zelf gemaakte vorm voorzien (vectorvorm en met overvloei effecten metallisch gemaakt)

Sla ik bestandje als GIF op, en stel kleurindex op max. 256, dan zou theoretisch het kartelings-probleem opgelost moeten zijn. Testen in IE browser levert echter nog steeds karteling langs schuine randen.. Omdat ik gebruik maak van a-symmetrische knoppen heb ik de transparantie toch echt nodig (dus GIF of PNG). Overvloei-kleuren zijn het probleem ook niet, want als rand is ingesteld op slechts één RGB waarde (bv rood) dan blijft karteling eveneens bestaan.

Hoe krijg ik de a-symmetrische GIF knop toch mooi snaarstrak ontkartelt in mijn browser? Ik gebruik wat oudere versie van Photoshop (CS3)

De PNG oplossing werkt niet goed, IE wil PNG niet goed openen.

Wie weet oplossing uit impasse? Alvast mijn dank! Anthonie

[Lucky0wn]

Anti-aliasing aangezet?

[Wh0lve]

Het klopt inderdaad dat IE niet zo lekker omgaat met alpha layers. Maar daar zijn workarounds voor. Misschien helpt het bijgevoegde linkje.

Good luck

http://24ways.org/2007/supersleight-transparent-png-in-ie6/

[Anoniem: 466666]

Hi Stef, ik kan de anti-aliasing juist niet vinden, want daar heb ik als eerste optie aan gedacht. Waar kan je de anti-aliasing vinden bij opslaan als GIF?

Hi WhOlve, zal linkje bekijken. Dank allebei!

[NMe]

Anti-aliasing doe je bij het maken van je afbeelding, niet (alleen) bij het opslaan ervan.

En IE gaat prima om met PNG's met alpha channel. Volgens mij kan IE7 daar zelfs nog goed mee overweg... Sla je niet per ongeluk als PNG-8 op in plaats van als PNG-24? Of als je de problemen in IE6 bedoelt: tenzij je voor scholen of ziekenhuizen aan het ontwikkelen bent is de kans bijzonder klein dat je doelgroep nog IE6 gebruikt.

[ Voor 40% gewijzigd door NMe op 20-07-2012 22:17 ]

[Wh0lve]

NMe schreef op vrijdag 20 juli 2012 @ 22:16:
Anti-aliasing doe je bij het maken van je afbeelding, niet (alleen) bij het opslaan ervan.

En IE gaat prima om met PNG's met alpha channel. Volgens mij kan IE7 daar zelfs nog goed mee overweg... Sla je niet per ongeluk als PNG-8 op in plaats van als PNG-24?

Klopt de nieuwere IE's hebben er niet zoveel problemen met png alpha channel maar de oudere IE's hebben dat wel daarom zijn er die workarounds. En ik ga ervan uit dat te website een beetje backwards compatible moet zijn.

[Tjeemp]

In veel gevallen is het geen schande meer om IE6 links te laten liggen, hoor. IE7 en IE8 ondersteunen is ook "backwards compatible"...

[Anoniem: 466666]

Het probleem zit 'm inderdaad in de bij web-ontwerpers beruchte IE6, want in bv in Firefox werkt de PNG knop prima, geen kartelings problemen. Om echter het java-script met de ""-If then else-""structuur in mijn css in te bouwen is te veel moeite voor zo'n oude browser als IE6. Opgelost is het nog niet, -want ook IE7 geeft nog problemen- maar steeds een beetje verder...

[Anoniem: 303530]

Is het echt zo'n ramp dat IE6 kartelige randen geeft? Als slechts 1% van je publiek IE6 gebruikt, wat kunnen die randjes je dan nog schelen? Dan moeten ze maar een modernere browser gebruiken.

[NMe]

IE6 geeft bij PNG's met alpha channel geen kartelrandjes maar grijze vlakken in plaats van die transparantie. Dat is, zoals hierboven aangehaald is, prima te fixen met het conditioneel includen van een script, wat je alleen in IE6 hoeft te doen. IE7 en hoger ondersteunt bij mijn weten gewoon alpha channels in PNG's zonder problemen.

Anno 2012 nog acteren naar een browser uit 2001 is trouwens redelijk belachelijk. IE6 wordt vrijwel alleen in logge instituten zoals ziekenhuizen nog gebruikt. Bijna alle developers die ik ken hebben support voor IE6 laten vallen tenzij er extra voor betaald wordt. Ik zou me er persoonlijk geen zorgen om maken. En als je klant dat wel doet: script includen en doorontwikkelen met moderne technieken.

[Loderunner]

Simpel gezegd: niet.
GIF heeft maar twee waarden voor transparantie: volledig transparant (0) en niet transparant (1).
PNG daarentegen heeft met 8 bit per kaneel 256 gradaties aan transparantie. Dit zou het probleem met kartels moeten oplossen. Wat betreft IE6, gewoon niet meer supporten en er genoegen mee nemen dat de 1% het niet zo fraai op het scherm krijgt.

[NMe]

Dat is het grappige: met de JS-fix die ervoor is krijgen ook die maffe IE6-hippies nog een fatsoenlijk plaatje met transparantie te zien. Het enige nadeel is dat ze door een conditional comment een extra resource binnen moeten halen. Lijkt me niet bepaald onoverkomelijk.

[Anoniem: 466666]

Tja, da's waar. IE6 gewoon negeren is het simpelst. En voor de PNG optie gaan is het best, ook kwaliteits verlies door compressie is bij PNG minder groot. En bestandjes blijven ook in PNG formaat nog zeer klein, dus dat is de simpelste optie. Iedereen bedankt voor raadzame adviezen!

[Anoniem: 466666]

Toch blijf ik zitten met het raadsel... Want het moet wel met GIF kunnen lukken, PNG zou niet nodig hoeven zijn.

Ik zie veel sites waar niet symmetrische GIF knoppen perfect scherp zijn en ook in oudere IE browsers! En totaal geen kartelings problemen.

Ook in relatief oude browsers als IE7 zien die knoppen er goed uit.

Het zou dus toch echt gewoon rechttoe rechtaan in gedeeltelijk transparante GIF moeten kunnen, want dat blijkt gewoon als je de broncode's van de betreffende sites leest. Daar gebruikt men ook geen bypass oplossingen met extra javascript. En photoshop moet dit toch gewoon kunnen renderen.. Of gebruikt men wellicht andere beeld-editors? Raadsel blijft. Is er toch een simpele clearcut design-oplossing??? Wie vindt oplossing via de GIF route?? Dank alvast!

[NMe]

GIF heeft transparantie aan of transparantie uit. Er zijn geen tussenwegen dus de enige manier om een goede, anti-aliased afbeelding te maken met een GIF is als je de achtergrondkleur die achter je transparante image terecht komt ook in de randjes van je image te verwerken. Alleen krijg je dan dit probleem:



Vasthouden aan GIF is in deze tijd onnodig. PNG is voor vergelijkbare images even klein én heeft een transparantie-channel waarmee je dit soort dingen kan voorkomen. Verder hoef je in geen enkele browser behalve IE6 moeite te doen om een PNG met alpha channel goed te renderen, dus ik zie werkelijk geen enkele reden om wat dan ook per se met een GIF te willen doen.