Invatare Atomica PCI — Curriculum de Specialitate

Cai si Forme in Grafica Vectoriala

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei intelege de ce grafica vectoriala este indispensabila unui artist digital: ce inseamna o cale (path) si un nod, cum se construiesc formele de baza in Inkscape, cum se aplica umpleri si contururi, si de ce un vector se mareste la orice dimensiune fara sa se pixeleze.

Dupa aceasta lectie vei putea:

  • Sa explici diferenta dintre grafica raster (pixeli) si grafica vectoriala (ecuatii matematice)
  • Sa descrii ce este o cale (path), un nod (node) si o ancora Bezier
  • Sa utilizezi instrumentele de baza din Inkscape: dreptunghi, elipsa, poligon, Pen/Bezier si Pencil
  • Sa aplici umplere (fill) si contur (stroke) unei forme, alegand culoare si grosime
  • Sa explici de ce grafica vectoriala se scaleaza fara pierdere de calitate
  • Sa recunosti formate de fisiere vectoriale: SVG, AI, EPS, PDF

Incearca singur!

Provocare:

Ia o fotografie de pe telefon si mareste-o de 10 ori (zoom mult in browser sau in Paint). Ce se intampla cu imaginea? Acum cauta pe Google Images un logo cunoscut (de exemplu, logo-ul unui muzeu sau al scolii tale) si fa acelasi lucru. Compara rezultatele si noteaza ce observi diferit.

💡 Ai nevoie de un indiciu?

Fotografia e formata din patratele mici numite pixeli. Cand maresti, pixelii devin vizibili — margini in trepte sau neclare. Asta se numeste pixelare.

Logo-ul (daca e vectorial) e descris prin ecuatii matematice: la orice dimensiune calculatorul redeseneaza forma din nou, perfect. De aceea logo-urile sunt aproape intotdeauna vectoriale — pot aparea pe un carton de vizita (5 cm) sau pe un panou publicitar (5 m) fara nicio pierdere de calitate.

1

1. Raster vs. Vectorial — Doua lumi diferite

Exista doua mari categorii de grafice digitale, si fiecare artist trebuie sa stie cand sa le foloseasca:
Grafica Raster (bitmap)

Imaginea este o grila dreptunghiulara de pixeli, fiecare pixel avand o culoare precisa (in model RGB sau CMYK). Calitatea depinde de rezolutie — numarul de pixeli pe inch (DPI/PPI). Daca maresti o imagine raster dincolo de rezolutia ei originala, pixelii devin vizibili — fenomen numit pixelare.

Formate tipice: JPEG, PNG, BMP, GIF, TIFF, PSD (Photoshop).

Ideal pentru: fotografii, ilustratii cu textura fina, efecte de lumina complexe.

Grafica Vectoriala

Imaginea este descrisa prin ecuatii matematice ale formelor: linii drepte, curbe Bezier, cercuri, poligoane. Calculatorul redeseneaza forma la orice dimensiune din ecuatie — rezultatul este intotdeauna perfect ascutit, indiferent de cat de mult maresti.

Formate tipice: SVG (web), AI (Adobe Illustrator), EPS, PDF (poate contine strat vectorial).

Ideal pentru: logo-uri, ilustratii cu margini clare, tipografii, afise, iconite.

Analogie sigura

Gandindu-te la un cerc: in raster, cercul este stocat ca mii de patratele colorate aranjate in forma rotunda. In vectorial, cercul este stocat ca ecuatia unui cerc (centru si raza) — o singura instructiune. Cand maresti de 100x: raster = patratele uriase vizibile; vectorial = calculatorul recalculeaza si deseneaza din nou cercul perfect la noua dimensiune.

2

2. Formate vectoriale — SVG, AI, EPS, PDF

Diferitele programe si scenarii de utilizare au generat formate vectoriale distincte. Un artist digital trebuie sa le recunoasca si sa stie cand sa le aleaga:
SVG — Scalable Vector Graphics

Standard deschis definit de W3C (World Wide Web Consortium). Fisierul SVG este de fapt text XML — il poti deschide in Notepad si vei vedea descrierea matematica a formelor. Inkscape salveaza nativ in SVG. Suportat de toate browserele moderne. Recomandat pentru web, iconite, ilustratii interactive.

AI — Adobe Illustrator

Format proprietar al programului Adobe Illustrator. Pastreaza toate optiunile native ale programului (straturi, efecte, culori spot). Foarte raspandit in industria grafica profesionala si in tipar.

EPS — Encapsulated PostScript

Format vectorial bazat pe limbajul PostScript, utilizat inca in industria tiparului si in tipografii profesionale. Compatibil cu majoritatea programelor de design profesional.

