Share This

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.


responsywne strony www Lublin na joomla



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"

responsywne strony www Lublin na joomla


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

responsywne strony www Lublin na joomla

 



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ę

responsywne strony www Lublin na joomla




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

 

responsywne strony www Lublin na joomla



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.

responsywne strony www Lublin na joomla



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.

responsywne strony www Lublin na joomla



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

responsywne strony www Lublin na joomla

 

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"

responsywne strony www Lublin na joomla

 

 

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.

responsywne strony www Lublin na joomla

Przydało się? - Udostępnij

Blog - popularne

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Specified key was too long; max key length is 767 bytes - błąd podczas przywracania strony za...

Klient poprosił mnie o zwiększenie wersji PHP do najnowszej wersj PHP 7.2. Przy stronach firmowych najczęściej nie wykonuję takich operacji z automatu tylko staram się na początek sprawdzić czy jest...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej

Zarządzanie użytkownikami w Joomla 3. Jak zmienić nazwę użytkownika, hasło, mail w zaleczu joomla

Edycja profilu użytkownika, zmiana hasła do zaplecza joomla czy maila konkretnego użytkownika w joomla 3 są bardzo proste - oczywiście jeśli mamy dostęp do zaplecza naszej strony www Lublin na...
Czytaj dalej