HTML

Vedd fel RSS feedjeid közé!

Forrás keresés (angolul)

Utolsó kommentek

Átlátszó kép készítése

2007.11.02. 09:44 fajtbros


Tedd ezt a cikket a kedvencekbe!

Tegnap kaptam egy levelet az egyik olvasómtól, aki nagyon jó kérdést tett fel: hogyan tehetné az elkészült gombot egy weboldalra úgy, hogy az beleolvadjon a háttérbe? Lássuk a lehetőségeinket!


4 megoldás létezik a problémára:

  1. A weboldal hátterével együtt menteni ki a képet. Ezt úgy értem hogy ha az oldal minden eleme photoshopban készül, akkor a gomb ráhelyezhető a háttérre, amit utána az egyesített másolás paranccsal kimásolható a vágólapra.

  2. Kép kimentése PNG formátumban. Ha photoshopban kivesszük a gomb mögül a fehér hátteret, és a rétegeket összeolvasztjuk, kimenthető a kép átlátszó háttérrel is, PNG formátumban. Egy nagy hátránya van ennek, az internet explorer csak 7-es verzió óta tudja értelmezni az ilyen képeket. Firefoxban tökéletesen működik. Mivel a legtöbben még mindig a 6-os explorert használják, így ez nem a legjobb megoldás.

  3. Kép mentése GIF formátumban. Ez az egyetlen platform független megoldás, sok hátránnyal. A képet ugyanúgy kell kimenteni mint a PNG-t, de a képet 256 színűvé kell tennünk, a kép menü/színmód/színpaletta parancsával. A felugró ablakban az átlátszóságot be kell pipálni. Éppen ez a legfőbb hátrány, a kép max. 256 színű lehet. Ez általában elég, de ha sok szín van a képen, csúnya átmenetek keletkeznek. Van még egy gyengéje a módszernek. A PNG-vel ellentétben, a GIF képek csak 2 állást ismernek fel a képen: átlátszó és nem átlátszó. Ez azt jelenti hogy nem tudunk félig átlátszó területeket megadni, tehát például egy gomb árnyéka nem menthető ki, mivel a peremeken egyre erősödő átlátszóságra lenne szükség. PNG formában viszont ezt is megtehetjük.

  4. Léteznek különféle ún. hack-ek, amik közelebb visznek a megoldáshoz. A gond csak az hogy egy kezdőnek talán nehéz lehet a használatuk, és nem tökéletesen böngésző függetlenek. Példák a kommentek között.

Mint látható tökéletes megoldás nincs, ebből kell kihozni a legtöbbet.

9 komment

Címkék: web photoshop tutorial

A bejegyzés trackback címe:

https://fajtbros.blog.hu/api/trackback/id/tr18215842

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

bolyzsolt · http://bolyzsolt.extra.hu 2007.11.03. 10:36:01

De van jó megoldás. Kimented normálisan a gombot, és CSS-ben megadod neki az átlátszóságot.

Kód:
opacity: 0.5; // firefox értelmezi
filter: alpha(opacity=50); // ie értelmezi

Értelemszerűen a 0.5 és az 50 az átlátszóság mértékét jelölik, ezeket lehet állítgatni.

fajtbros · http://fajtbros.blog.hu 2007.11.03. 12:30:51

Természetesen abban igazad van hogy létezik más megoldás is, de ezt a kérdést grafikai szempontból válaszoltam meg. És van egy kis gond azzal amit írtál: a megoldás nem tökéletes, mivel így az egész képnek adsz átlátszóságot, míg nekünk arra van szükségünk hogy csak a peremeken legyen átlátszó a képünk. A másik gond pedig az, hogy a gifhez hasonlón ez sem tárol minden pixelhez átlátszóságot. Egyébként örülök hogy írtál, így mégegy lehetőséget bemutattunk.

bolyzsolt · http://bolyzsolt.extra.hu 2007.11.03. 13:15:23

Elnézést, én azt hittem, hogy teljes képre kell. :)

"A másik gond pedig az, hogy a gifhez hasonlón ez sem tárol minden pixelhez átlátszóságot."
Na ezt nem teljesen értem...

sikitomi 2007.11.14. 16:50:03

Hali!

Beírtam a blogomba a megoldálst az IE6 és IE5.5 png átlátszóság problémájára, remélem segít!

minimalist.blog.hu/

Üdv,
minimalist

fajtbros · http://www.fbmultimedia.hu 2007.11.14. 17:11:33

Köszi a tippet! Nagyon jó kis megoldás.

stoti · http://mozgasserult.blog.hu 2007.11.20. 23:39:34

Én ezt szoktam használni nagyon sok oldalon van róla leírás és működik. Az IE7 már kezeli a 24bites png-t. Én már alig várom hogy kihaljon az ie6



Van egy kisérleti oldalam, ott így néz ki.
vonaton.blog.hu
IE alatt nem mennek a fejléc linkjei. Ha valaki tud segítsen nekem.

stoti · http://mozgasserult.blog.hu 2007.11.20. 23:47:10

De hülye! Nem jelenítette meg a kódott :

#fejlec {
background:url(img/fejlec_bg.png) center no-repeat;
}
*html #fejlec {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='vonaton.blog.hu/media/skins/css/img/fejlec_bg.png', sizingMethod='fixed');
}

fajtbros · http://www.fbmultimedia.hu 2007.11.21. 08:42:25

bolyzsolt: úgy értettem egy pixel vagy átlátszó, vagy nem, nincsenek pixelenként tárolt köztes értékek.

stoti: természetesen igazad van, léteznek különböző hack-ok amikkel elérhető jó eredmény. Én próbálok olyanoknak is írni akik kezdők, nekik talán bonyolult lenne elsőre. Szerencsére lassan jó kis közösség kezd kialakulni az oldalon, akik sokféle technikát bemutatnak. Szóval köszi :o)

A cikkben jelezni fogom hogy a kommentek közt is vannak megoldások.

stoti · http://mozgasserult.blog.hu 2007.11.22. 21:40:00

Én csak azért nem biztatok egy kezdőt se a bizonyos esetekben kissé idejétmúlt gif képek kicsontozására, mert a png-ben nagyobb lehetőségeket látok, és nemsokára egy gif képes oldalra aztmondják, hogy gagyi. A kompatibilitása viszont csillagos5-ös, de tudom, hogy a gif szabványt már nem fogják fejleszteni
És itt egy példa, hogy mit lehet a png-vel művelni.
stoti.uw.hu/lagzi/index.html
A képgaléria fotói jpg képek, ezek felett helyezkedik el egy png kép, antik hatást kölcsönözve a fotónak. És stíluslapcserével, váltakoznak a photoskin-ek