PROJEKTOWANIE GRAFICZNE
„Projektowanie graficzne jest z jednej strony twórcze i subiektywne, z drugiej strony podlega kilku sztywnym regułom.”
Michael Gosney [1]
Literatura
[1] Michael Gosney, John Odam, Jim Benson: „Szara Księga”, Intersoftland, Warszawa 1994
[2] R. C. Parker: „Skład komputerowy - tajniki projektowania”, Intersoftland, Warszawa 1995
[3] Klaudiusz Jaworski: „Ogólne zasady kompozycji stron”, GFX, str. 18-23, nr 1, 1998
[4] Hanna Piątkiewicz: „Typografia w zarysie”, GFX, str. 16-21, nr 3, 1998
[5] Joe Grossman: „Projektowanie czasopism na twoim komputerze”, Intersoftland, Warszawa 1997
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.”
Koło barw
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).
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
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.
Kontrast walorowy (tonalny)
Odzwierciedla zależność „jasny-ciemny”.
Postrzegana 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 |
Oko jest bardziej czułe na przestrzenne zmiany jasności niż 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ń:
Kontrast walorowy występuje również w tle z tonalnym przejściem między dwoma odcieniami szarości lub
odcieniami o różnej barwie [1].
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.
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.
[1]
Kontrast położenia
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.
Kontrast teksturowy
Operuje różnicą między tłem wypełnionym wzorem i umieszczonymi na nim elementami [1].
Elementy przyciągające uwagę
negatywy i nadruki, inicjały, cienie, linie i ramki, obrócone elementy, wzory, gradacje
Negatywy i nadruki
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.
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
Nadruk jest terminem drukarskim oznaczającym, że farby drukarskie są nakładane jedna na drugą.
Inicjały mogą być dopasowane do kroju pisma tekstu, któremu towarzyszą lub posiadać krój silnie kontrastujący z krojem tekstu.
egatyw inicjału zawsze będzie utaj inicjał umieszczony jest obok
zwracał uwagę. Aby dodatkowo tekstu i wyrównany z jego pierwszym
zachęcić do czytania tekstu wierszem. Inicjały przylegające do
rozpoczętego inicjałem, boku fragmentu tekstu mogą być
zastosowano w pierwszych słowach kapitaliki. dowolnie względem niego
umieszczane.
arto zadbać aby tekst ściśle
przylegał do inicjału (otaczał go),
ekst powinien być przysunięty do szczególnie dla kanciastych liter
podstawy inicjałów takich jak „T”, „P”, „F”. takich jak „W”, „V”.
Cienie standardowe:
Mogą ożywić układ strony,
uporządkować ją, obramować
lub podkreślić ważny tekst.
Obracanie elementami
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.
Wzory
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.
Gradacje
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.
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
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.
Osobowość czcionki
Właściwa czcionka
współgra z treścią
tekstu [4].
Czytelność pisma
Podczas czytania identyfikujemy litery głównie na podstawie górnej połowy wiersza [4].
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).
Tekst
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).
Interlinia
Zwiększenie interlinii w tekście zwartym poprawia czytelność.
W długich tytułach zmniejszenie interlinii łączy sztucznie rozdzielone wiersze.
Akapity
Nie należy zaczynać nowej kolumny ostatnim wierszem akapitu i zostawiać u dołu kolumny pierwszego wciętego wiersza nowego akapitu.
Grafika
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.
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
Punkt patrzenia człowieka powinien pokrywać się z rodzajem ujęcia. Grafiki należy skadrować.
Wyniki badań:
Test |
Czytelnicy % |
Poprawa układu strony |
32 67 |
Dobór odpowiednich stopni i krojów pisma dla tytułów |
57 92 |
Użycie koloru w tytułach |
67 17 |
Najgorzej dobrane elementy tytułów |
3 |
Zrozumienie treści dokumentu po odpowiednim zmodyfikowaniu pisma (tekstu podstawowego) |
12 67 |
Zrozumienie tekstu po zmianie odstępów między wierszami |
77 98 |
Zrozumienie tekstu po umieszczeniu go na tle mało kontrastowym |
70 3 |
LINIA PROJEKTOWA
Wymyślenie elementów przewodnich.
Stworzenie charakterystycznej szaty graficznej.
Ujednolicenie prac przez konsekwentne umieszczanie w stałych miejscach tekstu i elementów graficznych.
[1]
biały na czarnym
biały na niebieskim
żółty na czarnym
żółty na niebieskim
czerwony na niebieskim
biały na żółtym
niebieski na czarnym
[1]
[1]
[1]
EARTH
T
W
N
T
Cienie
dają efekt trójwymiarowości
„Poszarpany” cień
interlinia
Linia bazowa
Krój
szeryfowy
Grafika komputerowa
Grafika komputerowa
Grafika komputerowa
Wiosna Czołg
Czołg Wiosna
LINIE I RAMKI
Odstęp międzyznakowy (kering)
wydłużenie dolne
wydłużenie górne
szeryf
Dobrze Źle
wdowa
bękart
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ść.
[1]
[1]
[1]
[3]