Share
Hva du skal skapeI denne opplæringen kommer vi inn i sesongens hurrarop ved å lage et SVG-juletreillustrasjon som du kan bruke på et hvilket som helst nettsted. Vi skal lage illustrasjonen i Affinity Designer, og deretter dra nytte av programmets webspesifikke SVG-eksportfunksjonalitet.
Merk: trinnene nedenfor antar at du har et grunnleggende nivå av kjennskap til Affinity Designer. Hvis ikke, kan du få ballen til å rulle med kurset Affinity Designer Quick Start.
Å lage SVG-grafikk i Affinity Designer er en ganske rettfremstilt sak, med bare et par "gotchas" for å unngå. Det er spesielt å være sikker på at du ikke bruker blandingsmodus annet enn "Normal" hvor som helst i dokumentet. Hvis du gjør det, vil bildet ditt bli delvis rasterisert, og beseiret hele formålet med SVG-grafikk, ("S" står for "skalerbar"). Når det er sagt, mens du ikke kan bruke forskjellige blandemoduser, kan du bruke forskjellige opasitetsinnstillinger.
En annen ting å være klar over, prøver å holde figurene så enkle som mulig, slik at filstørrelsen minimeres. For eksempel vil bruk av fancy slagtyper eller tekstur føre til en enorm filstørrelse. Vi vil holde vår illustrasjonsteknikk grunnleggende gjennom hele denne opplæringen for å være så SVG vennlig som mulig.
La oss begynne!
Opprett et nytt dokument og velg web fra Type rullegardinmenyen i dialogboksen for dokumentoppretting. Sett begge Sidebredde og Sidens høyde å være 1024px.
Neste, la oss gå videre og sette opp vårt isometriske nett. På menyen langs toppen av Affinity Designer gå til Vis> Grid og Aksje Manager og du får se en rutenettinnstillingsboks vises. Endre disse innstillingene:
Accentsconagua
64px 8 
Isometrisk rutenett i Affinity DesignerGjennom denne opplæringen legger vi sti noder på isometrisk rutenett for å skape og justere figurene som vil danne vår juletre. Som sådan vil vi definere noen terminologi for å beskrive vårt rutenett, så når jeg spesifiserer størrelsen på en form skal være, eller avstanden en knute må flytte på rutenettet, vet du hva jeg snakker om.
Når du ser på rutenettet, vil du se at den har flere tykkere linjer som danner store diamanter, og i disse diamantene er det tynnere linjer som danner mindre diamanter. Vi refererer til diamanter dannet av tykkere linjer på rutenettet som store rutenettdiamanter, og deres mindre kolleger som små rutenettdiamanter. Når vi refererer til en enkelt side av en av disse store diamanter, bruker vi frasering stor rutenett eller stor rutenett. Vi skal bruke liten grid enhet eller liten rutenett for den minste gridmåling.
Vær oppmerksom på at mens du arbeider med isometrisk rutenett, for å nøyaktig plassere noder på det, må du sørge for at snapping er aktiv ved å trykke på magnetikonet på Affinity Designers topp verktøylinje.
Som du kan se i forhåndsvisningsbildet for det fullførte treet vårt i begynnelsen av denne opplæringen, skal bladområdet bestå av fire forskjellige deler av grønt. Vi begynner med å tegne toppdelen av treet, som også er det minste.
Bruke Rektangelverktøy, (snarvei M), for å tegne et rektangel av omtrent den størrelsen du ser i bildet nedenfor. Dette kan gjøres ganske grovt, da vi skal endre formenoden ved noden. For å tillate deg å endre rektangelens noder, velg rektangelet og klikk på Konverter til kurve knappen du vil se på kontekstverktøylinjen over lerretet ditt.
Kontroller at rektangelet ikke har noen kantlinje og sett fyllfarge til # 2F5628.
For å kunne lime inn i hex-fargekoder må du ha RGB Hex fargeplukker aktiv i Farge studio panel. Dette panelet skal være åpent og på høyre side av grensesnittet som standard, men hvis ikke, kan du åpne den ved å gå til Se> Studio> Farge. Klikk på den lille rullegardinmenyen øverst til høyre på Farge panel, velg glidere, velg deretter i rullegardinlisten inne i panelet RGB Hex.
Vær oppmerksom på at mens du manipulerer figurer, kan det hende du finner det lettere å arbeide i konturvisning, slik at du tydeligere kan se dine noder og stier. For å aktivere dette, gå til Vis> Visningsmodus> Oversikt. For å gå tilbake til vanlig visning velger du Vector under samme meny.
Med knuteprogrammet, (snarvei EN), velg en av de to to noderne av rektangelet. Denne knutepunktet skal bli den øverste knutepunktet til vår første treavdeling. Dra den til et skjæringspunkt mellom store rutenettdiamanter omtrent halvveis over lerretet, og tre og en halv stor rutenettdiamanter fra toppen av lerretet.
Deretter velger du motsatt knutepunkt til den du nettopp har flyttet - dette vil bli trekantens nederste knutepunkt. Dra den valgte noden slik at den er rett under toppnoden vertikalt, men to store rutenettdrammer er lavere.
Se nå på den nederste noden og følg den store rutenettet den er oppe og til venstre av en stor rutenett. Flytt venstre knutepunkt til det punktet. Gjør det samme på høyre side for høyre knutepunkt. Du bør ende med formen som er vist nedenfor. Vær oppmerksom på hvor knutepunktene faller på rutenettet og sørg for at formen din ser ut på samme måte.
Og kontroller at den er plassert i forhold til dokumentets øverste venstre hjørne som vist her:
Nå skal vi legge til en høydefarge på høyre side av dette trepartiet for å få det til å se ut som lyset rammer det. Velg din eksisterende form og aktiver Sett inn i valget knappen til høyre for øverste verktøylinje. Deretter tegner du et rektangel uten kantlinje i en størrelse som dekker den høyre halvdelen av trepartiet og angir fyllfarge til # 386925. Rektangelet skal være nestet inne i treformet form, som du kan se i lag panel av bildet nedenfor:
For å fullføre denne treseksjonen skal vi legge til en liten snø trim til bunnen. Bruk pennverktøyet til å tegne en form som er en enkelt liten grid enhet høy, og løper langs nederste venstre side av seksjonen. Det bør være nestet inne i trepartiet slik at overløp er klippet av. Fyll det med fargen # A8BCA7.
Vær oppmerksom på at vi gjør denne snøtrimmen lysegrønn, ikke full hvit, så det smelter ikke sammen med en hvit bakgrunn det kan plasseres på.
Legg til noen ekstra noder til toppen av snø trimformen og dra dem opp eller ned litt for å legge til noen kurver som dette. Du må sannsynligvis deaktivere å snakke midlertidig mens du gjør dette ved å klikke på magnetikonet på Affinity Designers øverste verktøylinje.
Dupliser nå denne snø trimformen og vri den horisontalt, som du kan gjøre ved å klikke på Snu horisontalt knappen øverst på verktøylinjen. Plasser den i en speilposisjon på høyre side av de tre. Velg deretter begge figurene og trykk på Legg til knappen øverst på verktøylinjen for å kombinere dem til en enkelt form.
Det øverste trepartiet er nå ferdig, slik at vi kan kopiere det og gjøre noen små endringer for å opprette de tre andre seksjonene. Dupliser delen og flytt den ned med en og en halv stor rutenettdiamanter. Pass på at den ligger bak toppen i lagpanelet.
Nå skal vi manipulere dette andre trepartementets noder for å gjøre det større enn den første delen. Først dra den øverste noden opp, så det er en halv stor rutenett under den første treseksjonens øverste knutepunkt. Dra deretter venstre knutepunkt opp og til venstre, langs rutenettet er den allerede på, til du treffer nærmeste skjærende store rutenett. Gjør det samme for høyre node også.
Viser det andre trepartiet i "Utsikt" visningsmodusKantene på det andre trepartiet skal løpe i samme vinkel som den første delen. Du kan sjekke for å sikre at dette er tilfelle ved å bekrefte at linjen går gjennom et rutenett kryssingspunkt hver to små rutenettdiamanter.
Grid krysspunkterKontroller og kontroller at ditt lysere farget nestede rektangel fortsatt dekker høyre side - om ikke du kanskje trenger å forstørre det litt. Juster snø trim for å dekke bunnen av den andre tre delen ved å dra de ytre mest noder ut til kantene av formen, og deretter legge til noen flere noder til formen å sette inn ekstra kurver.
Gjenta prosessen to ganger for å opprette den tredje og fjerde treseksjonen. Hver gang du bør:
Hovedformen av bladets seksjon er nå gjort, slik at vi kan bevege oss på å skape stammen. Ved hjelp av pennverktøyet tegner du et rektangel som er et halvt stort rutenett diamant bredt, om en og en halv stor rutenettdiamanter høy, sentrert horisontalt i forhold til treet, og plassert bak alle de andre eksisterende formene.
Legg til en ekstra node på den nederste kanten du kan bruke til å lage en spiss bunn. Denne bunnkoden skal plasseres en stor rutenettdiameter under det laveste punktet av treet, og trunkformens to bunnkanter bør løpe langs rutenettlinjer. Sett stammens fyllfarge til # 322B1E. Endelig, nestet inne i stammen, lager et rektangel for å dekke den høyre halvdelen med en fyllfarge på # 41351E.
Ditt sluttresultat bør se slik ut:
Deretter skal vi skape skygger som er kastet på hvert treparti, så vel som på bagasjen, ved trepartiet over det.
På venstre side av treet, bruk pennverktøyet til å tegne tre skråkantede rektangler, en under hver av de tre øverste tre-seksjonene. Disse rektanglene skal være to små rutenettdiamanter høye langs deres lengde og fylt med fargen # 203F1A. Dupliser formene, vri dem horisontalt og plasser dem i en speilposisjon på høyre side. Endre fyllfarge av disse figurene til # 12510E.
Dette burde gi deg skygger under hvert treparti som slik:
Bruk samme tilnærming, opprett to skråformede rektangelformer på stammen, hver og en halv liten grid-enhet høy. Den venstre mest form bør være farget # 231D13 og den rette form # 302511.
Merk Jeg opprinnelig bestemte fargene som ville se ut som skygger her ved å sette formene til samme fyllfarge som siden av treet de var på, og deretter sette dem til blandemodus Multiplisere. Som nevnt tidligere kan vi imidlertid ikke bruke Multiplisere i et SVG-bilde. For å komme seg rundt dette brukte jeg fargeplukkeren til å prøve fargen som skyggene syntes å være. Jeg endret deretter skyggeformens fyllfarge til denne samplede fargen, og satt blandemodus tilbake til Normal, Å oppnå det samme utseendet til slutt, men på en SVG-vennlig måte.
Nå for skyggen kastet på bakken ved treet. Under alle de andre figurene, lag en diamant i samme bredde som det nederste trepartiet. Kanten hans bør alle følge langs rutenettene, og den skal være sentrert både horisontalt og vertikalt i forhold til kofferten. Gjør farge svart og sett den til 20% opasitet. Igjen, mens vi ikke kan bruke Multiplisere For å skape skygger i SVG-illustrasjonen, kan vi trygt bruke opacity.
Vår overordnede treform er nå ferdig, og vi er klare til å dekorere den. For å gjøre det skal vi lage en klokkeform som vi kan endre størrelsen til å bruke på toppen av tredekorasjonen, og for mindre dekorasjoner rundt treet. Vi skal i utgangspunktet lage den i dobbel størrelse slik at det blir enklere å bruke rutenettet for å justere alle former som vil gjøre opp verden.
Vær nøye med hvor nøklene faller på rutenettet mens du lager følgende former.
Først oppretter du en diamantform kvart på størrelse med en stor rutenettdiameter, med fyllfarge # FFEF00. Dette vil danne den flate toppen av kloden.
Legg til disse to figurene for å lage kurven under toppen av kloden - den venstre formens farge er # F1C906 og den riktige formen er farge # FFE300.
Lag sidene av kloden med disse figurene - venstre side er farget # E9BE1F og høyre side er farget # FFDB1F.
Legg bunnkurvene med disse to fargene # DCAF2E til venstre og # ECCA3C til høyre.
Til slutt bruker du pennverktøyet til å tegne en eneste form som passer til hele verdens klokkeform. Gi det fyllfarge # FFDB1F Sett den så bak alle de andre figurene. Dette sikrer at du ikke vil se noen bakgrunnsfarger som viser i noen små hull mellom figurene som omfatter kloden.
Nå er kloden din ferdig, og du kan endre størrelsen på den klar for plassering på toppen av treet ditt. Velg alle former og gruppere dem for enkel å endre størrelse. Du kan lage en duplikat av denne gruppen før du endrer størrelsen hvis du vil beholde den som en sikkerhetskopi.
Vi ønsker å redusere kloden til halvparten av størrelsen, så velg gruppen du nettopp har laget og finn Forvandle panel på høyre side av Affinity Designer-grensesnittet. Hvis det ikke allerede er åpent, gå til Vis> Studio> Transform. I Transform panelet W (bredde) felttype / 2 På slutten av gjeldende verdi trykk deretter TAST INN. Dette vil halvere den nåværende bredden.
Gjør det samme i H (høyde) feltet for å halve høyden.
Din halv størrelse kloden er klar til bruk, så senter den på toppen av treet som det.
Dupliserer dekorasjonen du nettopp har plassert på treplaten og halver størrelsen på nytt med samme metode for tilsetning / 2 til slutten av Forvandle panelets H og W Enger. Nå har vi en mindre gul klokke som vi kan sette på treets hoveddel, og alt vi trenger er noen ekstra farger for å gjøre våre dekorasjoner mer livlige. Lag tre ekstra duplikater av den mindre kloden, slik at vi kan gjøre dem til blå, lilla og røde versjoner.
Bytt opp fargene på tre nye glober slik at du får følgende:
Den blå kloden bruker disse fargene:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C Den lilla verden bruker disse fargene:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C Den røde kloden bruker disse fargene:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Med disse mindre glober nå gjort kan du plassere dem rundt treet ditt for å dekorere slik:
Nå skal vi legge til noen siste mindre dekorasjoner for å få inn litt ekstra detalj. Bruk pennverktøyet til å tegne denne formen med fyllfarge # FFDB1F:
Legg merke til at kantene følger samme vinkel som de ytre kantene på trepartiene.
Som vi gjorde med vår klokke, er denne formen faktisk trukket med dobbel størrelse, noe som igjen gjør det lettere å plassere noder på rutenettet. Bruke Forvandle panel for å halvere størrelsen som vi gjorde tidligere ved å legge til / 2 til slutten av H og W Enger. Formenes topp- og bunnkanter bør nå være en liten grid enhet lang.
Lag tre duplikater av formen og farg dem # 1E98B0 for blå, # 721EB0 for lilla og # 831C1A for rødt. Dupliser alle fire former og vri dem horisontalt. Du bør nå ha åtte figurer totalt.
Ta disse figurene og spred dem rundt treet ditt. Bruk figurer hvis vinkler samsvarer med ytre kanten av siden av treet du legger dem på.
Og det er det! Vårt juletrebilde er ferdig.
Nå er vårt design ferdig, og vi skal få den klar til bruk på nettet som en SVG.
Først må vi endre dokumentet til de samme dimensjonene som vårt tre, så vårt SVG er visningsboksen parameteren vil bli satt til riktig størrelse. Hvis vi eksporterte akkurat nå visningsboksen ville bli satt til 1024x1024, noe som betyr hvor du brukte juletreet SVG, det ville ha store hull i størrelsen akkurat som vårt dokument gjør nå.
Pass på at du ikke har noe på lerretet som er valgt, og se deretter på kontekstverktøylinjen øverst i Affinity Designer-grensesnittet, og du bør se Dokumentoppsett knapp. Klikk på det og en boks vil dukke opp der du kan endre dokumentdimensjonene dine. Sett 280 piksler for bredden og 568px for høyden. Så lenge du har lagt figurene dine forsiktig, må disse dokumentdimensjonene fungere for deg. Pass på at du har Anker til side valgt og ikke skalere, trykk deretter på OK.
Umiddelbart etter rescaling treet ditt vil sannsynligvis ikke være sentrert. For å fikse dette, velg alt i dokumentet med CTRL + A, gruppere det med CTRL + G, velg den gruppen, og dra den til en sentrert posisjon.
Gå nå til Fil> Eksporter og i boksen som dukker opp velger du SVG fane. Pass på at forhåndsinnstillingen er angitt SVG (for web) er valgt.
Sørg også for at du ser meldingen (Ingenting blir rasterisert). Hvis i stedet sier meldingen deg noe vil bli rasterized, gå gjennom arbeidet ditt og sørg for at du ikke ved et uhell har satt noen former til en blandemodus annet enn Normal.
Når du er klar, klikk Eksport og lagre din SVG.
Nå har du din SVG-fil klar, la oss se på et par måter du kan bruke den på.
Den enkleste måten er bare å laste den inn i HTML-en din som du ville noe annet bilde, med kode som dette:
SVG-skjønnheten er imidlertid, du kan også ta innholdet i SVG-filen og lime den direkte inn i HTML-en din for å bruke bildet inline.
For å gjøre dette, åpne SVG-filen i et tekstredigeringsprogram og kopier alt fra og med div Du kan stile for å kontrollere bildens størrelse og posisjon.
For å se denne tilnærmingen i aksjon, se dette eksemplet på CodePen:
Så det er slik du kan lage en SVG-illustrasjon ved hjelp av Affinity Designer! Prosessen er ikke så forskjellig fra hvilken som helst annen form for design som er gjort i Affinity Designer, med forbeholdene du bare må passe på for ikke-standard blandingstilstander og altfor komplekse former. Behovet for flade farger og preferanse for enkle former gjør isometriske illustrasjoner spesielt godt egnet til SVG.
For å lære mer om bruk av Affinity Designer, sjekk ut våre opplæringsprogrammer og kurs, og mens du er på det, sjekk ut våre SVG opplæringsprogrammer og kurs også.