PDF — Portable Document Format

Poate contine atat elemente vectoriale cat si raster. Folosit pentru documente finale trimise la tipar sau distribuite digital. Inkscape poate exporta PDF pastrandu-si elementele vectoriale.

💡 De retinut pentru portofoliul tau

Salveaza intotdeauna fisierul sursa in formatul editorului (SVG pentru Inkscape, AI pentru Illustrator) — acesta contine toate straturile si optiunile editabile. Exporta separat PNG (pentru web cu transparenta) sau PDF (pentru tipar) cand livrezi lucrarea finala.

3

3. Cai (Paths) si Noduri (Nodes) — anatomia unui vector

Orice forma vectoriala — fie un cerc simplu, fie un logo complex — este in esenta o cale (path). O cale este o succesiune de noduri (nodes) legate prin segmente (drepte sau curbe).
Terminologie esentiala
  • Cale (Path) — sirul de puncte si segmente care defineste conturul unei forme. Poate fi deschisa (inceput si sfarsit separate) sau inchisa (formeaza un contur complet).
  • Nod (Node / Anchor point) — un punct de control al caii. La fiecare nod, calea poate continua drept sau isi poate schimba directia sau curbura.
  • Maner Bezier (Handle) — un brat invizibil care iese din nod si controleaza curbura segmentului adiacent. Tragand de maner modifici cat de mult se curbeaza segmentul.
  • Curba Bezier — tipul de curba matematica folosit in grafica vectoriala. Aceeasi matematica se regaseste in Inkscape, Illustrator, fonturile TrueType si orice editor vectorial modern.
Tipuri de noduri in Inkscape
  • Nod neted (Smooth node) — manierele sunt coliniare; curba trece lin prin nod, fara colt.
  • Nod simetric (Symmetric node) — manierele sunt coliniare si egale ca lungime; tranzitie extrem de lina si simetrica.
  • Nod colt (Cusp / Corner node) — manierele nu sunt coliniare; calea face un unghi sau un colt ascutit in acel punct.
  • Nod automat (Auto-smooth) — Inkscape calculeaza automat o tranzitie lina intre segmente.
Analogie din atelierul de arte

Imagineaza-ti ca modelezi un contur din sarma maleabila: nodurile sunt punctele unde prinzi sarma cu degetele, iar manierele Bezier sunt directia in care o indoi la fiecare prindere. Impreuna definesc forma finala — si orice schimbare ulterioara este la fel de simpla ca a reindoi sarma.

Cale inchisa vs. deschisa: o cale inchisa formeaza un contur complet (ex: un dreptunghi, un cerc) si poate primi umplere (fill). O cale deschisa are un punct de start si unul de sfarsit distincte (ex: o linie sau un arc) — conturul (stroke) se aplica pe orice tip de cale.
4

4. Inkscape — Interfata si Instrumente de baza

Inkscape este un editor vectorial gratuit si open-source, disponibil pentru Windows, macOS si Linux. Salveaza nativ in format SVG. Este echivalentul gratuit al Adobe Illustrator si este folosit in industria creativa, educatie si tipografie.
📚 Nota privind programa PCI (CD)

Programa scolara PCI pentru clasa a XI-a (Curriculum de Specialitate, filiera artistica) indica ca programul principal de grafica 2D trebuie sa aiba suport raster si vectorial si lucru cu straturi — exemplele oficiale sunt Adobe Photoshop, GIMP sau echivalent. GIMP (gratuit, Windows/macOS/Linux) satisface aceste cerinte complet: lucreaza cu straturi, suporta grafica raster si dispune de instrumente vectoriale (cai, selectii bazate pe curbe Bezier).

Inkscape este un editor vectorial pur (SVG) si reprezinta un instrument complementar excelent pentru lucrul cu vectoriale pure (logo-uri, ilustratii scalabile, SVG pentru web). In aceasta lectie invatam notiunile de cai si noduri Bezier prin Inkscape; modulele care cer manipulare de straturi raster + vectorial vor folosi GIMP ca program principal, conform programei.

Zona de lucru Inkscape — principalele zone
  • Canvas (suprafata de lucru) — zona din centru, reprezentand pagina sau documentul.
  • Bara de instrumente (Toolbox) — coloana din stanga cu toate uneltele (selectie, noduri, forme, text, etc.).
  • Bara de optiuni (Tool Controls Bar) — bara orizontala sub meniu, care afiseaza optiunile specifice instrumentului activ.
  • Paleta de culori — bara orizontala de jos cu culori rapide (clic = fill, Shift+clic = stroke).
  • Panoul Fill and Stroke — fereastra flotanta (Shift+Ctrl+F) pentru setarea detaliata a culorii de umplere si a conturului.
  • Panoul Layers (Straturi) — gestioneaza straturile documentului (Layer > Layers sau Ctrl+Shift+L).
