Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój...

30
Grafika komputerowa Adam Wojciechowski

Transcript of Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój...

Page 1: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Grafika komputerowa

Adam Wojciechowski

Page 2: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Znaczenie i kompozycja koloru

„Dobrze dobrane kolory nadają scenie odpowiedni nastrój i wiążą ją w kompozycyjną całość. Źle dobrany kolor rozbija scenę, nadaje jej wygląd nieskładny i sztuczny”

Page 3: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Koło barwTemperatura koloru zależy od przeważającego w nim odcienia z koła barw.

Kolory ciepłe zawierają więcej żółtego (Y) lub czerwonego (R), kolory zimne więcej niebieskiego.

Page 4: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

1. Kolory ciepłe

Są agresywne i przyciągają uwagę (najsilniej czerwony i pomarańczowy).

CzerwonyCzerwony symbolizuje życie, pasję.

PomarańczowyPomarańczowy jest kolorem radości i rześkości.

ŻółtyŻółty oznacza ciepło i żywotność.

Firma A

Firma B

Page 5: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

2. Kolory zimne

- Dają poczucie spokoju i świeżości.

NiebieskiNiebieski daje poczucie chłodu, spokoju.

ZielonyZielony oznacza wzrost, wiosnę.

Page 6: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

3. Odległość, objętość, ciężar

Obiekty w kolorach ciepłych wydają się większe i bliższe.Obiekty w kolorach zimnych wydają się mniejsze i odleglejsze.

Czerwony i czarny zwiększają wrażenie ciężaru i ciepła, niebieski i biały - zmniejszają.

Czarny zmniejsza wrażenie objętości, biały - zwiększa.

Page 7: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

4. Kolory dopełniające (uzupełniające)

- Leżą naprzeciwko siebie w kole barw.

- Użyte obok siebie nawzajem się „uwypuklają” tworząc silny kontrast przyciągający wzrok.

- Niepożądane są wypełnienia tonalne między kolorami dopełniającymi.

- Cień rzucany przez kolorowy obiekt ma tendencję do zabarwienia się barwą dopełniającą.

Zielony i czerwony tworzą silną wibrację. Zielony i czerwony tworzą silną wibrację. Zielony i czerwony tworzą silną wibrację.

Zielony i czerwony tworzą silną wibrację. Zielony i czerwony tworzą silną wibrację. Zielony i czerwony tworzą silną wibrację.

Page 8: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

5. Kolory analogiczne

- Leżą w kole barw obok siebie.

- Mogą wzajemnie współistnieć nie rywalizując ze sobą.

- Dobrze komponują się w wypełnieniach tonalnych.

Page 9: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

6. Drobne elementy powinny się wyróżniać głównie jasnością

Kolory Jasność Kontrast

biały - czarny 1,0 – 0,0 najsilniejszy, przytłaczający

biały - niebieski 1,0 – 0,1 dobry

żółty - czarny 0,9 – 0,0 dobry

żółty - niebieski 0,9 – 0,1 dobry

czerwony - niebieski 0,3 – 0,1 zły

biały - żółty 1,0 – 0,9 najsłabszy

niebieski - czarny 0,1 – 0,0 najsłabszybiały na czarnym biały na niebieskim żółty na czarnym żółty na niebieskim

biały na żółtymczerwony na niebieskim niebieski na czarnym

L = 0,3R + 0,6G + 0,1B

Page 10: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Znaczenie kolorów w reklamie

Czerwony wyraża silny pęd do sukcesu, mocnych przeżyć i pełni życia. Jest kolorem pobudzającym, podniecającym i irytującym. Zwiększa tętno i ciśnienie krwi. Zawiera w sobie największy „ładunek aktywności”.

Osoby preferujące czerwień są zwykle impulsywne, a zakupy – szczególnie dokonywane w towarzystwie – są dla nich dobrą rozrywką.

Kolor czerwony w reklamie jest odpowiedni do wyzwalania impulsywnej chęci zakupu. Czerwień wzmaga też apetyt, dlatego jest wiodącym kolorem na opakowaniach zup. Podnosi również męski appeal (kosmetyki).

Page 11: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Niebieski kojarzy się z orzeźwieniem, relaksacją. Osoby lubiące ten kolor pragną spokoju, harmonii i uporządkowania. Użyty w reklamie może sugerować, że zakup danego towaru wprowadzi odrobinę spokoju w życie.

