Share
Vad du ska skapaI denna handledning kommer vi att komma in i säsongens jubel genom att skapa en SVG julgran illustration som du kan använda på vilken webbplats som helst. Vi ska skapa illustrationen i Affinity Designer och utnyttja sedan programmets webbspecifika SVG-exportfunktionalitet.
Notera: Stegen nedan antar att du har en grundläggande nivå av förtrogenhet med Affinity Designer. Om inte, kan du få bollen att rulla med vår kurs Affinity Designer Quick Start.
Skapa SVG-grafik i Affinity Designer är en ganska rakt materia, med bara ett par "gotchas" för att undvika. Ett särskilt är att du inte använder blandningslägen än "Normal" någonstans i ditt dokument. Om du gör det kommer din bild att rasteriseras delvis, försvinner hela syftet med SVG-grafik ("S" står för "skalbar"). Med det sagt, medan du inte kan använda olika blandningslägen kan du använda olika opacitetskonfigurationer.
En annan sak att vara medveten om är att försöka hålla dina former så enkelt som möjligt så filstorleken minimeras. Till exempel, med hjälp av snygga slag eller textureringar kommer det att leda till en enorm filstorlek. Vi håller vår illustrationsteknik grundläggande under hela denna handledning för att vara så SVG-vänlig som möjligt.
Låt oss börja!
Skapa ett nytt dokument och välj webb från Typ dropdown i dialogrutan för dokumentskapande. Ställ in båda Sidbredd och Sidhöjd att vara 1024px.
Låt oss fortsätta och konfigurera vårt isometriska nät. På menyn längst upp på Affinity Designer gå till Visa> Grid och Axis Manager och du får se en rutnät inställningsfält visas. Ändra dessa inställningar:
Accentsconagua
64px 8 
Isometrisk rutnät i Affinity DesignerUnder hela handledningen lägger vi vägnodder på isometrisk rutnät för att skapa och anpassa de former som kommer att bilda vårt julgran. Som sådan kommer vi att definiera en terminologi för att beskriva vårt rutnät, så när jag anger storleken ska en form vara, eller avståndet en nod måste flytta på rutnätet, vet du vad jag pratar om.
När man tittar på rutnätet ser man att det har flera tjockare linjer som bildar stora diamanter, och inom dessa diamanter finns det tunnare linjer som bildar mindre diamanter. Vi hänvisar till diamanterna som bildas av tjockare linjer på gallret som stora rutediamanter, och deras mindre motsvarigheter som små rutediamanter. När vi hänvisar till en enda sida av en av dessa stora diamanter använder vi fraseringen stor nätenhet eller stor rutnät. Vi ska använda liten nätenhet eller liten rutnät för det minsta nätmätningen.
Observera att medan du arbetar med det isometriska nätet, för att noggrant placera noder på det måste du se till att snapping är aktiv genom att trycka på magnetikonen som finns på Affinity Designers översta verktygsfält.
Som du kan se i förhandsgranskningsbilden på vårt färdiga träd i början av denna handledning kommer bladområdet att bestå av fyra distinkta delar av grönt. Vi börjar med att dra upp den övre delen av trädet, vilket också är det minsta.
Använd Rektangelverktyg, (snabbtangent M), för att rita en rektangel av ungefär den storlek du ser i bilden nedan. Detta kan göras ganska grovt eftersom vi kommer att modifiera formnoden med nod. Om du vill ändra rektangelens noder väljer du rektangeln och klickar på Konvertera till kurva knappen du ser på kontextverktygsfältet ovanför din duk.
Se till att rektangeln inte har någon kant och sätt fyllfärgen på # 2F5628.
För att kunna klistra in i hex färgkoder måste du ha RGB Hex färgplockare aktiv i Färg studio panel. Denna panel ska vara öppen och på högra sidan av gränssnittet som standard, men om inte kan du öppna den genom att gå till Visa> Studio> Färg. Klicka på den lilla rullgardinsmenyn högst upp till höger om Färg panel, välj reglagen, Välj sedan i rullgardinsmenyn inuti panelen RGB Hex.
Observera att medan du manipulerar former kan du få det lättare att arbeta i konturvyn så att du tydligare kan se dina noder och banor. För att aktivera detta gå till Visa> Visa läge> Översikt. För att gå tillbaka till den vanliga vyn väljer du Vektor under samma meny.
Med nodverktyget, (genvägsknapp en), välj en av de två högsta två noderna i rektangeln. Denna nod kommer att bli toppnoden i vår första trädavsnitt. Dra det till en korsningspunkt mellan stora rutediamanter ungefär halvvägs över duken och tre och en halv stor rutediamanter från kanfasens överdel.
Välj sedan den motsatta noden till den du just flyttat - det här blir träsnittsnoden. Dra den valda noden så att den är direkt under den övre noden vertikalt, men två stora rutediamanter är lägre.
Kolla nu på den undre noden och följ den stora rutnätet på upp och till vänster av en stor rutnät. Flytta vänster nod till den punkten. Gör samma sak på höger sida för rätt nod. Du borde sluta med formen på bilden nedan. Var uppmärksam på var knutarna faller på rutnätet och se till att din form ser ut på samma sätt.
Och kontrollera att den är placerad i förhållande till dokumentets övre vänstra hörn som här:
Nu ska vi lägga till en höjdfärg på höger sida av den här träddelen för att få det att se ut som ljuset slår det. Välj din befintliga form och aktivera Sätt in inuti urvalet knappen till höger om verktygsfältet. Dra sedan ut en rektangel utan kant i en storlek som täcker den högra halvan av träsnittet och ställ in fyllfärgen till # 386.925. Rektangeln ska nästas inuti träsnittsformen, som du kan se i Skikten panelen av bilden nedan:
För att avsluta detta trädsnitt ska vi lägga till en liten snötrimma till botten. Använd pennverktyget för att rita en form som är en enda liten grid enhet hög och kör längs längst ned på vänstra sidan av sektionen. Det ska vara inbäddat inuti träddelen så att eventuellt överflöde är avklippt. Fyll den med färgen # A8BCA7.
Observera att vi gör den här snötrimmen ljusgrön, inte helt vit, så det går inte samman med någon vit bakgrund som det kan placeras på.
Lägg till några extra knutar till toppen av snötrimmen och dra dem upp eller ner något för att lägga till några kurvor som så. Du måste förmodligen avaktivera snäppning tillfälligt medan du gör det genom att klicka på magnetikonen på Affinity Designers toppverktygsfält.
Dubbelklicka nu denna snötrimmaform och vänd den horisontellt, vilket du kan göra genom att klicka på Vänd horisontell knappen på den övre verktygsfältet. Placera den i spegelposition på höger sida av de tre. Välj sedan båda formerna och tryck på Lägg till knappen på den övre verktygsfältet för att kombinera dem i en enda form.
Den övre träddelen är nu klar så att vi kan kopiera den och göra några små ändringar för att skapa de andra tre sektionerna. Kopiera sektionen och flytta ner den med en och en halv stor rutediamanter. Se till att den ligger bakom det övre avsnittet i lagerpanelen.
Nu ska vi manipulera denna andra trädsnitts nodar för att göra den större än den första delen. Dra först den högsta noden så att den är en halv grid under den första trädsnitts översta noden. Dra sedan vänster nod uppåt och till vänster, längs rutnätet är den redan tills du träffar den närmaste skärande stora rutnätet. Gör samma sak för rätt nod också.
Visar den andra träddelen i "Översikt" -visningslägeKantarna på den andra träddelen ska springa i samma vinkel som den första sektionen. Du kan kontrollera för att se till att det här är fallet genom att bekräfta att linjen går genom en rutnätpunkt varje två små rutdiamanter.
Grid skärningspunkterKontrollera och se till att din lättare färgade inbädda rektangel fortfarande täcker höger sida - om inte du kanske behöver förstora den lite. Justera snötrimmen för att täcka botten av den andra träddelen genom att dra de yttersta noderna ut till kanterna av formen och sedan lägga till några fler noder i formen för att infoga extra kurvor.
Upprepa processen två gånger för att skapa den tredje och fjärde träddelen. Varje gång du borde:
Huvudformen av vårt träds blad är nu gjort så att vi kan flytta på att skapa bagaget. Med hjälp av pennverktyget ritar du en rektangel som är ett halvt stort galler diamantbrett, ungefär en och en halv stor rutediamanter hög, centrerad horisontellt i förhållande till trädet och placerad bakom alla andra befintliga former.
Lägg till en extra nod på den lägsta kanten som du kan använda för att skapa en spetsig botten. Denna bottennod bör placeras en stor rutmönster under den lägsta punkten av trädet, och stamformens två nedre kanter ska springa längs rutnät. Ställ stammens fyllfärg till # 322B1E. Slutligen, nestad inuti stamformen, skapa en rektangel för att täcka dess högra hälft med en fyllfärg på # 41351E.
Ditt slutresultat ska se ut så här:
Därefter kommer vi att skapa skuggor som kastas på varje trädsektion, såväl som på bagageutrymmet, genom träddelen ovanför den.
På vänstra sidan av trädet använder du pennverktyget för att dra ut tre snedställda rektanglar, en under var och en av de tre tre sektionerna ovan. Dessa rektanglar ska vara två små gallerdiamanter höga längs deras längd och fyllda med färgen # 203F1A. Duplicera formerna, vrid dem horisontellt och placera dem i spegelposition på höger sida. Ändra fyllnadsfärgen på dessa former till # 12510E.
Detta borde ge dig skuggor under varje trädavsnitt som så:
Med samma tillvägagångssätt skapar du två snedställda rektangelformer på bagageutrymmet, var och en och en halv liten rasterenhet hög. Den vänstra mest form ska vara färgad # 231D13 och rätt mest form # 302.511.
Obs! Jag bestämde mig ursprungligen för de färger som skulle se ut som skuggor här genom att ställa in formen i samma fyllfärg som den sida av trädet som de var på och sedan ställa in dem i blandningsläge Multiplicera. Men som tidigare nämnts kan vi inte använda Multiplicera i en SVG-bild. För att komma runt detta använde jag färgplockaren för att prova den färg som skuggorna tycktes vara. Jag ändrade sedan skuggformens fyllfärg till den samplingsfärgen och ställde in blandningsläget tillbaka till Vanligt, uppnå samma utseende i slutet men på ett SVG-vänligt sätt.
Nu för att skuggan kastade på marken av trädet. Under alla andra former, skapa en diamant med samma bredd som botten mest trädsnitt. Kanterna bör alla följa längs rutnätet, och den ska centreras både horisontellt och vertikalt relativt stammen. Gör färgen svart och sätt den till 20% opacitet. Återigen, medan vi inte kan använda Multiplicera för att skapa skuggor i vår SVG-illustration kan vi säkert använda opacitet.
Vår övergripande trädform är nu klar och vi är redo att dekorera den. För att göra det ska vi skapa en klotform som vi kan ändra storlek för att använda till toppen av träddekorationen och för mindre dekorationer runt trädet. Vi ska initialt skapa den i dubbel storlek så att det blir enklare att använda rutnätet för att anpassa alla former som kommer att göra världen.
Var noga med var nudlarna faller på gallret när du skapar följande former.
Först, skapa en diamantform kvart över storleken på en stor rut diamant, med fyllfärgen # FFEF00. Detta kommer att bilda den platta toppen av världen.
Lägg till dessa två former för att skapa kurvan under toppen av världen - den vänstra formen är färg # F1C906 och den rätta formen är färg # FFE300.
Skapa sidorna av jordklotet med dessa former - vänster sida är färgad # E9BE1F och höger sida är färgad # FFDB1F.
Lägg bottenkurvorna med dessa två former, färgade # DCAF2E till vänster och # ECCA3C till höger.
Slutligen använd pennverktyget för att dra en enda form som matchar hela jordens form. Ge det fyllnadsfärgen # FFDB1F sätt sedan den bakom alla andra former. Detta säkerställer att du inte kommer att se några bakgrundsfärger som visar i några små luckor mellan de former som utgör jorden.
Nu är din jordklot klar, du kan ändra storlek på den redo för placering ovanpå ditt träd. Välj alla former och gruppera dem för enkel storlek. Du kan göra en kopia av denna grupp innan du ändrar storlek om du vill behålla den som en säkerhetskopia.
Vi vill minska världen till hälften, så välj den grupp du just gjort och leta reda på Omvandla panel på höger sida av Affinity Designer-gränssnittet. Om det inte redan är öppet gå till Visa> Studio> Transformera. I Transformpanelens W (bredd) fälttyp / 2 Vid slutet av det aktuella värdet tryck sedan på STIGA PÅ. Detta halverar nuvarande bredd.
Gör samma sak i H (höjd) fält för att halva höjden.
Din halvklotiga klot är klar att användas, så placera den på toppen av trädet som så.
Duplicera den dekoration du bara placerat på trädet och halvera dess storlek igen med samma sätt att lägga till / 2 till slutet av Omvandla panelens H och W fält. Nu har vi en mindre gul klot som vi kan lägga på vårt träds huvuddel, och allt vi behöver är några extra färger för att göra våra dekorationer mer livliga. Gör tre extra dubbletter av den mindre jordklotet så att vi kan göra dem till blå, lila och röda versioner.
Ändra färgerna på tre nya glober så att du får följande:
Den blåa världen använder dessa färger:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C Den lila världen använder dessa färger:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C Den röda världen använder dessa färger:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Med dessa mindre glober nu gjort kan du placera dem runt ditt träd för att dekorera så här:
Nu ska vi lägga till några sista mindre dekorationer för att få lite extra detaljer. Använd pennverktyget för att dra ut denna form med fyllfärgen # FFDB1F:
Observera att dess kanter följer samma vinkel som trädkroppens yttre kanter.
Som vi gjorde med vår jordklot, är denna form faktiskt ritad i dubbel storlek, vilket gör det lättare att placera noder på gallret. Använd Omvandla panelen för att halvera sin storlek som vi gjorde tidigare genom att lägga till / 2 till slutet av H och W fält. Formens topp- och bottenkanter borde nu vara en liten grid enhet lång.
Gör tre dubbletter av formen och färga dem # 1E98B0 för blå, # 721EB0 för lila och # 831C1A för rött. Kopiera alla fyra formerna och vrid dem horisontellt. Du borde nu ha åtta former totalt.
Ta dessa former och sprida dem runt ditt träd. Använd former vars vinklar matchar ytterkanten på sidan av trädet som du placerar dem på.
Och det är allt! Vår julgran bild är allt klar.
Nu är vår design klar, vi ska få den redo att användas på webben som en SVG.
Först måste vi ändra dokumentet till samma mått som vårt träd, så vårt SVG: s viewbox parametern ställs in till rätt storlek. Om vi exporterade just nu viewbox skulle ställas till 1024x1024, vilket betyder var du använde julgranen SVG, skulle det ha stora luckor, antingen storleken precis som vårt dokument gör nu.
Se till att du inte har något på duken som valts, titta på kontextverktygsfältet längst upp i Affinity Designer-gränssnittet och du bör se Dokumentinställningar knapp. Klicka på den och en ruta dyker upp där du kan ändra dokumentdimensionerna. Uppsättning 280px för bredden och 568px för höjden. Så länge du har placerat dina former noggrant måste dessa dokumentdimensioner fungera för dig. Se till att du har Ankare till sida valda och inte skala om, tryck sedan på ok.
Omedelbart efter att du har omkalkat ditt träd kommer det sannolikt inte att vara centrerat. För att fixa detta markerar du allt i dokumentet med CTRL + A, gruppera det med CTRL + G, välj den gruppen och dra sedan den till ett centrerat läge.
Gå nu till Arkiv> Exportera och i rutan som dyker upp väljer du SVG flik. Se till att den förinställda SVG (för webben) är vald.
Se till att du ser meddelandet (Ingenting kommer att rasteriseras). Om istället meddelandet meddelar dig något kommer rasteriseras, gå igenom ditt arbete och se till att du inte av misstag har satt några former till ett blandningsmodus än Vanligt.
När du är klar klickar du på Exportera och spara din SVG.
Nu har du din SVG-fil redo Låt oss titta på ett par sätt du kan använda den.
Det enklaste sättet är att bara ladda in det i din HTML som du skulle ha någon annan bild med kod så här:
SVG: s skönhet är dock att du också kan ta innehållet i SVG-filen och klistra in den direkt i din HTML för att använda bilden inline.
För att göra detta, öppna din SVG-fil i en textredigerare och kopiera allt från och med div du kan stile för att styra bildens storlek och position.
För att se detta tillvägagångssätt i aktion kolla in det här exemplet på CodePen:
Så det är så du kan göra en SVG-illustration med Affinity Designer! Processen är inte så annorlunda än någon annan typ av design som görs i Affinity Designer, med förbehåll för att du bara måste se upp för icke-standardiserade blandningsmetoder och alltför komplicerade former. Behovet av plana färger och preferenser för enkla former gör isometriska illustrationer särskilt väl lämpade för SVG.
För att lära dig mer om att använda Affinity Designer, kolla in våra handledningar och kurser, och när du är på det, kolla även våra SVG-handledning och kurser..