Instrumente de creare a formelor (cu taste rapide)
  • Selector (S sau F1) — selecteaza, muta si redimensioneaza obiectele.
  • Node Editor (N sau F2) — editeaza nodurile si manierele Bezier ale unei cai selectate.
  • Rectangle / Dreptunghi (R) — deseneaza dreptunghiuri si patrate (tinand Ctrl). Colturi rotunjite din bara de optiuni.
  • Circle / Ellipse (E) — deseneaza elipse si cercuri (tinand Ctrl). Poate genera arce si sectoare.
  • Stars and Polygons (*) — deseneaza stele si poligoane regulate (triunghiuri, hexagoane, etc.). Numarul de colturi se seteaza in bara de optiuni.
  • Pen / Bezier (B) — creaza cai Bezier prin plasarea manuala de noduri; la fiecare clic plasezi un nod, tragand de mouse controlezi manierele curbei.
  • Pencil / Freehand (p) — deseneaza liber, ca un creion pe hartie; Inkscape simplifica automat calea rezultata.
  • Text (T) — insereaza si editeaza text vectorial.
🛠 Scurtaturi esentiale Inkscape
  • Ctrl+Z — Undo (anuleaza ultima actiune)
  • Ctrl+D — Duplicate (duplica obiectul selectat, exact pe pozitie)
  • Ctrl+G — Group (grupeaza obiectele selectate)
  • Ctrl+Shift+G — Ungroup
  • + / - sau rotita mouse — Zoom in/out pe canvas
  • 5 — Zoom to fit drawing in window
  • Shift+Ctrl+F — deschide panoul Fill and Stroke
5

5. Umplere (Fill) si Contur (Stroke) — culoare si stil

