[gif/png] Transparantie in plaatjes* - Softwareontwikkeling

zondag 14 mei 2006 19:29

Acties:

Historie | Luxe | Duurzaam

Topicstarter

Er is al heel veel geschreven over png en transparantie in IE.

* Nu kan ik voor gif kiezen maar mijn afbeelding ziet er niet uit als ik deze verklein naar 22pixels (in png is dit in orde)
* Ik lees dat er diverse codes gebruikt worden, maar helaas ben ik nog niet op het niveau dat ik begrijp hoe deze codes te plaatsen.

wie wil mij op weg helpen

hier staat het .psd bestand, maar dat moet naar een hoogte van zo'n 22 pixels

edit: het liefts zie ik dat ik gewoon png kan gebruiken, dus moet ik de code (goed) gebruiken, maar hoe.
(ik gebruik dreamweaver)

[ Voor 17% gewijzigd door Pinin op 14-05-2006 19:38 ]

www.casarodriguillo.com

zondag 14 mei 2006 19:31

Acties:

Icey

Veranderd de achtergrondkleur continu dat hij doorzichtig moet zijn?

zondag 14 mei 2006 19:35

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

nee, maar stel nou dat ik iets wil veranderen aan de kleur dan moet ik dat bestandje ook weer veranderen, op zich geen drama, maar ik vind juist transparantie een mooie oplossing, en om de achtergrondkleur mee te geven leek mij zo'n jbf oplossing

www.casarodriguillo.com

zondag 14 mei 2006 19:44

Acties:

André

Analytics dude

Dit kan best toch?

[ Voor 42% gewijzigd door André op 14-05-2006 19:46 ]

zondag 14 mei 2006 19:55

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

ja zo ziet het er prima uit maar plaats jouw gifje eens op een rode achtergrond (iek) hij doet er wat witte en grijze pixels bij om het wat smoother te laten uitzien, dit heb je niet bij een png

www.casarodriguillo.com

zondag 14 mei 2006 20:01

Acties:

messi

Dat los je alleen op door de aa op de letters uit te zetten.

Of als je veel tijd hebt elke letter apart typen en op hele pixels positioneren.
(als iets in photoshop niet op hele pixels staat, dan krijg je zo'n randje eromheen)

Onze excuses voor het ontbreken van de ondertiteling.

zondag 14 mei 2006 20:04

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

o.k. volgens mij is het redelijk/goed gelukt dmv http://homepage.ntlworld.com/bobosola/pnghowto.htm
maar nu zegt i.e. rechtsonder (1 item over) Bezig met downloaden afbeelding........ terwijl de afbeelding al lang er staat

nog ff voor de goede orde maakt het uit waar ik die code plaats? ik heb het direct na de eerste <head> geplaatst

www.casarodriguillo.com

zondag 14 mei 2006 23:17

Acties:

Larixk

met xk, ja

je kan in het 'Save for web' dialog van photoshop kiezen welke kleur er als achtergrond genomen moet worden voor pixels die half transparant zijn.
Standaard is dit wit. Maar als je gif/png alleen gebruikt gaat worden op 1 achtergrond kan je gewoon die kleur kieze.

Dan krijg je die witte en grijze pixels in de juiste kleur.

larixk

maandag 15 mei 2006 00:26

Acties:

Kayshin

Bl@@T @@P!!!

Zo lang de code in de head staat is het goed. En je hebt er maar 1 van

My personal videoteek: -Clique-; -NMe- is een snol!

maandag 15 mei 2006 08:36

Acties:

BtM909

Watch out Guys...

Overigens is dit wel een heel basic vraagje wat je met wat zelfinzet ook zelf had kunnen uitvinden

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 15 mei 2006 08:43

Acties:

frickY

Larixk schreef op zondag 14 mei 2006 @ 23:17:
je kan in het 'Save for web' dialog van photoshop kiezen welke kleur er als achtergrond genomen moet worden voor pixels die half transparant zijn.
Standaard is dit wit. Maar als je gif/png alleen gebruikt gaat worden op 1 achtergrond kan je gewoon die kleur kieze.

Dan krijg je die witte en grijze pixels in de juiste kleur.

Inderdaad. Die optie heet "matte", en bepaald de kleur waarnaar ge-antialiased wordt. Als je die op rood zet kun jeje achtergrond nog in verschillende rood-tinten veranderen zonder dat je GIFje blokkiger wordt. Als je opeens een blauwe achtergrond neemt zie je natuurlijk wel weer rood-kleurige pixels.

maandag 15 mei 2006 11:06

Acties:

evaarties

Powerball @ 12.582

En natuurlijk in Paint ShopPro:

Maak de achtergrondlayer rood, stel de transparantie in op deze kleur rood. Opslaan als Gif en je hebt hetzelfde bereikt.

maandag 15 mei 2006 18:14

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

BtM909 schreef op maandag 15 mei 2006 @ 08:36:
Overigens is dit wel een heel basic vraagje wat je met wat zelfinzet ook zelf had kunnen uitvinden

idd, ik ben ook nogal basic.

Uiteindelijk heb ik ook een code gevonden en toegepast, bijkomend nadeel is echter dat ie nu aangeeft dat er nog images geladen moeten worden (welke er allang staan)

komt de code:

HTML:

]
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

