Wydział Fizyki Technicznej i Modelowania Komputerowego
Instytut Modelowania Komputerowego
Zakład Grafiki Komputerowej i Obliczeń Wysokiej Wydajności
Grafika Komputerowa
wykład 11:
Podstawy teorii kompozycji
Wydział Fizyki Technicznej i Modelowania Komputerowego
Instytut Modelowania Komputerowego
Zakład Grafiki Komputerowej i Obliczeń Wysokiej Wydajności
Grafika Komputerowa
wykład 11:
Podstawy teorii kompozycji
Grafika Komputerowa
– wykład 11
Ogólnie mamy do dyspozycji trzy możliwe kadry:
• poziomy prostokątny
• pionowy prostokątny
• kwadratowy
Kompozycja:
• symetryczna
• asymetryczna
Charakterystyka
kompozycji
Charakterystyka
kompozycji
Równowaga
• Formalna – elementy obrazu rozmieszczone symetrycznie,
• Nieformalna – dla zrównoważenia obrazu wykorzystuje się
zróżnicowaną wielkość poszczególnych elementów, zmienia natężenie
kolorów i manipuluje perspektywą. Perspektywiczny środek ciężkości
obrazu znajduje się nieco wyżej (ok. 1/8) jego środka.
Rozmieszczenie
Odbiorca ma naturalną tendencję do rozpoczynania oglądania od
lewego górnego rogu i kończenia w prawym dolnym rogu. Oczy
poruszają się zawsze od elementów ciemniejszych do jaśniejszych i od
kolorowych do jednobarwnych. Dzięki temu można wyróżnić bardziej i
mniej ważne elementy obrazu i skonstruować pożądaną ścieżkę
wzroku odbiorcy.
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Równowaga kolorystyczna Równowaga tonalna
Grafika Komputerowa
– wykład 11
Kontrast
Pomaga przyciągnąć i zatrzymać wzrok patrzącego.
Wyrazistość
Całość obrazu powinna być zrozumiała i prosta. Stąd należy unikać
stosowania różnych krojów pisma i obiektów bardzo małych, trudnych
do rozpoznania i kłopotliwych do przeczytania.
Jednorodność
Obraz powinien sprawiać wrażenie spójności, zharmonizowania
poszczególnych elementów.
Charakterystyka
kompozycji
Grafika Komputerowa
– wykład 11
Jednorodność
kompozycji
Charakterystyka
kompozycji
Grafika Komputerowa
– wykład 11
Uporządkowanie
kompozycji
Charakterystyka
kompozycji
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Podział obrazu liniami poziomymi i pionowymi na równych 9 pól
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
„Złoty podział” – stosunek odcinka krótszego do dłuższego
równy jest stosunkowi dłuższego odcinka do całości
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Kompozycja przekątniowa – wyznaczenie przekątnej obrazu i linii do niej prostopadłych
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
W miejscach przecięć linii znajdują się punkty formalnie mocne.
Umieszczenie obiektu w jednym z tych punktów gwarantuje nam
rozpoznanie przez obserwatora głównego motywu naszego obrazu.
Trzeba jednak pamiętać, że powinno się wykorzystywać tylko jeden
lub co najwyżej dwa punkty, umieszczenie większej liczby
przedmiotów na wszystkich przecięciach osłabia oddziaływanie
powyższych elementów.
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Kompozycja osiowa –
symetryczna
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Oś kompozycji umieszczona pionowo Oś kompozycji umieszczona
ukośnie
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Rola obramowania w obrazie
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Kompozycja zamknięta to tak skomponowany obraz który stanowi
zamkniętą całość. Wszystkie elementy potrzebne do zrozumienia treści
są widoczne. Zaś kompozycja otwarta przedstawia jedynie określony
fragment rzeczywistości której reszta pozostaje w sferze domysłów.
A B C
Rysunek A jest przykładem kompozycji zamkniętej - jeden człowiek
celuje do drugiego, który trzyma ręce w górze. Rysunki B i C to
przykłady kompozycji otwartej: domyślamy się lub wiemy dlaczego i w
kogo celuje postać na rysunku B jak również domyślamy się, że ktoś
grozi bronią postaci na rysunku B skoro trzyma ręce w górze.
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Kadrowanie
Grafika Komputerowa
– wykład 11
Pion czy poziom?
Grafika Komputerowa
– wykład 11
Pion czy poziom?
Grafika Komputerowa
– wykład 11
Odstęp po odpowiedniej stronie
Grafika Komputerowa
– wykład 11
Odstęp po
odpowiedniej
stronie
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Horyzont
Najczęściej spotykaną linią dzielącą jest linia horyzontu, ustawienie
jej nie jest bez znaczenia dla kompozycji. Linia umieszczona po
środku dzieli obraz na równe części, sugerując jednakową wagę obu
elementów. Częściej spotykane jest połączenie niesymetryczne, linia
horyzontu opuszczona lub podniesiona. Opuszczona, podkreśla
przestrzeń nieba, upraszcza obraz, usuwając z kadru niepotrzebne
elementy, kompozycja jest "lżejsza". Jednak bardzo nisko
opuszczona linia horyzontu da wrażenie przytłoczenia wszystkiego
przez niebo, kompozycja będzie "ciężka". Podniesienie horyzontu
uwypukli natomiast pierwszy plan, poprzez dodanie paru elementów
z przodu, zwiększy głębię obrazu. Zdjęcia z przesuniętą linią są
bardziej sugestywne, mocniej oddziaływujące na widza.
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Horyzont
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Kilka uwag na koniec:
• oko ludzkie jest bardzo wyczulone na linia poziome i pionowe,
należy zatem unikać stosowania linii nieznacznie odchylonych od
poziomu czy pionu (dotyczy to także formatowania tekstu – granic
szpalty tekstu)
• linie odchylone od pionu/poziomu o więcej niż 7
0
sprawiają
wrażenie wprowadzenia zamierzonego efektu
• człowiek silnie odbiera rytm elementów, zatem jeżeli stosujemy
kilka powtarzalnych elementów, starajmy się umieszczać je w
regularnych odstępach
• tendencja do liczby ograniczonej – jesteśmy w stanie postrzegać
co najwyżej 5 elementów jako pojedynczą grupę, powyżej tej liczby
pojawia się tendencja do dzielenia obiektów na podgrupy
Grafika Komputerowa
– wykład 11
Charakterystyka
kompozycji
Kompozycja
rytmiczna
Grafika Komputerowa
– wykład 11
Grupowanie elementów
ze względu na:
bliskość,
podobieństwo,
domknięcie,
kontynuację,
obszar wspólny,
połączenia,
symetrię.
Grafika Komputerowa
– wykład 11
Grupowanie
elementów
Grafika Komputerowa
– wykład 11
Grupowanie
elementów
Grafika Komputerowa
– wykład 11
Grupowanie
elementów
Grafika Komputerowa
– wykład 11
Zagadnienia związane z postrzeganiem obiektów i tła
− Każda treść obrazu odbierana jest w kontekście tła. Pełni ono rolę
„służebną” wobec treści, ma jednak na jej odbiór znaczący wpływ.
− Tło powinno być traktowane jako dopełnienie treści, a nie element
konkurencyjny.
− Niewskazane jest stosowanie tła kontrastowego, o zdecydowanej
fakturze, gdyż utrudnia to odbiór treści obrazu. Szczególnie rażące
jest to w przypadku tekstu umieszczonego na tle, które z nim
formalnie konkuruje. Często można spotkać przykłady stron
internetowych, gdzie dominujące tło utrudnia lub wręcz uniemożliwia
odbiór tekstu.
− Jako tło dla rysunku o wybranej barwie wskazane jest stosować
barwę dopełniająca
− W przypadku obrazu o wielu barwach - jako tło stosować barwy
neutralne
Grafika Komputerowa
– wykład 11
Relacja między treścią obrazu a tłem
Grafika Komputerowa
– wykład 11
Relacja między treścią
obrazu a tłem
Grafika Komputerowa
– wykład 11
Barwa jest różnie postrzegana w zależności od jasności tła
Relacja między treścią obrazu a
tłem
Grafika Komputerowa
– wykład 11
Zagadnienia związane z postrzeganiem obiektów i tła
Tło zbyt „agresywne”
utrudnia lub uniemożliwia
odbiór tekstu
Grafika Komputerowa
– wykład 11
Grafika Komputerowa
– wykład 11
Zagadnienia związane z postrzeganiem obiektów i tła
Przykłady niewłaściwego doboru barw treści (tekstu) i tła
Niewielka różnica jasności utrudnia percepcję
Grafika Komputerowa
– wykład 11
Zagadnienia związane z postrzeganiem obiektów i tła
Przykład zbyt dużej różnicy jasności treści (tekstu) i tła
Rozwiązania zmierzające ku eliminacji wysokiego kontrastu
Zastosowanie jaśniejszego tła Zastosowanie ciemniejszego
tekstu
Grafika Komputerowa
– wykład 11
Postrzeganie obiektu w kontekście otoczenia
Rozmiar obiektu postrzegany różnie w zależności od obiektów sąsiednich
Grafika Komputerowa
– wykład 11
Zagadnienia związane z kolorystyką
Wskazówki dotyczące stosowania barw
− Barw należy używać z ostrożnością i powściągliwością, i tylko wówczas
gdy jest to konieczne – jeżeli służyć będą one do reprezentacji
przekazywanej informacji
− Należy minimalizować ilość użytych barw. Powinna znaleźć tu
zastosowanie stara dobra zasada „less is more” (lepiej mniej niż więcej).
Nadmierna ilość barw, szczególnie krzykliwych, kontrastowych utrudnia
użytkownikowi orientację w ogólnym zamyśle projektanta
− Na początek wskazane jest wykonać obraz monochromatyczny – w
skali szarości lub w jednym kolorze - co zarazem umożliwia korzystanie z
interfejsu przy mniejszej liczbie kolorów na ekranie lub reprodukcję przy
jednym kolorze barwiącym.
Takie rozwiązanie pozwoli ponadto zorientować się w kompozycji całości
interfejsu
i
relacjach
przestrzennych
zachodzących
pomiędzy
poszczególnymi elementami
Grafika Komputerowa
– wykład 11
Zagadnienia związane z kolorystyką
Wskazówki dotyczące stosowania barw
− Liczbę stosowanych barw powinno się ograniczyć do kilku - tylko
na niewielkiej liczbie różnych barw człowiek jest w stanie
skoncentrować uwagę.
− Szczególną ostrożność zachować przy reprezentacji cech
ilościowych z użyciem barw.
Grafika Komputerowa
– wykład 11
Zagadnienia związane z kolorystyką
Wskazówki związane ze stosowaniem wielu barw
− Jeżeli ze względu na funkcjonalność interfejsu konieczne jest
zastosowanie wielu barw należy stosować barwy przebiegające
wzdłuż gładkiej ścieżki stosowanego modelu barw. Powinno się
unikać zestawień mocno ze sobą kontrastujących, jeżeli nie
rozwiązanie takie nie niesie ze sobą potrzeby merytorycznego
rozróżnienia informacji.
− Stosować barwy o tej samej jasności – mocne kontrasty jasności
powodują męczenie wzroku, a zatem są trudne i niemiłe w odbiorze.
Mogą powodować u użytkownika znużenie i zniechęcenie.
− Stosować barwy percepcyjnie równoodległe – odcienie powinny być
czytelnie
rozróżnialne,
jednak
bez
gwałtownych
różnic
chromatyczności i jasności.
Grafika Komputerowa
– wykład 11
Zagadnienia związane z kolorystyką
Wskazówki związane ze stosowaniem wielu barw
− Nie wskazane jest stosowanie odcieni tego samego koloru dla
obiektów nie wykazujących związków i zarazem dobrze jest stosować
odcienie tej samej barwy dla obiektów ze sobą powiązanych.
− Nie powinno się stosować chromatyczności dla elementów
interfejsu użytkownika, opis ów, legend, menu itp. Użyty kolor
sugerowałby łączenie użytkowych elementów (np. wyników pracy w
obszarze roboczym) z obiektami pomocniczymi - należy stosować
barwy neutralne (szarości).
Grafika Komputerowa
– wykład 11
Zagadnienia związane z postrzeganiem szczegółów i konturów
−
Chcąc uczytelnić i uczynić widocznymi szczegóły, należy je
wyróżniać od tła nie barwą, ale jasnością (natężeniem).
− Nie powinno się stosować barw dla małych obiektów. Ze względu
na ograniczoną rozdzielczość ekranową oraz oddziaływanie
większych powierzchni (np. tła) barwy te nie będą widoczne.
− Obszary barw sąsiadujących i zarazem źle harmonizujących –
dobrze jest oddzielać cienką czarną linią.
− Wskazane jest, aby stosować obwódki dla ułatwienia percepcji
konturów obiektów – mogą być to ramki lub obwódki sugerujące
wypukłość, które w widoczny sposób separują elementy interfejsu,
np. okna.
Grafika Komputerowa
– wykład 11
Zagadnienia związane z postrzeganiem szczegółów i konturów
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
−
Należy uwzględnić niezamierzone psychologiczne znaczenia barwy -
np. czerwień i zieleń (skojarzenie z pozytywami i negatywami), barwy
żywe i martwe, zimne (szare, niebieskie, zielone), ciepłe (żółte,
pomarańczowe, czerwone), bierne (brązy, fiolety), neutralne (biały,
czarne), krzykliwe i spokojne, pobudzające (czerwienie), uspokajające
(zieleń), wzbudzające zaufanie (niebieskie, granaty).
− Ze względu na wyższą wartość energetyczną i towarzyszące temu
zjawisko irradiacji elementy o barwach jasnych wydają się większe niż
ciemne. Mocniej przyciągają też one uwagę obserwatora.
− w oku ludzkim najmniej czopków jest czułych na barwę niebieską,
zatem barwy z dużym udziałem niebieskiego i o jednakowej jasności
będą trudno rozróżnialne.
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Różnica pomiędzy barwami wydaje się
niewielka
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Składowe G i R (szczególnie!) barwy różnią się
znacznie
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Obraz ciemny na jasnym tle wydaje się mniejszy niż jasny na tle
ciemnym (zjawisko irradiacji)
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
„Pasma Macha” – pozornie jaśniejsze lub ciemniejsze obszary przy
brzegu – wzmocnienie kontrastu
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Dłuższa (co najmniej kilkusekundowa) obserwacja obszarów o
nasyconym kolorze, w wyniku bezwładności postrzegania
pozostawia ślad obszaru na siatkówce (powidok). Powoduje to
zaburzenie postrzegania i zmęczenie.
Na skutek różnej długości fali zmienia się ogniskowa, czego efektem
jest postrzeganie fałszywej głębi.
Grafika Komputerowa
– wykład 11
Zagadnienia związane z psychofizjologią ludzkiego postrzegania
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Kolorystyka - wzbudza emocje. Jest ważnym bodźcem wpływającym
na odbiorcę reklamy
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
wrażenie ciepła i ciężaru, 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 np. na
opakowaniach zup. Podnosi również męski appeal, stąd wykorzystuje
się ją na opakowaniach kosmetyków.
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Pomarańczowy – Kolor radości i rześkości, ciepły, zwiększający
wrażenie objętości. 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 – Kolor ciepły, zwiększa wrażenie objętości, 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.
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Zielony – 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.
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Niebieski – Zmniejsza wrażenie ciężaru, 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.
Fioletowy – Zmniejsza wrażenie objętości, obniża nastrój. Fascynuje
i oczarowuje ludzi niedojrzałych emocjonalnie. Używany w
reklamie damskich kosmetyków
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Brązowy – Jest kolorem typowym dla ludzi, których cechuje brak
poczucia bezpieczeństwa i ciągła frustracja. Z tego względu 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 jednak 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).
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Czarny – Zwiększa wrażenie ciężaru i ciepła, zmniejsza – objętości,
nasila przygnębienie i duszność. Wzbudza litość, kojarzy się ze
smutkiem i przykrym doświadczeniem życiowym. Reklama korzysta z
niego, aby zwiększyć pomoc charytatywną. Jest to również najbardziej
wyrafinowany z kolorów, dlatego stosuje się go w sprzedaży
przedmiotów luksusowych.
Biały – Sprawia wrażenie lekkości i większej objętości.
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11
Zasady psychologii w
reklamie
Grafika Komputerowa
– wykład 11