Przejdź do treści
Tworzenie stron WWW

Jak stworzyć transparentny GIF na stronie WWW ?

Autor Zaradni.pl
Autor Zaradni.pl Adept
14 maja 2013 ~2 min czytania
Transparentność lub przezroczystość w przypadku formatu GIF umożliwia zdefiniowanie jednego koloru, który nie będzie widoczny w przeglądarce. Pamiętaj, że każdy element graficzny zawsze ma kształt prostokąta i nie ma możliwości, by to zmienić. Ściślej rzecz biorąc, nie da się przygotować okrągłej grafiki.
W praktyce z funkcji transparentności formatu GIF musisz skorzystać w przypadku, gdy chcesz uniknąć umieszczania na stronie elementów o prostokątnych kształtach. Doskonałym przykładem będzie okrągły przycisk.

Kroki

1
Pierwszym krokiem jest pobranie programu Paint Shop Pro 7.04. Po uruchomieniu aplikacji tworzymy nowy obrazek o rozmiarach 100x100 Pixeli. W tym celu z menu FILE wybieramy opcję NEW. W nowo otwartym oknie musisz określić rozmiar obrazka - Width ( szerokość ) oraz Height ( wysokość ). Następnie w polu Resolution określ rozdzielczość obrazka, tak by wynosiła 72 pixele.
2
Po utworzeniu nowego obrazu pora narysować koło. W tym celu wybierz narzędzie o nazwie Kształty.
Następnie kliknij kursorem myszy w ikonę zlokalizowaną na siódmej pozycji od prawej strony w menu. Odpowiada ona za pokazanie okna właściwości kształtów widocznego w prawym dolnym rogu.
3
Kolejną czynnością jaką musimy wykonać jest określenie koloru naszego koła. Robimy to w miejscu okna po prawej stronie pod właściwością styles. Pamiętaj, że koło składa się z obramowania oraz wypełnienia, dlatego w sekcji styles masz dwa pola koloru.Po kliknięciu kursorem myszy w kolorowy prostokąt otworzy się paleta kolorów, z której musisz wybrać żądaną barwę.
4
Teraz przyszła pora na określenie koloru, który ma być niewidoczny na stronie WWW. W tym celu z menu Color wybieramy opcję Set Palette Transparency. W nowo otwartym oknie wybieramy opcję Set the transparency value to palette entry, a następnie przesuwamy kursor myszy nad obrazek i klikamy kolor, który ma być niewidoczny. Teraz już pozostaje tylko zapisanie obrazka na dysku w formacie GIF.
5
Poniżej prezentuje cały kod :

<html>
<head>
<meta http-equiv="Content-type" content="text/html:charset=ISO-8859-2">
<title>transparentny GIF</title>
<style type="text/css">
BODY
{
background-color: #8080FF;
}
</style>
</head>
<body>
<img src="obrazek.gif">
</body>
</html>

Oceń tę poradę

0.0
(0 głosów)
Twoja ocena:
Zapisywanie głosu...

Komentarze

Komentarze (0)

Zaloguj się, aby dodać komentarz.

Brak komentarzy. Bądź pierwszy!

Ta strona używa plików cookies

Używamy cookies dla działania serwisu i analizy ruchu. Polityka prywatności