PROJEKTOWANIE GRAFICZNE

 

„Projektowanie graficzne jest z jednej

strony twórcze i subiektywne, z drugiej

strony podlega kilku sztywnym regułom.”

Michael Gosney

Iwona Szmurlik

• KOMPOZYCJA KOLORU
• KONTRAST
• ELEMENTY PRZYCIĄGAJĄCE UWAGĘ
• ZASADY KOMPOZYCJI STRON
• LINIA PROJEKTOWA

„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.”

KOMPOZYCJA KOLORU

 

Temperatura koloru zależy

od przeważającego w nim odcienia z koła barw.

 Kolory ciepłe zawierają więcej żółci (

Y

) i czerwieni (

R

), zimne więcej niebieskiego (

C, B

).

 

Koło barw

Kolory ciepłe

-         Są agresywne i przyciągają uwagę (najsilniej

czerwony

i pomarańczowy).

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

Kolory zimne

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

-         Obiekty w kolorach zimnych wydają się mniejsze i odleglejsze.

Kolory dopeł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ą płynne gradacje między kolorami dopełniającymi.
-         Cień rzucany przez kolorowy obiekt ma tendencję do zabarwienia

się barwą dopełniającą.

Kolory analogiczne
-         Leżą w kole barw obok siebie.
-         Mogą wzajemnie współistnieć nie rywalizując ze sobą.
 

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.
Wyróżniamy kontrast walorowy, rozmiarowy, ciężkości,
kształtu, położenia, teksturowy.

KONTRAS

T

Kontrast walorowy
(tonalny)

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

Postrzegana jest jasność barwy:

L = 0,299R + 0,587G + 0,114B
L = 0,3R + 0,3G + 0,1B gdzie R,G.B  <0,1>

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łabszy

 
 
 
 

Kontrast walorowy występuje również w tle z
tonalnym przejściem między dwoma odcieniami
szarości luboodcieniami o różnej barwie [1].

biały na
czarny
m

biały na
niebieski
m

żółty
na
czarny
m

żółty na
niebieski
m

czerwony na
niebieskim

biały na
żółtym

niebieski
na czarnym

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ń:

 

Oko jest bardziej czułe na
przestrzenne zmiany
jasności niż barwy.

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 [1].

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

Kontrast ciężkości

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

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

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. [1]
 

Kontrast kształtu

[1]

9 4

K o n tr a s t

p o ło ż e n ia

Osiąga się przez usunięcie lub powielenie
elementu należącego do pewnej grupy lub
obrócenie tekstu lub grafiki o pewien kąt.
Uwaga – czytanie dużej ilości obróconego
tekstu jest trudne.[1]

 

Kontrast
położenia

[1]

[1]

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

Kontrast tekstury

 

 

Negatyw to obraz, grafika lub tekst w kolorze białym (lub w
kolorze papieru) na czarnym lub ciemnym tle.

Dla drobnego pisma negatywowego korzystnie jest wybierać
wytłuszczone pismo bez szeryfów lub pismo z takimi szeryfami
jak w kroju Bookman, Congress lub Rockwell.

Elementy przyciągające uwagę

negatywy i nadruki, inicjały, cienie, linie i
ramki, obrócone elementy, wzory, gradacje

 

Negatywy i nadruki

Należy unikać stosowania:
• długich negatywowych fragmentów tekstu,
• tych krojów pisma, które w małym rozmiarze charakteryzuje
silny kontrast
ciężkości, np.. Krój Bodoni, Fenice, Brodway.

Bookman10, Bookman12, Bookman14

Bodoni10, Bodoni12,

Bodoni14

 

E

ART

H

Nadruk jest terminem drukarskim oznaczającym, że farby
drukarskie są nakładane jedna na drugą.

 
 
 
 
 

T

W

N

T

egatyw inicjału będzie zawsze
zwracał uwagę. Aby dodatkowo
zachęcić do czytania tekstu
rozpoczętego inicjałem.

Zastosowano w pierwszych słowach
kapitaliki.

ekst powinien być przysunięty
do podstawy inicjałów takich jak:
„T”, „P”, „F”

utaj inicjał umieszczony jest obok
tekstu
i wyrównany z jego pierwszym
wierszem. Inicjały przylegające do
boku fragmentu
tekstu mogą być dowolnie względem
niego umieszczane.

arto inicjał aby tekst ściśle
przylegał
do inicjału (otaczał go)
szczególnie dla kanciastych
liter takich jak: „W”, „V”.

