Mało znany i rzadko używany przez webmasterów format zapisu grafiki jakim jest PNG, jest jednym z najbardziej użytecznych formatów(!). No to pomału, wypiszmy co do czego:
JPEG
- Zdjęcia
- Gradienty
- Abstrakcje
- Screen’y
GIF
- Animacje
- Pixel-art’y (nie psuje jakości, do 256 barw)
- Ikony, emotikony
- Coś w czym potrzebujemy przezroczyste tło
PNG
No i jesteśmy już przy .png, niedużo tych formatów było ;]. Największym plusem jest to że posiada on obsługę stopniowej przezroczystości (kanał alpha), jako jedyny format, uwierzcie mi jest to naprawdę wielgachne plusisko ;], ale oczywiście musi być i minus :P, IE nie obsługuje tego kanału. Opisze jak i gdzie użyjemy ów formatu:
Zastosowanie: Ramki, nakładki, podmiana koloru, buttony
Podpatrzyłem u RAFi’ego, ramki na obrazkach – tyle że on to robi w Photoshop’ie. Można również zrobić to samo w CSS przy użyciu PNG – nawet lepsze :P. Oczywiście z takimi w CSS jest dużo wygodniej, rysujemy ramkę tylko raz. Oto przepis:
- Ustalamy rozmiar/wielkość pliku graficznego którego będziemy używać, w moim przypadku jest to 300×300 (px).
- Tworzymy nowy obrazek o rozmiarze jaki wcześniej przyjęliśmy, wyłączamy tło, i rysujemy ramkę, możesz używać wszystkich efektów: przezroczystość, cień, obrys, faza zew. i wew. Tak wygląda moja ramka:
- Teraz zapisujemy ją następującą: Plik > Zapisz dla Weba…, wybieramy w “Ustawienia” PNG-24 i zaznaczamy “Przezroczystość”. Możesz nazwać jak ja “ramka.png”.
- Skalujemy jakiekolwiek zdjęcie (na próbę) to takich samych rozmiarów jak ramka. I zapisujemy jako jpg, ja nazwałem “zdjecie.jpg”.
- Teraz już kod :]. Uruchamiamy nasz edytor (polecam TopStyle), jak nie mamy nic na stanie to może być systemowy notatnik ;]. Zrobiłem dwa przykłady z których możesz skopiować kod. Pierwszy, drugi. Oba na tej samej nakładce.
- Przykłady tego zastosowania (zmieniona jedynie ramka, kod ten sam):
Po co robić 10 takich samych obiektów w różnych kolorach? Można użyć .png, do podmiany koloru. Teraz już nic nie tłumaczę tylko podaję linki, sami sobie zajrzyjcie w kod i sprawdźcie :P
Podmiana koloru prostego obiektu – koniczynki.
Paski/przyciski podmiana koloru.
Przyciski prosto od Riddle’a ;]
Niedługo jeszcze coś dopiszę, jeżeli chodzi o PNG.
Pozdrawiam, Konrad.
Zapraszam na blog sunlifter’a który uzupełnił mój artykuł o hackowani’e IE
hmmm wszystko ok ale to samo można osiągnąć robiąc akcje w PS. Twój sposób jest może lepszy ponieważ robiąc akcje w PS powiększamy rozmiar pliku a w przypadku css korzysta on z jednego na zamieszczonego juz na serverze :P. Do tego postu przydało by się jak ominąć brak funkcjonalności PNG w IE (pare haków :)).
Ogólnie pomysł uważam za ciekawy.
“Mało znany i rzadko używany przez webmasterów”
Ja tego formatu używam już od kilku dobrych lat, wszystkie grafiki jakie wrzucam np. na ImagesHacka czy Fotosika, własnie w PNG’ach. Zresztą już sama nazwa zdradza przeznaczenie tego formatu – PNG (ang. Portable Network Graphics).
No właśnie! Ale zauważ sam że większość webmasterów używa na swych stronach jpeg i gif :/ Dlaczego?
Nawet WordPress.com używa jpg’ów – np. http://a.wordpress.com/avatar/unknown-48.jpg
Przyznam się że niektórch nie umiem zrozumieć…
Właśnie o to mi chodzi… Format wcale nie jest już taki nowy i niedostępny, ale jakoś dalej wszyscy używają jpg – przyzwyczajenie?.
Być może. Na szczęście Linux (a przynajmniej najnowsza wersja Ubuntu ;) ) uczy zapisywania w PNG’ach, ponieważ screeny w tym systemie sa automatycznie tworzone własnie w tym formacie.
Ja jestem (póki co) użytkownikiem windows’a a tu naprawdę trudno o dobrą kompresje PNG. Nawet Photoshop się nie nadaje(!) Zobacz więcej na temat PNG: http://pornel.net/pnghowto.
Raczej http://pornel.net/edit:/pnghowto :)
Pozdrawiam
PS. Zapraszam do mnie – GigaBlogs.info.
:/ link zrobił się razem z kropką. Adres podałem dobrze :P, chodzi mi o stronę http://pornel.net/pnghowto – bez kropeczki na końcu :D
Ale zapomniales chyba o tym że można dodać do IE obsluge przezroczystości w IE dodając kilka prostych linijek skryptu do strony.
chociażby w ten sposob:
http://www.mongus.net/pngInfo/
Sproboje dzisiaj napisać jakiś artykulik odnosnie hackowania IE ;]
Masz racje, pominąłem to ;] Czekam na “trackback” z twojej stronki :]
myślę, że główną rolę odgrywała raczej kompresja, wieksze rozmiarowo pliki sporo ważyły i strasznie długo się ładowały, jpgi i gify nie i ot całą zagadka wyjasniona ;)