Download
1 / 20
210 likes | 666 Views
Typografia. Podstawy projektowania graficznego Projektowanie strony internetowej. Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów. Typografia Podstawy. Co to jest typografia? Pismo klinowe Hieroglify Znaki fenickie, cyrylica… 1436 – Gutenberg – pierwsze ruchome czcionki
E N D
Typografia Podstawy projektowania graficznego Projektowanie strony internetowej Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaPodstawy • Co to jest typografia? • Pismo klinowe • Hieroglify • Znaki fenickie, cyrylica… • 1436 – Gutenberg – pierwsze ruchome czcionki • Współczesne czcionki Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaPodstawy • Co to jest font? • Fizyczny środek stosowany do tworzenia kroju pisma (nie ważne, czy to jest maszyna do pisania, wzornik, bloki czy kod PostScript) • Foremka do ciastka • Co to jest krój pisma? • Zestaw znaków, liter, cyfr itp. Charakteryzujących się tym samym charakterystycznym wzorem. • Ciastko Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaPodstawy Jednostki miary bezwzględne 3 cale 76,2 milimetra 216 punktów 18 pica Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaPodstawy Jednostki miary relatywne Firet – em Związany ze stopniem pisma Tradycyjnie określa odstępy pomiędzy literami Firet jest równy wielkości pisma Wysokość x pisma Wysokość małej litery „x” Zależy od stopnia pisma Kluczowa przy projektowaniu layotu Mało ważna w przypadku layoutów stron internetowych Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaPodstawy Pojęcia dodatkowe Krój szeryfowy vs. Krój bezszeryfowy Ramka Kerning Interlinia Linia podstawowa Linia średnia Rodzina kroju pisma Roman (antykwa) Kursywa (italik) Pogrubiona (boldface) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCzym jest typografia na www? Powiedzcie… 90% skuteczność rozpoznawania Helvetici przez małpki Czy web to tylko obrazki? www jako nośnik informacji I tak dalej… Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Kontrast Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Rozmiar 10 pt 12 pt 14 pt 18 pt 22 pt 28 pt 32 pt 48 pt 60 pt Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Hierarchia <h1>Nagłówek stopnia 1</h1> <h2>Nagłówek stopnia 2</h2> <h3>Nagłówek stopnia 3</h3> <h4>Nagłówek stopnia 4</h4> <h5>Nagłówek stopnia 5</h5> <h6>Nagłówek stopnia 6</h6> Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Przestrzeń Niech tekst „oddycha” Koncentruje, przyciąga uwagę… Block break (paddinglub margin) Paragraph break (paddinglub margin) Tracking (letter-spacing) Leading (line-height) Indentation (paddinglub margin) źródło: http://www.webdesignerdepot.com Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Odpowiedni krój pisma Internet woli bezszeryfowe kroje pisma (Arial, Verdana, Helvetica…) Serif(Times New Roman)(Verdana) Sans Serif Nagłówki można wyróżniać szeryfowymi krojami… odwrotnie niż w przypadku tradycyjnej typografii… Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Kolor Półtony vs.Pełny kolor Uwaga!!! Ta prezentacja jeszcze będzie trwać 30 minut. Link Zabawa kolorem Aktywny Nieaktywny SPRAWDŹNAWWW Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Stopień pisma Uppercaseversuslowercase TYTUŁ Używanie wersalików jest dobrym pomysłem w przypadku tytułów, nagłówków, etc. Taki tekst jest wtedy dobrze wyróżniony i czytelny. Akapity, które w całości są pisane wersalikami wymagają dużo uwagi od czytającego. Przeczytaj ten tekst i pomyśl ile czasu Ci to zajęło. Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Wyróżnienia BoldItalik Underline Istotniejszy tekst można pogrubić. Nie wolno podkreślać tekstu, który nie jest linkiem!!! Zamiast tego, tekst można pochylić. W każdym bądź razie, nie można pogrubiać wszystkiego . Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaCo ma znaczenie? Techniczne aspekty Pamiętajmy, że nie każdy ogląda nasza stronę internetowa na wyświetlaczu (monitorze) najwyższej jakości. Uwaga!!!antyaliasing Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaPopularne czcionki Bezszeryfowe Arial Arial Black Comic Sans MS Trebuchet MS Verdana Tahoma Szeryfowe Times New Roman Georgia Courier New Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaJak dobrać czcionkę? • http://www.typetester.org/ Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaGdzie, co i jak? • Optymalizacja funkcjonalności serwisów internetowych, J. Nielsen, H. Loranger, Helion 2007 • Typografia, G. Ambrose, P. Harris, PWN 2006 • http://ilovetypography.com/ (z 18.03.2010) • http://www.webdesignerwall.com/ (z 18.03.2010) • http://www.tomontheweb2.ca/ (z 18.03.2010) • http://www.markboulton.co.uk/ (z 18.03.2010) • http://www.typetester.org/ (z 18.03.2010) Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
TypografiaKoniec Dzięki za uwagę Łukasz Bis Katedra Reklamy, Grafiki Komputerowej i Nowych Mediów
