Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Affinity Designer
Webdesign

Come creare un SVG Isometric Christmas Tree in Affinity Designer 

by
Difficulty:BeginnerLength:LongLanguages:

Italian (Italiano) translation by Martina Crisante (you can also view the original English article)

Final product image
What You'll Be Creating

In questo tutorial faremo il tifo della stagione creando un'illustrazione dell'albero di Natale SVG che puoi usare in qualsiasi sito web. Creeremo l'illustrazione in Affinity Designer e sfrutteremo la funzionalità di esportazione SVG specifica del programma. 

Nota : i passaggi seguenti presuppongono un livello base di familiarità con Affinity Designer. In caso contrario, è possibile ottenere la palla con il nostro corso Avvio rapido Affinity Designer .

La creazione di grafica SVG in Affinity Designer è una questione abbastanza semplice, con solo un paio di "trucchi" da evitare. Uno in particolare è assicurarsi di non utilizzare modalità di fusione diverse da "Normale" in qualsiasi punto del documento.   Se lo fai, la tua immagine sarà parzialmente rasterizzata, vanificando l'intero scopo della grafica SVG, (la "S" sta per "Scalabile"). Detto questo, mentre non è possibile utilizzare diversi metodi di fusione, è possibile utilizzare diverse impostazioni di opacità. 

Un'altra cosa a cui prestare attenzione è cercare di mantenere le forme il più semplici possibile in modo che le dimensioni del file siano ridotte al minimo. Ad esempio, l'utilizzo di tipi di tratti  Manterremo le nostre tecniche di illustrazione di base in questo tutorial per essere il più amichevole possibile SVG. 

Cominciamo! 

1. Impostare il documento e la griglia isometrica

Crea un nuovo documento e seleziona Web dal menu a discesa Tipo nella finestra di dialogo di creazione del documento. Imposta la larghezza della pagina e l' altezza della pagina su 1024 px.

Quindi andiamo avanti e impostiamo la nostra griglia isometrica. Nel menu lungo la parte superiore di Affinity Designer vai su Visualizza> Grid e Axis Manager e vedrai apparire una finestra di impostazioni della griglia. Cambia queste impostazioni:

  • Controlla la griglia
  • Deseleziona Usa griglia automatica
  • Passa dalla modalità griglia da base a avanzata
  • Dal menu a discesa Tipo di griglia selezionare isometrico
  • Lasciare l' impostazione Spazia a 64px
  • Cambia le divisioni in 8
Isometric grid in Affinity Designer
Griglia isometrica in Affinity Designer 

Come descriveremo la griglia isometrica 

Durante questo tutorial posizioneremo i nodi del percorso sulla griglia isometrica per creare e regolare le forme che formeranno il nostro albero di Natale.Come tale, definiremo una terminologia per descrivere la nostra griglia, così quando specificherò la dimensione che dovrebbe assumere una forma, o la distanza che un nodo deve spostare sulla griglia, saprai di cosa sto parlando. 

Quando guardi la griglia, vedrai che ha diverse linee più spesse che formano grandi diamanti, e all'interno di quei diamanti ci sono linee più sottili che formano dei diamanti più piccoli.   Ci riferiremo ai diamanti formati da linee più spesse sulla griglia come i grandi diamanti della griglia , e le loro controparti più piccole come piccoli diamanti della griglia. Quando ci si riferisce a un lato singolo di uno di questi grandi diamanti, useremo l'unità a griglia di grandi dimensioni  o la grande linea di griglia . Useremo una piccola unità di griglia  o una piccola linea di griglia  per la misurazione della griglia più piccola.

Si noti che mentre si lavora con la griglia isometrica, per posizionare accuratamente i nodi su di essa è necessario assicurarsi che lo snap sia attivo premendo l'icona del magnete presente nella barra degli strumenti superiore di Affinity Designer. 

Creare la prima sezione dell'albero 

Come puoi vedere nell'immagine di anteprima del nostro albero completato all'inizio di questo tutorial, l'area foglia sarà composta da quattro sezioni distinte di verde. Inizieremo disegnando la parte più alta dell'albero, che è anche la più piccola. 

Usa lo strumento Rettangolo,(tasto di scelta rapida M), per disegnare un rettangolo delle dimensioni che vedi nell'immagine qui sotto. Questo può essere fatto in modo piuttosto approssimativo poiché modificheremo la forma nodo per nodo.  Per consentire di modificare i nodi del rettangolo, selezionare il rettangolo e fare clic sul pulsante Converti in curva che verrà visualizzato nella barra degli strumenti contestuale sopra la tela.

Assicurati che il rettangolo non abbia bordi e imposta il colore di riempimento su #2F5628

Per poter incollare i codici colore esadecimali, è necessario che il selettore dei colori esadecimale RGB sia attivo nel pannello Studio colore . Questo pannello dovrebbe essere aperto e sul lato destro dell'interfaccia per impostazione predefinita, ma in caso contrario è possibile aprirlo selezionando Visualizza> Studio> Colore .  Fai clic sul piccolo menu a discesa in alto a destra del pannello Colore , seleziona i dispositivi di scorrimento , quindi nell'elenco a discesa all'interno del pannello seleziona Esagono RGB .

Nota che mentre stai manipolando le forme potresti trovare più semplice lavorare nella vista struttura in modo da poter vedere più chiaramente i tuoi nodi e percorsi.   Per attivarlo vai su Visualizza> Modalità di visualizzazione> Struttura . Per tornare alla visualizzazione normale, selezionare Vettore sotto lo stesso menu. 

Con lo strumento nodo, (tasto di scelta rapida A ), selezionare uno dei primi due nodi del rettangolo. Questo nodo diventerà il nodo superiore della nostra prima sezione ad albero.  Trascinarlo fino a un punto di intersezione tra i grossi diamanti della griglia a circa metà della tela e i tre e grossi diametri della griglia dalla parte superiore della tela. 

Successivamente, selezionare il nodo opposto a quello che hai appena spostato, questo diventerà il nodo inferiore della sezione dell'albero. Trascinare il nodo selezionato in modo che è direttamente sotto il nodo superiore verticalmente, ma due diamanti di grande griglia inferiore.

Ora guarda il nodo inferiore e segui la grande linea della griglia che si trova su e verso sinistra da una grande unità della griglia.  Sposta il nodo sinistro in quel punto. Fai la stessa cosa sul lato destro per il nodo giusto. Dovresti ritrovarti con la forma nella foto qui sotto. Fai attenzione a dove i nodi cadono sulla griglia e assicurati che la tua forma sia la stessa. 

E controlla che sia posizionato rispetto all'angolo in alto a sinistra del documento come visto qui: 

Ora dobbiamo aggiungere un colore di evidenziazione sul lato destro di questa sezione dell'albero per far sembrare che la luce è di colpire. Scelga la forma esistente e attivare l'inserto all'interno del pulsante di selezione a destra della barra degli strumenti superiore. Quindi disegnare un rettangolo senza bordo in una dimensione che copre il diritto metà della sezione dell'albero e impostare il colore di riempimento a #386925. Il rettangolo deve essere nidificato all'interno la forma della sezione dell'albero, come si può vedere nel pannello livelli dell'immagine qui sotto:

Per finire questa sezione dell'albero aggiungeremo un po 'di neve sul fondo. Usa lo strumento penna per disegnare una forma che è alta una singola piccola griglia e corre lungo il lato inferiore sinistro della sezione.  Dovrebbe essere annidato all'interno della sezione ad albero, in modo tale che ogni overflow venga troncato. Riempi con il colore #A8BCA7.

Nota che la neve diventa verde chiaro, non completamente bianca, quindi non si fonde con nessuno sfondo bianco su cui potrebbe essere posizionata. 

Aggiungi alcuni nodi extra alla linea superiore della forma del manto nevoso e trascinali leggermente verso l'alto o verso il basso per aggiungere alcune curve in questo modo. Probabilmente dovrai disabilitare temporaneamente lo snap mentre fai ciò, facendo clic sull'icona a forma di magnete sulla barra degli strumenti superiore di Affinity Designer. 

Ora duplica questa forma di neve e girala orizzontalmente, cosa che puoi fare facendo clic sul pulsante Capovolgi orizzontalmente nella barra degli strumenti in alto.  Posizionalo in una posizione speculare sul lato destro dei tre. Quindi seleziona entrambe le forme e premi il pulsante Aggiungi sulla barra degli strumenti in alto per combinarle in un'unica forma.

3. Creare le altre sezioni di albero

La sezione superiore della struttura ora è finita così possiamo duplicarla e apportare alcune piccole modifiche per creare altre tre sezioni. Duplica la sezione e spostala verso il basso di una grossa griglia di una e mezza. Assicurati che si trovi dietro la sezione superiore nel pannello dei livelli. 

