PNG-8 транспарентност во секој прелистувач

png transparentnost

Повеќето веб дизајнери користат PNG-24 за да постигнат транспарентност во своите проекти. Овие фајлови постигнуваат добра транспарентност но затоа пак тежат повеќе. Користењето на PNG-8 или GIF за транспаренција не функционира баш добро. Всушност, има начин како да го искористите PNG-8 подобро од PNG-24.

Со PNG-8 се добива помала големина на фајл, а и доста добро се прикажува и во Internet Explorer 6, па така нема потреба од користење на css или javascript хакови за да се постигне саканото.

Овој ефект нема да можете да го постигнете во Photoshop па затоа ќе треба да користите Fireworks.

1. Направете нов фајл со транспарентна позадина
2. Напишете или нацртете тоа што ви е потребно
3. Отворете го Optimize прозорчето (F6) и во него изберете ги следните подесувања:

optimize-panel

4. Зачувајте го фајлот преку File -> Export

Доколку ве интересира повеќе прочитајте: PNG-8: The Clear Winner.

gravatar
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

6 Коментари

  1. Зошто не може во photoshop?

  2. @GoodBytes

    Не дека неможе во Photoshop, но за да постигнеш добра транспарентност мора да користиш Mate и да ја избереш бојата од позадината каде што треба да стои сликата.

    Доколку сакаш сликата да одговара на секоја позадина ќе мора да го изгасиш Mate, но тогаш сликата нема да има Anti-aliasing и нема да изгледа толку добро.

  3. Веројатно тука мислиш на ПРОБЛЕМИТЕ со прикажувањето PNG слики со alpha transparency* кои ги имаат постарите верзии на Internet Explorer. Тие се решени од верзијата 7 и нагоре. Провери и сам, отвори ја оваа тест страна со IE7 или IE8:

    http://entropymine.com/jason/testbed/pngtrans/

    * Провидност која може да се дефинира со проценти, од непроѕирно до сосем проѕирно, и тоа да биде подесено различно за секој пиксел (т.е. „алфа“ леер).

  4. А од Opera демек не е поддржувана, така?

    Ај провери пак 🙂

  5. @white_eagle

    На што мислеше дека не е поддржана од Opera?

  6. Супер е примеров но доколку сакате да прикажете транспарентна PNG-32 во IE6 или постар прелистувач тогаш може да користите IE PNG Fix

    http://www.twinhelix.com/css/iepngfix/