Cienie

dają efekt trójwymiarowości

„Poszarpany” cień

Q

Q

Q

Q

Q

Q

Cienie

standardowe:

L I N I E I R A M

K I

Mogą ożywić układ strony,

uporządkować ją,

obramować

lub podkreślić ważny tekst.

Obracanie elementami

 

[1]

Uważa się, że najkorzystniej jest tak obracać
elementy aby prawa strona leżała wyżej niż lewa,
szczególnie jeżeli dotyczy to tekstu. Obrócony tekst
nie powinien być zbyt długi.
 

 

Jako wzór można wykorzystać pismo (np. tekst wklejony w określony
kształt), elementy geometryczne lub o nieregularnym kształcie, linie.
„Naruszenie wzoru” (pattern breaking) przyciąga wzrok.

wzory

 

Gradację tworzy płynne łączenie coraz jaśniejszych lub coraz
ciemniejszych odcieni szarości lub koloru.
Mogą być używane jako tła lub wypełnienie dla tekstu i innych
elementów.
Silnie przyciągają uwagę pozornie „oświetlając” pewne obszary
projektu.
 

 
 
 

Gradacje

 

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.

Wysokość czcionki określa się w punktach drukarskich:

1 punkt drukarski = 1/72 cala.

W grafice komputerowej czcionka jest plikiem lub programem,

który jest wykorzystywany do odwzorowania lub tworzenia
kształtu liter, cyfr i innych znaków.

 

ZASADY KOMPOZYCJI STRON

„Efektem wzrastającej popularności DTP jest zalanie rynku publikacjami
wykonanymi
w sposób, który ma niewiele wspólnego nie tylko z podstawowymi regułami
łamania, ale również z dobrym gustem”

K. Jaworski [3]

 

Czcionka

Osobowość
czcionki

 

Właściwa czcionka

współgra z treścią

tekstu [4].

Wiosna Czołg
Czołg
Wiosna

Grafika
komputerowa
Grafika
komputerowa
Grafika
komputerowa

Czytelność pisma

 

Podczas czytania
identyfikujemy litery
głównie na podstawie
górnej połowy
wiersza [4].

 

interlinia

Krój
szeryfow
y

Linia
bazowa

Odstęp
międzyznakowy
(kering)

wydłużenie
dolne

wydłużenie
górne

szery
f

Anatomia pisma
[2]

Kroje pisma

 

Druk:
krojów szeryfowych należy
używać
w tekstach zwartych, krojów
bezszeryfowych w tytułach.

Ekran:
Czytelniejszy jest krój
bezszeryfowy.
 

Rodziny pisma

 

Większość krojów należy do jakiejś
rodziny krojów.
Niektóre mają tylko cztery odmiany
pisma:
prosta (roman), pogrubiona (bold),
pochylona (kursywa, italik), pogrubiona i
pochylona (bold italik).
 

 

W projekcie nie należy nadużywać ilości stosowanych krojów

pisma, gdyż na siłę „wzbogacona” strona przestaje być czytelna.
Klasyka

to

krój

bezszeryfowy

Helvetica

w tytułach i krój szeryfowy Times w tekście. Wielkość czcionek
zaczyna się liczyć od tekstu podstawowego (10-12 punktów) i kolejno
zwiększa się stopień pisma w śród-tytułach, tytułach podrozdziałów i
rozdziałów.

Większość programów automatycznie zwiększa lub zmniejsza

interlinię wraz ze wzrostem lub zmniejszeniem stopnia pisma (ok.
20% wysokości czcionki).

Tekst

W długich tytułach
zmniejszenie interlinii łączy
wiersze

 

Zwiększenie interlinii w tekście zwartym poprawia czytelność.
Zwiększenie interlinii w tekście zwartym poprawia czytelność.
Zwiększenie interlinii w tekście zwartym poprawia czytelność.
Zwiększenie interlinii w tekście zwartym poprawia czytelność.

 

 

bękart

wdowa

Dobrze Źle

 

Zwiększenie interlinii w
tekście zwartym poprawia
czytelność.
W długich tytułach
zmniejszenie interlinii
łączy sztucznie
rozdzielone wiersze.

 

Interlinia

 

Nie należy zaczynać nowej
kolumny ostatnim wierszem
akapitu i zostawiać u dołu
kolumny pierwszego wciętego
wiersza nowego akapitu.

 

Akapity

 

Jeżeli grafika jest związana z tekstem należy starać się

umieszczać ją jak najbliżej miejsca w którym znajdują się

