Proiectare grafică SVG în browserul dvs.

Editorul Vecteezy. este o suită de editare vectorială gratuită care rulează chiar în browser-ul dvs. Acest tutorial acoperă instrumentele de bază și instrumentele de editare pe care le puteți utiliza pentru a edita orice vectori de pe site. În acest fel, puteți construi insigne, butoane, logo-uri sau orice altceva cu ușurință.

GUI pentru acest editor se simte similar cu software-ul Adobe, deci dacă folosiți deja Photoshop sau Illustrator, veți avea o perioadă mai ușoară de învățare a frânghiilor. Dar chiar începătorii finali se pot scufunda în acest lucru și pot ridica elementele de bază de la zero.

• Get Adobe Creative Cloud

Vom folosi aceste pictograme de cumpărături de la Vecteezy.

Doar vizitați pagina de icoane și faceți clic pe "Editare & amp; Descărcați butonul ". Acest lucru deschide editorul chiar în browserul dvs., astfel încât să puteți personaliza și să se bazeze pe aceste grafice. Pentru acest tutorial, vă vom arăta cum să NAB unele dintre aceste icoane și să le convertiți într-o grafică de progres mai mare - alegerea perfectă pentru orice pagină de pornire de comerț electronic.

Deci, cu icoanele de cumpărături deschise în editorul Vecteezy, putem începe!

01. Alegeți pictogramele

Faceți dublu clic pe grupul de pictograme pentru a selecta toate pictogramele (este posibil să fie necesar să faceți dublu clic de două ori). Voi folosi trei icoane specifice pentru acest tutorial: pungile de cumpărături, cardul de credit și caseta cadou.

Selectați sacul de cumpărături și faceți clic pe Duplicați în partea de sus a paginii. Acest lucru ar trebui să vă dea un duplicat al întregii pictograme. Mutați acest lucru spre partea de sus și duplicați celelalte două.

Notă: Cutia cadou nu este complet grupată, așa că atunci când faceți clic pentru a duplica, veți selecta doar o bucată de pictogramă. Pentru a remedia acest lucru, glisați doar o cutie de selecție pe întreaga pictogramă cadou, apoi în partea de sus faceți clic pe EDIT- & GT; Grupați. Acum, puteți duplica întreaga pictogramă prezentă cu un singur clic.

Odată ce aveți duplicate ale tuturor celor trei icoane, faceți dublu clic oriunde pe panza goală. Acest lucru vă aduce în afara grupului de icoane, astfel încât să puteți selecta alte obiecte de pe pagină. Dacă faceți clic pe oricare dintre pictogramele mai vechi, veți selecta întregul grup. Acest lucru este perfect, pentru că veți dori să le trageți în jos de pe panza, astfel încât să nu fie din vedere.

02. Ștergeți gunoiul

Faceți dublu clic pe fiecare pictogramă duplicată pentru a accesa formele individuale din interior. Avem nevoie doar de pictograma principală, astfel încât să ar trebui să selectați și să ștergeți fundalurile cercului colorat și să aruncați umbrele.

Pentru a face acest lucru, pur și simplu măriți foarte mult și selectați cercul de fundal. Apoi apăsați Ștergere și ar trebui să dispară.

Dacă toată pictograma dispare - nu vă panică. Doar faceți clic pe Anulați lângă partea de sus sau apăsați Ctrl / cmd + z și încercați din nou. Este posibil să fie necesar să faceți dublu clic pentru a intra în interiorul grupului de pictograme.

Până la sfârșit, ar trebui să aveți trei icoane curate gata de utilizare. Dacă nu vă place fundalul transparent, puteți accesa întotdeauna panoul de fundal din meniul din stânga (al treilea buton în jos) și creșteți opacitatea la 100% pentru un fundal alb pur.

03. Adăugarea de text

Această bară de progres va fi incredibil de simplă; doar publicitatea a trei etape ale unui magazin de comerț electronic.

Pentru a sublinia acest proces, să adăugăm etichete sub fiecare pictogramă. În bara de instrumente din stânga, găsiți instrumentul de text (al doilea buton), apoi faceți clic pe pictograma sacului pentru a adăuga un bloc de text. Adăugați textul "magazin" și apăsați pe tastatură.

