Przedmiot: Grafika komputerowa i projektowanie stron WWW

Transkrypt

1 KARKONOSKA PAŃSTWOWA SZKOŁA WYŻSZA Kierunek: Dziennikarstwo i komunikacja społeczna Przedmiot: Grafika komputerowa i projektowanie stron WWW opracował: dr inż. Jerzy Januszewicz 1

2 Grafika komputerowa dział technologii informacyjnej, zajmujący się wykorzystaniem metod i narzędzi informatycznych (sprzęt komputerowy i oprogramowanie) do generowania i przetwarzania obrazów jak również do akwizycji rzeczywistych danych. 2

3 Grafika dwuwymiarowa (grafika 2D) wszystkie obiekty są płaskie (w szczególności każdy obraz rastrowy wpada do tej kategorii). Grafika trójwymiarowa (grafika 3D) obiekty są umieszczone w przestrzeni trójwymiarowej i celem programu komputerowego jest przede wszystkim przedstawienie trójwymiarowego świata na dwuwymiarowym obrazie. 3

4 Podział ze względu na metodę tworzenia obrazu Grafika wektorowa Grafika rastrowa 4

5 Grafika wektorowa sposób zapisu obrazów za pomocą prostych figur geometrycznych, linii i krzywych, (lub brył w przypadku grafiki 3D), które są przechowywane w postaci równań lub parametrów równań (wektorów). Obraz generowany jest przez komputer na podstawie takiego opisu przedmiotu. 5

6 Inkscape bezpłatny, licencja GNU GPL, systemy operacyjne: Linux, Mac OS, Windows. Adobe Illustrator komercyjny firmy Adobe, systemy operacyjne: Mac OS, Windows, od wersji 9 narzędzia dla projektantów stron WWW, Corel Draw komercyjny firmy Corel Corporation, systemy operacyjne: Windows, Mac OS, Linux, i inne. 6

7 obiektowość - obraz składa się z obiektów, obiekty to proste figury geometryczne, krzywe, punkty,... wektorowy (parametryczny) opis obiektów atrybuty obiektów kolor rysowania, kolor wypełnienia, stopień przezroczystości, wypełnienie niejednolite, warstwy, pełna skalowalność bez utraty jakości. Pokaz własności grafiki wektorowej na przykładzie programu Corel Draw 7

8 opracowanie graficzne składa się obiektów płaskich lub brył, obiekty umieszczane są w przestrzeni 3D - scenie, istotnym elementem sceny jest światło, w wyniku procesu renderingu na scenie tworzone są cienie, odblaski i inne efekty związane ze światłem, wynikowa scena może być wydrukowana z zachowaniem efektów 3D, utworzone obiekty mogą być wydrukowane na drukarce 3D. Przykład programu Cinema 4D i pokaz własności grafiki 3D. 8

9 Programy: Cinema 4D komercyjny program firmy Maxon, systemy operacyjne: Windows, Mac OS. Blender bezpłatne i wolne oprogramowanie, systemy operacyjne: Windows, Mac OS, Linux i inne, SketchUp program komercyjny, dostępna wersja darmowa, system operacyjny: Windows, Mac OS. i inne. 9

10 Grafika rastrowa sposób zapisu obrazu w postaci prostokątnej siatki leżących obok siebie punktów pikseli, tworzących tzw. bitmapę. Każdy piksel jest opisany przez określoną ilość bitów, zawierających informacje o kolorach. 10

11 GIMP (GNU Image Manipulation Program) bezpłatny, otwartoźródłowy, systemy operacyjne: Windows, Linux, Mac OS, Adobe Photoshop komercyjny program firmy Adobe Systems, systemy operacyjne: Windows, Mac OS, Corel PhotoPaint komercyjny program firmy Corel Corporation, składnik pakietu Corel Suite, i wiele innych. 11

12 Podstawowym parametrem określającym jakość grafiki rastrowej jest rozdzielczość. Rozdzielczość - może być rozumiana w dwojaki sposób: rozmiar bitmapy w pikselach (np: 4000x3000 oznacza, że bitmapa ma 4000 px szerokości i 3000 px wysokości, czyli pikseli) rozdzielczość źródłowa, ilość pikseli, jaka przypada na jeden cal długości (lub wysokości) obrazu rozdzielczość wynikowa. 12

13 Rastrowa edytowane są grupy punktów a nie konkretne kształty lub obiekty Wektorowa edytowane są poszczególne obiekty: linie i figury geometryczne, 13

14 Rastrowa grafika rastrowa umożliwia przedstawianie tonalnych przejść kolorów Wektorowa tworzona jest z linii dlatego obrazy zachowują wyraźne krawędzie, 14

