background image

 

 

PROJEKTOWANIE  GRAFICZNE

 

„Projektowanie graficzne jest z jednej 

strony twórcze i subiektywne, z drugiej 

strony podlega kilku sztywnym regułom.”

Michael Gosney

Iwona Szmurlik

background image

 

 

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

background image

 

 

„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

 

background image

 

 

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ą.
 

background image

 

 

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

background image

 

 

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

background image

 

 

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.

background image

 

 

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

background image

 

 

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.

background image

 

 

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]

background image

 

 

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]

background image

 

 

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

Kontrast tekstury

background image

 

 

 

 

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  

 

background image

 

 

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

background image

 

 

Cienie

dają efekt trójwymiarowości

„Poszarpany” cień 

Q

Q

Q

Q

Q

Q

Cienie 

standardowe:

background image

 

 

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.

background image

 

 

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.
 

background image

 

 

 

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

background image

 

 

 

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

background image

 

 

 

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

background image

 

 

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

 

background image

 

 

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ć 
tekstach zwartych, krojów 
bezszeryfowych w tytułach.

Ekran:
Czytelniejszy jest krój 
bezszeryfowy.
 

background image

 

 

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

background image

 

 

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

background image

 

 

 

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
 

background image

 

 

[3]

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

 

background image

 

 

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.
 

background image

 

 

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

background image

 

 

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.

 

background image

 

 

Bibliografia:


Document Outline