[Transparante gif] Rafelige randen

[Verwijderd]

Voor m'n website heb ik onderstaande afbeelding gemaakt in Photoshop 6.0. Wat je ziet is natuurlijk een gesliced deel van de site.


Daarna heb ik de afbeelding transparant gemaakt (.gif).


Nu wil ik de afbeelding (huis) plaatsen (nog niet op de juiste positie hoor) op de achtergrond (oranje/blauw/grijs), maar de witte randen van het huis zijn rafelig geworden. De randen zijn een stroke van 2 pixels.


Weet iemand hoe ik de randen strak kan krijgen? Ik heb al een aantal opties van Save for Web geprobeerd, maar tot nog toe zonder goed resultaat.

[André]

Met een .gif krijg je dit niet echt goed, hiervoor zul je .png moeten gebruiken omdat de buitenkant half-transparant wit is.

En het lijkt of het huisje inelkaar gedrukt is? Staan de maten wel goed?

[ Voor 24% gewijzigd door André op 04-05-2004 13:43 ]

[WFvN]

Ik denk dat je de afbeelding gewoon moet tekenen met een palet met alleen de gewenste kleuren. In jouw geval dus wit en 2 tinten grijs (eventueel zwart wat je als achtergrond gebruikt).

Ik neem aan dat je getekend hebt met volle kleuren. Daarbij zijn op de rand van huisje/achtergrond 'middenkleuren' gebruikt die tussen het oranje en het wit in liggen.... en tja, welke middenkleur moet nou nog net WEL transparant (bij converteren naar GIF) en welke NIET? Ik denk dat daar je probleem ligt.

[Willem]

Waarom niet met groen-geel-oranje-blauwe-fruit ijsjes achtergrondkleur?

De stroke heeft een anti-alias, en die heeft bepaalde kleurtinten. Als je vervolgens transparant gaat maken, neemt 'ie de stroke (voor een deel) ook mee....

[Bosmonster]

Volgens mij is die onderste afbeelding ook niet echt meer het formaat wat die daarboven is... Daar wordt ie ook niet echt mooier van

[Verwijderd]

PNG wordt niet ondersteund door IE. Maar wel door Firefox.

Je moet gewoon de goede "matte" kleur kiezen. Dat is de kleur waarin de transparante rand overloopt (meestal de achtergrondkleur).

[André]

Verwijderd schreef op 04 mei 2004 @ 13:45:
PNG wordt niet ondersteund door IE. Maar wel door Firefox.

HTML:

[img]"spacer.gif"[/img]

[ Voor 21% gewijzigd door André op 04-05-2004 13:56 ]

[Verwijderd]

André schreef op 04 mei 2004 @ 13:42:
En het lijkt of het huisje inelkaar gedrukt is? Staan de maten wel goed?

Ik heb via Homesite de afbeelding ingevoegd, dus de maten zijn goed.

[Clay]

je moet de matte niet als kleur doen, maar zelf de transparantie er goed inslicen. Met de juiste selecties is dat prima te doen. gif is wel of niet transparant, nooit half. dus aan de bovenkant moet je dat oranje erin matten, en onderin het blauwige. Mattekleuren zijn leuk, maar daar kom je ook maar tot een bepaald punt mee.
't enige nadeel is dat de onderkant van je huisje dan ook -altijd- in dat blauwe moet zitten, en de bovenkant -altijd- in het oranje. Beetje speling is er dan wel.

[Bosmonster]

Verwijderd schreef op 04 mei 2004 @ 14:06:
[...]

Ik heb via Homesite de afbeelding ingevoegd, dus de maten zijn goed.

Hmm.. dan dan zullen we wel blind zijn en Photoshop z'n pixels door de war gooien ofzo.. want die bovenste is dus echt een stuk groter dan die onderste

Bovendien zie je dus dat die onderste daar behoorlijk lelijk van is geworden. Want zonder anti-aliasing hoor je dit bijna niet te zien (zoals je tweede transparante plaatje wel laat zien).

[ Voor 20% gewijzigd door Bosmonster op 04-05-2004 16:09 ]

[André]

Bosmonster schreef op 04 mei 2004 @ 16:07:
[...]


Hmm.. dan dan zullen we wel blind zijn en Photoshop z'n pixels door de war gooien ofzo.. want die bovenste is dus echt een stuk groter dan die onderste

Bovendien zie je dus dat die onderste daar behoorlijk lelijk van is geworden. Want zonder anti-aliasing hoor je dit bijna niet te zien (zoals je tweede transparante plaatje wel laat zien).

Ik heb dus ook dat vermoeden dat die rafeligheid puur daar door komt.

[Savantas]

en geplakt op je achtergrond (met het bekende 'IE wil best wel een PNG goed laten zien als ie zijn best eens doet' foefje zoals André hierboven postte):


settings Pshop Outer Glow:
screen Opacity 100% noise 0 kleur wit, Spread 11% 3 px

Komt alleen net op het blauw nog een klein beetje wit van de glow... Nog beetje getweak nodig dus! Of zoals op je eerste plaatje gewoon deels op het blauw, is nu geen enkel probleem.