Acest lucru auto-selectează textul astfel încât să îl puteți mișca în jurul și să găsiți o poziție bună. Dar dacă selectați din nou instrumentul Text, puteți schimba familia de fonturi, culoarea, dimensiunea, spațierea literelor și alte caracteristici.

Folosesc dimensiunea semi-îndrăzneață deschisă 30 cu o distanță de -1.50 de scrisori. Culoarea textului este # 525252.

Duplicați acest text de două ori și plasați duplicatele sub celelalte pictograme. Utilizați textul "Plătiți" sub pictograma cardului de credit și "primiți" sub caseta cadou.

Ar trebui să utilizați instrumentul Selectare pentru repoziționarea pictogramelor deasupra textului. De asemenea, spațiul fiecărei pictograme aproape de echidistant, dacă este posibil.

04. Ajustarea graficei

Înainte de a crea bara de progres, puteți modifica orice culori care vă plac în pictograme.

Pentru a face acest lucru, faceți dublu clic pentru a introduce orice grup de pictograme, apoi selectați orice formă pe care doriți să o modificați. În acest caz, voi edita panglica cutiei cadou pentru a schimba culoarea de la albastru la verde.

După ce vă aflați în interiorul grupului de pictograme, țineți clic pe Shift în timp ce faceți clic pentru a selecta mai mult de un element la un moment dat. Voi selecta dreptunghiurile orizontale și verticale, plus forma arcului din partea de sus.

În panoul SELECT (prima pictogramă din meniul din stânga) găsiți setările de completare. Veți vedea culoarea implicită este # 2E3192. Faceți clic pe meniul de umplere pentru a accesa o roată de culoare drop-down. Aici, puteți să vă trageți pentru a găsi culoarea dorită sau introduceți direct un cod HEX.

Introduceți # 518531 și apăsați Enter. Acest lucru ar trebui să salveze rezultatul și să actualizeze simultan toate cele trei forme. Simțiți-vă liber să jucați cu orice alte setări de culoare pe care doriți să le schimbați!

05. Pornirea barei de progres

Pentru a crea o bară de progres, aveți nevoie doar de două forme: cercuri și dreptunghiuri. Din fericire, ambele sunt disponibile în panoul Elements situat în partea de jos a meniului Instrumente.

Faceți clic pe panoul elemente și selectați forma cercului, care este primul element din listă. Va pune automat un cerc gri închis în centrul spațiului de lucru.

Puteți redimensiona cercul prin tragerea cutiilor mici de culoare albă din colț sau limita selectată. Acest lucru funcționează bine, dar nu este la fel de precis ca și caracteristica de redimensionare directă.

Deci, în schimb, reveniți la instrumentul Select și asigurați-vă că este selectat noul dvs. cerc. În partea de sus a panoului Select Tool, ar trebui să vedeți o dimensiune de selecție cu o valoare de înălțime și lățime.

Introduceți 100 în ambele câmpuri și glisați primul cerc sub prima pictogramă.

06. Duplicarea cercurilor

Cu forma voastră selectată, faceți clic pe Duplicați în meniul de sus. Acum, repoziționați acest duplicat, astfel încât se aliniază îndeaproape cu cercul original. Încercați să o obțineți chiar în partea de sus a primului cerc, astfel încât acestea arata ca o formă.

Acum, dacă țineți schimbarea și faceți clic, puteți trage acest cerc duplicat într-o linie dreaptă orizontal. Acest lucru vă permite să vă aliniați perfect toate cercurile împreună într-o linie dreaptă (sau destul de aproape la una).

Faceți acest lucru până când aveți trei forme diferite de cerc la 100 x 100, fiecare plasat sub cele trei icoane.

07. Adăugați câteva linii de conectare

Deplasați-vă înapoi la panoul de elemente și găsiți forma pătrată. Faceți clic pentru a adăuga un pătrat pe panza.

Cu această formă selectată Reveniți înapoi la instrumentul Selectare și găsiți panoul de dimensiune Width / înălțime. Deoarece acest dreptunghi trebuie să cuprindă întreaga lățime a barei de progres, avem nevoie doar de o formă foarte lungă. Schimbați astfel înălțimea la 10 și lățimea la orice număr de care aveți nevoie pentru a vă conecta toate cercurile împreună. Mina este de 750 de lățime.