odwołania do ilustracji

Grafika

Układy grafik:
 
statyczny z lewej,
dynamiczny z prawej

Grafiki rozmieszcza się zwykle
w pasie poziomym lub
pionowym.
Ciemne rysunki powinno się
umieszczać na dole, jasne na
górze
 

[3]

Punkt patrzenia człowieka powinien
pokrywać się z rodzajem ujęcia.
Grafiki należy skadrować.

 

Proporcje pomiędzy grafiką a tekstem

W poligrafii wielką wagę przywiązuje się do związku pomiędzy grafiką a tekstem.
Chodzi
o stworzenie właściwych proporcji pomiędzy przyciągającymi wzrok zdjęciami lub
nagłówkami
a pozostałymi elementami takimi jak: tekst, wykresy, zdjęcia.
Tekst jest skupiony w blokach lub polach tekstowych. Tekst nie musi przepływać z
jednej kolumny do drugiej. Można w nim osadzić zdjęcie oraz określić, w jakie miejsce
powinien być przeniesiony np. pod zdjęcie lub na następną stronę. Można stosować
różne czcionki, eksperymentować z ich rozmiarem oraz kolorem tekstu. Tekst można
traktować niekonwencjonalnie. Można umieścić tekst na zeskanowanym zdjęciu.
Można wyodrębnić pierwszą literę w każdym akapicie, używając dekoracyjnych
kapitalików lub zmienić kolor i krój czcionki niektórych słów, by zwiększyć efekt.
Niektóre programy do poligrafii pozwalają zmieniać kolorystykę zeskanowanych
zdjęć, by przystosować je do wybranego schematu kolorów. Obrazy można obracać,
by skupić uwagę patrzącego lub umieszczać w środku strony zdominowanej przez
tekst. Można również narysować obramowanie wokół zdjęcia lub wtopić je w tło, tak
by było ledwie widoczne.
Interesujące projekty powstają, gdy poszczególne elementy umieszcza się na
warstwach.
Można zaprojektować blok tekstowy, który nachodzi na krawędź obrazu. Często
stosuje się efekt przezroczystości warstw. Kolejną opcją jest możliwość otaczania
tekstem grafiki oraz umieszczanie tekstu wewnątrz ramki, otaczającej każdy element
graficzny. Prostokątna ramka otaczająca obraz nie zmienia widoczności elementów
znajdujących się pod ni ą, tylko sam obraz. Dzięki temu obiekty można dosuwać do
samych krawędzi grafiki bez martwienia się o ramkę ją otaczającą, ponieważ jest
niewidoczna. W efekcie projekt nie jest schematyczny. Podczas projektowania
dokumentów można korzystać z szablonów. Są to strony zawierające zdefiniowany
układ ze wszystkimi potrzebnymi elementami. Wystarczy zmienić tekst oraz usunąć
przykładowe zdjęcie a w jego miejsce wstawić nowe. W każdym szablonie znajduje się
odpowiedni schemat kolorów.
 

Programy do składu powinny zawierać efektywne narzędzia

do realizacji następujących zadań:

• szybkie tworzenie dokumentów za pomocą szablonów i kreatorów,

• przemieszczanie, skalowanie i obracanie wszystkich obiektów,

• możliwość przepływu tekstu z jednego pola do następnego,
• tworzenie interesujących nagłówków tekstowych,

• wklejanie lub importowanie tekstu bezpośrednio do pól tekstowych,

• importowanie różnych formatów zdjęć (.TIF,.PCX,.JPG,.GIF)

• udostępnianie obsługi skanera,

• sprawdzanie pisowni,

• obsługa przezroczystych warstw w przypadku nachodzących na siebie
elementów,

• możliwość drukowania projektów o niestandardowych rozmiarach (np.plakatów),
oraz niewielkich
projektów typu: koperty i kartki z życzeniami,

• możliwość przygotowania dokumentów do druku profesjonalnego,

• stosowanie wyliczenia i wypunktowania,

• wyrównanie obiektów (w stosunku do innych obiektów) w poziomie i w pionie,

Przykładowe programy do składu:

Microsoft Publisher, Adobe PageMeker oraz QuarkXpress

LINIA PROJEKTOWA

 
1.

    

Wymyślenie elementów przewodnich.

2.   Stworzenie charakterystycznej szaty graficznej.
3.   Ujednolicenie prac przez konsekwentne umieszczanie w stałych
miejscach tekstu
i elementów graficznych.

 

Bibliografia: