Share
Wat je gaat creërenIn deze tutorial gaan we in op de cheer van het seizoen door een SVG-kerstboomillustratie te maken die je op elke website kunt gebruiken. We gaan de illustratie maken in Affinity Designer en vervolgens profiteren van de webspecifieke SVG-exportfunctionaliteit van het programma.
Notitie: in de onderstaande stappen wordt ervan uitgegaan dat u vertrouwd bent met Affinity Designer. Zo niet, dan kun je de bal aan het rollen brengen met onze cursus Affinity Designer Quick Start.
Het maken van SVG-afbeeldingen in Affinity Designer is een vrij eenvoudige zaak, met slechts een paar "valstrikken" om te voorkomen. Een daarvan is met name om er zeker van te zijn dat u geen andere overvloeimodi dan "Normaal" in uw document gebruikt. Als u dat doet, wordt uw afbeelding gedeeltelijk gerasterd, waardoor het hele doel van SVG-afbeeldingen wordt verslagen (de "S" staat voor "Schaalbaar"). Dat gezegd hebbende, kunt u, terwijl u geen verschillende overvloeimodi kunt gebruiken, verschillende dekkingsinstellingen gebruiken.
Een ander ding om op te letten is om je vormen zo eenvoudig mogelijk te houden, zodat de bestandsgrootte geminimaliseerd wordt. Het gebruik van fancy stroke-typen of texturen zal bijvoorbeeld leiden tot een enorme bestandsgrootte. We zullen tijdens deze tutorial onze illustratietechnieken basaal houden om zo SVG-vriendelijk mogelijk te zijn.
Laten we beginnen!
Maak een nieuw document en selecteer Web van de Type vervolgkeuzelijst in het dialoogvenster document maken. Stel beide in Paginabreedte en Pagina hoogte om 1024px te zijn.
Laten we vervolgens doorgaan en ons isometrische raster instellen. Ga in het menu bovenaan Affinity Designer naar Beeld> Grid en Axis Manager en je ziet een vak met roosterinstellingen verschijnen. Wijzig deze instellingen:
Accentsconagua
64px 8 
Isometrisch raster in Affinity DesignerIn deze zelfstudie plaatsen we padknooppunten op het isometrische raster om de vormen te maken en aan te passen die onze kerstboom zullen vormen. Als zodanig zullen we een aantal terminologie definiëren om ons raster te beschrijven, dus wanneer ik de grootte opgeeft die een vorm zou moeten zijn, of de afstand die een knoop op het raster moet bewegen, dan weet je waar ik het over heb.
Als u naar het raster kijkt, ziet u dat het meerdere dikkere lijnen heeft die grote ruiten vormen en binnen die ruiten zijn er dunnere lijnen die kleinere ruiten vormen. We zullen verwijzen naar de diamanten gevormd door dikkere lijnen op het rooster als grote rastendiamanten, en hun kleinere tegenhangers als kleine raster diamanten. Als we naar een enkele kant van een van deze grote diamanten verwijzen, gebruiken we de frasering grote roostereenheid of grote rasterlijn. We zullen gebruiken kleine roostereenheid of kleine rasterlijn voor de kleinste rastermeting.
Merk op dat terwijl u met het isometrische raster werkt, om knooppunten nauwkeurig te plaatsen, u moet zorgen dat magnetisch uitlijnen actief is door op het magneetpictogram op de bovenste werkbalk van Affinity Designer te drukken.
Zoals je kunt zien in de voorbeeldafbeelding van onze voltooide structuur aan het begin van deze tutorial, zal het bladgebied bestaan uit vier verschillende delen van groen. We beginnen met het tekenen van het bovenste deel van de boom, die ook de kleinste is.
Gebruik de Rechthoekgereedschap, (sneltoets M), om een rechthoek te tekenen van ongeveer de grootte die u in de onderstaande afbeelding ziet. Dit kan behoorlijk grof worden gedaan omdat we het vormknooppunt door het knooppunt zullen aanpassen. Om u toe te staan de knopen van de rechthoek te wijzigen, selecteert u de rechthoek en klikt u op de Converteren naar Curve knop die u op de contextwerkbalk boven uw canvas ziet.
Zorg dat de rechthoek geen rand heeft en stel de vulkleur in # 2F5628.
Als u in hexadecimale codes wilt plakken, moet u de RGB Hex kleurenkiezer actief in de Kleur studio paneel. Dit paneel zou standaard open moeten zijn en aan de rechterkant van de interface, maar als dat niet het geval is, kun je het openen door naar Beeld> Studio> Kleur. Klik op de kleine vervolgkeuzelijst in de rechterbovenhoek van de Kleur paneel, kies sliders, vervolgens in de vervolgkeuzelijst in het deelvenster selecteren RGB Hex.
Merk op dat terwijl je vormen manipuleert, je het misschien gemakkelijker vindt om in een overzichtsscherm te werken, zodat je duidelijker je knooppunten en paden kunt zien. Ga naar om dit te activeren Beeld> Weergavemodus> Overzicht. Kies om terug te gaan naar de normale weergave Vector onder hetzelfde menu.
Met de knooppunttool, (sneltoets EEN), selecteer een van de bovenste twee knooppunten van de rechthoek. Dit knooppunt wordt het bovenste knooppunt van onze eerste boomsectie. Sleep het naar een snijpunt tussen grote rasterdiamanten ongeveer halverwege over het canvas en drie en een halve grote rasterdiamanten vanaf de bovenkant van het canvas.
Selecteer vervolgens het tegenoverliggende knooppunt naar het knooppunt dat u net hebt verplaatst. Dit wordt het onderste knooppunt van de boomstructuur. Sleep het geselecteerde knooppunt zodat het verticaal onder het bovenste knooppunt staat, maar twee grote rastendiamanten lager.
Kijk nu naar dat onderste knooppunt en volg de grote rasterlijn die het boven en links is gevolgd door één grote rastereenheid. Verplaats het linkerknooppunt naar dat punt. Doe hetzelfde aan de rechterkant voor het juiste knooppunt. Je zou eindigen met de vorm hieronder afgebeeld. Let op waar de knooppunten op het rooster vallen en zorg ervoor dat uw vorm er hetzelfde uitziet.
En controleer of het gepositioneerd is ten opzichte van de linkerbovenhoek van het document zoals hier te zien:
Nu gaan we een markeerkleur aan de rechterkant van dit boomstructuurvak toevoegen om het eruit te laten zien alsof het licht erop valt. Selecteer uw bestaande vorm en activeer de Voeg in de selectie in knop rechts van de bovenste werkbalk. Teken vervolgens een rechthoek zonder rand op een grootte die de rechterhelft van de boomsectie bedekt en stel de vulkleur in # 386925. De rechthoek moet in de vorm van de boomsectie worden genest, zoals je kunt zien in de Lagen paneel van de afbeelding hieronder:
Om deze boomsectie af te maken, voegen we een beetje sneeuw bij aan de onderkant. Gebruik het pengereedschap om een vorm te tekenen die een enkele kleine rastereenheid hoog is en langs de linkeronderkant van de sectie loopt. Het moet in de boomsectie worden genest, zodat elke overloop wordt afgekapt. Vul het met de kleur # A8BCA7.
Merk op dat we deze sneeuwbies lichtgroen maken, niet volledig wit, dus het fuseert niet met een witte achtergrond waar het op geplaatst kan worden.
Voeg wat extra knooppunten toe aan de bovenste lijn van de sneeuwboordvorm en sleep ze iets omhoog of omlaag om een aantal bochten zoals dat te voegen. Waarschijnlijk moet je het tijdelijk uitschakelen uitschakelen terwijl je dit doet door op het magneetpictogram op de bovenste werkbalk van Affinity Designer te klikken.
Dupliceer nu deze vorm van sneeuwversiering en keer deze horizontaal om, wat u kunt doen door op de te klikken Draai horizontaal knop op de bovenste werkbalk. Plaats het in een gespiegelde positie aan de rechterkant van de drie. Selecteer vervolgens beide vormen en druk op de Toevoegen op de bovenste werkbalk om ze in één vorm te combineren.
Het bovenste boomstructuurgedeelte is nu gereed, zodat we het kunnen dupliceren en enkele kleine wijzigingen kunnen aanbrengen om de andere drie secties te maken. Dupliceer de sectie en verplaats deze met anderhalve raster diamant. Zorg ervoor dat het achter het bovenste gedeelte in het lagenpaneel staat.
Nu zullen we de knooppunten van deze tweede boomsectie manipuleren om deze groter te maken dan de eerste sectie. Sleep eerst het bovenste knooppunt omhoog, zodat het een half grote rastereenheid onder het bovenste knooppunt van de eerste boomsectie is. Sleep vervolgens het linkerknooppunt omhoog en naar links, langs de rasterlijn is het al aan, totdat u de dichtstbijzijnde kruisende grote rasterlijn raakt. Doe hetzelfde voor de juiste knoop ook.
Het tonen van de tweede boomsectie in de weergavemodus "Overzicht"De randen van de tweede boomsectie moeten onder dezelfde hoek als de eerste sectie lopen. U kunt controleren of dit het geval is door te bevestigen dat de lijn elke twee kleine rasterdiamanten door een snijpunt van het raster gaat.
Raster snijpuntenControleer en zorg ervoor dat uw lichtere gekleurde geneste rechthoek nog steeds de rechterkant volledig bedekt - anders moet u deze mogelijk een beetje vergroten. Pas de sneeuwtint aan om de onderkant van de tweede boomsectie te bedekken door de buitenste meeste knopen naar de randen van de vorm te slepen, en voeg vervolgens enkele extra knooppunten aan de vorm toe om extra curven in te voegen.
Herhaal het proces nog twee keer om de derde en vierde boomsecties te maken. Elke keer dat u zou moeten:
De hoofdvorm van het bladgedeelte van onze boom is nu gereed, zodat we verder kunnen met het maken van de stam. Teken met het pengereedschap een rechthoek met een halve grote rasterschedel breed, ongeveer anderhalve raster diamant hoog, horizontaal gecentreerd ten opzichte van de boom en geplaatst achter alle andere bestaande vormen.
Voeg een extra knooppunt toe aan de laagste rand die u kunt gebruiken om een puntige onderkant te maken. Dit onderste knooppunt moet één grote rasterdiamant onder het laagste punt van de boom worden geplaatst en de twee onderste randen van de rompvorm moeten langs rasterlijnen lopen. Stel de vulkleur van de stam in op # 322B1E. Tot slot, genest in de stamvorm, maak een rechthoek om de rechterhelft te bedekken met een vulkleur van # 41351E.
Uw eindresultaat zou er als volgt uit moeten zien:
Vervolgens gaan we schaduwen creëren die op elke boomsectie worden geplaatst, evenals op de stam, door de boomsectie erboven.
Aan de linkerkant van de boom gebruikt u het pengereedschap om drie schuine rechthoeken te tekenen, een onder elk van de bovenste drie boomsecties. Deze rechthoeken moeten twee kleine rasterdiamanten zijn hoog over hun lengte en gevuld met de kleur # 203F1A. Dupliceer de vormen, draai ze horizontaal om en positioneer ze in een spiegelpositie aan de rechterkant. Wijzig de vulkleur van deze vormen in # 12510E.
Dit zou je schaduwen moeten geven onder elke boomsectie zoals:
Gebruik op dezelfde manier twee schuine rechthoekige vormen op de stam, elk anderhalve kleine rastereenheden hoog. De meest linkse vorm moet worden gekleurd # 231D13 en de juiste vorm # 302511.
Opmerking Ik heb oorspronkelijk de kleuren bepaald die hier goed zouden zijn als schaduwen door de vormen in te stellen op dezelfde vulkleur als de zijkant van de boom waarop ze stonden en ze vervolgens in de overvloeimodus te zetten Vermenigvuldigen. Zoals eerder vermeld, kunnen we echter niet gebruiken Vermenigvuldigen in een SVG-afbeelding. Om dit te omzeilen, gebruikte ik de kleurkiezer om de kleur te proeven die de schaduwen leken te zijn. Vervolgens heb ik de vulkleur van de schaduwvormen gewijzigd in deze gesamplede kleur en de overvloeimodus ingesteld op normaal, uiteindelijk hetzelfde uiterlijk bereiken maar op een SVG-vriendelijke manier.
Nu voor de schaduw die door de boom op de grond wordt geworpen. Onder alle andere vormen, maakt u een diamant met dezelfde breedte als de onderste boomstructuur. De randen moeten allemaal langs rasterlijnen volgen, en het moet zowel horizontaal als verticaal gecentreerd zijn ten opzichte van de romp. Maak de kleur zwart en zet deze op 20% ondoorzichtigheid. Nogmaals, hoewel we niet kunnen gebruiken Vermenigvuldigen om schaduwen te maken in onze SVG-illustratie, kunnen we veilig dekking gebruiken.
Onze algehele boomstructuur is nu klaar en we zijn klaar om het te versieren. Om dat te doen, gaan we een wereldbol vormen die we kunnen verkleinen om te gebruiken voor de top van de boomversiering en voor kleinere decoraties rond de boom. We zullen het aanvankelijk op dubbel formaat maken, zodat het gemakkelijker zal zijn om het raster te gebruiken om alle vormen die de wereld vormen, uit te lijnen.
Let goed op waar de knooppunten op het raster vallen terwijl u de volgende vormen maakt.
Maak eerst een diamantvorm een kwart van de grootte van een grote rasterdiamant, met de vulkleur # FFEF00. Dit vormt de vlakke top van de wereld.
Voeg deze twee vormen toe om de curve onder de bovenkant van de wereld te creëren - de kleur van de linkervorm is # F1C906 en de kleur van de juiste vorm is # FFE300.
Maak de zijkanten van de wereld met deze vormen - de linkerkant is gekleurd # E9BE1F en de rechterkant is gekleurd # FFDB1F.
Voeg de onderste curven toe met deze twee vormen, gekleurd # DCAF2E aan de linkerkant en # ECCA3C aan de rechterkant.
Gebruik ten slotte het pengereedschap om een enkele vorm te tekenen die overeenkomt met de vorm van de hele wereld. Geef het de vulkleur # FFDB1F zet het dan achter alle andere vormen. Dit zorgt ervoor dat u geen achtergrondkleuren zult zien in kleine openingen tussen de vormen waaruit de wereld bestaat.
Nu is je wereldbol klaar en kun je het formaat wijzigen, klaar voor plaatsing bovenop je boom. Selecteer alle vormen en groepeer ze voor eenvoudige aanpassing. U kunt een duplicaat van deze groep maken voordat u het formaat wijzigt, als u het wilt behouden als een back-up.
We willen de wereldbol tot de helft verkleinen, dus selecteer de groep die je zojuist hebt gemaakt en zoek de Transformeren paneel aan de rechterkant van de Affinity Designer-interface. Als het nog niet open is ga naar Beeld> Studio> Transformeren. In het deelvenster Transformeren w (breedte) veldtype / 2 aan het einde van de huidige waarde en druk vervolgens op ENTER. Dit zal de huidige breedte halveren.
Doe hetzelfde in de H (hoogte) veld om de hoogte te halveren.
Je halve wereldbol is klaar voor gebruik, dus centreer deze zo op de top van de boom.
Dupliceer de decoratie die u zojuist op de top van de boom hebt geplaatst en halveer opnieuw de grootte met dezelfde methode om toe te voegen / 2 tot het einde van de Transformeren panel H en w velden. Nu hebben we een kleinere gele wereldbol die we kunnen plaatsen op de hoofdtekst van onze boom, en we hebben alleen nog een paar extra kleuren nodig om onze decoraties levendiger te maken. Maak drie extra duplicaten van de kleinere globe, zodat we ze in blauwe, paarse en rode versies kunnen veranderen.
Verander de kleuren van drie nieuwe bollen zodat je het volgende krijgt:
De blauwe wereldbol gebruikt deze kleuren:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C De paarse wereldbol gebruikt deze kleuren:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C De rode wereldbol gebruikt deze kleuren:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Nu deze kleinere bollen zijn gedaan, kun je ze om je boom heen plaatsen om als volgt te versieren:
Nu gaan we wat laatste kleinere decoraties toevoegen om wat extra detail in te voeren. Gebruik het pengereedschap om deze vorm met de vulkleur uit te tekenen # FFDB1F:
Merk op dat de randen dezelfde hoek volgen als de buitenranden van de boomsecties.
Zoals we met onze globe deden, is deze vorm feitelijk getekend op dubbele grootte, waardoor het gemakkelijker wordt om knooppunten op het rooster te plaatsen. Gebruik de Transformeren paneel om de grootte te halveren zoals we eerder deden door toe te voegen / 2 tot het einde van de H en w velden. De boven- en onderranden van de vorm moeten nu een kleine rastereenheid lang zijn.
Maak drie duplicaten van de vorm en kleur ze in # 1E98B0 voor blauw, # 721EB0 voor paars en # 831C1A voor rood. Dupliceer alle vier vormen en draai ze horizontaal om. Je zou nu in totaal acht vormen moeten hebben.
Neem deze vormen en strooi ze rond je boom. Gebruik vormen waarvan de hoeken overeenkomen met de buitenrand van de zijkant van de boom waar je ze op plaatst.
En dat is het! Onze kerstboomafbeelding is helemaal klaar.
Nu is ons ontwerp voltooid en zullen we het als SVG klaar maken voor gebruik op het web.
Ten eerste moeten we het document in dezelfde afmetingen veranderen als onze boom, dus onze SVG's Viewbox parameter wordt ingesteld op de juiste maat. Als we nu de Viewbox zou worden ingesteld op 1024x1024, wat betekent dat je overal waar je de kerstboom SVG gebruikte het grote gaten zou hebben, ofwel de grootte, net zoals ons document dat nu doet.
Zorg ervoor dat niets op het canvas geselecteerd is en kijk dan naar de contextwerkbalk bovenaan de Affinity Designer-interface en je zou de Documentinstellingen knop. Klik erop en er verschijnt een venster waarin u uw documentafmetingen kunt wijzigen. set 280px voor de breedte en 568px voor de hoogte. Zolang u uw vormen zorgvuldig neerzet, zouden deze documentafmetingen voor u moeten werken. Zorg dat je hebt Anker voor pagina geselecteerd en niet herschalen, druk vervolgens op OK.
Onmiddellijk na het herschalen van uw boom zal waarschijnlijk niet gecentreerd zijn. Om dit op te lossen, selecteert u alles in het document met CTRL + A, groepeer het met CTRL + G, selecteer die groep en sleep hem naar een gecentreerde positie.
Ga nu naar Bestand> Exporteren en selecteer in het vak dat verschijnt het SVG tab. Zorg ervoor dat de preset SVG (voor web) is geselecteerd.
Zorg er ook voor dat u het bericht ziet (Niets wordt gerasterd). Als in plaats daarvan het bericht iets zegt zullen worden gerasterd, ga door je werk en zorg ervoor dat je geen enkele vorm per ongeluk hebt ingesteld op een overvloeimodus anders dan normaal.
Als u klaar bent, klikt u op Exporteren en sla je SVG op.
Nu heb je je SVG-bestand klaar, laten we een aantal manieren bekijken waarop je het kunt gebruiken.
De eenvoudigste manier is om het in je HTML te laden zoals je elke andere afbeelding zou doen, met code zoals deze:
Het mooie van SVG is echter dat u ook de inhoud van het SVG-bestand kunt nemen en deze rechtstreeks in uw HTML kunt plakken om de afbeelding inline te gebruiken.
Open hiervoor uw SVG-bestand in een teksteditor en kopieer alles vanaf div je kunt stylen om de grootte en positie van de afbeelding te regelen.
Om deze aanpak in actie te zien, bekijk dit voorbeeld op CodePen:
Dus dat is hoe je een SVG-illustratie kunt maken met Affinity Designer! Het proces is niet te verschillend van elk ander type ontwerp dat wordt gedaan in Affinity Designer, met de kanttekeningen die u hoeft op te letten voor niet-standaard overvloeimodi en te complexe vormen. De behoefte aan vlakke kleuren en voorkeur voor eenvoudige vormen maakt isometrische illustraties die bijzonder geschikt zijn voor SVG.
Raadpleeg onze tutorials en cursussen voor meer informatie over het gebruik van Affinity Designer en terwijl u toch bezig bent, kunt u ook onze SVG-handleidingen en -cursussen bekijken..
