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