Ten najzimniejszy kolor wykorzystywany jest w reklamie mrożonek (często razem z czerwonym) oraz wszędzie tam, gdzie reklamowany produkt ma przynieść ulgę i odprężenie. Użycie błękitu może kojarzyć się ze smutkiem.

Page 12: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

PomarańczowyPomarańczowy polepsza nastrój, wyzwala aktywność i dodaje sił.

Uważa się, że kolor ten jest właściwy na opakowaniach artykułów spożywczych; wraz z brązem (wspomnienie jesieni) nadaje się do reklamy owoców.

ŻŻółtyółty podwyższa aktywność. Przyciąga uwagę, szczególnie w zestawieniu z czarnym.

Przywiązanie do niego znamionuje chęć uwolnienia się od napięć i nadzieję osiągnięcia szczęścia i sukcesu.

Osoby preferujące żółty bywają niezdecydowane, często kupują na kredyt i bez namysłu.W reklamie wyzwala chęć działania i spróbowania.

Page 13: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Brązowy jest kolorem typowym dla ludzi, których cechuje brak poczucia bezpieczeństwa i ciągła frustracja. Stąd nadaje się do reklam produktów zapewniających bezpieczeństwo.

Brązowy jest kolorem o męskim charakterze, kojarzy się z ziemią, ciepłem, komfortem. Może być używany w reklamie wielu wyrobów, szczególnie w reklamie kosmetyków.

Opakowanie w odcieniach brązu sugeruje, że wyrób jest godny zaufania. Jednocześnie kolor ten zniechęca do kupowania na kredyt (obniża komponent agresywności).

Page 14: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

ZielonyZielony symbolizuje twardość, nieustępliwość i potrzebę uznania. Stąd odcienie zieleni polecane są w reklamie kierowanej do biznesmenów.

Zieleń jest symbolem zdrowia i rześkości. Kojarzy się z lekkością, świeżością, działa relaksująco(w nadmiarze – depresyjnie).

Osoby preferujące kolor zielony odznaczają się stałością i szczerością, co można wykorzystać tworząc przywiązanie do marki.

Jednocześnie kolor zielony może prowadzić do rezygnacji z zakupów na kredyt, gdyż budzi rozsądek i uświadamia konieczność podejmowania trafnych decyzji.

Page 15: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Fioletowy obniża nastrój. Fascynuje i oczarowuje ludzi niedojrzałych emocjonalnie.

Używany w reklamie damskich kosmetyków.

Page 16: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast

„Kontrast polega na zestawieniu odmiennych elementów w celu przyciągnięcia i zatrzymania uwagi widza.

Jest najbardziej skuteczny, gdy istnieje powód by zwrócić uwagę na jeden element, a odwrócić ją od innego.”

Page 17: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast walorowy (tonalny)

Odzwierciedla zależność „jasny-ciemny”.

Występuje w tle z tonalnym przejściem między dwoma odcieniami szarości lub odcieniami barwy.

Drobne elementy (linie, tekst) powinny się odróżniać od tła głównie jasnością.

Każdy krój pisma ma swój własny odcień:

Page 18: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast rozmiarowy

Odzwierciedla zależność „duży-mały”.

Wielkie elementy zostaną zauważone z powodu swojego rozmiaru, z kolei drobny element natychmiast przyciąga uwagę, jeżeli jest otoczony dużym obszarem bieli.

Różne rozmiary czcionki stosuje się dla tytułów, śródtytułów, nagłówków i tekstu podstawowego.

Page 19: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast ciężkości

Odzwierciedla zależność „gruby-cienki”, np. gruba i cienka linia.

Jest łatwo zauważalny w tekście, gdy stosujemy pismo wytłuszczonei normalne.

Page 20: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast kształtu

Operuje różnicą kształtów elementów leżących obok siebie, szczególnie figury geometrycznej z elementem o nieokreślonym kształcie.

Powtarzanie (wielokrotne powielanie elementu) w połączeniu z kontrastem kształtu przydaje harmonii i ciągłości projektowanej stronie.

Page 21: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast położeniaOsiąga się go przez usunięcie lub powielenie elementu należącego do pewnej grupy lub obrócenie tekstu lub grafiki o pewien kąt.

Page 22: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Kontrast teksturowy