Lees nu net dat je een stroke van 2 px hebt ipv Outer Glow (lezen is ook een vak )
Als die een beetje goed gedaan is zou je helemaal geen rafels moeten krijgen.
Toch maar eens in Homesite de width nalopen, zie maar het laatste plaatje, echt niet hetzelfde huisje (meer Afrikaans rieten hutje en een vinex naast elkaar )! De width staat waarschijnlijk 1 pixel te klein...

[ Voor 41% gewijzigd door Savantas op 04-05-2004 16:55 . Reden: Had bril niet op :P ]

[Savantas]

Wat in geval van transparante PNG ook handig is, is dit stukje javascript. Plaars gewoon in de head:

code:

...
<script src="pngfix.js"></script>
</head>
<body>
...

en elke PNG is in IE automatisch transparant!
Zie bv. hier

[afdek modus]
ok, html is ff snel in elkaar geflanst, geen doctype, geen mooie layout, geen ..., geen schoonheidsprijs...
[/afdek modus]

[ Voor 11% gewijzigd door Savantas op 04-05-2004 17:20 . Reden: js linkje toegevoegd ]

[arieleks]

Als je een transparant plaatje in PhotoShop maakt, en je slaat hem op als Gif, krijg je een schermpje om het plaatje van RBG naar 'indexed color' te converteren.
Hierin kun je bij de opties de 'matte' aangeven. Vul hier de kleur in die op je web pagina achter het transparante gifje komt, en hij maakt de randjes van het gifje mooi zacht en wollig enzo.

(Sorry, beetje vaag verhaal. Ben ultra gaar.)

Edit: Ik ben zo ultra gaar, dat ik over de minstens 3 berichtjes die dezelfde tip gaven heb heen gelezen. Mijn welgemeende excuses...

[ Voor 18% gewijzigd door arieleks op 04-05-2004 17:30 ]

[Verwijderd]

Ik heb het huisje maar uit het photoshopbestand gesneden en als een .jpg-file opgeslagen. Iedereen bedankt voor jullie reacties!

Nu ben ik bezig met HTML'en en wil de tekst 'home' onder het plaatje hebben. Het plaatje en de tekst moeten verticaal gecentreerd worden in dit tabelvakje (zeg je dat zo??).



Ik heb het op de volgende manier geprobeerd, maar de layout van de site wordt hierdoor aangepast wat niet de bedoeling is.

<td valign="" width="120">[img]"\afbeeldingen\home.jpg"[/img]<P STYLE="clear: left;">Home</P></td>

[Verwijderd]

een simpele <br>

maar dan gaan we nu wel over op het beantwoorden van heel erg basic vragen

[Bosmonster]

Een ander nadeel van IE en PNG's is dat het niet kleurvast is. Het kan er dus behoorlijk anders uitzien dan je bedoeling was.

Hier heb ik in ieder geval flink wat problemen mee gehad met 24bit PNG's.

[ Voor 24% gewijzigd door Bosmonster op 06-05-2004 14:15 ]

[Verwijderd]

Verwijderd schreef op 06 mei 2004 @ 14:10:
een simpele <br>

maar dan gaan we nu wel over op het beantwoorden van heel erg basic vragen

Als ik een <br> doe, dan komt de tekst helemaal onderaan in het tabelvak te staan en daardoor verschuift de hele handel. Dit had ik namelijk zelf ook al geprobeerd.

Is er misschien een andere oplossing?

[Verwijderd]

Verwijderd schreef op 06 mei 2004 @ 14:19:
[...]

Als ik een <br> doe, dan komt de tekst helemaal onderaan in het tabelvak te staan en daardoor verschuift de hele handel. Dit had ik namelijk zelf ook al geprobeerd.

Is er misschien een andere oplossing?

Problem solved!

[Dark Blue]

Verwijderd schreef op 06 mei 2004 @ 15:00:
[...]

Problem solved!

Hoe dan?

(ik heb het topic niet gevolgd, misschien lees ik er overheen maar je geeft hier geen uitleg; t kan handig zijn voor de volgende die hiernaar zoekt...)

[Verwijderd]

Dark Blue schreef op 06 mei 2004 @ 16:54:
[...]

Hoe dan?

(ik heb het topic niet gevolgd, misschien lees ik er overheen maar je geeft hier geen uitleg; t kan handig zijn voor de volgende die hiernaar zoekt...)

Sorry! Ik heb gewoon van 't huisje een .jpg-bestand gemaakt. Dan zit ik ook niet te prutsen met die rafelige randen e.d. bij een .gif-bestand. Misschien niet de correcte manier om 't op te lossen, maar wel een manier die goed genoeg is voor mij.

[Verwijderd]

Ik wil nu in onderstaande tabel de tekst 'Links' precies ter hoogte van 't pijlpuntje hebben. Zoals je ziet heb ik nu align="left" en valign="center", maar blijkbaar moet ik 't op een ander manier oplossen, maar ik heb geen idee hoe.
Iemand?



P.s. Ik heb voor de duidelijkheid een border om het 'rondje + pijl' gezet.

[Vinzzz243]

gewoon de canvas van het pijltje naar boven of naar beneden uitbreiden en wat spelen met inderdaad die valign, zo gebeurt.

[T-MOB]

Volgens mij moet je 'style="vertical-align: middle;"' aan je plaatje toevoegen. Dan wordt het plaatje gecentreerd ten opzichte van de regel...

Zie hier meer over positioneren...

[ Voor 8% gewijzigd door T-MOB op 08-05-2004 01:02 ]