Ora manipoleremo i nodi di questa seconda sezione dell'albero per renderla più grande della prima sezione. Innanzitutto, trascina il suo nodo superiore verso l'alto in modo che sia una mezza unità di grosse dimensioni al di sotto del primo nodo in alto della sezione dell'albero.  Quindi trascinare il nodo sinistro verso l'alto e verso sinistra, lungo la linea della griglia è già su, fino a colpire l'intersezione più vicina linea grande griglia. Fare la stessa cosa per il nodo di destra.

Risultati nella seconda sezione di struttura in modalità di visualizzazione "Outline" 

 I bordi della seconda sezione dell'albero dovrebbero essere eseguiti con la stessa angolazione della prima sezione. Puoi verificare che questo avvenga confermando che la linea attraversa ogni punto di intersezione della griglia 

Grid intersection points
Punti di intersezione della griglia

Controlla e assicurati che il tuo rettangolo nidificato più chiaro copra ancora completamente il lato destro - se non hai bisogno di ingrandirlo un po '. Regola il manto nevoso per coprire il fondo del secondo albero

Ripeti il ​​processo altre due volte per creare la terza e la quarta sezione dell'albero. Ogni volta che dovresti:

  • Sposta la sezione verso il basso di un centimetro e mezzo di grandi diamanti
  • Trascina il nodo in alto fino a diventare una mezza grossa rombo inferiore rispetto al nodo superiore della sezione precedente
  • Trascina i nodi sinistro e destro lungo le loro linee della griglia fino a quando non colpisci la più vicina linea della griglia di intersezione
  • Assicurati che il rettangolo di luce copra tutto il lato destro della sezione dell'albero
  • Regola il manto nevoso per coprire la parte inferiore della sezione dell'albero su entrambi i lati

4. Crea il tronco

La forma principale della sezione fogliare del nostro albero ora è fatta in modo che possiamo passare alla creazione del tronco. Usando lo strumento penna, estrai un rettangolo largo mezzo diamante, largo circa uno e mezzo 

Aggiungi un nodo extra sul bordo più basso che puoi usare per creare un fondo appuntito. Questo nodo inferiore dovrebbe essere posizionato con una grossa griglia di grandi dimensioni al di sotto del punto più basso dell'albero, e i due bordi inferiori della forma del tronco dovrebbero correre lungo le linee della griglia. Imposta il colore di riempimento del tronco su #322B1E. Infine, annidato all'interno della forma del tronco, crea un rettangolo per coprire la metà destra con un colore di riempimento di #41351E.

Il tuo risultato finale dovrebbe assomigliare a questo:

5. Aggiungi ombre

Successivamente creeremo delle ombre che vengono proiettate su ogni sezione dell'albero, nonché sul tronco, dalla sezione ad albero sopra di esso.

Sul lato sinistro dell'albero, usa lo strumento Penna per disegnare tre rettangoli inclinati, uno sotto ciascuna delle tre principali sezioni dell'albero. Questi rettangoli dovrebbero essere alti due piccoli grani di griglia lungo la loro lunghezza e riempito con il colore #203F1A. Duplica le forme, ruotale orizzontalmente e posizionale in una posizione speculare sul lato destro. Cambia il colore di riempimento di queste forme in #12510E

Questo dovrebbe darvi ombre sotto ogni sezione di albero in questo modo:

Usando lo stesso approccio, crea due forme rettangolari oblique sul tronco, alte una e mezza unità di griglia. La forma più a sinistra dovrebbe essere colorata # 231D13 e la forma più giusta # 302511 .

Note I originally determined the colors that would look right as shadows here by setting the shapes to the same fill color as the side of the tree they were on, then setting them to blending mode Multiply. However, as mentioned earlier we can’t use Multiply in an SVG image. To get around this I used the color picker to sample the color the shadows appeared to be. Ho quindi modificato il colore di riempimento delle forme d'ombra con questo colore campionato e ripristinato la modalità di fusione su Normale , ottenendo lo stesso aspetto alla fine ma in modo SVG amichevole.

Ora per l'ombra gettata a terra dall'albero. Al di sotto di tutte le altre forme, crea un diamante della stessa larghezza della parte più bassa dell'albero.  I suoi bordi dovrebbero seguire tutte le linee della griglia e dovrebbero essere centrati sia orizzontalmente che verticalmente rispetto al tronco.   Rendi nero il suo colore e 20%impostalo su opacità. Di nuovo, mentre non possiamo usare Moltiplica per creare ombre nella nostra illustrazione SVG, possiamo tranquillamente usare l'opacità.

6. Globo decorativo 