15 Rastrowa stosowana jest do zapisywania obrazów o tonacji ciągłej takich jak fotografie i projekty tworzone w programach do malowania. Wektorowa stosowane do tworzenia ilustracji, pisma (czcionki), graficznych znaków i symboli, wizytówek itp. 15

16 Wektorowa skalowanie nie wpływa na jakość grafiki (w granicach możliwości programu edycyjnego). Rastrowa w istotny sposób wpływa na jakość grafiki, zarówno przy zmniejszaniu jak i powiększaniu. 16

17 Dla porównywalnych obrazów: wektorowa - wielkość pliku mała rastrowa wielkość pliku duża, tym większa im większy jest rozmiar obrazu w pikselach i wielkość palety barw. 17

18 wektorowa - tworzona wyłącznie komputerowo przy pomocy specjalistycznych programów, każdy program posługuję się specyficznym formatem plików, rastrowa tworzona komputerowo, również pozyskiwana przy pomocy fotograficznych aparatów cyfrowych i skanerów, formaty plików są standardowe i akceptowane prze inne oprogramowanie jak i strony WWW 18

19 Transformacja grafiki: wektorowej na rastrową - ŁATWA, grafika wektorowa przed zobrazowaniem na monitorze lub wydrukiem przekształcana jest na grafikę rastrową, rastrowej na wektorową (trasowanie) TRUDNA, wymaga czasochłonnych obliczeń opartych nawet na algorytmach inteligentnych. Przykład trasowania z wykorzystaniem programu Corel Draw. 19

20 W grafice komputerowej konieczne jest precyzyjne zdefiniowanie kolorów, potoczne nazwy są niejednoznaczne. Do opisu kolorów grafice komputerowej stosuje się modele barw*. Istnieją różne modele barw różniące się: przestrzenią kolorów, sposobem tworzenia kolorów, sposobem jednoznacznego ich identyfikowania. *Pytanie: Jak jest różnica między kolorem a barwą? 20

21 HSB podstawą tego modelu barw jest sposób postrzegania kolorów przez człowieka. H (hue) kolor wartość od 0 do 360 stopni, S (saturation) nasycenie - wartość 0% do 100 % B (brightness) jasność - 0% do 100 % 21

22 RGB model addytywny - na czarnym ekranie monitora barwy powstają w wyniku dodawania się kolorów: R red czerwonego, G green zielonego, B blue niebieskiego, dających w sumie biel 22

23 paleta barw = 2głebia barw gdzie: paleta barw ilość możliwych kolorów głębia barw liczba bitów opisujących każdy punkt bitmapy Paleta barw zbiór dostępnych kolorów, jest podzbiorem wszystkich widzialnych barw. 23

24 1 bit kolor/ brak koloru (czerń-biel); 1 bajt (8 bitów) = 256 kolorów 2 bajty (16 bitów) = bitów czerwień, 5 bitów zieleń, 5 bitów - niebieski, 3 bajty = 24 bity = kolorów - po 8 bitów na każdy kolor 24

25 CMYK kolorowe obrazy na wydrukach powstają przez odejmowanie od bieli papieru kolejnych części widma: C cyjan odcień niebieskiego, M - magneta- pośredni między czerwienią i fioletem, Y yellow żółty, aż do uzyskania czerni. Kolor: K black czarny, został dołożony na praktyczne potrzeby przemysłu poligraficznego. Zakres składowych obejmuje wartości od 0 do 100 i są to wartości procentowe. 25

26 26

27 wysokość i szerokość bitmapy (lub całkowita liczba pikseli); liczba bitów na piksel opisująca liczbę możliwych do uzyskania kolorów - głębia barw. 27

28 wielkość pliku [bajty] = ilość pikseli x głębia barw [bajty] Przykład: wielkość pliku = (3000 x 4000) x 3 bajty = x 3 bajty = bajtów = 36 MB zmniejszenie rozdzielczości źródłowej, zmniejszenie głębi barw, kompresja bezstratna (np. LZW, RLE) kompresja stratna (np. format *.jpg). Przykłady 28

29 Popularne typy plików grafiki rastrowej *.bmp - Bitmap *.tif, *.tiff - Tagged Image File Format *.gif - Graphics Interchange Format *.jpg, *.jpeg - Joint Photographic Experts Group *.png - Portable Network Graphics *.raw - dedykowany dla aparatów cyfrowych 29

30 Jakość grafiki rastrowej na wydruku i urządzeniach zobrazowania Jakość zobrazowania grafiki zależy od: rozdzielczości wynikowej (dpi, ppi), rozmiarów ekranu lub wydruku, możliwości odwzorowania palety barw. 30

