Kompendium 2D

1. Zasady kompozycji

• Równowaga
  • Symetryczna – stabilna, klasyczna.
  • Asymetryczna – dynamiczna, nowoczesna.
  • Ekspresyjna – chaotyczna, awangarda.
  • Mózg naturalnie dąży do równowagi → brak równowagi = napięcie.
• Kontrast
  • Podkreślanie różnic: jasne/ciemne, małe/duże, cienkie/grube.
  • Zwiększa czytelność i uwagę.
• Powtórzenie (rytmy wizualne)
  • Nadaje spójność, rytm i przewidywalność.
• Punkt centralny
  • Najważniejszy element, do którego kieruje się wzrok.
  • Tworzony przez rozmiar, kolor, kształt, pozycję (np. złoty podział).
• White space (pusta przestrzeń)
  • Marginesy, odstępy – dają oddech, porządkują.
  • Zasada Gestalt – widzimy całość, nie elementy osobno.
• Układy kompozycji
  • Trójpodział (rule of thirds).
  • Złoty podział, spirala Fibonacciego (harmonia z natury).
  • Centralna (stabilność, minimalizm).
  • Diagonalna (ruch, dynamika).
  • Otwarta (elementy wychodzą poza kadr).

2. Kolor i systemy barw

• RGB – ekrany, system addytywny, wartości 0–255.
• CMYK – druk, system subtraktywny, zawsze z dodatkowym K (czarny).
• Pantone (PMS) – wzornik kolorów, każdy ma numer, np. Pantone 186C.
• HEX – zapis RGB w systemie szesnastkowym (#RRGGBB).
• HSL – Hue (0–360°), Saturation (0–100%), Lightness (0–100%).

3. Psychologia koloru

• Czerwony – energia, pasja, ostrzeżenie, w Chinach szczęście, w Afryce żałoba.
• Żółty – optymizm, dzieci, w Egipcie żałoba, w Japonii odwaga.
• Niebieski – spokój, technologia, w Grecji ochrona, w Ameryce Łacińskiej religia.
• Zielony – natura, ekologia, w islamie kolor święty.
• Czarny – luksus, powaga, w Europie żałoba, w Japonii formalność.
• Biały – czystość (Zachód), żałoba (Azja).
• Fioletowy – luksus, duchowość.
• Barwy ciepłe – „wychodzą” na przód.
• Barwy zimne – cofają się w tło.

4. Typografia

• Anatomia liter:
  • x-height (wys. małych liter), cap height (wersaliki).
  • Descender (opuszczenie dolne), ascender (wysunięcie górne).
  • Stem (trzon), bar (poprzeczka), serif (szeryf), terminal (zakończenie bezszeryfowe).
  • Bowl (brzuszek), counter (światło wewnątrz litery), spur (ostroga).
• Rodzaje fontów:
  • Szeryfowe – klasyczne, czytelne w druku (Times, Garamond).
  • Bezszeryfowe – nowoczesne, czytelne na ekranach (Arial, Lato, Helvetica).
  • Dekoracyjne – ozdobne, do nagłówków (Lobster, Pacifico).
• Font Lato – projekt Łukasza Dziedzica (2010), dziś top 3 w Google Fonts.
• Skład i odstępy:
  • Interlinia (odstęp między wierszami).
  • Kerning (odstęp między parami liter).
  • Tracking (światło całego tekstu).
  • Długość wiersza: 40–70 znaków.
  • Unikać „sierot” i „wdów”.
  • Maks 2 kroje w projekcie.

5. Layout i siatki

• Siatka (Grid) – porządkuje przestrzeń.
• Typy:
  • Kolumnowy – tekst podzielony na kolumny.
  • Modułowy – prostokątne moduły (www, aplikacje, plakaty).
  • Hierarchiczny – różne proporcje wg wagi elementu.
  • Manuskryptowy – jedna szeroka kolumna (książki).
  • Axial – wzdłuż osi.
  • Radial – koncentryczny, dynamiczny.
  • Asymetryczny, izometryczny, rule of thirds – inne wariacje.
• Zasady:
  • Trzymaj się linii i konsekwentnych odstępów.
  • Telefon: 4–6 kolumn, desktop: do 12.
  • Hierarchia wizualna – nagłówki mogą zajmować więcej kolumn.
  • White space = lepsza czytelność.
  • Można łączyć siatki, ale uzasadniać.
• Narzędzia:
  • Generator siatek: https://maciek-robiszto.github.io/grid_generator/index.html
  • Inkscape: Shift+3 → włącz/wyłącz siatkę, Clip group (przycinanie zdjęcia kształtem).

6. Inkscape – praktyka

• Ścieżki i węzły: Union, Difference, Intersection, Division, Cut Path.
• Efekty ścieżki: Power stroke, Interpolate, Rotate copies, Tiling.
• Edycja tekstu: Object to Path, Break Apart, Combine.
• Tekst w prostokącie: Text → Flow into Frame.
• Tekst okalający obiekt – prostokąt jako ramka, obrys wyłączony.
• Obrazy: Set Clip (lepsze niż Flow into Frame), maskowanie, Clip group.

7. Zadania projektowe (z zajęć)

1. Opakowanie żelków „Super Kwaśne”
   • Format: 120×160 mm, eurodziurka, okienko 40×70 mm.
   • Key visual: „kwaśność”.
   • Typografia: nagłówek 40–60 pt, tekst prawny ≥6 pt.
   • Kontrast WCAG ≥4.5:1.
2. Monogram ślubny „Kod i Płótno”
   • Para: programistka (A) + malarz (M).
   • Styl geometryczny + styl malarski.
3. Zaproszenie ślubne „Kod i Płótno”
   • A5 składane, front z monogramem.
   • Wnętrze: informacje o ślubie + RSVP.
   • Styl spójny z monogramem.
4. Artykuł „Jak technologia wspiera kompetencje cyfrowe”
   • Format: 2 strony A4.
   • Tekst: 500–700 słów + 3 grafiki stockowe.
   • Układ w kolumnach, podpisy do grafik, 2 kroje pisma.
   • Źródła grafik:
     • Unsplash – https://unsplash.com/
     • Pixabay – https://pixabay.com/pl/
     • Pexels – https://www.pexels.com/
     • Openverse – https://openverse.org/pl
     • Freepik – https://pl.freepik.com/

8. Grafika izometryczna i Shadowbox

• Izometryka:
  • Document Properties → Grids → Axonometric.
  • Snappy do siatki, rysowanie brył 3D.
  • Spacing – im mniejszy, tym gęstsza siatka.
• Shadowbox:
  • Ramka z offsetem, łączenie przez Combine.
  • Każda część w osobnej warstwie, duplikacja, porządek.
  • Blokowanie/ukrywanie warstw wg potrzeb.

9. AI w projektowaniu

• Webinar 6 – AI
  • Nagranie: https://spotkania.robisz.to/playback/presentation/2.3/c59eefc3133f412e03f4df6f325a1ec32a46914a-17595157434184
  • Generowanie grafiki: https://www.recraft.ai/invite/NrQnkOlOb2
• Projekt na filc (ćwiczenie)
  • Narysuj kształt, offset 8 mm, styl konturu → kropki.
  • Cap: środkowe, okrągłe.
  • Pattern: 0.1–6 (odległość kropek).
  • Podgląd: outline → ciągła linia.
  • Path + stroke to path (zmiana w menu).