Acum, cu acest dreptunghi în poziție, uitați-vă spre partea inferioară a panoului selectat unde se spune să aranjați & AMP; Flip. Faceți clic pe cea de-a doua pictogramă din rândul de sus, care vă permite să mutați orice formă selectată în spatele celorlalte forme.

Notă: Este posibil să fie să faceți clic pe butonul inferior de câteva ori pentru a obține dreptunghiul din spatele celor trei cercuri. Dar acum dreptunghiul de conectare este vizibil numai între formele cercului, astfel încât să putem adăuga text în cercuri mai târziu.

08. Recolationing.

Bara de progres actuală arată puțin întuneric, așa că să modificăm puțin culoarea.

Faceți clic pentru a selecta dreptunghiul lung și găsiți setările de umplere din panoul Instrumente. Schimbați culoarea la # C5C5C5 și apăsați Enter.

Acum, faceți clic pe Oriunde off-Canvas pentru a deselecta dreptunghiul. De asemenea, dorim să schimbăm culorile cercului și ar trebui să fie mai ușoare, folosind gri mai întunecat ca o culoare de frontieră.

Țineți schimbarea și faceți clic pe fiecare dintre cele trei cercuri. Reglați culoarea de umplere la # F5F5F5, apăsați Enter și apoi faceți clic pe pictograma x pentru a închide panoul de selectare a culorilor de umplere. Mai jos, veți găsi setări pentru accident vascular cerebral. Schimbați umplerea cursei la # C5C5C5 și apăsați Enter.

Faceți clic pe pictograma X pentru a închide acest panou de selectare a culorilor, apoi modificați dimensiunea cursei la 6. În această etapă, vă recomandăm, de asemenea, gruparea tuturor cercurilor și a dreptunghiului împreună prin glisarea unei casete de selecție și de la Edit & GT; Grup. Acum, puteți ajusta poziția tuturor formelor simultan cu ușurință.

09. Adăugarea pașilor de progres

Să adăugăm câteva numere în fiecare cerc pentru a finaliza designul barei de progres.

Faceți clic pe instrumentul de text și introduceți numărul 1 în primul cerc. Folosesc sans deschis extra-îndrăzneț, dimensiune 45 cu culoarea # C5C5C5 pentru a se potrivi cu granițele. Trageți acest text, așa că este poziționat în centrul cercului.

Duplicați elementul de text și mutați-l în cel de-al doilea cerc cu textul "2". Faceți același lucru pentru cel de-al treilea cerc cu textul "3".

10. Evidențiați primul pas

Ca o atingere de finisare, haideți să evidențiem primul pas folosind o schiță albastră mai ușoară. Mai întâi selectați numărul "1" pe care tocmai l-ați creat și modificați completarea la # 4976A3. Apoi faceți clic pentru a selecta cercul din spatele textului. Găsiți setările cursei și modificați culoarea cursei la # 4976A3. Acest lucru ar trebui să adauge o margine albastră întunecată în jurul cercului. Cu cercul încă selectat, faceți clic pe setările de completare și modificați culoarea la # E2EBFA.

Si asta e! Acum puteți exporta acest lucru ca PNG / JPG utilizând funcția de descărcare din colțul din dreapta sus. De asemenea, puteți ascunde fundalul alb pentru a exporta acest lucru ca un PNG transparent și modificați dimensiunea generală a documentului utilizând panoul de fundal (al treilea buton din meniul din stânga).

Sau dacă doriți să salvați acest lucru pentru schimbările viitoare, mergeți la File & GT; Salvați pentru mai târziu. Va trebui să creați un cont GRATUIT VECTEZY, dar este o modalitate excelentă de a vă menține munca grea salvată pentru referințe ulterioare.

Acest articol a apărut inițial în revista netă Ediția 295. Cumpărați-o Aici .

Citeste mai mult:

• 10 reguli de aur pentru SVG-urile receptive
• Explorați noile caracteristici interesante din SVG 2
• SuperCraft Animații SVG cu GSAP