31 Współzależność rozdzielczości i rozmiarów fizycznych obrazu (1) R = x p * y p x m = x p r ; y m = y p r r rozdzielczość zobrazowania (wydruk lub zobrazowanie - dpi, ppi), x p, y p - rozmiar obrazu w pikselach (neutralny), x m, y m - rozmiar fizyczny obrazu w jednostkach długości, R ilość pikseli z których składa się obraz. 31

32 Współzależność rozdzielczości i rozmiarów fizycznych obrazu (2) Przykłady: Corel Draw zmiana rozdzielczości i rozmiarów, Corel Photo Paint zmiana rozdzielczości i rozmiarów, zobrazowanie na monitorze (Irfan View). 32

33 dla aparatu cyfrowego - całkowita ilość pikseli w bitmapie np. ~2 mln pixeli to 1600 x 1200 = ); dla monitora - rozmiar bitmapy w pikselach np: 800 x 600, 1024 x 768 (przy założeniu określonej przekątnej ekranu); dla drukarki, skanera rozdzielczość - ilość punktów (pikseli), jaka przypada na jeden cal długości (lub wysokości) - jednostka: dpi. 33

34 Monitory: 800 x 480 = pikseli, np. smartfon 4,3 cala 217 ppi, 1024 x 768 = pikseli, 1366 x 768 = pikseli np. laptop 15,6cali 100 ppi, 1920 x 1080 = pikseli HD, Skaner Obraz o wymiarach 210 x 297 mm (A4) zeskanowany w rozdzielczości 300 dpi = pikseli Aparat cyfrowy Przekątna matrycy: 6,72 11 mm,..., 43,3 mm Ilość megapikseli 34

35 ręczne tworzenie przy pomocy klawiatury, myszy, pisaków elektronicznych wykorzystanie specjalistycznego oprogramowania, gotowych szablonów i metod: programy CAD, programy do tworzenia wykresów, schematów, itp. skanowanie fotografowanie aparatem cyfrowym 35

36 Skanowanie zalety: równomierne oświetlenie, wady: wyłącznie obiekty małe, płaskie lub o małych wypukłościach. Fotografowanie aparatem cyfrowym zalety: rejestracja obiektów dużych i przestrzennych, wady: konieczność ustawienia równomiernego oświetlenia szczególnie przy obiektach małych. 36

37 dostosowanie rozdzielczości do rozmiarów obrazu współczynnik skalowania dostosowanie rozdzielczości w zależności od przyszłego wykorzystania obrazu 37

38 1. Obrót odpowiednie ustawienie obrazu po skanowaniu lub zrobieniu zdjęcia 2. Kadrowanie (wycinanie) wyselekcjonowanie interesującego nas fragmentu obrazu. 3. Ustawienie odpowiedniej jasności 4. Ustawienie odpowiedniego kontrastu 5. Modyfikacje obrazu retusz, zmiana barw, efekty, Dodawanie nowych elementów np. napisów. 7. Ustawienie balansu kolorów (kolory na ekranie monitora są inne niż w drukarce) 8. Zmiana ilości kolorów 9. Ustawienie rozdzielczości i rozmiaru 10. Zapis w odpowiednim formacie 38

39 Przedmiot prawa autorskiego Art Przedmiotem prawa autorskiego jest każdy przejaw działalności twórczej o indywidualnym charakterze, ustalony w jakiejkolwiek postaci, niezależnie od wartości, przeznaczenia i sposobu wyrażenia (utwór). 39

40 2. W szczególności przedmiotem prawa autorskiego są utwory: 1) wyrażone słowem, symbolami matematycznymi, znakami graficznymi (literackie, publicystyczne, naukowe, kartograficzne oraz programy komputerowe); 2) plastyczne; 3) fotograficzne;... 40

41 2 1. Ochroną objęty może być wyłącznie sposób wyrażenia; nie są objęte ochroną odkrycia, idee, procedury, metody i zasady działania oraz koncepcje matematyczne. 3. Utwór jest przedmiotem prawa autorskiego od chwili ustalenia, chociażby miał postać nieukończoną. 4. Ochrona przysługuje twórcy niezależnie od spełnienia jakichkolwiek formalności. 41

42 Czas trwania autorskich praw majątkowych Art. 36. Z zastrzeżeniem wyjątków przewidzianych w ustawie, autorskie prawa majątkowe gasną z upływem lat siedemdziesięciu: 1) od śmierci twórcy, a do utworów współautorskich - od śmierci współtwórcy, który przeżył pozostałych; 42