La nostra forma d'albero complessiva è ora finita e siamo pronti per decorarla. Per fare ciò creeremo una forma a globo che possiamo ridimensionare per l'uso nella parte superiore della decorazione dell'albero e per decorazioni più piccole intorno all'albero.   Inizialmente lo creeremo a doppia dimensione, quindi sarà più facile utilizzare la griglia per allineare tutte le forme che comporranno il globo. 

Presta particolare attenzione a dove i nodi cadono sulla griglia mentre crei le seguenti forme. 

In primo luogo, crea una forma a diamante di un quarto delle dimensioni di un grande diamante a griglia, con il colore di riempimento #FFEF00. Questo formerà la parte superiore piatta del globo.

Aggiungi queste due forme per creare la curva sotto la parte superiore del globo: il colore della forma sinistra è #F1C906e il colore della forma giusta è #FFE300.

Crea i lati del globo con queste forme: il lato sinistro è colorato #E9BE1Fe il lato destro è colorato #FFDB1F.

Aggiungi la curva di fondo con le due forme, colorata # DCAF2E a sinistra e # ECCA3C a destra.

Infine, usa lo strumento per disegnare una singola forma che corrisponda alla forma dell'intero globo. Dagli il colore di riempimento # FFDB1F quindi posizionalo dietro tutte le altre forme. Ciò garantisce che non vedrai alcun colore di sfondo che mostri spazi vuoti tra le forme che compongono il globo. 

7. Decorazione superiore dell'albero

Ora che il tuo globo è finito puoi ridimensionarlo pronto per il posizionamento in cima al tuo albero. Seleziona tutte le forme e raggruppale per un facile ridimensionamento. È possibile creare un duplicato di questo gruppo prima di ridimensionarlo se si desidera conservarlo come backup. 

Vogliamo ridurre il mondo a metà della dimensione, quindi selezionare il gruppo appena creato e individuare il pannello Trasforma sul lato destro dell'interfaccia di Affinity Designer. Se non è già aperto, vai su Visualizza> Studio> Trasforma. Nel tipo di campo W (larghezza) del pannello Trasforma /2 alla fine del valore corrente, quindi premere INVIO. Questo dimezza la larghezza attuale

Fai la stessa cosa nel campo H (altezza) per dimezzare l'altezza.

Il tuo globo di dimensioni ridotte è pronto per l'uso, quindi posizionalo in cima all'albero in questo modo. 

8. Decorazioni Globe più piccole 

Duplica la decorazione che hai appena collocato sulla cima dell'albero e dimezza nuovamente la sua dimensione usando lo stesso metodo di aggiunta/2 alla fine dei campi H e W del pannello Trasforma  Ora abbiamo un globo giallo più piccolo che possiamo mettere sul corpo principale del nostro albero, e tutto ciò di cui abbiamo bisogno sono alcuni colori extra per rendere le nostre decorazioni più vivaci. Crea tre duplicati in più del globo più piccolo in modo che possiamo trasformarli in versioni blu, viola e rosse. 

Cambia i colori di tre nuovi globi in modo da ottenere quanto segue: 

Il globo blu usa questi colori: 

  • In alto: #23BEDA
  • Curva superiore sinistra: #0099B4
  • Curva superiore destra: # 22AED3
  • Lato sinistro: # 18809C
  • Lato destro: # 1E98B0
  • Curva inferiore sinistra: #1A6883
  • Curva inferiore destra: # 0D8197
  • Supporto: # 18809C

Il globo viola usa questi colori: 

  • In alto: n.9B23DA
  • Curva superiore sinistra: # 7100B4
  • Curva superiore destra: # 8B22D3
  • Lato sinistro: # 52189C
  • Lato destro: # 721EB0
  • Curva inferiore sinistra: #401A83
  • Curva inferiore destra: # 670D97
  • Supporto: # 33189C

Il globo rosso usa questi colori: 

  • In alto: # DA3623
  • Curva superiore sinistra: # B4001B
  • Curva superiore destra: # D33522
  • Lato sinistro: # 9C1B18
  • Lato destro: # B01E1F
  • Curva inferiore sinistra: # 831C1A 
  • Curva inferiore destra: # 97250D 
  • Supporto: # 9C1B18

Con questi globi più piccoli ora puoi posizionarli intorno al tuo albero per decorare in questo modo: 

9. Decorazioni quadrate 

Ora aggiungo alcune finiture più piccole per aggiungere qualche dettaglio in più. Usa lo strumento per disegnare questa forma con il colore di riempimento # FFDB1F:

