Transparant

[xfader]

Hoe kan ik in Photoshop CS een jpeg-afbeelding met witte achtergrond transparant maken?

[Mitch]

Dubbelklik op de layer met de afbeelding erop.
Dan krijg je de layer style. Bij de blending options die standaard eerste staat kan je de opacity instellen (transparantie).
De layers deronder zie je er nu doorheen.

http://www.mitch.flashcousins.nl/flashfocus/hulpafbeeldingen/opacity.gif

[mech7]

Kan niet.. jpg biedt geen transparantie je moet PNG hebben..

[Tenshu]

als je het plaatje voor het web gebruikt dan kan je beter een gifje gebruiken is kleiner dan png.

[Mitch]

Gif is niet transparant (doorzichtig). Mech7 heeft gelijk.

Dus via save for web, png aanklikken en transparency aanvinken. Maar je moet bijv. de achtergrond van zeg maar een html site zien?

[witlof]

gif is gewoon doorzichtig..probleem met png is dat veel pbrowsers er rare witte randen of vlakken achter gooien...gebruik gif en ga bij save for web met je matte instellingen te werk..
als je namelijk gif niet op hele hoeken afsnijd...dus geen 90 of 180 graden komen er vieze pixels te voorschijn.. met matte kan je die naar je achtergrond kleur aanpassen.

je hoeft trouwens niet persee te dubbel klikken voor transp. zit ook gewoon boven in je layer balk een optie opacitie ...

[Tenshu]

Dus mitch GIF is wel doorzichtig kijk maar in photoshop en ga is kijken bij save for web en het plaatje opslaan als gif.
Dan zie je dat GIF ook transparant kan zijn.

[Mitch]

Je kan niet door een gif heen kijken, je kan wel een stilhouet er van maken.
Met transparantie bij gif wordt bedoelt dat je een vorm kan maken.
Bij png is de afbeelding doorzichtig.

Gif:
http://www.mitch.flashcousins.nl/flashfocus/hulpafbeeldingen/gif.gif

png:
http://www.mitch.flashcousins.nl/flashfocus/hulpafbeeldingen/png.png

[witlof]

Gif:
http://www.mitch.flashcousins.nl/flashfocus/hulpafbeeldingen/gif.gif

dit probleem kan je dus oplossen met matte...
je zal zien dat de .png niet in alle browsers doorzichtig is..

[Mitch]

Gif:
http://www.mitch.flashcousins.nl/flashfocus/hulpafbeeldingen/gif.gif

dit probleem kan je dus oplossen met matte...
je zal zien dat de .png niet in alle browsers doorzichtig is..

Maar met matte is het niet doorzichtig, bijv. bij een pattern blijf je het zien.
En ja dat van die browsers, doe je niks tegen. Of iedereen moet firefox gebruiken :)
De vraag was hoe je iets doorzichtig maakt.

Ik zou trouwens niet zosnel transparantie gebruiken hoor. Daarom ben ik benieuwd waarvoor die het wilt gebruiken.

[witlof]

gif :
http://pixelmarket.nl/gif.gif
ja we weiken te ver af...
nog even snel een voorbeeldje..
ik zit met de mijn nieuwe site ook met een pattern en veel gif werk

VOORBEELD WEGGEHAALD...ALS JE HET GRAAG WILT ZIEN PM ME MAAR

[Mitch]

Ja maar niet doorzichtig ik weet wat je bedoelt maar als je dat plaatje op verschillende achtergronden wilt gebruiken, bijv. een achtergrond die steeds van kleur verandert.

Op witte achtergrond ziet het er niet uit:

http://pixelmarket.nl/gif.gif

Het is dus niet doorzichtig, klaar dat is wat ik bedoelde. Natuurlijk kan je die kleur als achtergrond nabootsen maar het is gewoon niet doorzichtig.

Daarom vind ik het jammer dat niet alle browsers png ondersteunen.

http://www.mitch.flashcousins.nl/flashfocus/hulpafbeeldingen/png.png

Zie in firefox is ie gewoon doorzichtig die png.

[witlof]

ja zie mijn bovenste post...ik geef je helemaal gelijk...
pattern heb laat ik hier zien dat het wel kan,... alleen wat je zegt met kleur veranderingen van backgrounds krijg je problemen ...oplossing : FLASH :)
maar je moet zeker geen grote uitgewaaierde stippen op een pattern willen..dan krijg je weer problemen...
dan kan je beter een stuk pattern er achter plakken.. blijft altijd moeilijk met transperansie en browser..

dus duidelijk iedereen aan de safari en/of firefox

[Mitch]

Helemaal mee eens :D
Echt een cool voorbeeld trouwens :) erg creatief!

[witlof]

thanx ...dan haal ik hem nu weer weg :D
jullie krijgen zeker de kick off te zien ...nu weer druk phpen en de banner flash klaar maken :D

