Share
Ce veți creaÎn acest tutorial vom începe să ne bucurăm de sezon, creând o ilustrație a copacului de Crăciun SVG pe care o puteți folosi în orice site web. Vom crea ilustrația în Affinity Designer și apoi vom profita de funcționalitatea exportului specifică SVG a programului.
Notă: pașii de mai jos presupun că aveți un nivel de familiarizare cu Affinity Designer. În caz contrar, puteți obține o minge de rulare cu cursul de afinitate Designer Quick Start.
Crearea graficii SVG în Affinity Designer este o chestiune destul de directă, cu doar câteva "gotchas" de evitat. Unul este, în special, să fiți sigur că nu utilizați alte moduri de amestecare decât "Normal" oriunde în document. Dacă faceți acest lucru, imaginea dvs. va fi parțial rasterizată, învingând întregul scop al graficii SVG ("S" înseamnă "Scalabil"). Acestea fiind spuse, în timp ce nu puteți utiliza diferite moduri de amestecare, puteți utiliza diferite setări de opacitate.
Un alt lucru pe care trebuie să îl cunoașteți este încercarea de a vă menține forma cât mai simplă posibil, astfel încât dimensiunea fișierului să fie redusă la minimum. De exemplu, folosirea tipurilor accidentale sau a texturării va duce la o dimensiune enormă a fișierului. Vom păstra tehnicile de bază ale ilustrației în acest tutorial pentru a fi cât mai prietenoși cu SVG.
Sa incepem!
Creați un document nou și selectați Web de la Tip dropdown în caseta de dialog pentru crearea documentelor. Setați ambele Lățimea paginii și Înălțime pagină pentru a fi 1024 de pixeli.
Apoi să mergem mai departe și să configuram grila noastră izometrică. În meniul din partea de sus a proiectului Affinity Designer mergeți la Vizualizare> Grid și Axis Manager și veți vedea o casetă de setări pentru rețea. Schimbați aceste setări:
Accentsconagua
64px 8 
Grilă izometrică în Designer de afinitatePe tot parcursul acestui tutorial vom introduce noduri de cale pe grila izometrică pentru a crea și ajusta formele care vor forma bradul nostru de Crăciun. Ca atare, vom defini o anumită terminologie pentru a descrie grila noastră, astfel încât atunci când specificăm dimensiunea unei forme sau distanța pe care un nod trebuie să o deplaseze pe grilă, veți ști despre ce vorbesc.
Când te uiți la rețea, vei vedea că are mai multe linii mai groase care formează diamante mari, iar în acele diamante există linii mai subțiri care formează diamante mai mici. Ne vom referi la diamantele formate de linii mai groase pe grila ca diamante mari de rețea, și omologii lor mai mici ca diamante mici de rețea. Când ne referim la o singură latură a unuia dintre aceste diamante mari, vom folosi formularea unitate mare de rețea sau linia mare a grilei. Vom folosi unitate mică de rețea sau linia grilei mici pentru cea mai mică măsurătoare a rețelei.
Rețineți că, în timp ce lucrați cu grila izometrică, pentru a plasa corect nodurile pe ea, va trebui să vă asigurați că activarea este activă prin apăsarea pictogramei de magnet găsită pe bara de instrumente de top a aplicației Affinity Designer.
După cum puteți vedea în imaginea de previzualizare a arborelui nostru completat la începutul acestui tutorial, zona frunzei va fi compusă din patru secțiuni distincte de verde. Vom începe prin a desena cea mai mare parte a arborelui, care este și cea mai mică.
Folosește Instrument dreptunghiular, (scurtătură M), pentru a extrage un dreptunghi de aproximativ dimensiunea pe care o vedeți în imaginea de mai jos. Acest lucru se poate face destul de brutal pe măsură ce vom modifica nodul de formă pe nod. Pentru a vă permite să modificați nodurile dreptunghiului, selectați dreptunghiul și faceți clic pe Conversia în curbă pe care îl veți vedea în bara de instrumente de context de deasupra pânzei.
Asigurați-vă că dreptunghiul nu are chenar și că setați culoarea de umplere la # 2F5628.
Pentru a putea lipi în coduri de culoare hexagonale, va trebui să aveți RGB Hex picker de culoare activă în Culoare studio panou. Acest panou trebuie să fie deschis și în partea dreaptă a interfeței în mod implicit, dar dacă nu puteți să-l deschideți mergând la Vizualizare> Studio> Culoare. Faceți clic pe meniul derulant mic din partea dreaptă sus a ferestrei Culoare panou, alegeți cursoare, apoi selectați din lista derulantă din interiorul panoului RGB Hex.
Rețineți că, în timp ce manipulați formele, este posibil să fie mai ușor să lucrați în vizualizarea schemelor, astfel încât să puteți vedea mai clar nodurile și căile dvs. Pentru a activa acest lucru mergeți la Vizualizare> Mod de vizualizare> Schiță. Pentru a reveni la vizualizarea obișnuită, alegeți Vector sub același meniu.
Cu instrumentul nod, (tasta de comenzi rapide A), selectați unul din primele două noduri ale dreptunghiului. Acest nod va deveni nodul superior al primei noastre secțiuni de arbori. Trageți-l la un punct de intersecție între diamante mari de rețea aproximativ la jumătatea distanței de panza și trei și jumătate diamante mari de rețea din partea de sus a pânzei.
Apoi, selectați nodul opus celui pe care tocmai l-ați mutat - acesta va deveni nodul inferior al secțiunii de arbore. Trageți nodul selectat astfel încât să fie direct sub nodul superior vertical, dar două diamante mari de rețea mai mici.
Acum, uita-te la acel nod de jos și urma linia de grilă mare este pe sus și spre stânga de către o unitate mare grilă. Deplasați nodul stâng în acel punct. Faceți același lucru pe partea dreaptă pentru nodul drept. Ar trebui să ajungeți la forma de mai jos. Acordați atenție locului în care nodurile cad pe grilă și asigurați-vă că forma dvs. arată la fel.
Verificați dacă este poziționat în raport cu colțul din stânga sus al documentului, așa cum se vede aici:
Acum vom adăuga o culoare de culori în partea dreaptă a acestei secțiuni de arbori, pentru a face să pară că lumina o lovește. Selectați forma existentă și activați Introduceți în interiorul selecției buton din partea dreaptă a barei de instrumente de sus. Apoi, trageți un dreptunghi fără margini la o dimensiune care să acopere jumătatea dreaptă a secțiunii de copac și setați culoarea de umplere la # 386925. Dreptunghiul trebuie să fie imbricat în interiorul formei secțiunii arborilor, după cum puteți vedea în straturi panou din imaginea de mai jos:
Pentru a termina această secțiune de copaci, vom adăuga un pic de zăpadă în partea de jos. Utilizați instrumentul stilou pentru a desena o formă care este o singură unitate mică de grilă ridicată și rulează de-a lungul părții din stânga jos a secțiunii. Ar trebui să fie imbricate în interiorul secțiunii de copaci, astfel încât orice depășire să fie tăiată. Umpleți-l cu culoarea # A8BCA7.
Rețineți că facem ca această zăpadă să fie verde, nu albă plină, astfel încât să nu fuzioneze cu nici un fundal alb pe care ar putea fi plasat.
Adăugați niște noduri suplimentare în linia de sus a formei de zăpadă și trageți-le ușor sau în jos pentru a adăuga unele curbe ca atare. Probabil că va trebui să dezactivați temporar ruperea în timp ce faceți acest lucru, făcând clic pe pictograma magnet din bara de instrumente de top a aplicației Affinity Designer.
Acum copiați această formă de zăpadă și rotiți-o orizontal, ceea ce puteți face făcând clic pe Flip orizontal pe bara de instrumente de sus. Poziționați-o într-o poziție în oglindă din partea dreaptă a celor trei. Apoi selectați ambele forme și apăsați pe Adăuga pe bara de instrumente de sus pentru a le combina într-o singură formă.
Secțiunea de vârf a copacului este acum terminată, astfel încât să putem să o duplicăm și să facem mici modificări pentru a crea celelalte trei secțiuni. Duplicați secțiunea și mutați-o în jos cu un diamant de o jumătate de grilă mare. Asigurați-vă că este în spatele secțiunii superioare din panoul straturilor.
Acum vom manipula nodurile celei de-a doua secțiuni de arbori pentru ao face mai mare decât prima secțiune. Mai întâi, trageți nodul său de sus în sus, astfel încât să fie o jumătate de unitate de grilă mare sub primul nod al primei secțiuni de arbore. Apoi trageți nodul stâng sus și spre stânga, de-a lungul liniei de rețea este deja activat, până când atingeți linia cea mai apropiată de intersecție a grilei mari. Faceți același lucru și pentru nodul drept.
Se afișează a doua secțiune arbore în modul de vizualizare "Outline"Marginile celei de-a doua secțiuni arbore ar trebui să funcționeze în același unghi ca și prima secțiune. Puteți verifica dacă acest lucru este cazul confirmând că linia trece printr-un punct de intersecție al rețelei la fiecare două diamante mici.
Punctele de intersecție a rețeleiVerificați și asigurați-vă că dreptunghiul dvs. imbricat colorat, mai deschis, acoperă totuși complet partea dreaptă - dacă nu este posibil să aveți nevoie să o măriți puțin. Reglați ornamentele de zăpadă pentru a acoperi partea inferioară a celei de-a doua secțiuni de arbore prin tragerea celor mai multe noduri exterioare spre marginile formei, apoi adăugând mai multe noduri în formă pentru a introduce curbe suplimentare.
Repetați procesul de două ori mai mult pentru a crea secțiunile treia și a patra arbore. De fiecare dată când trebuie:
Forma principală a secțiunii frunzei copacului nostru este acum făcută, astfel încât să putem trece la crearea trunchiului. Folosind instrumentul stilou, trageți un dreptunghi care este lat de o jumătate de grilă mare diamantată, aproximativ un diamant mare și jumătate mare de diamant mare, centrat orizontal față de copac și poziționat în spatele tuturor celorlalte forme existente.
Adăugați un nod suplimentar pe marginea inferioară pe care o puteți utiliza pentru a crea o fundătură. Acest nod de fund ar trebui să fie plasat un diamant mare gratar sub punctul cel mai de jos al arborelui, iar cele două capete ale fundului trunchiului ar trebui să ruleze de-a lungul liniilor de rețea. Setați culoarea de umplere a portbagajului la # 322B1E. În cele din urmă, îmbinate în interiorul trunchiului, creați un dreptunghi pentru a acoperi jumătatea dreaptă cu o culoare de umplere # 41351E.
Rezultatul dvs. final ar trebui să arate astfel:
În continuare, vom crea umbre care sunt distribuite pe fiecare secțiune de copaci, precum și pe trunchi, de secțiunea de arbori de deasupra.
În partea stângă a copacului, utilizați instrumentul stilou pentru a extrage trei dreptunghiuri înclinate, unul sub fiecare din cele trei secțiuni de vârf ale arborelui. Aceste dreptunghiuri ar trebui să fie două diamante de dimensiuni mici de-a lungul lungimii lor și pline de culoare # 203F1A. Duplicați formele, le răsuciți orizontal și poziționați-le într-o poziție în oglindă pe partea dreaptă. Modificați culoarea de umplere a acestor forme la # 12510E.
Acest lucru ar trebui să vă ofere umbre sub fiecare secțiune arbore, cum ar fi:
Folosind aceeași abordare, creați două forme dreptunghiulare înclinate pe trunchi, fiecare câte o jumătate de grilă mică este înaltă. Forma cea mai stângă trebuie să fie colorată # 231D13 și cea mai potrivită formă # 302511.
Notă am stabilit inițial culorile care ar arăta drept umbre aici prin setarea formelor la aceeași culoare de umplere ca și partea de copac pe care erau pe acestea, apoi setarea lor la modul de amestecare Multiplica. Cu toate acestea, așa cum am menționat mai devreme nu putem folosi Multiplica într-o imagine SVG. Pentru a face acest lucru, am folosit selectorul de culori pentru a încerca culoarea care părea a fi umbrele. Apoi am schimbat culoarea de umplere a formei umbrite la această culoare eșantionată și am setat modul de amestecare înapoi Normal, realizând același aspect în cele din urmă, dar într-un mod prietenos SVG.
Acum, pentru umbra aruncată pe pământ de copac. Sub toate celelalte forme, creați un diamant la aceeași lățime cu cea mai de jos secțiune de copac. Marginile sale trebuie să urmeze linii de grilă și să fie centrate atât pe orizontală, cât și pe verticală în raport cu trunchiul. Faceți culoarea neagră și setați-o 20% opacitate. Din nou, în timp ce nu putem folosi Multiplica pentru a crea umbre în ilustrația SVG, putem utiliza opacitatea în condiții de siguranță.
Forma noastră generală de copac este acum finalizată și suntem pregătiți să o decorăm. Pentru a face acest lucru vom crea o formă de glob pe care o putem redimensiona pentru a le folosi pentru partea superioară a decorului copacului și pentru decorațiile mai mici din jurul copacului. Vom crea inițial dimensiunea dublă, astfel încât să fie mai ușor să folosiți grila pentru a alinia toate formele care vor compune globul.
Acordați o atenție deosebită unde nodurile cad pe grilă pe măsură ce creați următoarele forme.
Mai întâi, creați o formă de diamant un sfert de dimensiunea unui diamant mare de rețea, cu culoarea de umplere # FFEF00. Aceasta va forma topul plat al globului.
Adăugați aceste două forme pentru a crea curba sub partea de sus a globului - culoarea stânga a formei este # F1C906 și culoarea potrivită a formei este # FFE300.
Creați laturile globului cu aceste forme - partea stângă este colorată # E9BE1F iar partea dreaptă este colorată # FFDB1F.
Adăugați curbele de fund cu aceste două forme, colorate # DCAF2E în stânga și în dreapta # ECCA3C pe dreapta.
În cele din urmă, utilizați instrumentul stilou pentru a extrage o singură formă care să corespundă formei globului. Dați-i culoarea de umplere # FFDB1F apoi puneți-o în spatele tuturor celorlalte forme. Acest lucru vă asigură că nu veți vedea culori de fundal care să apară în nicio diferență mică între formele care cuprind globul.
Acum, globul tău este terminat, poți să-l redimensionezi și să îl găsești pe partea de sus a copacului tău. Selectați toate formele și grupați-le pentru o redimensionare ușoară. Puteți face un duplicat al acestui grup înainte de a redimensiona dacă doriți să îl păstrați ca rezervă.
Vrem să reducem globul la jumătate din dimensiune, deci selectați grupul pe care tocmai l-ați făcut și localizați-l Transforma panou din partea dreaptă a interfeței Designer Affinity. Dacă nu este deja deschis, du-te la Vizualizare> Studio> Transformați. În panoul Transformare W (lățimea) tip de câmp / 2 la sfârșitul valorii curente, apoi apăsați INTRODUCE. Aceasta va reduce la jumătate lățimea curentă.
Faceți același lucru în H (înălțime) pentru a reduce înălțimea la jumătate.
Globul tău de dimensiuni reduse este gata de utilizare, deci centrează-l pe partea de sus a copacului ca atare.
Duplicați decorarea pe care tocmai ați plasat-o pe vârful copacului și redimensionați din nou dimensiunea acestuia utilizând aceeași metodă de adăugare / 2 până la sfârșitul anului Transforma panoul H și W câmpuri. Acum avem un glob galben mai mic pe care îl putem pune pe corpul principal al copacului nostru și tot ce ne trebuie este câteva culori suplimentare pentru a face decorurile noastre mai pline de viață. Faceți trei duplicate suplimentare ale globului mai mic, astfel încât să le putem transforma în versiuni albastre, violete și roșii.
Modificați culorile a trei globuri noi pentru a obține următoarele:
Globul albastru utilizează aceste culori:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C Globul purpuriu folosește aceste culori:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C Globul roșu folosește aceste culori:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Cu aceste globuri mai mici acum le puteți pune în jurul copacului dvs. pentru a decora astfel:
Acum vom adăuga niște decorări finale mai mici pentru a aduce niște detalii suplimentare. Utilizați instrumentul stilou pentru a extrage această formă cu culoarea de umplere # FFDB1F:
Observați că marginile sale au aceleași unghiuri ca marginile exterioare ale secțiunilor de arbori.
Așa cum am făcut și cu globul nostru, această formă este trasată la dimensiunea dublă, făcând din nou mai ușor localizarea nodurilor pe grila. Folosește Transforma pentru a diminua la jumătate dimensiunea, așa cum am făcut mai devreme adăugând / 2 până la sfârșitul anului H și W câmpuri. Marginea superioară și inferioară a formei ar trebui să fie acum o singură unitate mică.
Faceți trei duplicate ale formei și colorați-le # 1E98B0 pentru albastru, # 721EB0 pentru violet și # 831C1A pentru roșu. Duplicați toate cele patru forme și rotiți-le orizontal. Ar trebui să aveți acum opt forme totale.
Luați aceste forme și le împrăștiați în jurul copacului. Folosiți forme ale căror unghiuri se potrivesc cu marginea exterioară a părții copacului pe care le plasați.
Si asta e! Imaginea noastră de pom de Crăciun este făcută.
Acum, designul nostru este finalizat, îl vom pregăti pentru utilizare pe web ca SVG.
În primul rând, trebuie să schimbăm documentul la aceleași dimensiuni ca și copacul nostru, așa că SVG-urile noastre viewbox parametrul va fi setat la dimensiunea corectă. Dacă am exportat chiar acum viewbox ar fi setat la 1024x1024, adică oriunde ai fi folosit arborele de Crăciun SVG, ar avea decalaje mari fie de dimensiune, la fel cum face documentul nostru acum.
Asigurați-vă că nu aveți nimic pe panza selectată, apoi uitați-vă la bara de instrumente de context din partea de sus a interfeței Designer Affinity și ar trebui să vedeți Configurarea documentului buton. Dați clic pe el și se va afișa o casetă în care puteți modifica dimensiunile documentului. A stabilit 280 pixeli pentru lățimea și 568px pentru înălțime. Atâta timp cât v-ați așezat cu grijă, aceste dimensiuni de document ar trebui să funcționeze pentru dvs. Asigura-te ca ai Ancorați la selectate și nu rescale, apoi apăsați O.K.
Imediat după rescaling arborele dvs., probabil, nu va fi centrat. Pentru a rezolva aceasta, selectați tot în documentul cu CTRL + A, grupați-l cu CTRL + G, selectați acel grup, apoi glisați-l într-o poziție centrat.
Acum du-te la Fișier> Exportați și în caseta care apare selectați SVG tab. Asigurați-vă că ați presetat SVG (pentru web) este selectat.
De asemenea, asigurați-vă că vedeți mesajul (Nimic nu va fi rasterizat). Dacă în schimb mesajul vă spune ceva voi fi rasterizat, treceți prin munca dvs. și asigurați-vă că nu ați setat accidental nici o formă într-un alt mod de amestecare decât Normal.
Când sunteți gata, faceți clic pe Export și salvați SVG-ul.
Acum, aveți fișierul SVG gata să examinăm câteva moduri în care îl puteți folosi.
Cea mai ușoară cale este doar să o încărcați în HTML, așa cum ați face orice altă imagine, cu un cod ca acesta:
Cu toate acestea, frumusețea SVG este, de asemenea, puteți să luați conținutul fișierului SVG și să îl inserați direct în HTML pentru a utiliza imaginea în linie.
Pentru a face acest lucru, deschideți fișierul dvs. SVG într-un editor de text și copiați totul începând cu div puteți schița pentru a controla dimensiunea și poziția imaginii.
Pentru a vedea această abordare în acțiune, verificați acest exemplu pe CodePen:
Deci, așa puteți face o ilustrare SVG folosind Affinity Designer! Procesul nu este prea diferit de orice alt tip de design făcut în Affinity Designer, cu avertismentele pe care tocmai trebuie să le urmăriți pentru modurile de amestecare fără implicit și forme prea complexe. Nevoia de culori plate și preferința pentru forme simple face ilustrații izometrice deosebit de potrivite pentru SVG.
Pentru a afla mai multe despre utilizarea designerului de afiliere, verificați tutorialele și cursurile noastre și, în timp ce vă aflați, consultați tutorialele și cursurile SVG.
