Ottimizzazione grafica web
Le informazioni grafiche vengono trasmesse molto più lentamente delle informazioni di testo e il tempo di caricamento delle immagini è proporzionale alla loro dimensione. file grafici. Pertanto, il caricamento rapido delle pagine Web richiede una dimensione ridotta delle immagini grafiche incorporate in esse, che si ottiene ottimizzandole. L'ottimizzazione dell'immagine è intesa come la sua trasformazione, che fornisce la dimensione minima del file mantenendo il necessario questo caso qualità dell'immagine, che si ottiene principalmente riducendo il numero di colori nelle immagini grafiche, utilizzando formati di file compressi e speciali e ottimizzando le impostazioni di compressione per i singoli frammenti di immagine.
Illustrator dispone di strumenti di ottimizzazione delle immagini integrati che forniscono un processo di ottimizzazione rapido ed efficiente attraverso una varietà di metodi di anteprima. L'anteprima dà un'idea abbastanza precisa di come apparirà l'immagine ottimizzata in tempo reale, il che aiuta a valutare il risultato dell'ottimizzazione e scegliere quello giusto. impostazioni desiderate. E puoi ottimizzare sia le immagini create direttamente in Illustrator, sia altre, come le foto che intendi inserire in un sito web.
I parametri di ottimizzazione sono impostati nella finestra Salva per Web (Salva per Web), causata dal comando omonimo dal menu File (File). Il programma offre di utilizzare una delle quattro modalità di anteprima, ma due sono le migliori per valutare la qualità dell'ottimizzazione:
Entrambe le modalità consentono di risparmiare notevolmente tempo nella ricerca. L'opzione migliore ottimizzazione, in quanto eliminano la necessità di salvare le immagini da diverse impostazioni ottimizzazione e loro successiva confronto visivo. Inoltre, è possibile valutare non solo la qualità dell'immagine ottimizzata, ma anche le sue dimensioni e il tempo di caricamento quando diverse opzioni connessioni. Per fare un confronto, la modalità più conveniente è 4-Up (quattro opzioni), che consente di valutare visivamente l'impatto della compressione o della riduzione della tavolozza sulla qualità e sulle dimensioni dell'immagine e, infine, di determinare i migliori parametri di ottimizzazione.
Illustrator consente di ottimizzare la grafica Web non solo nei formati GIF, JPG, PNG-8 e PNG-24, ma anche in SWF e SVG. Le immagini indicizzate che hanno un numero ridotto di colori vengono salvate in formato GIF. Per salvare immagini a colori e in scala di grigi, foto e grafica ricca di colori come i riempimenti sfumati, viene utilizzato il formato JPG. Per immagini a colori con aree trasparenti, applicare Formato PNG, che consente di salvare sia immagini indicizzate che a colori, mentre in PNG-8 il numero massimo possibile di colori per un'immagine ottimizzata è 256 e in PNG-24 un'immagine può avere milioni di colori, quindi è simile al formato JPEG. La differenza tra PNG-24 e JPEG è che il metodo di compressione utilizzato per ottimizzare le immagini PNG-24 non comporta una perdita di qualità, ma aumenta le dimensioni del file. I formati SVG e SWF combinano grafica, testo e componenti interattivi e possono anche essere ottimizzati.
Considera un esempio specifico di ottimizzazione delle immagini. Supponiamo che nel programma Illustrator sia stato sviluppato un emblema del sito (Fig. 3), originariamente salvato in formato AI. Un tentativo di ottimizzarlo immediatamente per il Web non porterà a nulla di buono, poiché in questo caso l'immagine verrà ritagliata automaticamente, il che non terrà conto della vera posizione dell'iscrizione ottenuta a seguito della deformazione (Fig. 4 e 5).
Proviamo quindi ad esportare lo stemma in formato PSD con il comando File=>Esporta (File => Esporta) la dimensione dell'immagine creata sarà di 143 KB. Apri il file PSD risultante e usa il comando File=>Salva per Web (File=>Salva per Web). Dato il numero limitato di colori coinvolti nell'immagine, in questo caso, il formato GIF è ottimale, con le impostazioni specifiche di cui è necessario decidere. Sperimentando con le impostazioni, puoi vederlo migliore qualità fornisce l'algoritmo di compressione predefinito del programma, Selective. Per quanto riguarda lo smoothing, poi, data la presenza di un gradient fill, è meglio scegliere un algoritmo con generazione di rumore Noise (Fig. 6). La dimensione del file di ottimizzazione risultante sarà di 6.729 KB (Fig. 7), mentre verrà preservata la trasparenza dello sfondo, facilmente verificabile salvando l'immagine GIF insieme al file HTML (Fig. 8). Di conseguenza, in questo esempio, i file emblem.html e emblem.gif sono stati ottenuti nella cartella Primer1.
Un elemento di design specifico indispensabile di qualsiasi pagina Web sono i pulsanti di controllo grafico. È semplicemente impossibile immaginare una pagina senza di loro. I pulsanti di disegno oggi sono diventati un genere speciale e Illustrator ti consente di creare le opzioni più complesse. Ad esempio, i pulsanti progettati come oggetti griglia e (o) con maschere sembrano molto più efficaci di quelli normali.
Considera l'opzione di creare un pulsante rotondo in rilievo in Illustrator. Disegna un oggetto vettoriale riempito con un colore arbitrario sotto forma di un cerchio (Fig. 9) e convertilo in una griglia con il comando Oggetto => Crea mesh sfumata (Oggetto => Crea una mesh sfumata), specificando quattro righe e quattro colonne, e nell'elenco Aspetto (Visualizza) selezionando l'opzione To Center Highlight (Illumination) uguale a 60 (Fig. 10). Seleziona lo strumento Selezione diretta e fai clic nell'angolo in alto a sinistra dell'oggetto, selezionando i punti di ancoraggio situati lì (Fig. 11). Cambia il colore della cella corrispondente in bianco selezionandolo nella palette Campioni (Fig. 12).
Prendi lo strumento Ellisse (Ellisse), imposta il puntatore del mouse al centro del cerchio creato prima di questo e, tenendo premuti i tasti Alt e Maiusc, allunga il nuovo cerchio sopra quello vecchio in modo che sia 1-2 pixel più grande del vecchio su tutti i lati. Rendilo un bordo nero ( tratto) largo 1-2 pixel e riempilo con un gradiente radiale nella direzione dal rosso al bianco (Fig. 13). Trascina l'oggetto vettoriale creato di 1-2 pixel a destra e in basso, quindi, senza rimuovere la selezione, fai clic destro su di esso e da menù contestuale selezionare il comando Disponi=>Porta in secondo piano. Di conseguenza, otteniamo uno spazio vuoto per il pulsante mostrato in Fig. 14.
Di norma, su qualsiasi pagina Web sono presenti più pulsanti dello stesso tipo, che differiscono, ad esempio, solo per la direzione delle frecce disegnate su di essi, che indicano la direzione di spostamento nel sito. Si consideri il caso più semplice di avere due pulsanti, uno dei quali, con una freccia in giù, significa passare alla pagina successiva, e il pulsante con una freccia in alto a quella precedente. Come spazio vuoto per la freccia, prendiamo un triangolo regolare disegnato con lo strumento Poligono (Poligono), dipinto di nero e, per un effetto maggiore, progettato anche come oggetto mesh. Spostiamo la freccia sul pulsante e regoliamo la posizione di tutti gli oggetti l'uno rispetto all'altro utilizzando i pulsanti corrispondenti della palette Allinea (Allineamento). Il primo dei pulsanti ricevuti è mostrato in fig. 15. Crea una copia del livello con il pulsante selezionando il comando Duplica livelli livello, come risultato otterremo due livelli identici. Quindi selezionare la freccia sulla copia del livello e ruotarla di 180° selezionando il comando Trasforma=>Ruota Trasformazione=>Ruota dal menu contestuale. Otteniamo lo stesso pulsante mostrato in Fig. 16. Si noti che è molto più conveniente memorizzare tutti i pulsanti dello stesso tipo di un progetto in un file su livelli diversi, come dimostrato in questo caso.
Ora devi salvare le opzioni ottimizzate per ciascuno dei pulsanti. Rendi prima invisibile il livello inferiore, in questo caso verrà mantenuto il pulsante sul livello superiore. Selezionare il comando File=>Salva per Web (File=>Salva per Web), configurare i parametri di ottimizzazione del pulsante, ad esempio, come mostrato in fig. 17, fare clic sul pulsante Salva e immettere un nome file. Il pulsante salvato come risultato è mostrato in Fig. 18. Ora rendi visibile il livello inferiore, rendi invisibile il livello superiore e salva il secondo pulsante allo stesso modo, assegnandogli un nome diverso. Il risultato è mostrato in fig. 19.
Ora non resta che assicurarsi che i pulsanti abbiano un bell'aspetto sulla pagina Web e posizionarli su una pagina personalizzata (Figura 20). Di conseguenza, in questo esempio, nella cartella delle immagini (la cartella Primer2) sono stati ottenuti il file Primer2.html e due immagini grafiche.
Se lo si desidera, durante il processo di ottimizzazione, il pulsante può essere facilmente trasformato in una fetta. In questo caso, dopo aver selezionato il comando File => Save for Web (File => Save for Web) e aver impostato i parametri di ottimizzazione, selezionare lo strumento Slice Select dalla palette degli strumenti e fare doppio clic sull'immagine, che si trasformerà automaticamente in una fetta con numero di serie 1 (Fig. 21). Facendo nuovamente doppio clic si aprirà la finestra Opzioni sezione, in cui sarà necessario specificare un collegamento e, facoltativamente, modificare il nome della sezione (Fig. 22), quindi salvare l'immagine ottimizzata. Il risultato in questo caso saranno i file Primer3.html (Fig. 23) e Primer3.gif (cartella Primer3).
Un modo per ravvivare una pagina è introdurre elementi di design che cambino la loro aspetto(o stato) a seconda del comportamento del mouse o, più raramente, in caso di qualsiasi altra situazione: zoom, scorrimento, caricamento, errori, ecc.
Tra questi elementi i più famosi sono i rollover (dall'inglese roll over to roll, roll over) elementi che cambiano aspetto sotto l'influenza del mouse. I pulsanti animati sono esempi di rollover tipici. I rollover vengono spesso utilizzati durante la creazione di altri elementi di navigazione del sito. In effetti, qualsiasi rollover non è una, ma diverse (fino a quattro) immagini, ciascuna delle quali corrisponde a un evento specifico. Gli eventi principali sono considerati i seguenti: Normale stato normale, Sopra passando il cursore del mouse sopra l'elemento e Giù premendo il pulsante sinistro del mouse quando ci si passa sopra. In teoria, possono essere coinvolti eventi come Clic rilasciando il pulsante sinistro del mouse dopo aver fatto clic, Su dopo aver rilasciato il pulsante, Fuori quando si esce dalla zona attiva. Tuttavia, in pratica, è più spesso limitato a cambiare l'elemento solo per i primi tre o anche due eventi.
Ribaltamenti classiciIn senso classico, un rollover è una serie di immagini grafiche in formato GIF e il relativo codice HTML, grazie al quale, a seconda del comportamento del mouse, un'immagine ne sostituisce un'altra nella finestra del browser.
Illustrator non è progettato per creare direttamente rollover in senso classico, ma può aiutare con lo sviluppo degli elementi iniziali per loro. L'idea in questo caso è creare un livello con un'immagine corrispondente al primo evento. Quindi crea una copia del livello e trasforma l'immagine in modo che corrisponda al secondo evento e così via. L'immagine a strati risultante viene esportata in un file PSD con i livelli conservati, sulla base del quale viene creato un rollover nel programma Image Ready. Il vantaggio di utilizzare Illustrator, come in molti altri casi, è una serie di sue interessanti funzionalità che non sono disponibili in altri. strumenti software, insieme alla comodità della trasformazione della grafica vettoriale.
Proviamo a creare un rollover sotto forma di un'iscrizione che cambia colore a seconda del comportamento del mouse. Apri Illustrator e crea una forma a forma di rettangolo arrotondato e pieno di nero (Fig. 24), creane una copia e posizionala in una parte libera dello schermo. Converti la prima copia del rettangolo in un oggetto mesh con un'evidenziazione al centro (Oggetto=>Crea oggetto mesh gradiente=>Create mesh gradiente comando), specificando quattro righe e dieci colonne (Fig. 25). Attiva la seconda copia del rettangolo e imposta un riempimento sfumato, simile a quello mostrato in fig. 26. Sovrapponi l'oggetto gradiente sopra la mesh, riduci l'opacità dell'oggetto gradiente a circa l'80% e la dimensione dell'oggetto gradiente a circa 1 pixel per simulare un effetto di rigonfiamento alla fine. E poi sopra gli oggetti stampa l'iscrizione. Nella sua forma originale, lascia che abbia un colore bianco che corrisponderà allo stato Normale (Fig. 27), quindi quando lo stato di rollover cambia, il colore dell'iscrizione cambierà, ad esempio, in verde quando l'indicatore del mouse è ci si passa sopra (stato Sopra) e diventa blu quando si preme il pulsante del mouse (stato Giù).
Presta attenzione alla palette Livelli in questa fase c'è solo un singolo livello in essa. Crea due copie di questo livello usando il comando Duplica livello dal menu della palette Livelli, ci saranno tre livelli nella tavolozza (Fig. 28). Quindi, nella prima copia del livello, cambia il colore dell'iscrizione in verde e nella seconda in blu (Fig. 29). Di conseguenza, si otterrà lo spazio vuoto necessario per il rollover.
Costo esportazione data immagine in formato PSD con livelli conservati, utilizzando il comando File=>Esporta (File=>Esporta) e selezionando modello di colore RGB(figura 30). Aprire il file PSD generato in ImageReady (figure 31 e 32). Crea fotogrammi basati su livelli scegliendo il comando Crea fotogrammi da livelli (Crea fotogrammi da livelli) dal menu della palette Animazione. La finestra Animazione apparirà come in fig. 33. Questo creerà inizialmente un singolo stato Normale nella palette Rollover.
Quindi, nella finestra Animazione, seleziona il fotogramma corrispondente allo stato al passaggio del mouse e il livello Copia livello 1 verrà automaticamente selezionato nella palette Livelli (Fig. 34). Vai alla palette Rollover e fai clic sul pulsante Crea stato rollover (Crea uno stato rollover) fig. 35, che farà apparire lo stato Over State nella palette Rollover (Figura 36). Crea uno stato Down allo stesso modo. Attivate lo stato Normale nella palette Rollover ed eliminate tutti i fotogrammi nella palette Animazione, eccetto quello che dovrebbe corrispondere allo stato Normale. Di conseguenza, per ogni stato del rollover nella palette Animazione ci sarà un solo fotogramma (Fig. 37, 38 e 39).
Riso. 38. Vista dell'immagine, della finestra Animazione e delle palette Livelli e Rollover per lo Stato Sopra
Verificare il risultato facendo clic sul pulsante Anteprima nel browser predefinito (Anteprima nel browser) sulla barra degli strumenti e recandosi nella finestra del browser (Fig. 40). Successivamente, salva il file utilizzando il comando File=>Salva ottimizzato (File=>Salva con ottimizzazione) e specificando l'opzione HTML e immagini (*.html). Come risultato, in questo esempio, sono stati ottenuti il file Primer4.html e una serie di immagini grafiche nella cartella images.
Riso. 40. Finestra del browser con elemento Rollover
Rollover SVGLa crescente popolarità del formato SVG (Scalable Vector Graphics scalable vector graphics), creato sulla base dello standard XML, consente inoltre di ottenere una varietà di elementi interattivi, in particolare i rollover, solo in pratica questo è implementato in un modo completamente diverso modo. Vale la pena notare che la creazione di rollover SVG interattivi, a differenza di quelli classici, quando il codice HTML corrispondente viene generato in modo completamente automatico, richiede conoscenza linguaggio javascript e comprendere i principi di base della programmazione orientata agli oggetti.
Per lavorare con gli oggetti SVG, è stata progettata una tavolozza speciale Interattività SVG, che è facile da aprire utilizzando il comando Finestra => Interattività SVG (Finestra => Interattività SVG) fig. 41.
Prendere in considerazione questa opzione creando un rollover sull'esempio di un pulsante interattivo, il colore dell'etichetta su cui cambierà da nero a blu quando si passa il mouse sopra e tornerà al nero quando il mouse lascia l'area attiva.
Crea un pulsante rettangolare con bordi arrotondati e scegli un riempimento sfumato adatto, ad esempio, come mostrato in fig. 42. Regola la trasparenza del pulsante nella palette Trasparenza (Trasparenza) in questo esempio, il valore del parametro Opacità (Opacità) è impostato al 50%. Crea una copia del pulsante, riempila di verde scuro (Fig. 43), quindi convertila in un oggetto mesh con il comando Object => Create Gradient Mesh (Object => Create Gradient Mesh), specificando quattro righe e dieci colonne , e nell'elenco Aspetto (Visualizza) selezionando l'opzione Al centro (Al centro) e impostando il valore Evidenzia (Evidenzia) uguale a 100. Riduci l'opacità del livello dell'oggetto mesh di circa il 40% (Fig. 44). Posiziona l'oggetto mesh sopra l'oggetto gradiente e il pulsante assomiglierà a quello mostrato in Fig. 45.
Riso. 44. Trasformare una copia di un pulsante in un oggetto griglia
Completa il pulsante con l'iscrizione desiderata e regola la sua posizione utilizzando i pulsanti corrispondenti della tavolozza Allinea (Allineamento). L'immagine risultante conterrà un livello con tre oggetti sovrapposti l'uno all'altro (Fig. 46). Gli eventi pianificati faranno riferimento a un oggetto di testo, quindi per comodità cambia il suo nome in Testo facendo doppio clic sull'oggetto e digitando un nuovo nome. Allo stesso modo, cambia il nome del livello da Livello 1 a Livello (Fig. 47).
L'elaborazione degli eventi comporta l'uso di procedure JavaScript, pertanto è necessario includere un file con una descrizione di tali procedure. Si chiama Events.js e viene salvato su disco nella cartella Sample Files\Sample Art\SVG\SVG quando viene installato Programma Adobe Illustratore. Per includere il file Events.js, utilizzare il comando JavaScript Files SVG Interactivity (Fig. 48). Successivamente, devi fare clic sul pulsante Aggiungi e trovare il file desiderato sul tuo disco rigido. Quando il suo nome appare nel campo URL (Figura 49), fare clic sul pulsante Fatto.
Riso. 48. Selezione del comando File JavaScript
Successivamente, dovresti definire la reazione agli eventi del mouse per l'oggetto Testo. Seleziona l'oggetto Testo, nel campo Evento della palette Interattività SVG, seleziona l'evento al passaggio del mouse elemColor(evt, "Text", "#3333FF") ciò significa che quando il mouse si trova sopra l'oggetto Testo, il suo colore cambierà in blu (Fig. 50 ). Affinché il colore del testo diventi nero dopo che il mouse ha lasciato l'area attiva, è necessario creare un altro evento onmouseout selezionandolo nel campo Evento della palette Interattività SVG. Quindi inserire il testo elemColor(evt, "Text", "#000000") nella riga dell'azione - questo restituirà nero (Figura 51).
Riso. 51. L'aspetto finale della palette Interattività SVG per l'oggetto Testo
Salvare il rollover creato come file SVG con il comando File=>Salva con nome (File=>Formato tipo file SVG , quindi configurare le opzioni per il salvataggio del file SVG come mostrato in Fig. 52. Dopo il salvataggio, verrà visualizzato un solo file essere ottenuto con l'estensione SVG, e non due, come nel caso del rollover classico, in questo caso è stato ricevuto il file Primer5.svg (cartella Primer5). Tuttavia, affinché il rollover funzioni davvero, è necessario aggiungere copia il file Events.js nella cartella con il file SVG con una descrizione delle procedure JavaScript. Successivamente, puoi verificare la funzionalità del rollover, il risultato sarà simile a quello mostrato in Fig. 53.
Il formato SVG può essere utilizzato anche per trasmettere animazioni. Proviamo a creare un semplice elemento di animazione (in questo caso si tratterà di informazioni sull'azienda), che apparirà sullo schermo al passaggio del mouse sull'oggetto grafico corrispondente e scomparirà quando il mouse viene rimosso dall'elemento interattivo.
Creiamo approssimativamente una tale serie di oggetti grafici e di testo, come mostrato in Fig. 54. Rinominiamo comodamente tutti gli oggetti creati cliccando successivamente sul nome dell'oggetto successivo nella palette Livelli ed inserendo il nome desiderato (Fig. 55). Si noti che evidenziato in Fig. 56 oggetti Text1, Text2, Text3 e Path1 saranno sempre visibili e tutti gli altri solo quando passi con il mouse sopra l'oggetto Text1.
Riso. 54. Vista originale dell'immagine
Includere il file Events.js con la descrizione delle procedure JavaScript utilizzando il comando File JavaScript dalla palette Interattività SVG, facendo clic sul pulsante Aggiungi, selezionando il file desiderato sul disco rigido e facendo clic sul pulsante Fine.
Definire una risposta all'evento del mouse per l'oggetto Text1. Seleziona l'oggetto Testo, nel campo Evento della palette Interattività SVG seleziona l'evento onmouseover e nella riga sottostante inserisci il testo elemShow(evt, "Text4"); elemShow(evt, "Percorso2") . Di conseguenza, quando il mouse si trova sull'oggetto Text1, gli oggetti Text4 e Path2 diventeranno visibili. Si noti che se devono essere eseguite più azioni quando si verifica un evento, queste devono essere specificate tramite il segno “;”. Quindi eseguire la stessa operazione per l'evento onmouseout, inserendo il testo per esso, che significherà nascondere gli oggetti (Fig. 57).
Salvare il risultato come file SVG con il comando File=>Salva con nome (File => Salva con nome), specificando il nome del file, selezionando il formato SVG nel campo Tipo di file, quindi impostando le opzioni per il salvataggio del file SVG in conformità con la fig. 58. Dopo il salvataggio, si otterrà il file Primer6.svg (cartella Primer6). Non dimenticare di copiare il file Events.js nella cartella con questo file. Se poi esegui il file creato, vedrai il risultato mostrato in Fig. 59. Questo è quasi ciò di cui hai bisogno. L'unica cosa che non era nei nostri piani era l'aspetto iniziale degli oggetti Testo 4 e Percorso 2 al caricamento. Per eliminare questo difetto, seleziona entrambi questi oggetti contemporaneamente e crea un'azione per loro elemHide(evt, "Text4"); elemHide(evt, "Path2") sull'evento onload (Figura 60). Salva nuovamente il file e verifica che gli oggetti Text4 e Path2 siano ora visibili solo quando passi il mouse sopra l'oggetto Text1.
Qualsiasi pagina Web è impensabile senza l'animazione Web, comprese le gif animate. Un modo per crearli è utilizzare l'applicazione Adobe ImageReady, che, tra le altre cose, consente di creare animazioni dai livelli. In questo caso, l'immagine multistrato stessa può essere preparata diverse applicazioni, compreso in Adobe Illustrator.
È molto semplice creare un'animazione basata su elementi della palette Simboli (Symbols), aperta dal comando Finestra => Simboli (Finestra => Simboli) o da una delle librerie di simboli che possono essere aperte utilizzando il comando Finestra => Comando Librerie di Simboli (Finestra => Librerie di Simboli ).
Ad esempio, proviamo ad aumentare la dimensione di qualsiasi oggetto-simbolo, le fasi chiave del processo di aumento dell'oggetto devono essere impostate su livelli separati. Innanzitutto, posiziona semplicemente gli oggetti simbolo uno sopra l'altro, quindi aumenta la dimensione di ciascun oggetto successivo, ad esempio, come mostrato in Fig. 61. Di conseguenza, nella palette Livelli verrà creato un livello con molti oggetti (Fig. 62). Se esporti direttamente questa immagine in formato PSD, questo non funzionerà, poiché c'è solo un livello e, naturalmente, quando apri il file PSD in ImageReady, ci sarà anche un solo livello. Pertanto, devi prima posizionare gli oggetti su livelli diversi. Questo può essere fatto in molti modi, il modo più semplice è selezionare prima il Livello 1 nella palette Livelli e utilizzare il comando Rilascia al livello (Rilascia ai livelli). Il risultato sposterà ciascuno degli oggetti sul proprio livello, ma saranno tutti nidificati in Layer 1 . Pertanto, dovrai quindi trascinare manualmente tutti i livelli nidificati parte superiore tavolozze Livelli in modo che siano sopra il livello Livello 1, quindi il livello che è diventato vuoto viene semplicemente eliminato Livello 1 (Fig. 63). Esportare l'immagine in formato PSD utilizzando il comando File=>Esporta (File => Esporta) con le impostazioni come in fig. 64.
Caricare il file PSD creato nel programma ImageReady (Fig. 65 e 66). Aprite il menu della palette Animazione Crea fotogrammi da livelli. Di conseguenza, verranno creati cinque fotogrammi, ciascuno dei quali corrisponderà al proprio livello e la finestra della tavolozza Animazione apparirà come in Fig. 67.
Successivamente, imposta la durata di ciascuno dei fotogrammi creati in questo caso, la durata di tutti i fotogrammi è impostata su 0,2 s. E poi salva l'animazione con l'ottimizzazione usando il comando File => Salva ottimizzato (File => Salva con ottimizzazione). Il risultato ottenuto può assomigliare alla Fig. 68.
Ancora più comodo per ottenere spazi vuoti che possono essere facilmente trasformati in animazione in ImageReady è utilizzare le funzioni Live Blends di Illustrator. Questo uso combinato di Illustrator e ImageReady accelera notevolmente il processo di creazione di animazioni GIF.
Ad esempio, disegna due oggetti multicolori arbitrari, quindi uniscili con i parametri appropriati (Fig. 69). È impossibile utilizzare direttamente questo file per creare un'animazione, poiché l'immagine si trova su un singolo livello (Fig. 70). Pertanto, dovrai prima posizionare ciascun elemento dell'oggetto di fusione su un livello separato. Per fare ciò, seleziona la linea nella finestra Livelli, attiva il menu della tavolozza facendo clic sulla freccia nera nell'angolo in alto a destra e seleziona il comando Rilascia in sequenza livelli (Fig. 71). Tieni premuto il tasto Maiusc, seleziona i livelli creati e posizionali sopra il livello Livello 1, quindi elimina il livello stesso Livello 1 spostandolo nel cestino di conseguenza, la tavolozza dei livelli assumerà la stessa forma di fig. 72.
Riso. 70. Stato iniziale della finestra Livelli
Esportare il file creato in formato PSD con il comando File=>Esporta (File=>Esporta). Apri il file PSD creato in ImageReady (Fig. 73). Si noti che tutti i livelli creati nel programma Illustrator appariranno nella finestra dei livelli (Fig. 74) e nella finestra Animazione ci sarà finora solo un fotogramma.
Attiva il menu della palette Animazione facendo clic sulla freccia nera nell'angolo in alto a destra della palette e seleziona il comando Crea fotogrammi da livelli come risultato, in questo esempio verranno creati cinque fotogrammi e la finestra della palette Animazione assumerà la forma secondo la fig. 75. Selezionare tutti i fotogrammi tenendo premuto il tasto Maiusc e impostare la durata del fotogramma appropriata in questo esempio, lo stesso tempo di 0,2 s viene preso per ciascuno dei fotogrammi. Quindi salvare il file con l'ottimizzazione utilizzando il comando File=>Salva ottimizzato (File => Salva con ottimizzazione), impostando l'elenco Tipo di file su Solo immagini (*.gif) . L'animazione sarà simile alla Fig. 76.
Molto più interessante non è il movimento, ma il ridimensionamento fluido degli oggetti blend. Ad esempio, puoi utilizzare la transizione di fusione già creata. In questo caso, dopo aver creato livelli separati per ciascun elemento di transizione della fusione, posizionare tutti gli oggetti uno sopra l'altro utilizzando i pulsanti Centro allineamento orizzontale e Centro allineamento verticale della palette Allinea (Fig. 77) .
Esportare il file creato in formato PSD (File=>Esporta file=>Esporta) e aprire il file PSD creato nel programma ImageReady (Fig. 78). Creare fotogrammi di animazione basati su livelli (Crea fotogrammi da livelli Crea fotogrammi da livelli) e selezionare la durata appropriata per essi (Fig. 79). E poi, per rendere l'animazione più efficace, copia i fotogrammi esistenti, ma dentro ordine inverso in modo che l'immagine prima aumenti e poi diminuisca, e così via in un cerchio (Fig. 80). Quindi salvare il file ottimizzato (File=>Salva file ottimizzato=>Salva ottimizzato). L'animazione risultante è mostrata in fig. 81.
Riso. 80. Stato della finestra Animazione dopo la duplicazione dei fotogrammi
Riso. 81. Animazione finita
Hai una o due icone che vorresti animare con l'animazione. Da dove inizieresti? Diciamo che hai file SVG, Illustrator CC e After Effects CC, ma la soluzione ti sfugge.
In questo articolo, dimostrerò come animare facilmente un file SVG, inclusa la preparazione del file SVG in Illustrator e l'importazione in After Effects CC. Spiegherò anche come puoi convertirlo in Shape Layers e aggiungere movimento. E infine, parliamo di esportazione e rendering.
Il risultato finale del lavoro.
Ora passiamo alla parte più interessante: impara come animare le immagini.
Preparazione del file SVG in IllustratorIniziamo aprendo il tuo file SVG in Adobe Illustrator CC. Animarò un'icona di una piccola macchina che è disponibile gratuitamente su Week Of Icons.
Dopo aver aperto il file, dobbiamo separare e separare tutti gli oggetti in livelli. Puoi farlo manualmente o utilizzare Rilascio ai livelli (sequenza) per accelerare il processo. Prima di importare il file in After Effects, dobbiamo salvarlo come formato di file Illustrator.
Possiamo separare gli oggetti usando Release to Layers (Sequence) per non perdere tempo prezioso. Importare e organizzare un file in After Effects CC Ora sei pronto per importare in After Effects CC. Usiamo la scorciatoia da tastiera Ctrl+I (Windows) o Comando+I (Mac) per caricare la finestra di dialogo Importa file, oppure vai su File > Importa > File... Nello stesso punto, seleziona il file Illustrator CC che abbiamo preparato e fai clic su Importa. Dovrebbe apparire una piccola finestra di dialogo con il nome del file selezionato. Seleziona Composizione dall'elenco a discesa chiamato Importa tipo .
Di più modo veloce importazione di un file - fare doppio clic sulla posizione della colonna nel pannello del progetto. Nel pannello Timeline, vedremo la nuova composizione. Facciamo doppio clic su di esso. Ora dovremmo vedere i livelli di Illustrator CC con icone arancioni a sinistra dei loro nomi.
Prima di metterci al lavoro, dobbiamo convertire tutti questi livelli in livelli di forma. Dobbiamo selezionarli tutti con Ctrl+A/Command+A , o manualmente con Shift + Left Mouse . Successivamente, fai clic con il pulsante destro del mouse sul livello e seleziona Crea> Crea forme dal livello vettoriale.
Ora che i nuovi livelli sono selezionati, trascinali nella parte superiore del pannello sopra i livelli di Illustrator CC, quindi elimina i livelli di Illustrator CC in modo che non si intromettano.
Conversione di livelli di Illustrator CC in livelli di forma in After Effects CC Anche se non necessario, è importante assegnare a ogni strato un nome e/o un colore appropriato. Questo ci consentirà di lavorare in modo più efficiente mentre ci concentriamo sui fotogrammi chiave. Nell'esempio seguente, i colori dell'etichetta corrispondono più o meno ai riempimenti dei rispettivi livelli.
Etichettare i livelli di forma con nomi, colori, etichette e posizioni appropriati è molto pratico. Usa la scorciatoia da tastiera Ctrl+K/Comando+K o Composizione > Impostazioni composizione... Da Impostazioni composizione, dobbiamo selezionare Larghezza, Altezza, Frequenza fotogrammi e Durata. Per questo progetto, ho scelto 60 fps per mantenere fluida l'animazione.
SU questo momento tutto sembra essere pronto per partire, ma c'è ancora una cosa che deve essere fatta. Abbiamo bisogno di raggruppare determinati livelli insieme in modo che i loro movimenti siano sincronizzati con il livello principale che possiamo controllare. Questo metodo si chiama Parenting.
Usa Pick Whip per assegnare un livello principale a più livelli. Nel nostro esempio, ho assegnato strati meno significativi (strati figlio) come parabrezza, parti del corpo, legno e corde allo strato principale del corpo (strato genitore). Questo mi ha permesso di controllare la posizione e la rotazione dell'intera macchina (escluse le ruote) utilizzando il livello genitore.
Creazione di animazioniVolevo che la macchina colpisse una roccia e restasse sospesa in aria per un po'. Volevo anche che l'albero si muovesse su e giù e aprisse il tronco. Ho iniziato costruendo la pietra, l'auto e le ruote. Quindi è arrivato il momento di superare l'ostacolo più grande: mettere l'azione sull'albero. Una volta fatto ciò, ho avuto modo di lavorare sui piccoli dettagli come la rastrelliera e le corde.
Schizzo che descrive l'animazione Il primo passaggio è stato creare un elemento o un livello rock, ma invece di tornare a Illustrator CC per aggiungere un altro livello, ho semplicemente utilizzato lo strumento Penna in After Effects CC. Questo mi ha permesso di progettare rapidamente una piccola pietra.
Oh, potente strumento penna! Il baule era un compito relativamente semplice. L'ho installato sul retro dell'auto e ho creato un punto di ancoraggio nel vertice in basso a sinistra. Usando Pick Whip , l'ho assegnato al livello genitore del corpo. Il penultimo passaggio è stato quello di dare l'effetto di rotazione, che a sua volta ha reso più realistico il momento di rimbalzo dell'auto Bodymovin in combinazione con la libreria mobile Lottie.
P.S. puoi trovare i miei file Illustrator CC e After Effects CC.
Il set di icone è disponibile per il download gratuito all'indirizzo .
Il formato di file Flash (SWF) è basato su grafica vettoriale ed è progettato per una grafica scalabile e compatta per il web. Poiché questo formato di file si basa sulla grafica vettoriale, l'oggetto mantiene la qualità dell'immagine a qualsiasi risoluzione ed è ideale per creare fotogrammi di animazione. In Illustrator, puoi creare singoli fotogrammi di animazione sui livelli e quindi esportare i livelli dell'immagine come singoli fotogrammi da utilizzare sul sito Web. Puoi anche definire simboli in un file Illustrator per ridurre le dimensioni dell'animazione. Quando viene esportato, ogni simbolo viene definito una sola volta nel file SWF.
Comando Esporta (SWF)
Fornisce il massimo controllo sull'animazione e sulla compressione dei bit.
Fornisce un maggiore controllo sulla combinazione di formati SWF e bitmap in un layout frammentato. Questo comando offre meno opzioni immagine rispetto al comando Esporta (SWF), ma utilizza le opzioni del comando Esporta utilizzate più di recente (vedere ).
Tieni a mente le seguenti linee guida quando prepari un oggetto per il salvataggio come SWF.
Usando App Dispositivo Central, puoi vedere come apparirà una grafica di Illustrator nell'app Flash Player su vari dispositivi portatili.
Inserimento di un elemento grafico di Illustrator
Le opere d'arte create in Illustrator possono essere copiate e incollate rapidamente, facilmente e facilmente Applicazione flash.
Quando incolli un elemento grafico di Illustrator in un'applicazione Flash, vengono mantenuti i seguenti attributi.
Contorni e forme
Spessore del tratto
Definizioni di gradienti
Testo (compresi i font OpenType)
Immagini correlate
Modalità di fusione
Inoltre, Illustrator e Flash supportano le seguenti funzionalità quando si incolla un elemento grafico.
Selezionando interi livelli di primo livello in un disegno di Illustrator e incollandoli in Flash, i livelli e le relative proprietà (visibilità e blocco) vengono preservati.
I formati colore di Illustrator diversi da RGB (CMYK, scala di grigi e formati personalizzati) vengono convertiti da Flash in RGB. I colori RGB vengono inseriti nel solito modo.
Quando importi o incolli la grafica di Illustrator, puoi utilizzare varie opzioni per salvare determinati effetti (come un'ombra proiettata dal testo) come filtri Flash.
Flash salva le maschere di Illustrator.
Esporta file SWF da Illustrator
I file SWF esportati da Illustrator hanno la stessa qualità e compressione dei file SWF esportati da Flash.
Durante l'esportazione, puoi scegliere tra una varietà di stili predefiniti per un output ottimale e specificare come vengono utilizzate più tavole da disegno, come vengono convertiti caratteri, livelli, testo e maschere. Ad esempio, puoi scegliere di esportare i simboli di Illustrator come filmati o grafica oppure creare simboli SWF dai livelli di Illustrator.
Importazione di file Illustrator in un'applicazione Flash
Per creare un layout completo in Illustrator e quindi importarlo in Flash in un solo passaggio, puoi salvare la grafica nel formato nativo di Illustrator (AI) e importarla con alta fedeltà in Flash utilizzando i comandi File > Importa nell'area di lavoro. File" > "Importa nella libreria".
Se il file Illustrator contiene più tavole da disegno, selezionate la tavola da disegno da importare dalla finestra di dialogo Importa Flash e specificate le impostazioni per ogni livello in quella tavola da disegno. Vengono importati tutti gli oggetti nella tavola da disegno selezionata Programma istantaneo come un unico strato. Quando importi un'altra tavola da disegno dallo stesso file AI, gli oggetti di quella tavola da disegno vengono importati in Flash come nuovo livello.
Quando si importa la grafica di Illustrator come AI, EPS o Applicazione PDF Flash conserva gli stessi attributi di quando inserisci la grafica di Illustrator. Inoltre, se il file Illustrator che stai importando contiene livelli, puoi importarli utilizzando uno dei seguenti metodi.
Converti i livelli di Illustrator in livelli Flash.
Converti i livelli di Illustrator in fotogrammi Flash.
Converti tutti i livelli di Illustrator in un livello Flash.
Ciao a tutti! Oggi proverò a fare una descrizione delle capacità del programma Adobe Illustrator, confrontandolo con le capacità di un flash. Questa non sarà un'analisi globale del programma osseo, ma piuttosto una descrizione di alcuni degli interessanti chip che ho scoperto in questo programma. Ho raccolto le informazioni pezzo per pezzo mentre le studiavo per metterle tutte in un post. Devo ammettere subito che non sono un utente illustratore super esperto, solo negli ultimi sei mesi lo uso nel disegno (prima disegnavo tutto in flash). Molti lamentano che l'illustratore sia complesso, non sempre intuitivo. In una certa misura, sono d'accordo sul fatto che dopo il flash questo programma sia difficile. Ma la cosa principale qui non è smettere, ma continuare a studiare. E dopo un paio di settimane, sorge il pensiero, come ho fatto a farne a meno prima!
Quindi, cosa mi è piaciuto dell'illustratore e cosa ho scoperto per me stesso che non è in flash.
1. Inizierò con il più semplice, ma allo stesso tempo necessario. Prova a disporre gli oggetti in cerchio in flash. In precedenza, esisteva uno strumento decorativo, ma è stato rimosso, apparentemente considerato non necessario. Abbiamo deciso che sarebbe stato più divertente farlo a mano. Illustrator ha questa funzione: Effetto - Distorci&Trasforma - Trasforma .
Tutto è veloce e semplice, impostiamo noi stessi i valori (distanza tra gli oggetti, numero di copie) nelle impostazioni.
2. Zigzag
Cosa ancora più semplice, ma comunque utile. Sembrerebbe una sciocchezza, ma in flash devi disegnare a mano, in Illustrator è questione di secondi.
3. Deformazione degli oggetti (Warp)
Non c'è niente di simile in Flash. Nell'esempio seguente, ho mostrato solo 2 modi per deformare forme semplici (Effetto - Deformazione - Arco / Pesce). In realtà ce ne sono 15. ultima versione programmi.
4. Arrotondamento automatico degli angoli (Round Corners)
Si può fare manualmente: su un oggetto grafico, se selezionato in un angolo (in tutti gli angoli), compaiono un punto bianco e un segno di linea arrotondata. Trascina il mouse, regola secondo i tuoi gusti.
Ma questo vale solo per le forme, con una linea a matita in modo leggermente diverso: applica l'effetto di arrotondamento ( Effetto - Stilizzazione - Angoli arrotondati). All'uscita otteniamo lo stesso risultato.
5. Irruvidire
L'effetto viene applicato a forme semplici (Effetto - Distorci&Trasforma - Irruvidisci). Di conseguenza, otteniamo qualcosa che assomiglia a modelli 3D a basso numero di poligoni. Penso che sia bello :) E, soprattutto, molto semplice.
6. Pucker&Bloat (Pucker & Gonfiore)
Un esempio nella foto qui sotto:
7. Estensione del modulo (percorso offset)
Nel flash c'è una funzione Espandi riempimento (estensione di riempimento), non funziona affatto con le linee della matita, a differenza di Illustrator.
8. Pennelli (pennello artistico, pennello pattern, pennello a dispersione)
Vedere l'immagine qui sotto per esempi:
9. Pennello texture (pennelli texture)
Ci sono anche molti pennelli texture in Illustrator di cui ho scritto e su come sono apparsi nuova versione veloce - . È stato notato che l'uso dei pennelli in Adobe Animate è terribilmente lento. Questo è tutto:(
10. Non sono sicuro che questo sia un trucco, ma voglio concentrarmi su un pennello con un nome divertente Pennello Blob. Situato sulla barra degli strumenti, un pennello molto carino da usare. Ha un sacco di impostazioni, mi piace più del solito. È difficile spiegare a parole i suoi benefici, è meglio provarlo una volta.
10. Dividi in griglia
Un'altra funzione utile è la funzione Split to Grid (Object-Path-Split to Grid), che consente di tagliare il modulo in segmenti uguali. Cosa ci ricorda questo? Esatto: finestre in un grattacielo. Quanto a me, una cosa interessante per disegnare, ad esempio, paesaggi urbani;)
Un altro attrezzo utile, presentato in Illustrator, probabilmente sin dalla sua prima uscita. Con esso, puoi creare, ad esempio, trame di legno:
12. Sposta (destra - Trasforma - Sposta)
Offset di un oggetto di una data distanza. Se lo si desidera, è possibile creare immediatamente una copia che verrà posizionata alla distanza desiderata dall'oggetto selezionato in orizzontale/o verticale. Una versione precedente di Flash aveva un plug-in che lo faceva questa funzione. Purtroppo non ricordo il suo nome.
È molto conveniente creare modelli senza soluzione di continuità in Illustrator (Object-Pattern-Make). Ricordo come eccellevo freneticamente in flash con la creazione di . Nella versione Illustrator di CC 2015 tutto è automatizzato, una serie di impostazioni ti aiuteranno a creare un pattern in dozzine di varianti, con pochi elementi grafici a portata di mano. In più prime versioni i programmi dovevano essere eseguiti manualmente, come in flash fino ad ora.
(Nota: il motivo può essere trasformato in un oggetto vettoriale modificabile utilizzando la funzione di espansione (Oggetto - Espandi aspetto).
14. Oggetto Mosaico (Mosaico)
Creazione palette dei colori in base all'immagine esistente. Importa l'immagine che ti piace nel malato (Apri), quindi Oggetto - Crea mosaico di oggetti. Nelle impostazioni, specifichiamo la frequenza di divisione in altezza e larghezza.
E in uscita otteniamo:
15.Blend (Miscelazione)
Utilizzato per creare gradienti. Puoi creare transizioni passo-passo, come, ad esempio, nell'immagine. Non posso dire di usarlo spesso, ma potrebbe tornare utile a qualcuno. Mi sembra che possa essere utilizzato per creare semplici immagini di sfondo.
Lo strumento può essere utilizzato anche per clonare oggetti. Posizioniamo due oggetti a una distanza l'uno dall'altro e applichiamo Opzioni di fusione, selezioniamo il numero di passaggi (il numero di oggetti clonati).
16. Strumento Crea forma. Una cosa molto utile per lavorare con le primitive. In un lampo, come mi è sembrato, è meno conveniente.
Tenendo premuto Alt e facendo clic sui segmenti selezionati, elimina i segmenti. Se trasciniamo semplicemente il mouse su diverse aree selezionate - connessioni.
Aggiunta: uno strumento che aiuta a tagliare, collegare automaticamente, ecc. forme selezionate. Quanto a me, non è molto conveniente, uso più spesso lo strumento Crea forma.
(tavole da disegno)
18.Pannello strumenti personalizzato
La possibilità di creare la tua barra degli strumenti, scartando quelle non necessarie e selezionare solo quelle che usi.
In flash, le tavole da disegno, ovvero le scene (Scene 1,2,3 ..) si trovano separatamente ed è necessario passare da una all'altra (Maiusc + F2). In Illustrator, possono essere tutti posizionati davanti ai tuoi occhi. È conveniente quando crei diverse versioni dello stesso disegno, in modo che tutte le opzioni siano davanti ai tuoi occhi per il confronto.
19. Isometrico con stili grafici
E l'ultimo: la creazione di isometrici senza utilizzare 1 clic (o meglio, 3 clic, perché abbiamo 3 lati;) utilizzando stili grafici (Stili grafici). Come è fatto, scriverò la prossima volta.
Ciò che Illustrator ha in comune con flash è la possibilità di salvare un oggetto in un simbolo (simbolo) e questo simbolo può anche essere trasferito in flash senza problemi (apri un file .ai in flash, tramite Import - Import to stage ).
Il simbolo in Illustrator ha le stesse proprietà di Flash.
E alla fine scriverò ciò che in Illustrator, secondo me, è inferiore a Flash. Sì, sì, e c'è. E questo è lo strumento di riempimento ( Paint Bucket ). Non importa quanto mi sforzi di abituarmici in illa, è più conveniente in flash.
Se i miei appunti ti sono diventati utili o se vuoi aggiungere qualcosa di tuo - benvenuto nei commenti! Buona fortuna a tutti;)
Recentemente, vari tipi di animazione della grafica SVG (Scalable Vector Graphics) su siti Web e applicazioni sono diventati molto popolari. Ciò è dovuto al fatto che tutto browser più recenti supportano già questo formato. Ecco le informazioni sul supporto del browser per SVG.
Questo articolo descrive l'esempio più semplice di animazione di un vettore SVG utilizzando il plugin Jquery leggero Lazy Line Painter.
fontePer completare e comprendere appieno questo compito, è auspicabile una conoscenza di base di HTML, CSS, Jquery, ma non richiesta se si desidera solo animare SVG) Cominciamo!
E quindi i passaggi che dobbiamo seguire:
1. Creare la struttura file corretta
Il servizio Initializr ci aiuterà in questo, dove è necessario selezionare i parametri come nell'immagine qui sotto.
2. Scarica e collega il plug-in
Poiché initializr viene fornito con l'ultimo libreria jquery, dall'archivio che dobbiamo scaricare dal repository del progetto Lazy Line Painter, solo 2 file devono essere trasferiti al nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione del plug-in potrebbe differire) si trova nella radice della cartella risultante. Il secondo è example/js/vendor/raphael-min.js.
Questi 2 file vengono inseriti nella cartella js. E li includiamo nel nostro index.html prima di main.js in questo modo:
3. Disegna una bella immagine di contorno in Adobe Illustrator
Ad esempio, puoi utilizzare le icone nell'allegato.
4. Converti la nostra immagine in Lazy Line Converter
Basta trascinare e rilasciare l'icona nella casella sottostante.
Lo spessore, il colore del contorno e la velocità dell'animazione possono essere modificati nel codice stesso che apparirà dopo la conversione!
5. Incolla il codice risultante in main.js
Ora basta incollare il codice risultante in un file main.js vuoto
Opzioni:
strokeWidth — spessore del contorno
strokeColor - colore del contorno
Puoi anche cambiare la velocità di disegno di ciascun vettore modificando il valore del parametro durata (default 600)
6. Aggiungi un po' di CSS a piacere
Rimuovi il paragrafo da index.html
Ciao mondo! Questo è Boilerplate HTML5.
E invece inseriamo un blocco in cui si svolgerà la nostra animazione
quindi aggiungi alcuni CSS al file main.css per un aspetto più gradevole:
Corpo ( sfondo:#F3B71C; ) #icons ( posizione: fisso; alto:50%; sinistra:50%; margine: -300px 0 0 -400px; )
salvare tutti i file.
Ora apri index.html in un browser moderno e goditi l'effetto.
P.S. durante l'esecuzione su una macchina locale, l'avvio dell'animazione potrebbe essere ritardato di alcuni secondi.