[xfader]

allemaal bedankt voor jullie uitleg en hulp maar het lukt me niet om de afbeelding volledig transparant te krijgen...

http://users.telenet.be/lexusken/site/images/logo-blk.jpg

kan er iemand van jullie aub eens proberen?

[Mitch]

Wees eens duidelijker wat lukt je niet? Leg het eens uit, zo moeilijk is het niet via save for web, dat zou een kleuter zelfs kunnen doen.

[witlof]

wat wil je hiervan transparant hebben de letters of wil je eht zwart weg...is namelijk beide een optie :S

[witlof]

als je dit alleen als jog hebt zul je toch met je path moeten gaan spelen...aangezien de letters in zo erge pixelerige staat zijn...dat je nooit mooie vormen er uit krijgt...
je kan proberen met je levens er goed sterk contrast in te krijgen en dan met color select het zwart of de letters er uit te krijgen...net wat je wilt... maar ben band dat het niet een top kwaliteit word..
dus hoop dat je hem gewoon los ergens als layers hebt :S

[toth]

Hier een javascriptje, dat zou moeten verhelpen dat je PNG wel perfect transparant is. Alleen mac ondersteund deze code niet.

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
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.AlphaImag eLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

gr, toth

[Gerrit55]

Met 1 kleur als transparant in te stellen krijg je problemen als je achtergrond niet uit 1 bestaat, dan filter je wel die ene kleur weg maar niet de rest.

Zorg dat je layer niet gelocked is
Met de magic Wand (tolerance 20) achtergrond (zwart) selecteren,
via select -> Similar de eventuele rest selecteren.
Druk op DEL, ctrl+D (deselect)
Save for web -> Gif

[witlof]

ja wat ik dus zei ...ik hoop dat je alles als lose layers hebt...want dit is niet mooi weg te krijgen...logo is way te blurry... als je het echt mooi wilt en je hebt het alleen zo moet je paths gaan gebruiken

@ ol55...probeer eens met select > colour range te werken ..is netter en sneller als magic wand...

[Tenshu]

Okay mitch, Daar heb jij gelijk in. PNG heeft een betere kwaliteit ;) maar GIF kan ook transparant zijn, maar dat is lelijk.

[Gerrit55]

@ ol55...probeer eens met select > colour range te werken ..is netter en sneller als magic wand...

Daarmee heb je hetzelfde probleem als eerder vermeld (div. gradaties achtergrondkleur),
dan gaat mijn methode sneller / beter

[witlof]

de background color is puur zwart...en je kan hier de gevoeligheid mee aanpassen..


maar zo zie je iedereen creeert zijn eigen gebruikjes in photoshop..en zo gelt dat voor meerdere aplicaties...
meerdere wegen naar rome

[disasp]

ff over jpg bij mij kant dat wel doorzichtig in photoshop hoor :P

[Mitch]

ff over jpg bij mij kant dat wel doorzichtig in photoshop hoor :P

minimaal 10 woorden

Maar de jpg zelf is niet transparant maat :p

[Jelle]

xfader, zo zou ik je afbeelding transparant maken (ik veronderstel dat je het zwart weg wilt):
Eigenlijk zijn er verschillende manieren mogelijk.

Eerst moet je ervoor zorgen dat de onderste layer in PS leeg is, dus dat je geen background ziet. Dan paste je het plaatje in een layer erboven.

Nu om het zwart weg te doen:
Je kan met de Magic wand tool (w) de zwarte delen selecteren door er op te klikken en te deleten. (zet je tolerance bovenaan op ong. 40). De delen die niet zo vloeiend gedeleted zijn kan je nog erasen met de gum

Andere manier:
ga naar select-color range en klik dan met de eyedropper tool op het zwarte deel van de afbeeldingen. Zo selecteer je al het zwarte. Als dat gebeurt is delete je wat je geselecteerd hebt. En terug wat bijwerken met gum waar nodig.

edit: zoals ol55 ongeveer zei, khad het niet gezien :)

En zo sla je de afbeelding op als .png (onderste layer moet leeg blijven, of je kan die ook gewoon deleten)



Nog eens over het correct weergeven van een .png in een browser (in html site).
Firefox en Opera hebben daar geen probleem mee, enkel in Internet explorer lukt het niet (hopelijk hebben ze er aan gedacht in IE7)
Je kan het wel laten correct weergeven dmv een "CSS-Hack". Op mn site maak ik er gebruik van, en leg ook uit hoe. Op google vind je ook genoeg informatie.

Succes

[RITS]

hmmm, als ik een transparant plaatje moet hebben (voor een sig of banner) werk ik sowieso in de 2de en bovenstaande lagen
haal aan het einde de achtergrond laag weg, en save als een Compuserve GIF met behoud van Transparancy.

That's all.

9 van de 10x is dat goed genoeg.