[G] Antialiasing, rastering & transparantie, hoe netjes?

[r0bert]

Ik was bezig met het maken van wat plaatjes, welke ik graag een transparante achtergrond wil geven. Dat lukt verder wel eenvoudig (PhotoShop) maar het wordt niet bepaald wat je noemt 'mooi'.

Vb:


De bedoeling is dat de randjes glad worden in plaats van die kartels, maar hoe moet ik dat doen ? Een kwestie van de instellingen bijstellen of moet ik met de hand alles gaan verbeteren of iets

[Guillome]

Zoiets vraag ik me dus ook altijd al af.

[UniCache2]

Dat ligt aan je 'matte color'. Kies in photoshop bij file > save for web bij het opslaan van je GIF voor Transparency, en klik op 'Matte:'. Geef hier de kleur van de achtergrond in waar het plaatje overheen komt. In het voorbeeld wat je gaf is dat nu wit, maar had je de lichtblauw van dit forum moeten kiezen. Succes!

[Verwijderd]

het hoeft niet exact dezelfde kleur te zijn overigens, als de lightness in de buurt komt is grijs ook goed (zie als voorbeeld de smilies hier op dit forum

[David]

De mooiste oplossing is natuurlijk het gebruik maken van PNG's in plaats van GIF's. Het PNG-formaat ondersteunt alpha-blending, waarmee je plaatje op elke kleur ondergrond even mooi is.

Een kanttekening: PNG moet natuurlijk wel volledig door de browser ondersteund worden. Internet Explorer heeft een buggy implementatie van PNG, maar met de ingebouwde filters van IE werkt het zelfs ook in deze browser.

[ Voor 38% gewijzigd door David op 02-05-2003 18:15 ]

[NijntjeRocks]

eerst op hoge resolutie uitknippen en op het laatst pas terugbrengen naar 72 dpi, dan maakt de anti-alias in je select-tooltje een betere interpretatie van de kromme die je maakt en neem je dus geen tot veel minder wit mee.

[r0bert]

De manier van de 'matte color' werkt bij mij prima, omdat ik het plaate slechts op 1 kleur achtergrond gebruik.. Je krijgt alleen wel een soort van randje om je plaatjes heen, dat is wel jammer, maar valt op zich toch niet op Super tips voor mij hier

[OzBoz]

r0bert schreef op 02 May 2003 @ 18:24:
De manier van de 'matte color' werkt bij mij prima, omdat ik het plaate slechts op 1 kleur achtergrond gebruik.. Je krijgt alleen wel een soort van randje om je plaatjes heen, dat is wel jammer, maar valt op zich toch niet op Super tips voor mij hier

Dat randje is er juist voor een soepelere overgang. Zie het als anti-aliased. Zou je dat randje niet hebben dan zou ie van de huidskleur bv meteen in wit knallen. Doe je dat met een ronde vorm dan ontkom je dus niet aan een kartelige zooi doordat een pixel nou eenmaal lomp groot is en halve pixels nog niet in de uitverkoop zijn.

[Verwijderd]

NijntjeRocks schreef op 02 May 2003 @ 18:16:
eerst op hoge resolutie uitknippen en op het laatst pas terugbrengen naar 72 dpi

Volgens mij heeft dpi niets te maken met de afmetingen van een plaatje in een webbrowser. Dan zijn alleen hor x vert aantal pixels van belang.

Uiteraard wel goed is het werken op hogere resolutie , en als laatste stap verkleinen tot gewenste formaat

[NijntjeRocks]

Verwijderd schreef op 02 mei 2003 @ 19:01:
Volgens mij heeft dpi niets te maken met de afmetingen van een plaatje in een webbrowser. Dan zijn alleen hor x vert aantal pixels van belang.

Euh.. volgens mij ging het niet om de afmeting v/e plaatje maar om de kwaliteit v/d weggeknipte rand voor de transparantie. De anti-alias zal grof werken bij een lage res. en veel preciezer op een hoge res. waardoor er minder witte pixels zullen blijven staan en het geheel dus mooier wordt.

[Verwijderd]

NijntjeRocks schreef op 03 mei 2003 @ 12:50:

Euh.. volgens mij ging het niet om de afmeting v/e plaatje maar om de kwaliteit v/d weggeknipte rand voor de transparantie. De anti-alias zal grof werken bij een lage res. en veel preciezer op een hoge res. waardoor er minder witte pixels zullen blijven staan en het geheel dus mooier wordt.

Stel: je hebt twee afbeeldingen:

A: plaatje van 800*600 waarvan Photoshop zegt dat het een afdrukresolutie van 72dpi heeft

B: plaatje van 800*600 waarvan Photoshop zegt dat het een afdrukresolutie van 300dpi heeft

Op het scherm worden deze afbeeldingen exact even groot afgebeeld, de twee afbeeldingen bevatten exact evenveel informatie. Dat getalletje 72 of 300 is leuk, maar het zal op het beeldscherm niet veel uitmaken lijkt me zo. Het is het aantal pixels dat telt, ik dit geval.

six10again wijst er terecht op dat dit het geval is, omdat anderen misschien een verkeerd beeld krijgen van wát nu eigenlijk de belangrijkste factor is.

[hobbit_be]

ik zou zelfs durven zeggen dat het beter is op de juiste res te werken dan downscalen op het einde. Downscalen doet namelijk Bilinear Filtering die helemaal niet zo goed is. Nooit begrepen waarom Photoshop geen 'goede' resize heeft (kijk maar eens naar degene die in ACDSee zitten, een wereld van verschil). Ook als je 'vector' gebruikt maakt het geen BAL uit. gewoon met de juiste achtergrond werken: c'est tout.

[Verwijderd]

hobbit_be schreef op 03 May 2003 @ 13:40:
ik zou zelfs durven zeggen dat het beter is op de juiste res te werken dan downscalen op het einde. Downscalen doet namelijk Bilinear Filtering die helemaal niet zo goed is.

Waarschijnlijk is het bronmateriaal al een hogere resolutie, dus je moet sowieso toch re-sizen.
Biliniair filtering is volgens mij het beste algoritme om "jaggies" te voorkomen bij resizen.
In photoshop kun je overigens ook voor andere/slechtere resizing algoritmes kiezen

[Mr_Kite]

r0bert schreef op 02 May 2003 @ 17:56:
Ik was bezig met het maken van wat plaatjes, welke ik graag een transparante achtergrond wil geven. Dat lukt verder wel eenvoudig (PhotoShop) maar het wordt niet bepaald wat je noemt 'mooi'.

Vb:


De bedoeling is dat de randjes glad worden in plaats van die kartels, maar hoe moet ik dat doen ? Een kwestie van de instellingen bijstellen of moet ik met de hand alles gaan verbeteren of iets

zolang ik mijn date maar vind is alles best

serieus: als je dan toch png gebruikt, zou ik het gewoon met alpha layers doen. Hier staat een geweldig artikel over hoe je dat ook fatsoenlijk in IE kan doen... Op die manier kun je je plaatje op iedere achtergrond goed bekijken, met alpha layers kun je dan namelijk een transparantieverloop aan de randen hebben, waardoor de kleuren mooi in elkaar overlopen.

veel succes met je dating-site verder

[Verwijderd]

Je moet gewoon in photoshop het plaatje al maken op de achtergrondkleur van de site, dan flattenen en dan bij webexport de achtergrondkleur als transparant aangeven, klaarrr ...