Format .png to drugi w kolejności po .jpg format plików graficznych wykorzystywany w czasie tworzenia stron internetowych. Oczywiście większość użytkowników internetu najbardziej kojarzy .jpg bo w nim zapisywane są fotografie do galerii nie tylko na stronach www ale i we wszystkich serwisach społecznościowych.Format .png wykorzystywany jest przez osoby tworzące strony internetowe Puławy wszędzie tam gdzie konieczna jest przeźroczystość w tle - np w logotypach firm.
W czasie kompresji w .jpg ulega zmniejszeniu liczba szczegółów - ulegają one rozmywaniu, natomiast w .png zmniejsza się liczba kolorów ale pozostają cały czas one ostre.

Odkąd w projektowaniu strony www Puławy pojawiły się warstwy format ten jest coraz częściej wykorzystywany w procesie tworzenia strony www.

Na przykładzie programu Adobe Photoshop CS3 pokaże jak zapisać plik do internetu z przeźroczystym tłem do wykorzystania na stronie www.


1. Otwieramy w programie Adobe Photoshop dowolny plik graficzny - może to być .jpg, psd czy inny format. Pamiętajmy że skala barw wykorzystywana w internecie to RGB a rozdzielczość 72 dpi.
Moja wersja programu jest po angielsku ale wynika to z faktu że kiedy zaczynałem zabawę z grafiką nie było wersji polskich - a potem kiedy miałem możliwość zakupu z przyzwyczajenia wybrałem wersję angielską

Ja wybrałem zwykłą fotografię - przestawia Pałac Małachowskich w Nałęczowie. Po prawej stronie na górze mamy zakładkę Layers / warstwy - widzimy tu że ten plik ma tylko jedną warstwę Background / Tło.

2. Żebyśmy mogli zapisać plik z przeźroczystością musimy stworzyć warstwę z przeźroczystością i zduplikować a następnie wyciąć z fotografii fragmenty w których ma być przeźroczystość.
Zaczynam od zduplikowania warstwy Background. Najeżdżamy kursorem na pasek warstwy w inspektorze warstw i prawym klawiszem wywołujemy menu kontekstowe z którego wybieramy "Duplikate layer"

3.Nadajmy nowej warstwie swoja nazwę i klikamy button "OK"

4. Jak widać w inspektorze warstw - po prawej - mamy już dwie identyczne warstwy - jedna nad drugą.

Teraz klikając w ikonkę w dolnym prawym rogu - "Create new layer" tworzymy nową pustą warstwę

5. Ponieważ nowa warstwa pojawił się na górze, przeciągamy ją kursorem pomiędzy warstwy.  

7. Teraz w inspektorze warstw usuwamy dolną warstwę Background / Tło - prawym klawiszem wywołujemy menu kontekstowe i klikamy "delete layer"
Pozostały nam dwie warstwy - jedna przeźroczysta. Teraz musimy usunąć wybrane części fotografii tak żeby widoczna była przeźroczysta warstwa.

8. Za pomocą narzędzia "Polygonal Tasso Tool" zaznaczam na warswie z fotografią pewien obszar a następnie klikam klawisz "delete"
W tym momencie mamy plik graficzny który po zapisaniu do formatu .png będzie miał elementy przeźroczyste. Taki plik będziemy mogli umieścić na warstwie w naszej responsywnej stronie internetowej - dzięki temu uzyskamy niestandardowy kształt pliku graficznego.

9.Teraz musimy zapisać plik do formatu .png. Zrobimy to wybierając z górnego menu "File / Plik >>> Save for web / Zapisz dla weba"

10. Pojawia się okno w którym możemy wybrać format pliku docelowego (.png, .jpg, .gif).  My wybieramy format .png i zaznaczamy opcje Transparency / Przeźroczystość, następnie klikam button "Save"

11. Teraz pozostaje nam wybrać lokalizację w której chcemy zapisać plik i nadać mu nazwę. Pamiętajmy że jeśli plik ma być użyty na strony internetowe Lublin nie powinien zawierać w nazwie polskich znaków, powinniśmy także użyć małych liter.

W ten sposób możemy także przygotować logo dla naszej strony www Lublin.