Nota che i suoi bordi seguono lo stesso angolo dei bordi esterni delle sezioni dell'albero. 

Come abbiamo fatto con il nostro globo, questa forma è effettivamente disegnata a doppia dimensione, rendendo ancora più facile posizionare i nodi sulla griglia.  Usa il pannello Trasforma  per Dimezzarne le Dimensioni venire ABBIAMO Fatto in Sviluppo in / 2 alla volta dei Campi H e W. I Bordi superiore e inferiore della forma ora Sono lunghi Attori di griglia piccola.

Crea tre duplicati della forma e colori # 1E98B0 per il blu, # 721EB0 per il viola e # 831C1A per il rosso. Duplica tutte e quattro le forme e ruotale orizzontalmente. Ora dovresti avere otto forme in totale.

Prendi queste forme e disperdile intorno al tuo albero. Usa forme le cui angolazioni corrispondono al bordo esterno del lato dell'albero su cui le stai posizionando. 

E questo è tutto! La nostra immagine dell'albero di Natale è finita. 

10. Esportare come SVG 

Ora che il nostro progetto è finito, lo avremo pronto per l'uso sul Web come SVG. 

Per prima cosa, abbiamo bisogno di cambiare il documento alle stesse dimensioni del nostro albero in modo che il parametro dellanostra viewbox SVG sia impostato sulla dimensione corretta. Seesportiamo in questo momento la viewbox sarà impostata su 1024x1024, il che significa che ovunque tu abbia usato l'albero di Natale SVG avrebbe grandi spazi o dimensioni come il nostro documento ora. 

Assicurati di non avere nulla sulla tela selezionata, quindi guarda la barra degli strumenti contestuale nella parte superiore dell'interfaccia di Affinity Designer e dovresti vedere il pulsante Imposta documento.   Fare clic e verrà visualizzata una finestra in cui è possibile modificare le dimensioni del documento. Impostare 280 px per la larghezza e 568 px per l'altezza. Finché hai posizionato le tue forme con attenzione, queste dimensioni del documento dovrebbero funzionare per te. Assicurati di avere Ancora per pagina selezionata e non Ridimensiona, quindi premi OK .

Probabilmente non sarà centrato il tuo albero immediatamente dopo la riscalatura. Per risolvere questo problema seleziona tutto nel documento con CTRL + A, raggruppalo con CTRL + G, seleziona quel gruppo, quindi trascinalo in una posizione centrata.

Ora vai su File> Esporta e nella casella che appare seleziona la scheda SVG . Assicurarsi che sia selezionato l'SVG predefinito (per il web) .

Assicurati inoltre di vedere il messaggio (Niente sarà rasterizzato) . Se invece il messaggio ti dice che qualcosa verrà rasterizzato, segui il tuo lavoro e assicurati di non aver accidentalmente impostato alcuna forma su una modalità di fusione diversa da Normale .

Quando sei pronto, fai clic su Esporta e salva il tuo SVG.

11. Utilizzo di SVG 

Ora hai il tuo file SVG pronto esaminiamo un paio di modi in cui puoi usarlo. 

Il modo più semplice è semplicemente caricarlo nel tuo codice HTML come faresti con qualsiasi altra immagine, con un codice come questo: 

Tuttavia, la bellezza di SVG è che puoi anche prendere il contenuto del file SVG e incollarlo direttamente nel tuo codice HTML per usare l'immagine in linea. 

Per fare ciò, apri il tuo file SVG in un editor di testo e copia tutto a partire da <svg ... fino alla fine del file  Inserisci il codice in qualsiasi punto HTML e l'immagine verrà considerata lì. Nota: potresti anche avvolgere l'SVG con un div per controllare le dimensioni e la posizione dell'immagine.

Per vedere questo approccio in azione controlla questo esempio su CodePen: 

Avvolgendo 

Ecco come puoi creare un'illustrazione SVG usando Affinity Designer! Il processo non è molto diverso da qualsiasi altro tipo di progetto fatto in Affinity Designer, con le avvertenze che devi solo prestare attenzione ai modi di fusione non predefiniti e alle forme eccessivamente complesse.   La necessità di colori piatti e la preferenza per forme semplici rendono le illustrazioni isometriche particolarmente adatte a SVG. 

Per ulteriori informazioni sull'utilizzo di Affinity Designer, consulta le nostre esercitazioni e i nostri corsi e, mentre ci sei, consulta anche i nostri tutorial e corsi SVG.

Link correlati: 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.