Share
Cosa starai creandoIn 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 sottostanti presuppongono che tu abbia 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 di fantasia o texturing porteranno a dimensioni di file enormi. Manterremo le nostre tecniche di illustrazione di base in questo tutorial per essere il più amichevole possibile SVG.
Cominciamo!
Crea un nuovo documento e seleziona web dal genere menu a discesa nella finestra di dialogo di creazione del documento. Impostare entrambi i Larghezza della pagina e Altezza della pagina essere 1024px.
Quindi andiamo avanti e impostiamo la nostra griglia isometrica. Vai al menu lungo la parte superiore di Affinity Designer Visualizza> Grid and Axis Manager e vedrai apparire una finestra di impostazioni della griglia. Cambia queste impostazioni:
Accentsconagua
64px 8 
Griglia isometrica in Affinity DesignerDurante questo tutorial posizioneremo i nodi del percorso sulla griglia isometrica per creare e regolare le forme che formeranno il nostro albero di Natale. In quanto tale, definiremo una terminologia per descrivere la nostra griglia, quindi quando specificherò la dimensione di 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 grandi diamanti della griglia, e le loro controparti minori come piccoli diamanti della griglia. Quando ci si riferisce a un lato singolo di uno di questi grandi diamanti, useremo il fraseggio grande unità di griglia o grande linea della griglia. Useremo piccola unità di griglia o piccola linea di griglia per la più piccola misurazione della griglia.
Nota che mentre lavori con la griglia isometrica, per posizionare accuratamente i nodi su di essa devi assicurarti che lo snap sia attivo premendo l'icona del magnete che si trova nella barra degli strumenti superiore di Affinity Designer.
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.
Utilizzare il 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 su Converti in curva pulsante che vedrai nella barra degli strumenti contestuale sopra la tua tela.
Assicurati che il rettangolo non abbia bordi e imposta il colore di riempimento su # 2F5628.
Per poter incollare i codici colore esadecimali devi avere il Esadecimale RGB color picker attivo in Colore pannello di studio. Questo pannello dovrebbe essere aperto e sul lato destro dell'interfaccia per impostazione predefinita, ma se non lo si può aprire andando a Visualizza> Studio> Colore. Fai clic sul piccolo menu a discesa in alto a destra del Colore pannello, scegliere cursori, quindi nell'elenco a discesa all'interno del pannello selezionare Esadecimale 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 attivare questo vai su Visualizza> Modalità di visualizzazione> Struttura. Per tornare alla visualizzazione normale, scegli Vettore sotto lo stesso menu.
Con lo strumento nodo, (tasto di scelta rapida UN), 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 grandi diamanti della griglia a circa metà della tela, e tre e una metà dei diamanti con una griglia dalla parte superiore della tela.
Quindi, seleziona il nodo opposto a quello appena spostato: questo diventerà il nodo inferiore della sezione dell'albero. Trascina il nodo selezionato in modo che sia direttamente sotto il nodo superiore verticalmente, ma due grandi rombi di griglia più in basso.
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 aggiungeremo un colore di evidenziazione sul lato destro di questa sezione dell'albero per far sembrare che la luce lo stia colpendo. Seleziona la tua forma esistente e attiva il Inserisci all'interno della selezione pulsante a destra della barra degli strumenti in alto. Quindi disegna un rettangolo senza bordi in una dimensione che copre la metà destra della sezione dell'albero e imposta il colore di riempimento su # 386.925. Il rettangolo deve essere annidato all'interno della forma della sezione dell'albero, come puoi vedere nel Livelli pannello 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 cliccando il Capovolgi orizzontalmente pulsante sulla barra degli strumenti in alto. Posizionalo in una posizione speculare sul lato destro dei tre. Quindi selezionare entrambe le forme e premere il tasto Inserisci pulsante sulla barra degli strumenti in alto per combinarli in un'unica forma.
La sezione superiore dell'albero è ora finita in modo che possiamo duplicarla e apportare alcune piccole modifiche per creare le 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 nodo superiore verso l'alto in modo che sia una mezza unità di grosse dimensioni al di sotto del primo nodo superiore della sezione dell'albero. Quindi trascina il nodo sinistro verso l'alto e verso sinistra, lungo la linea della griglia è già attivo, fino a quando non colpisci la linea della griglia di intersezione più vicina. Fai la stessa cosa anche per il nodo giusto.
Mostra la seconda sezione dell'albero nella modalità di visualizzazione "Struttura"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 un punto di intersezione della griglia ogni due piccoli diametri della griglia.
Punti di intersezione della grigliaControlla 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 della seconda sezione dell'albero trascinando i nodi più esterni verso i bordi della forma, quindi aggiungendo altri nodi alla forma per inserire altre curve.
Ripeti il processo altre due volte per creare la terza e la quarta sezione dell'albero. Ogni volta che dovresti:
La forma principale della sezione fogliare del nostro albero ora è fatta in modo che possiamo passare alla creazione del tronco. Usando lo strumento Penna, disegna un rettangolo largo mezzo diamante a griglia larga, alto circa una griglia e mezzo di grandi dimensioni, centrato orizzontalmente rispetto all'albero e posizionato dietro tutte le altre forme esistenti.
Aggiungi un nodo extra sul bordo più basso che puoi usare per creare un fondo appuntito. Questo nodo inferiore deve essere posizionato a una grossa griglia di grandi dimensioni al di sotto del punto più basso dell'albero e i due bordi inferiori della forma del tronco devono essere disposti lungo le linee della griglia. Impostare 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:
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 due piccoli grani di griglia alti lungo la loro lunghezza e riempiti 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 dare ombre sotto ogni sezione dell'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.
Nota Originariamente ho determinato i colori che avrebbero dovuto apparire come ombre qui impostando le forme allo stesso colore di riempimento del lato dell'albero in cui erano, quindi impostandole in modalità fusione Moltiplicare. Tuttavia, come accennato in precedenza, non possiamo usare Moltiplicare in un'immagine SVG. Per aggirare questo ho usato il selettore di colori per campionare il colore che le ombre sembravano essere. Ho quindi modificato il colore di riempimento delle forme d'ombra con questo colore campionato e ripristinato il metodo di fusione Normale, ottenendo lo stesso look alla fine ma in un 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 il suo colore nero e impostalo 20% opacità. Di nuovo, mentre non possiamo usare Moltiplicare per creare ombre nella nostra illustrazione SVG, possiamo tranquillamente usare l'opacità.
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 è # F1C906 e il colore della forma giusta è # FFE300.
Crea i lati del globo con queste forme: il lato sinistro è colorato # E9BE1F e il lato destro è colorato # FFDB1F.
Aggiungi le curve di fondo con queste due forme, colorate # DCAF2E a sinistra e # ECCA3C sulla destra.
Infine, usa lo strumento penna 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.
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 seleziona il gruppo che hai appena creato e individua Trasformare pannello sul lato destro dell'interfaccia di Affinity Designer. Se non è già aperto, vai Visualizza> Studio> Trasforma. Nel pannello Trasforma W (larghezza) tipo di campo / 2 alla fine del valore corrente, quindi premere ACCEDERE. Questo dimezza la larghezza attuale.
Fai la stessa cosa in H (altezza) campo per dimezzare l'altezza.
Il tuo globo di dimensioni ridotte è pronto per l'uso, quindi posizionalo in cima all'albero in questo modo.
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 del Trasformare pannello di H e W campi. 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:
# 23BEDA # 0099B4 # 22AED3 # 18809C # 1E98B0 # 1A6883 # 0D8197 # 18809C Il globo viola usa questi colori:
# 9B23DA # 7100B4 # 8B22D3 # 52189C # 721EB0 # 401A83 # 670D97 # 33189C Il globo rosso usa questi colori:
# DA3623 # B4001B # D33522 # 9C1B18 # B01E1F # 9C1B18 Con questi globi più piccoli ora puoi posizionarli intorno al tuo albero per decorare in questo modo:
Ora aggiungeremo alcune decorazioni finali più piccole per aggiungere qualche dettaglio in più. Usa lo strumento penna 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. Utilizzare il Trasformare pannello per dimezzare le sue dimensioni come abbiamo fatto in precedenza aggiungendo / 2 alla fine del H e W campi. I bordi superiore e inferiore della forma ora dovrebbero essere lunghi un'unità di griglia piccola.
Crea tre duplicati della forma e colorali # 1E98B0 per il blu, # 721EB0 per 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.
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, quindi i nostri SVG viewBox parametro sarà impostato sulla dimensione corretta. Se abbiamo esportato in questo momento il viewBox sarebbe impostato su 1024x1024, il che significa che dovunque hai usato l'albero di Natale SVG avrebbe grandi spazi o dimensioni come il nostro documento ora fa.
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 la Impostazione del documento pulsante. Fare clic e verrà visualizzata una finestra in cui è possibile modificare le dimensioni del documento. Impostato 280px per la larghezza e 568px per l'altezza. Finché hai posizionato le tue forme con attenzione, queste dimensioni del documento dovrebbero funzionare per te. Assicurati di avere Ancora alla pagina selezionato e non Riscala, quindi premere 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 a File> Esporta e nella casella che appare seleziona il SVG scheda. Assicurati che il preset SVG (per il web) è selezionato.
Assicurati anche di vedere il messaggio (Niente sarà rasterizzato). Se invece il messaggio ti dice qualcosa volontà essere rasterizzato, passare attraverso il tuo lavoro e assicurarsi di non aver accidentalmente impostato alcuna forma su una modalità di fusione diversa da Normale.
Quando sei pronto, clicca Esportare e salva il tuo 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 div puoi stile per controllare le dimensioni e la posizione dell'immagine.
Per vedere questo approccio in azione controlla questo esempio su CodePen:
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 per 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.