Orice forma vectoriala are doua atribute de culoare distincte: umplerea (fill) — culoarea din interiorul formei — si conturul (stroke) — linia de la marginea formei. Fiecare se seteaza independent sau poate fi eliminat complet.
Tipuri de umplere (Fill)
  • No paint (X) — forma nu are umplere, este transparenta in interior.
  • Flat color — o culoare solida uniforma. Se poate specifica in modelele RGB, HSL, CMYK sau ca valoare hexadecimala (ex: #FF5733).
  • Linear Gradient — tranzitie lina intre doua sau mai multe culori de-a lungul unei axe drepte.
  • Radial Gradient — tranzitie din centru spre exterior, in forma de cerc.
  • Pattern — o textura sau un motiv repetitiv ca umplere.
Optiuni Stroke (Contur)
  • Stroke paint — culoarea liniei de contur (aceleasi optiuni ca la fill).
  • Stroke style — Width (Latime) — grosimea liniei, in px, mm, pt sau alte unitati.
  • Stroke style — Dash (Linie intrerupta) — transforma conturul intr-o linie punctata sau intrerupta dupa un tipar ales.
  • Stroke style — Join — comportamentul colturilor (Miter = colt ascutit, Round = colt rotund, Bevel = colt taiat).
  • Stroke style — Cap — cum se termina capetele unei cai deschise (Butt = taiat, Round = rotunjit, Square = patrat extins).
Modele de culoare — RGB vs CMYK

In grafica digitala exista doua modele principale de culoare:

  • RGB (Red, Green, Blue) — model aditiv, folosit pentru ecrane (monitor, telefon, TV). Fiecare canal are valori 0–255. Albul = R255 G255 B255; Negrul = R0 G0 B0. SVG si web lucreaza in RGB.
  • CMYK (Cyan, Magenta, Yellow, Key/Black) — model substractiv, folosit pentru tipar. Valorile sunt procente 0–100%. La tipar, culorile se obtin amestecand cernelurile; albul este hartia neacoperita.

Regula practica: lucrarea afisata pe ecran (web, prezentare, portofoliu digital) utilizeaza RGB. Lucrarea tiparita (afis, pliant) utilizeaza CMYK — consulta imprimeria pentru profilul de culoare corect.

6

6. Recapitulare — Harta conceptelor

Ce am invatat in aceasta lectie

  • Raster vs. Vectorial: Raster = grila de pixeli (JPEG, PNG) — se pixeleaza la marire. Vectorial = ecuatii matematice (SVG, AI, EPS) — scalare fara pierdere la orice dimensiune.
  • Formate vectoriale: SVG (web, open, XML), AI (Adobe Illustrator, proprietar), EPS (tipar, compatibilitate larga), PDF (distribuire finala, poate fi vectorial).
  • Cale (Path): succesiune de noduri legate prin segmente drepte sau curbe Bezier. Poate fi deschisa sau inchisa.
  • Nod (Node): punct de control al caii. Tipuri in Inkscape: neted, simetric, colt, automat. Manierele Bezier (handles) controleaza curbura segmentelor adiacente.
  • Inkscape: editor vectorial gratuit, open-source, nativ SVG. Instrumente principale: Selector (S), Node Editor (N), Dreptunghi (R), Elipsa (E), Stele/Poligoane (*), Pen/Bezier (B), Pencil (p), Text (T). Nota programa PCI: programul principal recomandat de programa pentru raster+vectorial+straturi este GIMP; Inkscape este instrument complementar vectorial pur.
  • Fill si Stroke: Fill = umplerea interioara (culoare solida, gradient, tipar). Stroke = conturul exterior (culoare, grosime, stil). Clic pe paleta = fill; Shift+clic pe paleta = stroke.
  • Modele de culoare: RGB (ecrane, 0–255 per canal), CMYK (tipar, 0–100% per canal).
🌟 De ce conteaza pentru tine ca artist

Logo-urile, afisele, ilustratiile pentru expozitii, imaginile de portofoliu — toate trebuie sa existe in format vectorial. Un SVG creat in Inkscape poate fi tiparit pe un banner de 3 metri sau redus pe o carte de vizita de 5 cm, cu aceeasi calitate perfecta. Investitia in a invata grafica vectoriala acum iti va economisi zeci de ore de reluare a lucrarilor in viitor.

Exercitii practice

Exercitiul 1 (Nivel minim) — Identificare formate

Ai urmatoarele fisiere: logo_muzeu.svg, fotografie_expozitie.jpg, schema_grafica.eps, banner_web.png, pliant_tipar.pdf. Clasifica fiecare fisier in categoria vectorial sau raster si justifica intr-o propozitie de ce. Care dintre aceste fisiere se va scala fara pierdere de calitate?

Exercitiul 2 (Nivel standard) — Prima ilustratie in Inkscape

Deschide Inkscape si creeaza un document nou (A4 landscape). Folosind instrumentele dreptunghi (R), elipsa (E) si stele (*), compune o ilustratie simpla sugerand un peisaj: un cerc pentru soare, dreptunghiuri pentru cladiri, un poligon pentru un munte. Aplica umpleri cu culori diferite si adauga un contur (stroke) de 2px celei mai importante forme. Salveaza in format SVG. Noteaza ce instrumente ai folosit si ce tasta rapida ai aplicat pentru fiecare.

Exercitiul 3 (Nivel performanta) — Cale Bezier libera

In Inkscape, folosind instrumentul Pen/Bezier (B), traseaza conturul unui obiect familiar din atelierul de arte (un tub de vopsea, o pensula, un vas ceramic) — cel putin 8 noduri. Foloseste noduri de tip neted pentru sectiunile curbe si noduri colt pentru unghiurile ascutite. Aplica o umplere gradient (linear sau radial) si un contur de 1.5px. Exporta ca SVG si ca PNG (300 DPI). Scrie un scurt comentariu: ce tip de nod ai folosit mai des si de ce.

Ce ai invatat astazi

  • Grafica raster = pixeli (JPEG, PNG, BMP, TIFF) — rezolutie fixa, pixelare la marire
  • Grafica vectoriala = ecuatii matematice (SVG, AI, EPS, PDF) — scalare perfecta la orice dimensiune
  • Cale (path) = succesiune de noduri legate prin segmente; inchisa sau deschisa
  • Nod (node) = punct de control; maner Bezier = controleaza curbura; tipuri: neted, simetric, colt, automat
  • Inkscape = editor vectorial gratuit, open-source, nativ SVG; instrumente: R, E, *, B, p, N, S, T (instrument complementar vectorial; GIMP = programul principal conform programei PCI, cu raster+vectorial+straturi)
  • Fill = umplere (culoare solida, gradient, tipar); Stroke = contur (culoare, grosime, stil)
  • RGB pentru ecrane (0–255 per canal); CMYK pentru tipar (0–100% per canal)

Urmatoarea lectie

Continua cu Text si Compozitie — cum inserezi si formatezi text vectorial in Inkscape, cum aliniezi si distribui elemente, cum lucrezi cu straturi si cum aplici principii de compozitie si tipografie pentru afise si materiale de portofoliu.

Continua →