Lecția 10 · Imagini, măști și export¶

Rezoluție și DPI¶

Aici se împiedică aproape toți începătorii.

O imagine de 1920 × 1080 px: - Pe un ecran: excelentă, e Full HD. - Tipărită la 300 DPI: 1920 / 300 = 6.4 inch = 16 cm lățime. Atât. Pe un A3 (42 cm) ar fi neclară.

De câți pixeli ai nevoie¶

Imagini în Figma¶

Cum inserezi¶

Trei moduri: - Trage fișierul direct pe canvas. - Ctrl+Shift+K → alegi fișierul. - Selectezi o formă → panoul din dreapta, Fill → schimbi din Solid în Image.

Al treilea mod e cel corect în majoritatea cazurilor: imaginea devine umplerea unei forme, deci poți controla forma independent de imagine.

Cele patru moduri de încadrare¶

Selectează o formă cu umplere de tip imagine. În panoul din dreapta, la Fill, apare un meniu:

Măști¶

O mască face ca o formă să decupeze ce e deasupra ei.

Cum funcționează¶

1. Desenează forma care va fi masca (un cerc, un text, o formă din Pen).
2. Așaz-o sub conținutul pe care vrei să-l decupezi (în panoul Layers, masca stă mai jos).
3. Selectează masca și conținutul.
4. Ctrl+Alt+M sau butonul de mască din bara de sus.

Rezultatul: conținutul se vede doar în interiorul formei-mască.

Text ca mască¶

Efectul „imagine în interiorul literelor”:

1. Scrie textul, mare și bold (fonturile subțiri nu funcționează).
2. Pune fotografia deasupra textului în panoul Layers.
3. Selectează ambele → Ctrl+Alt+M.

Efecte¶

Panoul din dreapta, secțiunea Effects, butonul +:

Umbre care arată bine¶

Greșeala tipică: o umbră neagră, tare, la 50% opacitate. Arată ca Word 2003.

O umbră credibilă are: - Culoare apropiată de fundal, nu negru pur. Pe un fundal albastru deschis, o umbră albastru-închis. - Opacitate mică: 8–15%. - Blur mare raportat la offset: Y: 4, Blur: 16 arată mai bine decât Y: 4, Blur: 4. - Offset doar pe Y, nu și pe X (lumina vine de sus).

Umbră proastă:  X:4  Y:4   Blur:4   #000000 50%
Umbră bună:     X:0  Y:4   Blur:16  #0F172A 12%
Umbră mare:     X:0  Y:12  Blur:32  #0F172A 16%

Text peste fotografie¶

Problema: fotografia are zone deschise și zone închise, iar textul e ilizibil peste unele.

Patru soluții, de la cea mai simplă:

Formatele de export¶

Scara exportului¶

Ecranele moderne au densitate dublă sau triplă. O imagine exportată la 1× va arăta neclară pe un telefon.

În panoul de Export poți adăuga mai multe rânduri, fiecare cu scara și sufixul lui (@2x, @3x).

Export pentru tipar¶

1. Setează frame-ul la dimensiunea fizică reală. În Figma, pentru A4 folosește 595 × 842 (puncte, adică 72 DPI) sau 2480 × 3508 (pixeli la 300 DPI).
2. Exportă PDF.
3. Dacă tipografia cere bleed (zonă de siguranță pentru tăiere), fă frame-ul cu 3 mm mai mare pe fiecare latură și extinde fundalul până la margine.
4. Textul rămâne text în PDF-ul din Figma — bine pentru claritate. Dacă tipografia nu are fontul, cere-le să folosească PDF-ul așa cum e, nu să reeditează.

Optimizarea pentru web¶

O pagină cu imagini neoptimizate se încarcă lent, iar vizitatorii pleacă.

Exerciții¶

Exercițiu 1 — Calcule de rezoluție¶

Răspunde, cu calculul scris:

1. Ce rezoluție minimă are nevoie o imagine care ocupă 15 cm lățime pe un afiș A3 tipărit la 300 DPI?
2. O fotografie de 4000 × 3000 px, tipărită la 300 DPI, ce dimensiune fizică maximă are?
3. Ai nevoie de un banner de 2 m lățime privit de la 5 metri. Ce rezoluție e suficientă?

Exercițiu 2 — Text lizibil peste fotografie¶

Ia o fotografie cu contrast neuniform (de exemplu un peisaj cu cer luminos și pământ întunecat) și pune peste ea un titlu alb, în patru variante: fără tratament, cu overlay plat, cu gradient, cu bandă. Verifică contrastul la fiecare.

Exercițiu 3 — Set complet de exporturi¶

Ia cardul de proiect construit în lecția 09 și exportă-l în toate formatele potrivite: pentru web (2×), pentru o prezentare (1×), pentru tipar. Compară mărimile fișierelor.

Mini-proiect: card de eveniment cu fotografie¶

Construiește un card de eveniment de 1080 × 1350 px (format vertical pentru rețele sociale) care conține o fotografie de fundal, un gradient, un titlu, data și logo-ul cercului. Exportă-l în trei variante: WebP pentru web, JPG pentru trimis pe WhatsApp, PDF pentru tipărit A5.

Rezumat¶

• Rezoluție = pixeli totali; DPI = pixeli pe inch la tipar.
• Pentru tipar de calitate: 300 DPI. A4 = 2480 px lățime.
• Nu poți mări o imagine mică. Ia mereu mai mare și micșorează.
• DPI-ul necesar scade cu distanța de privire: un banner are nevoie de 100, nu de 300.
• Încadrare: Fill (implicit), Fit, Crop, Tile.
• Masca decupează ce e deasupra ei; pentru o singură imagine într-o formă, folosește Fill în loc de mască.
• Umbre bune: offset doar pe Y, blur mare, opacitate 8–15%, culoare apropiată de fundal.
• Text peste fotografie: gradient este cea mai bună soluție implicită.
• Formate: SVG vector, JPG/WebP fotografii, PNG transparență, PDF tipar.
• Exportă la 2× pentru web; optimizează cu Squoosh și SVGOMG.

Pasul următor: → Lecția 11: Afiș pentru un eveniment școlar