Grafici vettoriali SVG: illustrare e animare con codice
Un corso di Javier Usobiaga Ferrerweb designer
Un corso di Javier Usobiaga Ferrer, web designer
Impara a lavorare con illustrazioni vettoriali sulle tue pagine web, dalla linea all’animazione interattiva
Javier Usobiaga - Web designer e co-fondatore con Marta Armada dello studio Swwweet - ti insegnerà come ottenere il massimo dal formato SVG (Scalable Vector Graphics), un tipo di file vettoriale da utilizzare nei browser che si pone come alternativa in JPG, PNG e GIF e caratterizzati dall'essere scalabili, interattivi e reattivi. Scoprirai i suoi effetti, filtri e animazioni e potrai creare illustrazioni e pezzi animati con codice HTML, CSS e JavasScript.
Javier insegna anche a Domestika il corso Introduzione allo Sviluppo Web Responsive con HTML e CSS, in cui puoi apprendere le basi dello sviluppo web frontend, conoscenza che ti tornerà utile come base per ottenere il massimo da questo corso di grafica vettoriale SVG.
Cosa imparerai in questo corso online?
32 lezioni & 28 download
Tag e attributi di base
5 minuti, 16 secondi
Stili in SVG
4 minuti, 57 secondi
Etichette di linee, polilinee e poligoni
5 minuti, 21 secondi
Etichetta tratto (percorso)
4 minuti, 45 secondi
L'attributo viewbox
4 minuti, 6 secondi
Etichette di testo
6 minuti, 55 secondi
Cosa include questo corso?
Inizierai conoscendo il lavoro e le influenze nel mondo di SVG di Javier Usobiaga.
Di seguito capirai come funziona il formato SVG nella sua forma più elementare per modificarlo e ottimizzarlo. Per fare ciò, inizierai a scrivere un grafico di base senza editor visivi solo con l'editor di codice, scoprirai come applicare gli stili tramite attributi e CSS, saprai come funzionano le etichette di linea, polilinea e poligono e le etichette di tratto che consentono creare un numero infinito di curve, linee e punti. Vedrai anche gli attributi della casella di visualizzazione che ti consentono di creare finestre virtuali (delimitare la parte visibile di un grafico e ingrandire) e le etichette di testo.
Una volta conosciuti gli strumenti di base, sarà il momento di imparare a utilizzare altri strumenti di ottimizzazione come gli editor vettoriali e gli strumenti di codice con cui potrai raggruppare, definire e riutilizzare elementi SVG per salvare molte righe di codice.
La fase successiva sarà quella di incorporare SVG nel web, per questo Javier spiegherà i modi per caricare un SVG (immagine di contenuto, immagine di sfondo, con JavaScript ...), la sua applicazione per quanto riguarda i sistemi di icone, il suo ruolo nel web reattivo, suggerimenti per migliorare l'esperienza dello screen reader e come ottimizzare SVG in tutti i browser.
Successivamente scoprirai gli effetti in SVG (trasformazioni, gradienti, pattern, maschere e filtri) e i tipi di animazione (con CSS, sequenza, disegno e interattivo) comprese alcune animazioni avanzate come quelle realizzate con JavasScript, quelle applicate alle caselle animate , mutazioni o morphing e animazioni lungo un tratto.
Software e strumenti consigliati per questo corso
Qual è il progetto del corso?
Farai un'illustrazione con elementi vettoriali animati. Il tema è gratuito e puoi realizzare un progetto semplice o complesso come vuoi mettendo in pratica gli strumenti che hai visto durante il corso.
Progetti di allievi del corso
A chi è rivolto questo corso online?
A programmatori, designer, illustratori e chiunque abbia un interesse per il design e sia curioso di sviluppare nuovi progetti con HTML e CSS.
Requisiti e materiale
È richiesta una conoscenza di base di HTML e CSS.
Per quanto riguarda i materiali e gli strumenti necessari per completare il corso, è necessario disporre di un computer, un editor di codice e un editor di grafica vettoriale (come Illustrator, Sketch, Inkscape o simili).
Recensioni
- 10 mesi fa
Muy puntual, da la clase muy bien y es entendible, con ejercicios faciles y buenos.
- un anno fa
EXCELENTE CURSO
- un anno fa
Gostei muito
- 2 anni fa
excellent course for beginners.
- 2 anni fa
excelente curso lo recomiento explica muy bien y se entiende todo
Gode anche del suo ruolo di insegnante di Web Design in rinomati laboratori e scuole come Elisava, IDEP.
Usobiaga comprende il web nella sua interezza, non solo quanto può essere bello sullo schermo del computer, ma anche la sua usabilità in diversi dispositivi e circostanze.
Nelle sue parole "Penso che sia importante quanto l'estetica sia quanto velocemente si carica o quanto bene risponde, e mi sembra che nel nostro settore spesso ce lo dimentichiamo".
Contenuti
- U1
introduzione
- Presentazione
- Influssi
- U2
SVG di base
- Tag e attributi di base
- Stili in SVG
- Etichette di linee, polilinee e poligoni
- Etichetta tratto (percorso)
- L'attributo viewbox
- Etichette di testo
- U3
Strumenti e ottimizzazione
- Editor vettoriali ed esportazione
- Organizzazione SVG
- Ottimizzazione SVG
- U4
Incorporazione di SVG nel web
- Modi per caricare un SVG sul Web
- Set di icone
- SVG reattivo
- Accessibilità in SVG
- Supporto del browser
- U5
Effetti in SVG
- Trasformazioni
- Degradato
- Modelli
- Maschere e tracciati di ritaglio
- Filtri
- U6
Animazione in SVG
- Tipi di animazione in SVG
- Animazione con CSS
- Animazione in sequenza
- Animazione disegnata
- Animazione interattiva
- U7
Animazione e interazione avanzate
- Animazione con JavaScript
- Librerie JavaScript per l'animazione
- Casella di controllo animata
- Mutazione (morphing) in SVG
- Animazione lungo un percorso
- Ispirazione
- PF
Progetto finale
- Grafica vettoriale SVG: illustra e anima con il codice
Cosa aspettarsi da un corso Domestika
Impara al tuo ritmo
Divertiti imparando comodamente da casa e senza orari. Sei tu a decidere quando seguire le lezioni.
Impara dai migliori professionisti
Impara i metodi e le tecniche più utili insieme ai migliori professionisti del settore creativo.
Conosci insegnanti di grande esperienza
Ogni insegnante ti trasmetterà le sue conoscenze con passione e spiegazioni chiare, offrendoti una prospettiva professionale in ogni lezione.
Attestati
PLUSSe hai un abbonamento Plus, riceverai un attestato personalizzato firmato dall'insegnante per ogni corso completato. Condividilo sul tuo portfolio, sui social network o dove desideri.
Soyez aux premières loges
Con i nostri video di alta qualità, non ti perderai neanche un dettaglio. Grazie all'accesso illimitato, puoi vedere ogni lezione tutte le volte che vuoi e perfezionare le tue abilità.
Condividi conoscenze e idee
Fai domande, chiedi pareri e offri soluzioni. Condividi la tua esperienza di apprendimento con gli altri allievi della community appassionati di creatività.
Interagisci con una community creativa globale
La community di Domestika è composta da milioni di utenti di tutto il mondo: persone curiose, piene di voglia di esplorare ed esprimere la propria creatività.
Segui corsi prodotti da veri professionisti
Domestika seleziona gli insegnanti con cura e produce ogni corso internamente, per garantirti un'esperienza di apprendimento online di eccellente qualità.
Domande frequenti
SVG (Scalable Vector Graphics) è un formato basato su XML per creare grafici vettoriali che si ridimensionano senza perdere qualità. È molto usato nello sviluppo web per icone, illustrazioni, animazioni e grafici interattivi.
Il corso è pensato per chi ha conoscenze intermedie nello sviluppo web. Si consiglia di avere una base di HTML, CSS e JavaScript per sfruttare al meglio i contenuti.
Devi conoscere le basi di HTML, CSS e JavaScript, oltre a essere familiare con un editor di codice. Non serve essere esperti, ma una base nelle tecnologie web ti aiuterà a seguire il corso.
Imparerai a creare grafici SVG personalizzati, animare elementi con CSS e JavaScript, integrare icone, applicare stili avanzati, lavorare con tracciati, gradienti e pattern, e ottimizzare i file SVG per il web.
Il corso ti insegna ad animare SVG usando JavaScript accedendo al DOM e modificando gli attributi, e con CSS usando keyframes per creare effetti visivi, transizioni e sequenze animate.
Il corso spiega che gli attributi SVG come fill e stroke permettono stili diretti, mentre il CSS offre più controllo, riutilizzo e manutenzione, particolarmente utile in progetti grandi e componenti riutilizzabili.
Imparerai a usare l'attributo viewBox, regolare preserveAspectRatio e applicare tecniche di design responsive per far sì che gli SVG si adattino fluidamente a qualsiasi dispositivo o risoluzione.