Grafica SVG de la Adobe Illustrator CC este rareori transmisă designerilor digitali cu fundal. În mod normal, grafica plutește deasupra fundalului existent în site, aplicație, animație sau context interactiv.
Înainte de a discuta despre ce este implicat în eliminarea fundalului din spatele lucrărilor de artă SVG, concentrați-vă pe aplicarea transparenței graficelor SVG. Trebuie să definiți opacitatea lucrării de artă folosind panoul Transparență. De exemplu, 50% transparență a fost aplicată formei galbene din figură și puteți vedea transparența în vigoare. Și da, acea imagine este un fișier SVG, cu toate caracteristicile ușoare, de încărcare rapidă și infinit scalabile încorporate în SVG.
O formă SVG semi-opacă deasupra unui fundal colorat.
Designerii sunt obișnuiți să gândească în termeni de fundaluri care fie devin transparente, fie rămân vizibile. Ne gândim să eliminăm un fundal. Imaginile PNG și imaginile GIF funcționează așa: fie creați cu un fundal, fie alegeți un fundal transparent într-un program precum Illustrator sau Photoshop pentru a elimina acel fundal.
Cu GIF-uri și PNG-uri, puteți avea o culoare transparentă care permite culorilor de fundal sau imaginilor să apară în paginile web. Dar logica de a elimina fundalul este diferită într-un fișier SVG decât cu PNG-uri și GIF-uri. În esență, nu există o grafică SVG care să aibă un fundal netransparent, deoarece nu există fundal. Cu alte cuvinte: în mod implicit, grafica SVG salvează și exportă fără fundal.
Deci, care este problema? Ei bine, este ușor să ajungeți accidental cu un fundal transparent atunci când salvați sau exportați fișiere SVG! Următoarea figură poate avea un fundal alb sau poate avea un fundal transparent. Nu vă puteți da seama doar uitându-vă la ecranul Illustrator; trebuie să alegeți View→Show Transparency Grid.
Acest grafic poate avea un fundal alb sau poate să nu aibă fundal.
Cu Grila de transparență activată, așa cum se arată, puteți vedea că pasărea are un dreptunghi alb în spatele ei, iar acel fundal alb „va merge cu” graficul dacă salvați fișierul ca SVG sau îl exportați ca SVG.
Vizualizarea grilei de transparență dezvăluie un dreptunghi alb în spatele graficului.
Permiteți-mi să subliniez și să luminez acest lucru din alt unghi. Când mă duc să export această imagine ca SVG, dialogul Export pentru ecrane, afișat, nu are o opțiune pentru selectarea unei culori de transparență.
Nu puteți alege o culoare de transparență în SVG, deoarece nu există o culoare de fundal.
Întâlnesc adesea designeri care insistă să pună un dreptunghi de fundal în spatele lucrării lor de artă destinate SVG-ului, astfel încât să poată vedea cum va arăta graficul atunci când este plasat pe fundal de o culoare în mediul țintă (cum ar fi o pagină web sau o aplicație). Este în regulă, îi avertizez, atâta timp cât vă amintiți să eliminați acel dreptunghi de fundal când salvați sau exportați SVG-ul. Și în lumea de azi cu presiune ridicată, productivitate ridicată și schimbare rapidă, cine are nevoie de încă un lucru de reținut?
O soluție mai bună este să definiți o „grilă” de transparență cu o singură culoare care să se potrivească cu mediul în care va fi plasat graficul. De ce pun grila între ghilimele? Deoarece această tehnică înșeală: cu ea, definiți ambele culori ale grilei ca aceeași culoare, simulând în mod eficient o pagină web sau o culoare de fundal a unei aplicații.
Pentru a utiliza acea tehnică pentru a crea un fundal personalizat în timp ce dezvoltați opera de artă SVG, urmați acești pași:
Alegeți Fișier→Configurare document.
În fila General, găsiți secțiunea Opțiuni de transparență și supratipărire.
Modificările dorite sunt controlate în această secțiune a casetei de dialog.
Nu vă faceți griji cu privire la definirea dimensiunii grilei, deoarece renunțați efectiv la grilă.
În secțiunea Grilă de transparență a casetei de dialog, faceți clic pe primul dintre cele două panouri de culoare ale grilei și alegeți o culoare de fundal utilizând una dintre diferitele palete de culori din fereastra pop-up Culori prezentată în figura următoare.
Niciuna dintre aceste palete de culori nu este deosebit de prietenoasă cu digitalul, apropo. Nu există o paletă pentru RGBA, hexazecimal sau alte formate standard de culoare web, dar pipeta de selectare a culorii vă poate ajuta să obțineți culoarea de fundal pe care doriți să o potriviți.
Definirea unei culori de fundal de previzualizare cu o Grilă de transparență.
Selectați al doilea dintre cele două panouri de culoare ale grilei și atribuiți-i aceeași culoare.
Amintiți-vă, puteți utiliza pipeta pentru selectarea culorii pentru a prinde culoarea respectivă.
Faceți clic pe OK în dialogul Configurare document.
Tot ce am făcut în setul anterior de pași a fost să definesc modul în care se afișează Grila de transparență atunci când este activată . Deci, dacă Grila de transparență nu este activată, alegeți Vizualizare → Grilă de transparență.
În această figură, am selectat tabloul de desen cu grafica și previzualesc proiectul pe o culoare de fundal simulată.
Previzualizarea culorii de fundal de ieșire cu o Grilă de transparență personalizată.
Când transparența (cum ar fi opacitatea de 50 la sută) sau efectele de transparență, cum ar fi arderea culorilor, întunecarea sau multiplicarea sunt aplicate graficelor SVG, acele efecte păstrează scalabilitatea SVG.
Această figură arată aceeași grafică - trei dreptunghiuri portocalii semitransparente - exportate ca fișier PNG (sus) și SVG. Puteți vedea cum se degradează calitatea fișierului PNG atunci când măresc pe el într-un browser. Ceea ce nu puteți vedea este că fișierul PNG este aproape de două ori mai mare decât SVG.
Compararea rezultatelor PNG (sus) cu SVG atunci când se aplică transparență
Iată un rezumat al avantajelor utilizării SVG pentru efecte de transparență:
Apropo, dacă sunteți curios despre cum arată codul SVG generat pentru acest set de dreptunghiuri și cât de ușor este pentru un dezvoltator web sau aplicație să lucreze cu el, iată codul pentru prima dintre cele trei casete SVG , cu o opacitate de 60% aplicată:
<="" code="">
În sfârșit, dacă doriți ca fundalul SVG-ului dvs. să aibă o umplere colorată, acest lucru poate fi realizat și prin Proprietățile documentului meniul. Pur și simplu dați clic pe dunga albă poziționată lângă locul unde scrie Culoarea fundalului. Pe ecran va apărea un selector de culori.
Este important să rețineți că fundalul dvs. SVG va continua să fie transparent, în ciuda umplerii cu culoare, atâta timp cât coloana A (care reprezintă transparența culorii) rămâne la 0. Dacă doriți ca documentul să aibă de fapt acea culoare de fundal (chiar și în cazul exporturilor), atunci puteți ridica coloana respectivă de la 0 la 100.
Și asta ar trebui să fie pentru lucrul cu fundaluri în Inkscape. Dacă aveți întrebări care nu au fost abordate în această postare, lăsați un comentariu mai jos și vă voi răspunde dacă vă pot ajuta.
Puteți utiliza instrumentul Snapshot din Adobe Acrobat CS5 pentru a selecta atât text, cât și imagini și pentru a crea o imagine a unei anumite zone dintr-un fișier PDF. Rezultatul este denumit în mod obișnuit o captură de ecran a unei secțiuni dintr-un fișier PDF. Rezultatul este o imagine, iar textul dvs. nu este […]
Conceput pentru cercetători și oameni de știință, capacitățile de măsurare din Photoshop CC sunt destul de puternice. Puteți măsura aproape orice și puteți număra numărul de orice dintr-o imagine tehnică, poate de la un microscop sau telescop. Dacă știți dimensiunea exactă a oricărui element dintr-o imagine, atunci puteți descoperi aproape orice […]
Când utilizați instrumentele Liquify din Adobe Creative Suite 5 (Adobe CS5) Illustrator, puteți îndoi obiecte - le puteți face ondulate, lipicioase sau înțepătoare - creând distorsiuni simple până la complexe. Instrumentele Liquify pot realiza tot felul de distorsiuni creative sau ciudate (în funcție de modul în care privești) obiectele tale. Tu […]
Când aveți text în proiectul Adobe XD, puteți începe să modificați proprietățile textului. Aceste proprietăți includ Familie de fonturi, Dimensiune font, Greutate font, Aliniere, Spațiere dintre caractere (crezare și urmărire), Spațiere între linii (înfilare), Umplere, Chenar (contur), Umbră (umbră) și Încețoșare fundal. Deci, haideți să revizuim modul în care sunt aplicate aceste proprietăți. Despre lizibilitate și font […]
Puteți utiliza InDesign pentru a crea și modifica grafica codului QR. Codurile QR sunt o formă de cod de bare care poate stoca informații precum cuvinte, numere, adrese URL sau alte forme de date. Utilizatorul scanează codul QR folosind camera și software-ul de pe un dispozitiv, cum ar fi un smartphone, iar software-ul folosește […]
La fel ca în Adobe Illustrator, planurile de desen Photoshop oferă capacitatea de a crea pagini sau ecrane separate într-un singur document. Acest lucru poate fi util în special dacă construiți ecrane pentru o aplicație mobilă sau o broșură mică. Vă puteți gândi la o planșă de desen ca la un tip special de grup de straturi creat folosind panoul Straturi. Este […]
Împachetarea textului în Adobe Illustrator CC nu este chiar același lucru cu împachetarea unui cadou - este mai ușor! O împachetare text forțează textul să se înfășoare în jurul unui grafic, așa cum se arată în această figură. Această caracteristică poate adăuga un pic de creativitate oricărei piese. Graficul forțează textul să se înfășoare în jurul lui. Mai întâi, creați […]
Când proiectați în Adobe Illustrator CC, de multe ori aveți nevoie de o formă pentru a avea o dimensiune exactă (de exemplu, 2 x 3 inci). După ce creați o formă, cel mai bun mod de a o redimensiona la măsurători exacte este să utilizați panoul Transformare, prezentat în această figură. Selectați obiectul și apoi alegeți Window→Transform to […]
Aflați cum să aplicați transparența graficelor SVG în Illustrator. Explorați cum să scoateți SVG-uri cu fundaluri transparente și să aplicați efecte de transparență.
După ce ați importat imaginile în Adobe XD, nu aveți prea mult control de editare, dar puteți redimensiona și roti imaginile la fel ca orice altă formă. De asemenea, puteți rotunji cu ușurință colțurile unei imagini importate folosind widget-urile de colț. Mascarea imaginilor Prin definirea unei forme închise […]