pngfix.js is dit bestandje

JavaScript:

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}[

[ Voor 15% gewijzigd door Pinin op 15-05-2006 18:53 ]

www.casarodriguillo.com

maandag 15 mei 2006 18:20

Acties:

BtM909

Watch out Guys...

code kan makkelijk tussen [plain]

HTML:

of

JavaScript:

[/] code tags

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 15 mei 2006 18:54

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

o.k. veranderd.

www.casarodriguillo.com

maandag 15 mei 2006 19:00

Acties:

Zerora

Ik Henk 'm!

Larixk schreef op zondag 14 mei 2006 @ 23:17:
je kan in het 'Save for web' dialog van photoshop kiezen welke kleur er als achtergrond genomen moet worden voor pixels die half transparant zijn.
Standaard is dit wit. Maar als je gif/png alleen gebruikt gaat worden op 1 achtergrond kan je gewoon die kleur kieze.

Dan krijg je die witte en grijze pixels in de juiste kleur.

Dit lijkt mij echt de meest makkelijke oplossing.

Mocht je van achtergrond kleur veranderen is het gewoon een kwestie van dat PSD'tje openen en achtergrondkleur veranderen in het Save for web' dialog.

Geld het alleen voor de genoemde PSD of heb je nog meer plaatjes waarbij hetzelfde moet gebeuren?

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

maandag 15 mei 2006 19:04

Acties:

netvor

Volgens mij kan IE (iig versie 6, weet niet hoe het met versie 5 zit) gewoon overweg met transparantie in PNG-8 graphics (dus met een palette(sp?)). Het is het PNG-24 (full-color) dat problemen geeft.

In mijn Photoshop CS2 heb ik "Save For Web" en daarmee kan je het PNG-8 formaat selecteren en kiezen hoeveel kleuren je in je palette wil (max. 256). Transparancy aanvinken en het werkt, ook in IE.

...of heb ik het nu helemaal bij het verkeerde eind

Computer Science: describing our world with boxes and arrows.

maandag 15 mei 2006 19:56

Acties:

Pinin

Historie | Luxe | Duurzaam

Topicstarter

Zerora schreef op maandag 15 mei 2006 @ 19:00:
[...]
.......
Geld het alleen voor de genoemde PSD of heb je nog meer plaatjes waarbij hetzelfde moet gebeuren?

het geld voor meerdere plaatjes, dit voorbeeld is wel de enige die zo verkleind moet worden, voor de rest vind ik .png gewoon mooier.

imp schreef op maandag 15 mei 2006 @ 19:04:
Volgens mij kan IE (iig versie 6, weet niet hoe het met versie 5 zit) gewoon overweg met transparantie in PNG-8 graphics (dus met een palette(sp?)). Het is het PNG-24 (full-color) dat problemen geeft.

In mijn Photoshop CS2 heb ik "Save For Web" en daarmee kan je het PNG-8 formaat selecteren en kiezen hoeveel kleuren je in je palette wil (max. 256). Transparancy aanvinken en het werkt, ook in IE.

...of heb ik het nu helemaal bij het verkeerde eind

ja png 8-bit gaat de transparantie wel goed, maar de plaatjes werden minder mooi (ik gebruikte hier fireworks voor)

[ Voor 49% gewijzigd door Pinin op 15-05-2006 19:57 ]

www.casarodriguillo.com