Operuje różnicą między tłem wypełnionym wzorem i umieszczonymi na nim elementami.

dobrze źle

Page 23: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Typografia

Page 24: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Czcionka

W tradycyjnej typografii czcionka jest zbiorem figur reprezentujących litery, cyfry i znaki o wspólnej pod względem kompozycyjnym stylistyce, przy czym nie jest istotna technika odwzorowania tych figur.

W grafice komputerowej czcionka jest plikiem lub programem, który jest wykorzystywany do odwzorowania lub tworzenia kształtu liter, cyfr i innych znaków.

CzołgWiosna

Właściwa czcionka współgra z treścią tekstu

Page 25: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Małe odstępy miedzy literami zmniejszają ich czytelność, udaremniając korzystanie nawet z największych czcionek.

Zbyt duży kontrast pomiędzy grubymi i cienkimi elementami liter prowadzi do nieładu i utraty harmonii kształtów samych liter.

Minimalizacja różnic pomiędzy literami poprzez zaokrąglenia na rogach oraz wyrównanie do linii wszystkich horyzontalnych środków powoduje utratę czytelności.

Zbyt cienkie pociągnięcia liter nie wykorzystują w pełni podstawowych kształtów, zlewają się z tłem i stają się nieczytelne z dystansu.

Zbyt ciężkie litery z dystansu stają się nieczytelnymi plamami, podstawowe kształty są nie do rozróżnienia, a litery nie do rozpoznania.

Kursywa i podobne style poświęcają czytelność kształtów na rzecz dekoracyjnych aspektów, trudno zatem identyfikować pojedyncze litery.

„Impact” – biuletyn na temat reklamy plakatowej w Polsce, grudzień 1997.

Page 26: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Grafika komputerowa

Grafika komputerowa

Grafika komputerowa

Podczas czytania identyfikujemy litery głównie na podstawie górnej połowy wiersza

Page 27: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Anatomiapisma

linia górna pisma

linia bazowalinia dolnainterlinia 40

odstęp międzyznakowy (spacja)

Wydłużenia:górne

dolne

szeryf

majuskuła (duża litera)

minuskuła (mała litera)

Stopień pisma: 50 punktów1 punkt = 1/13837” = 0,352mm wg systemu Pica (ang.–am.)

Interlinia: 40 punktów, 50/90

Kerning – koryguje spacje między wybranymi parami znaków

Tracking – koryguje spacje w zaznaczonym f ragmencie tekstu

Page 28: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

W długich tytułach zmniejszenieinterlinii łączy wiersze

Zwiększenie interlinii w tekście zwartym poprawia czytelność. Tutaj Times New Roman 14/19. W tytule Arial 20/24. Długie wiersze ciągnące się przez całą szerokość strony lub ekranu należy złamać. Długość wiersza w druku do 60 znaków, na ekranie do 40 znaków.

dobrze

Zwiększenie interlinii możerozdzielić wiersze tytułu

Mała interlinia w tekście zwartym pogarsza czytelność. Tutaj Times New Roman 14/15. W tytule Arial 20/30. Długie wiersze ciągnące się przez całą szerokość strony lub ekranu należy złamać. Długość wiersza w druku do 60 znaków, na ekranie do 40 znaków.

źle

Page 29: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Krój pisma

Charakterystyczny kształt kompletu znaków drukarskich

Druk: krojów szeryfowych używa się w tekście zwartym (o małym stopniu pisma), krojów bezszeryfowych w tytułach.

Ekran: w tekście zwartym czytelniejszy jest krój bezszeryfowy

Pisanki, czyli kroje ozdobne, używane są na plakatach, zaproszeniach itp.

Page 30: Adam Wojciechowski - ics.p.lodz.plics.p.lodz.pl/~adamwoj/WSFI/GK/Wyklad_2_GK.pdf · Każdy krój pisma ma swój własny odcień: Kontrast rozmiarowy Odzwierciedla zależność „duży-mały”.

Odmiany danego kroju tworzą rodzinę. Na jej czele znajduje się krój pisma w odmianie podstawowej

Nie należy nadużywać ilości stosowanych krojów pisma, gdyż na siłę „wzbogacona” strona przestaje być czytelna.W druku klasyka to Times w tekście zwartym i Helvetica w tytułach.Microsoft zaprojektował dla ekranu czcionki Georgia i Verdana.