Graphic design presentation

1. Grafički dizajn
Web design

2. Elementi dizajna
Tekst
Boje
Slike

3. Font i vrste fontova
Stil pisma na računalu
Oblik pisma (typeface)
Svojstva ili stil (različita veličina, kurziv,
težina, itd.)
Uspravan, normal, roman
Kurziv, italic, nagnut na desno
Podebljan, bold

4. Podjela fontova
Oblik pisma:
Serifni
 Times New Roman
 Courier
New Century
Schoolbook
 Palatino
Bezserifni (Sans
Serif)
 Arial
Verdana
Širina znakova
Proporcionalni
 Times
Neproporcionalni
(monotyped)
 Courier New
 New Courier

5. Metode prikazivanja fonta
Bitmapni
Vektorski (scalable ili object oriented ili
outline fonts)

6. Faktori koji utječu na čitljivost
Razmak između znakova (k e r n i n g)
Razmak između redaka – prored
(ledding ili line spacing)
Dužina retka (60-70)
X – visina
Težina (weigth)
Bijeli prostor

7. Tri komponente boje
Ton (Hue)
Svjetlina (brightnes)
Zasićenost
(saturation) -
intenzitet

8. Klasifikacija boja
Kromatske – sve osim crne, bjele i sive
Neutralne (akromatske) – crna bijela i
siva
Monokromatske – kombinacija dobivena
variranjem svjetline i zasićenja jednog
tona

9. Podjela kromatskih boja
Primarne – crvena, plava i žuta
Sekundarne – miješanje primarnih
Narančasta – crv + žut
Ljubičasta – crv + pla
Zelena – pla + žut
Tercijarne – mješanjem prim i sek

10. Podloga i tekst
Najbolja čitljivost
Crni tekst na
bijeloj pozadini
Tamnozeleni tekst
na bijeloj pozadini
Tamnoplavi tekst
na bijeloj pozadini
Smeđi tekst na
bijeloj pozadini
Najgora čitljivost:
Crveno Crveno na na zelenom
zelenom
Zeleno na na crvenom
crvenom
Zeleno na na plavom
plavoj
Najbolja preglednost
Crna na narančastoj
Crvena na bijeloj
Tamnoplava na žutoj

11. Modovi slika i njihova svojstva
mod svojstva
Bitmap 1 bit po pikselu (jednobojne slike)
Grayscale 8 bitova po pikselu, 256 sivih
nijansi
Indexed
mode
8 bitova po pikselu, 256 boja
RGB 3 kanala, 24 bita po pikselu, 16,7
mil. boja
CMYK 4 kanala, 32 bita po pikselu 16,7
mil.

12. Slike – veličina datoteke
Piksel dimenzije
Format u kojem je zapisana
Gustoća zapisa (dpi)
Mod slike (koliko slojeva i tonova u
svakom sloju)
Način kompresije: lossless i lossy

13. Načini iscrtavanja/kodiranja slike
Rasterska grafika
Niz točkica
Vektorska grafika
Mat. Definicije i
formule
Koordinate i linije

14. Formati slika (načini pohranjivanja)
TIFF (tagged image file format) standard
za sve vrste nekomprimiranih slika
BMP (Bitmap) – format Windowsa za
slike
JPEG (joint photographic experts group)
– standard za fotografije na webu
GIF (graphic interchange format) za slike
na webu – 256 boja
PNG (portable network graphics)

15. JPEG

16. JPEG/JFIF
.jpeg ili .jpg
Standard za digitalne fotografije
Lossy
24 bita
Generacijska degradacija
Koristi se u PDF formatu

17. GIF

18. GIF (CompuServe)
8 bita - 256 boja
Lossy/losssless
Logoi, jednostavne grafike i animacije

19. PNG

20. PNG
Open source nasljednik GIF-a
8 ili 24 bita
Adam7-interlacing

21. TIFF
.tiff ili .tif
Široko podržan
Standard za grafičku struku
24 ili 48 bit
lossy/lossless

22. Rezolucija slike
piksel dimenzije – broj piksela
horizntalno i vertikalno
rezolucija u ppi ili dpi
za web 72 dpi
za tisak 300 dpi

23. Rezolucija izlaznih jedinica
rezolucija monitora (dpi)
rezolucija printera (dpi)
laserski 600 – 1200
ink jet do 600

24. Dizajn web stranica

25. Tri osnovne komponente
estetski elementi
 boje
 fontovi
 slike itd.
funkcionalnost
 navigacijska struktura
 kretanje po stranicama
ekonomičnost
 brzo učitavanje
 veličina dokumenta
 tehnologija itd.

26. Postupak dizajniranja web stranica
svrha i cilj web stranice
krajnji korisnik i njegove potrebe
određivanje zahtjeva:
sadržaj
tehničke komponente
navigacija
estetski elementi

27. Sadržaj i dizajn
Vrsta i podjela stranica:
ovisno o namjeni:
 strana sa sadržajem
 strana za navigaciju
 strana za obavljanje nekog posla
ovisno o strukturi
 ulazne (pružaju sadržaj i pomoć pri kretanju)
 usputne (sadrže sadržaj i navigaciju)
 izlazne (npr. kod kupovina preko Interneta)
 uvodne

28. Tehnologija i dizajn
software (dreamweaver, photoshop,
homesite)
HTML, XHTML, DHTML
java script
CSS
browseri
operativni sustavi

29. Navigacija
Oznaka strane i navigacije
 logo i naslov
 Home button
 izabrani link
 konzistentnost izgleda stranica unutar lokacije
Položaj navigacijskog sustava:
 u obliku stabla
 TLB
 top – primarne
 left – sekundarne
 bottom - rezervne

30. Prototip stranice
svrha i cilj web stranice
krajnji korisnik i njegove potrebe
određivanje zahtjeva:
sadržaj
tehničke komponente
navigacija
estetski elementi