Una GIF trasparente in Adobe Illustrator viene eseguita come segue. Vai a File\u003e Salva per Web e dispositivi (Alt + Ctrl + Maiusc + S). Nella finestra che si apre, nel campo Formato file ottimizzato, prima di tutto, vai alla scheda Dimensione dell'immagine (Dimensione dell'immagine). Il fatto è che l'intera pagina rientra nella finestra di ottimizzazione per impostazione predefinita, e questo di solito non è necessario. Pertanto, nella scheda Dimensioni immagine, deseleziona la casella. Clip su tavola da disegno (Ritaglia per adattarsi alla pagina) e fare clic su Applica.
Quindi, nell'elenco di selezione del formato, selezionare GIF e selezionare la casella Trasparenza.
Successivamente, determiniamo quali colori saranno trasparenti. Tutti i colori presenti nell'immagine sono contenuti nella scheda. Tabella dei colori (Tabella colori) e vengono visualizzati come quadrati colorati. Seleziona lo strumento nella barra degli strumenti sul lato sinistro della finestra contagocce (pipetta).
Esistono due modi per definire i colori. Il modo più semplice è specificare il colore con una pipetta direttamente sull'immagine, dopodiché il colore verrà evidenziato sulla tabella dei colori con un tratto scuro. Bene, se sai esattamente quale colore dovrebbe essere trasparente, puoi selezionarlo direttamente sulla tabella dei colori facendo clic sulla casella dei colori corrispondente. E nel primo e nel secondo caso, se devi selezionare più colori, devi lavorare con il tasto Maiusc (o Ctrl) premuto. Dopo aver scelto un colore, devi istruire il programma per renderlo trasparente. Per fare ciò, fai clic sull'icona Mappa i colori selezionati su Trasparente (Aggiungi i colori selezionati alla trasparenza). Nella figura, questo pulsante è cerchiato e il colore rosso è selezionato come trasparente. Apparirà un'area trasparente sull'immagine e il quadratino sulla tabella dei colori cambierà il suo aspetto - parte di esso diventerà un triangolo bianco. Per annullare il colore selezionato, selezionarlo nella Tabella dei colori, quindi fare nuovamente clic sull'icona Trasforma i colori selezionati su Trasparente.
Qualche parola sul modo di impostare la trasparenza. Il menu a discesa è responsabile. Specifica l'algoritmo di dithering della trasparenza, in russo - L'algoritmo per la simulazione di trasparenza (Fig. sotto). È possibile scegliere tra quattro opzioni: nessuna retinatura trasparenza - nessun algoritmo, retinatura trasparenza diffusione - algoritmo diffuso, retinatura trasparenza modello - algoritmo basato su pattern e retinatura trasparenza rumore - algoritmo basato sul rumore. In modalità algoritmo diffuso, il dispositivo di scorrimento diventa attivo Quantità (Valore), che consente di modificare il valore di diffusione. Cosa mettere in pratica? A seconda dello scopo e dell'immagine. Non utilizzo questa opzione e lascio sempre l'impostazione predefinita - Nessuna trasparenza.
Fai clic su Salva: la GIF trasparente è pronta. Il lavoro è stato svolto in Adobe Illustrator versione CS4 (v.14), ma tutte le azioni e le scorciatoie da tastiera sono rilevanti per la versione precedente di CS3 (v. 13).
Ora compliciamo un po 'l'attività: creeremo un banner Flash animato. Parlare di animazioni Flash complete, in questo caso, ovviamente, non è necessario - ci sono pacchetti specializzati per questo. Ma per creare un semplice video amatoriale, puoi usare Illustrator.
In Adobe Illustrator non sono disponibili strumenti speciali e strumenti di interfaccia, come la sequenza temporale, che sono caratteristici dei programmi di sviluppo delle animazioni. Ma c'è una sottigliezza: puoi usare i livelli come cornici.
Crea un banner con solo testo.
- Raggruppa i caratteri con il comando Oggetto ›Gruppo (Oggetto ›Gruppo).
- Il prossimo compito è quello di creare oggetti contorno da caratteri font, altrimenti la corretta formazione dei livelli non funzionerà. Per fare ciò, evidenziare il gruppo e selezionare Tipo ›Crea contorni (Carattere ›Tracciamento).
- Successivamente, apri il menu della palette Livelli (Livelli) facendo clic sul pulsante sotto forma di una freccia sulla tavolozza (Fig. 8.11).
Figura. 8.11. Menu dei livelli
Siamo interessati al comando in questo menu. Rilascio su livello (sequenza) (Converti in livelli (in sequenza)), che trasferisce ogni singolo oggetto su un nuovo livello. Si noti che quando si applica il comando, il gruppo deve essere evidenziato Gruppo, non uno strato Strato 1.
Il modo in cui la tavolozza dovrebbe apparire Livelli (Livelli) dopo l'esecuzione Rilascio su livello (sequenza) (Converti in livelli (in sequenza)), mostrato in fig. 8.12.
Figura. 8.12. Tavolozza dei livelli dopo aver eseguito Rilascio su livello (sequenza)
Questo completa la preparazione, è possibile salvare con Salva per Web (Salva per Web) in SWF. Swf - Questo è il principale formato grafico basato sulle tecnologie Flash. Sarà più preciso affermare che questo è il formato Flash (Fig. 8.13).
Probabilmente oggi tutti gli utenti hanno più o meno familiarità con Flash. Attualmente, questo è il formato di animazione più comune su Internet, con l'aiuto del quale viene costruita la stragrande maggioranza delle pagine Web multimediali.
Naturalmente, in Adobe Illustrator, non viene implementata nemmeno una decima delle funzionalità di Flash, poiché il programma non è destinato a questo scopo. Tuttavia, in esso puoi creare un'immagine statica o una semplice animazione.
Figura. 8.13. Impostazioni di ottimizzazione per il formato SWF
Esistono le seguenti impostazioni.
- Sola lettura (Solo lettura). Se si seleziona la casella, il file verrà scritto in modo tale da non poter più essere aperto per la modifica in nessun programma. Ciò, da un lato, riduce la dimensione dei file e, dall'altro, protegge i tuoi diritti d'autore.
- L'impostazione indicata da 1. Il parametro che imposta il tipo di salvataggio è un'immagine o un'animazione.
- Se scegli l'opzione File AI in file SWF (File Illustrator in file SWF), l'immagine verrà salvata come immagine statica, ripetendo completamente ciò che vedi sullo schermo quando lavori in Illustrator.
- Strati per cornici SWF (Livelli nei frame SWF) consente di creare animazioni basate sui layer esistenti, che verranno presentati come frame. Dobbiamo scegliere questa opzione.
- Qualità della curva (Curve di qualità). La precisione della ripetizione della curva delle curve dei file dell'immagine originale. Quando questo parametro viene ridotto, la qualità viene notevolmente ridotta, specialmente nell'area delle parti piccole, ma le dimensioni del file vengono ridotte. Nel nostro caso, il valore ottimale è "7".
- Frequenza dei fotogrammi (Ritardo frame). Frame rate e, di conseguenza, velocità di animazione. Affinché l'effetto sia corretto, impostare non più di 4 fotogrammi al secondo.
- Ciclo continuo (Ripetere). Riproduci l'animazione ripetutamente. Adatto per animazioni per le quali è importante un loop ripetuto. Il banner si riferisce a questo tipo.
Recentemente, vari tipi di animazioni grafiche SVG (Scalable Vector Graphics) su siti e applicazioni sono diventati molto popolari. Ciò è dovuto al fatto che tutti gli ultimi browser supportano già questo formato. Ecco le informazioni sul supporto del browser SVG.
Questo articolo descrive l'esempio più semplice di animazione di un vettore SVG usando il plug-in leggero Lazy Line Painter di Jquery.
Codice sorgentePer completare e comprendere appieno questo compito, è auspicabile una conoscenza di base di HTML, CSS, Jquery, ma non è necessaria se si desidera solo animare SVG) Iniziamo!
E quindi i passaggi che dobbiamo eseguire:
- Crea la struttura dei file corretta
- Scarica e collega il plug-in
- Disegna una fantastica immagine di contorno in Adobe Illustrator
- Converti la nostra immagine in Lazy Line Converter
- Incolla il codice risultante in main.js
- Aggiungi un po 'di CSS a piacere
1. Creare la struttura di file corretta
Il servizio Initializr ci aiuterà in questo, dove è necessario selezionare i parametri come nella figura seguente.
- Classic H5BP (piastra caldaia HTML5)
- Nessun modello
- Solo HTML5 Shiv
- minified
- Classi IE
- Telaio cromato
- Quindi fare clic su Scarica!
2. Scarica e collega il plug-in
Poiché initializr viene fornito con l'ultima libreria di Jquery, dall'archivio che dobbiamo scaricare dal repository del progetto Lazy Line Painter, dobbiamo trasferire solo 2 file al nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione del plug-in potrebbe essere diversa), si trova nella radice della cartella ricevuta. Il secondo è esempio / js / vendor / raphael-min.js.
Questi 2 file sono collocati nella cartella js. E collegali al nostro index.html prima di main.js come segue:
3. Disegna un'immagine di contorno interessante in Adobe Illustrator
- Disegniamo la nostra immagine di contorno in Illustrator (il modo più semplice per farlo è con lo strumento Penna)
- È necessario che i contorni della nostra figura non si chiudano, perché per il nostro effetto sono necessari un inizio e una fine
- Non dovrebbe esserci riempimento
- Dimensione massima del file: 1000 × 1000 px, 40kb
- Crea un ritaglio ai bordi dell'oggetto Oggetto\u003e Tavole da disegno\u003e Adatta ai bordi delle tavole da disegno
- Salva in formato SVG (lo faranno le impostazioni di salvataggio standard)
Ad esempio, è possibile utilizzare le icone dell'allegato.
4. Converti la nostra immagine in Lazy Line Converter
Basta trascinare la tua icona nella casella nell'immagine qui sotto.
Lo spessore, il colore del contorno e la velocità dell'animazione possono essere modificati nel codice stesso che appare dopo la conversione!
5. Incollare il codice risultante in main.js
Ora basta incollare il codice risultante in un file main.js vuoto
parametri:
strokeWidth - spessore del contorno
strokeColor - colore del contorno
È inoltre possibile modificare la velocità di disegno di ciascun vettore modificando i valori del parametro duration (600 per impostazione predefinita)
6. Aggiungi alcuni CSS a piacere
Elimina il paragrafo da index.html
Ciao mondo! Questo è HTML5 Boilerplate.
E invece di esso inseriamo il blocco in cui avrà luogo la nostra animazione
quindi aggiungi alcuni CSS al file main.css per un aspetto migliore:
Corpo (sfondo: # F3B71C;) #icons (posizione: fissa; superiore: 50%; sinistra: 50%; margine: -300px 0 0 -400px;)
salva tutti i file.
Ora apri index.html in un browser moderno e goditi l'effetto.
Post scriptum quando si avvia sul computer locale, l'avvio dell'animazione potrebbe essere ritardato di alcuni secondi.
Oggi abbiamo una lezione insolita di Adobe Illustrator. Perché questa volta non faremo un'immagine statica, ma una vera animazione. Immagina, si scopre che usando Adobe Illustrator puoi anche disegnare cartoni animati :)
E non abbiamo bisogno di nulla per questo. Corretta organizzazione dei livelli ed esportazione dell'opera finale in formato swf, in cui ogni livello viene convertito in un frame di animazione. Nella lezione di oggi, disegneremo un'animazione del conto alla rovescia nello stile di un film retrò. L'output dovrebbe essere un filmato flash con lo stesso conto alla rovescia.
La prima cosa da fare è disegnare tutti gli elementi necessari per l'animazione futura. Per fare questo, in un documento separato ho creato due posizioni della cornice del film, un cerchio per il conteggio, che viene tagliato in settori separati, trama e graffio verticale per aggiungere l'effetto dell'antichità, nonché tutti i numeri e le iscrizioni.
Quando tutte le parti del nostro fumetto sono pronte, puoi iniziare a creare l'animazione stessa. Per comodità, è meglio farlo in un nuovo documento. Allo stesso tempo, i livelli svolgeranno il ruolo di fotogrammi di animazione. E nel primo strato basta copiare il fotogramma del film. Posizionalo al centro dell'area di lavoro.
Ora crea un secondo strato e copia la cornice del film in esso, in cui i fori lungo i bordi sono realizzati con uno spostamento. Deve anche essere centrato.
Da questi due livelli è già possibile ottenere un'animazione di un film in movimento. Ma dopo abbiamo bisogno di molti più strati. Pertanto, selezionare i primi due livelli, andare alle opzioni del pannello ed effettuare una copia dei livelli.
Allo stesso modo, dobbiamo accumulare 12 strati con fotogrammi di pellicola che ne specificano il movimento.
Ora abbiamo un sacco di strati e sono tutti visibili. Nel senso che gli strati superiori sono ostruiti da quelli inferiori, il che non è molto conveniente per il lavoro. Pertanto, è possibile disattivare alcuni livelli facendo clic sull'icona a forma di occhio a sinistra del nome del livello. Per disattivare o accendere tutti i livelli contemporaneamente, tieni premuto il tasto Alt mentre fai clic sull'icona a forma di occhio. Attivando e disattivando i livelli, puoi vedere esattamente cosa si trova in un determinato fotogramma della nostra futura animazione. E ora, per aggiungere un leggero tremore al movimento del film, dobbiamo spostare leggermente i frame ricevuti in diverse direzioni. Per fare ciò, includi solo il livello con cui lavorerai al momento, quindi sposta la cornice di un paio di pixel in qualsiasi direzione.
Quando hai attraversato tutti i livelli e hai aggiunto un leggero spostamento, puoi iniziare a creare animazioni del cerchio in movimento. Per fare questo, copia il cerchio costituito da settori del documento con le parti del fumetto e posizionalo sul primo strato sopra il fotogramma del film.
Se rimuovi la selezione dal cerchio, sembrerà un tutto. Questo è quello che ci serve.
Ma poiché è costituito da settori separati, è possibile, cambiando il loro colore, creare animazioni molto rapidamente e facilmente. Per fare questo, copia questo cerchio sul secondo livello e rendi il primo settore più luminoso. Ricordi che il nostro film trema durante il movimento, quindi non è necessario posizionare il cerchio esattamente al centro dell'inquadratura. Posizionalo ad occhio.
Allo stesso modo, devi copiare il cerchio in ogni livello successivo, mentre dipingi un altro settore con un colore più chiaro rispetto alla volta precedente. Insieme, questi 12 strati formano un'animazione del movimento del film con un cerchio di riempimento.
Successivamente, aggiungi texture ai nostri livelli. Attiva il primo livello e copia la trama dal file di origine con parti di ricambio lì.
Quindi, a sua volta, attiva i seguenti livelli e copia lì la stessa trama. Per renderlo diverso su ogni fotogramma, basta ruotarlo di 90 gradi. Come avrai intuito, dobbiamo aggiungere una trama a tutti e 12 i fotogrammi.
Se sei già stanco di copiare in ordine, allora posso farti piacere - rimane ben poco. La parte più difficile è finita. Resta da aggiungere graffi verticali e quasi tutto. Per fare questo, di nuovo, copia lo scratch originale e mettilo in un posto arbitrario in più livelli. Nel mio caso, i graffi compaiono solo in due strati.
Ora che il ciclo principale con l'animazione del film è pronto, resta da aggiungere i numeri. Dato che contiamo da 3 a 1, oltre alla parola Vai !!!, abbiamo bisogno di ancora più livelli. Non 12, ma ben 48. Per fare questo, devi fare altre tre copie di livelli già pronti con l'animazione del film.
E poi tutto è semplice. Attiva il primo livello e inserisci lì il numero tre.
Quindi è necessario copiare questa figura nei livelli successivi fino al termine dell'animazione del cerchio. Quando si arriva alla copia successiva dei livelli, in cui il cerchio verrà nuovamente riempito completamente, è necessario inserire già il numero due. Allo stesso modo, copia il numero uno nei livelli desiderati. E quando arrivi agli strati finali previsti per l'iscrizione Vai !!!, quindi elimina semplicemente il cerchio prima di copiare l'iscrizione sul livello desiderato.
Questo è tutto con l'animazione. La cosa principale qui non è confondersi. Puoi dare ai livelli qualsiasi nome comodo, ma ero in qualche modo pigro :) Eppure, quando finisci il lavoro, assicurati di riattivare tutti i livelli facendo clic sull'icona dell'occhio.
Nella finestra con le impostazioni di esportazione, assicurati di impostare Esporta come: livelli AI su frame SWF. È questa opzione che trasforma i livelli di Illustrator in frame di animazione. Quindi, fai clic sul pulsante Avanzate.
Si apriranno le impostazioni avanzate. Qui è necessario impostare la frequenza dei fotogrammi. Ho 12 fotogrammi al secondo. Il segno di spunta Looping è responsabile del ciclo di animazione. Grazie al suo video verrà riprodotto in cerchio. E l'opzione Ordine livelli: dal basso verso l'alto riproduce i livelli di Illustrator dal basso verso l'alto nel pannello. È esattamente così che abbiamo costruito la nostra animazione.
All'uscita, otteniamo un filmato in flash con la nostra animazione.
Ora vedi che realizzare semplici animazioni in Adobe Illustrator non è così difficile come sembra a prima vista.
Ma per creare video lunghi o applicazioni interattive, è ancora meglio usare Adobe Flash o altri editor flash. Ad esempio, ho realizzato questo gatto in un vecchio Macromedia Flash, che ho scavato nel mio posto di lavoro.
Inoltre, recentemente HTML5 e CSS3 vengono utilizzati sempre più spesso per creare animazioni. Questo codice è supportato dai browser moderni e non richiede l'uso di un flash player.
Roman aka dacascas appositamente per il blog
Iscriviti alla nostra newsletter per non perdere nulla di nuovo:
Ottimizzazione della grafica Web
Le informazioni grafiche vengono trasmesse molto più lentamente del testo e il tempo di caricamento delle immagini è proporzionale alla dimensione dei loro file grafici. Pertanto, il caricamento rapido delle pagine Web implica la dimensione ridotta delle immagini grafiche incorporate in esse, che si ottiene attraverso la loro ottimizzazione. L'ottimizzazione delle immagini è intesa come la sua conversione, che garantisce la dimensione minima del file mantenendo la qualità dell'immagine richiesta in questo caso, che si ottiene principalmente riducendo il numero di colori nelle immagini grafiche, utilizzando formati di file compressi e speciali e ottimizzando i parametri 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 vari metodi di anteprima. L'anteprima fornisce un'idea abbastanza precisa di come apparirà l'immagine ottimizzata in tempo reale, il che aiuta a valutare il risultato di ottimizzazione e selezionare con successo le impostazioni necessarie. E puoi ottimizzare sia le immagini create direttamente in Illustrator, sia altre, come le foto che dovrebbero essere collocate su un sito Web.
I parametri di ottimizzazione sono impostati nella finestra Salva per Web (Salva per Web), chiamato dal comando con lo stesso nome dal menu File (File). Il programma suggerisce di utilizzare una delle quattro modalità di anteprima, ma due sono le più adatte per valutare la qualità dell'ottimizzazione:
- 2-up (due opzioni) - visualizzazione simultanea dell'originale e dell'immagine ottimizzata secondo le impostazioni specificate (Fig. 1);
- 4-up (quattro opzioni): in questa modalità, l'area di visualizzazione è divisa in quattro finestre (Fig. 2) per visualizzare l'immagine originale e tre versioni di quella ottimizzata: la prima versione viene creata in base ai valori di ottimizzazione impostati e le altre due sono opzioni per le impostazioni di ottimizzazione correnti.
Entrambe le modalità possono far risparmiare molto tempo nella ricerca della migliore opzione di ottimizzazione, poiché eliminano la necessità di salvare le immagini con impostazioni di ottimizzazione diverse e il loro successivo confronto visivo. Inoltre, è possibile valutare non solo la qualità dell'immagine ottimizzata, ma anche le sue dimensioni e il tempo di caricamento con diverse opzioni di connessione. Per confronto, la modalità 4-Up (quattro opzioni) è la più conveniente, che consente di valutare visivamente l'effetto della compressione o riduzione della palette sulla qualità dell'immagine e delle sue dimensioni e, in definitiva, determinare i migliori parametri di ottimizzazione.
Illustrator consente di ottimizzare la grafica Web in formati non solo GIF, JPG, PNG-8 e PNG-24, ma anche in SWF e SVG. Le immagini indicizzate con un numero limitato di colori vengono salvate in formato GIF. Per salvare immagini a colori e in scala di grigi - fotografie e grafica saturata di colore, come i riempimenti sfumati - viene utilizzato il formato JPG. Per le immagini a colori con aree trasparenti, viene utilizzato il formato PNG, che consente di salvare sia immagini indicizzate che a colori, mentre nel formato PNG-8, il numero massimo possibile di colori di un'immagine ottimizzata è 256, e nel formato PNG-24, un'immagine può avere milioni di colori, e 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 di conseguenza aumenta la dimensione del file. I formati SVG e SWF combinano dati grafici, testo e componenti interattivi e possono anche essere ottimizzati.
Considera un esempio specifico di ottimizzazione delle immagini. Ad esempio, il programma Illustrator ha sviluppato un logo 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 in modo da non tenere conto della posizione reale dell'iscrizione risultante dalla deformazione (Figg. 4 e 5).
Pertanto, proveremo a esportare il logo nel formato PSD con il comando File \u003d\u003e Esporta (File \u003d\u003e Esporta) - la dimensione dell'immagine creata sarà 143 KB. Apri il file PSD risultante e usa il comando File \u003d\u003e Salva per Web (File \u003d\u003e Salva per Web). Dato il numero limitato di colori coinvolti nell'immagine, il formato GIF è ottimale in questo caso, con le impostazioni specifiche di cui è necessario decidere. Sperimentando le impostazioni, è possibile assicurarsi che la migliore qualità sia fornita dall'algoritmo di compressione selezionato dal programma per impostazione predefinita Selettivo (Selettivo). Per quanto riguarda il livellamento, data la presenza di riempimenti sfumati, è meglio scegliere un algoritmo con generazione di rumore - Rumore (fig.6). La dimensione del file di ottimizzazione risultante sarà di 6,729 Kbyte (Fig. 7), mentre verrà preservata la trasparenza dello sfondo, che può essere facilmente verificata salvando l'immagine in formato GIF insieme al file HTML (Fig. 8). Di conseguenza, in questo esempio sono stati ottenuti i file emblem.html e emblem.gif nella cartella Primer1.
pulsanti
Un elemento di design specifico indispensabile di qualsiasi pagina Web sono i controlli grafici: i pulsanti. È 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 mesh e / o con mascheratura sembrano molto più spettacolari del solito.
Considera l'opzione di creare un pulsante convesso rotondo in Illustrator. Disegna un oggetto vettoriale riempito con un colore arbitrario sotto forma di un cerchio (Fig. 9) e trasformalo in un comando a griglia Oggetto \u003d\u003e Crea maglia gradiente (Oggetto \u003d\u003e Crea maglia gradiente) specificando quattro righe e quattro colonne e nell'elenco Aspetto (Visualizza) selezionando un'opzione Al centro Evidenziare (Retroilluminazione) uguale a 60 (Fig. 10). Scegli lo strumento Selezione diretta e fai clic nell'angolo in alto a sinistra dell'oggetto, evidenziando i punti nodali situati lì (Fig. 11). Cambia il colore della cella corrispondente in bianco selezionandolo nella tavolozza campioni (fig.12).
Prendi lo strumento Ellisse (Ellisse), posiziona l'indicatore del mouse al centro del cerchio creato prima di questo e, tenendo premuti i tasti alt e Cambio, allunga il nuovo cerchio sopra quello vecchio in modo che risulti di 1-2 pixel più grande di quello vecchio su tutti i lati. Falla diventare un bordo nero ( Ictus) 1-2 pixel di larghezza e riempire con un gradiente radiale nella direzione da rosso a bianco (Fig. 13). Trascina l'oggetto vettoriale creato 1-2 pixel verso destra e verso il basso, quindi, senza rimuovere la selezione, fai clic con il pulsante destro del mouse e seleziona il comando dal menu di scelta rapida Disponi \u003d\u003e Invia indietro (Ordina \u003d\u003e Invia indietro). Di conseguenza, otteniamo uno spazio vuoto per il pulsante, mostrato in Fig. 14.
Di norma, in qualsiasi pagina Web sono presenti diversi pulsanti dello stesso tipo, che differiscono, ad esempio, solo nella direzione delle frecce disegnate su di essi, indicando la direzione del movimento attorno al sito. Considera il caso più semplice di avere due pulsanti, uno dei quali, con una freccia giù, significherà passare alla pagina successiva e un pulsante con una freccia su - a quello precedente. Come una freccia vuota, prendiamo un triangolo ordinario disegnato da uno strumento Poligono (Poligono), dipinto di nero e progettato anche come oggetto mesh per un maggiore effetto. Spostare la freccia sul pulsante e regolare la posizione di tutti gli oggetti l'uno rispetto all'altro, utilizzando i pulsanti corrispondenti sulla tavolozza Allineare (Allineamento). Il primo dei pulsanti è mostrato in Fig. 15. Creare una copia del livello del pulsante selezionando il comando Strato duplicato Livelli, - di conseguenza otteniamo due livelli identici. Quindi seleziona la freccia sulla copia del livello e ruotala di 180 °, scegliendo il comando dal menu contestuale Trasforma \u003d\u003e Ruota - Trasformazione \u003d\u003e Ruota. Otteniamo lo stesso pulsante mostrato in fig. 16. Si noti che è molto più conveniente memorizzare tutti gli stessi pulsanti dello stesso progetto in un file su diversi livelli, come è dimostrato in questo caso.
Ora è necessario salvare le opzioni ottimizzate per ciascuno dei pulsanti. Innanzitutto, rendi invisibile il livello inferiore: in questo caso, il pulsante sul livello superiore verrà salvato. Scegli una squadra File \u003d\u003e Salva per Web (File \u003d\u003e Salva per Web), configurare i parametri di ottimizzazione dei pulsanti, ad esempio, come mostrato in Fig. 17, fare clic sul pulsante Salva (Salva) e inserisci il nome del file. Il pulsante salvato di conseguenza è presentato in fig. 18. Ora restituisci la visibilità al livello inferiore e rendi invisibile quello superiore e allo stesso modo salva il secondo pulsante, specificando un nome diverso per esso. Il risultato è presentato in fig. diciannove.
Ora resta da assicurarsi che i pulsanti appaiano abbastanza accettabili sulla pagina Web e posizionarli su una pagina arbitraria (Fig. 20). Di conseguenza, in questo esempio, il file Primer2.html e due immagini grafiche nella cartella delle immagini (cartella Primer2).
Se lo si desidera, durante il processo di ottimizzazione, il pulsante può essere facilmente trasformato in una sezione. In questo caso, dopo aver selezionato un comando File \u003d\u003e Salva per Web (File \u003d\u003e Salva per Web) e le impostazioni di ottimizzazione devono essere selezionate dalla tavolozza degli strumenti Slice Select(Seleziona una sezione) e fai doppio clic sull'immagine, che alla fine si trasformerà in una sezione con il numero di serie 1 (Fig. 21). Facendo nuovamente doppio clic si aprirà la finestra Opzioni Slice (Opzioni Slice), in cui sarà necessario specificare un collegamento e, se lo si desidera, modificare il nome della sezione (Fig. 22), quindi salvare l'immagine ottimizzata. Il risultato in questo caso sono i file Primer3.html (Fig. 23) e Primer3.gif (cartella Primer3).
Elementi interattivi
Uno dei modi per rivitalizzare la pagina è introdurre elementi di design che cambiano il loro aspetto (o stato) a seconda del comportamento del mouse o, meno comunemente, in caso di altre situazioni: ridimensionamento, scorrimento, caricamento, errori, ecc.
Tra questi elementi, i rollover sono i più famosi (dall'inglese roll over - roll, roll over) - elementi che cambiano aspetto sotto l'influenza del mouse. Esempi di rollover tipici sono i pulsanti animati. I rollover vengono spesso utilizzati per creare altri elementi di navigazione del sito. In effetti, qualsiasi rollover non è una, ma diverse (fino a quattro) immagini, ognuna delle quali corrisponde a un evento specifico. Gli eventi principali sono considerati i seguenti: Normale - stato normale, Sovra - passa il mouse sopra un elemento e Giù - fai clic con il pulsante sinistro del mouse quando passa sopra di esso. Teoricamente, possono essere coinvolti eventi come Click - rilasciare il pulsante sinistro del mouse dopo aver fatto clic, Up - dopo aver rilasciato il pulsante, Out - quando si esce dalla zona attiva. Tuttavia, in pratica, spesso si limitano a modificare l'elemento solo nei primi tre o anche due eventi.
Rollover classici
In senso classico, un rollover è una serie di immagini grafiche in formato GIF e il corrispondente codice HTML, a causa del quale, a seconda del comportamento del mouse, un'immagine ne sostituisce un'altra nella finestra del browser.
Illustrator non ha lo scopo di creare direttamente rollover nel senso classico, ma può aiutare a sviluppare gli elementi che sono nativi per loro. L'idea in questo caso è quella di 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, ecc. L'immagine multistrato risultante viene esportata in un file PSD con livelli di salvataggio, in base al quale viene creato il 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à di trasformare la 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 sotto forma di un rettangolo nero arrotondato e riempito (Fig. 24), creane una copia e posizionala nella parte libera dello schermo. Converti la prima copia del rettangolo in un oggetto griglia con un'evidenziazione al centro (comando Oggetto \u003d\u003e Crea maglia gradiente - Oggetto \u003d\u003e Crea una trama sfumata) specificando quattro righe e dieci colonne (Fig. 25). Attiva la seconda copia del rettangolo e regola il riempimento sfumato per esso approssimativamente come mostrato in Fig. 26. Posiziona un oggetto sfumato sopra la mesh, riduci l'opacità dell'oggetto gradiente a circa l'80% e misura - circa 1 pixel, per simulare l'effetto della convessità. E poi sopra gli oggetti digitare l'iscrizione. Nella sua forma originale, lascia che abbia un colore bianco che corrisponda allo stato Normale (Fig. 27), e quindi quando cambia lo stato di rollover, il colore dell'iscrizione cambierà, ad esempio, in verde - quando ci passi sopra con un pennarello (stato sopra) e il blu - quando si fa clic su un pulsante del mouse (stato Giù).
Prestare attenzione alla tavolozza Livelli - in questa fase è presente un solo strato. Crea due copie di questo livello usando il comando Strato duplicato (Duplica livello) dal menu della palette Livelli, - ci saranno tre livelli nella palette (Fig. 28). Quindi, nella prima copia del livello, cambia il colore dell'iscrizione in verde e nel secondo - in blu (Fig. 29). Di conseguenza, verrà ottenuto lo spazio necessario per il rollover.
Esporta l'immagine creata nel formato PSD con i livelli di salvataggio usando il comando File \u003d\u003e Esporta (File \u003d\u003e Esporta) e selezionando il modello di colore RGB (Fig. 30). Apri il file PSD creato in ImageReady (fig. 31 e 32). Crea cornici in base ai livelli selezionando il comando Crea cornici dagli strati (Crea cornici dai livelli) dal menu della palette Animazione. La finestra di animazione apparirà come in Fig. 33. Inoltre, nella tavolozza rollover inizialmente, verrà creato un singolo stato normale.
Quindi nella finestra Animazioneseleziona la cornice corrispondente allo stato indotto, mentre nella palette Livelli il livello viene selezionato automaticamente Copia livello 1 (fig. 34). Vai alla palette rollovere fai clic sul pulsante Crea stato di rollover (Crea stato di rollover) - fig. 35, che comporterà una condizione Sopra lo statonella tavolozza rollover(fig. 36). Allo stesso modo creare uno stato Stato down. Attiva stato Normale nella tavolozza rollover ed elimina nella palette Animazione tutti i frame tranne quello che deve corrispondere allo stato Normale. Di conseguenza, per ogni stato di rollover nella tavolozza Animazioneesiste un solo frame (Figg. 37, 38 e 39).
Figura. 38. Vista immagine, finestra Animazione e palette Livelli e Rollover per lo stato Over State
Controlla il risultato facendo clic sul pulsante. Anteprima nel browser predefinito (Anteprima nel browser) sulla barra degli strumenti e nella finestra del browser (Fig. 40). Successivamente, salva il file utilizzando il comando File \u003d\u003e Salva ottimizzato (File \u003d\u003e Salva con ottimizzazione) e specificando l'opzione HTML e immagini (* .html). Di conseguenza, in questo esempio sono stati ottenuti il \u200b\u200bfile Primer4.html e una serie di immagini grafiche nella cartella delle immagini.
Figura. 40. Finestra del browser con un elemento Rollover
Rollover SVG
La crescente popolarità del formato SVG (Scalable Vector Graphics), creato sulla base dello standard XML, consente anche di ottenere una varietà di elementi interattivi, in particolare i rollover, ma in pratica questo viene implementato in un modo completamente diverso. Vale la pena notare che la creazione di rollover SVG interattivi, a differenza di quelli classici, quando il codice HTML corrispondente viene generato automaticamente, richiede la conoscenza del linguaggio JavaScript e una comprensione dei principi di base della programmazione orientata agli oggetti.
Una tavolozza speciale è progettata per lavorare con oggetti SVG Interattività SVGche è facile da aprire con il comando Finestra \u003d\u003e Interattività SVG (Finestra \u003d\u003e Interattività SVG) - fig. 41.
Considera questa opzione per creare un rollover usando l'esempio di un pulsante interattivo, il colore dell'iscrizione su cui cambierà da nero a blu quando passi il mouse e diventa di nuovo nero quando il mouse lascia la zona 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 tavolozza Trasparente (Trasparenza) - in questo esempio, il valore del parametro Opacità (Opacità) è impostato sul 50%. Crea una copia del pulsante, riempilo di verde scuro (Fig. 43), quindi convertilo in un oggetto mesh con il comando Oggetto \u003d\u003e Crea maglia gradiente(Oggetto \u003d\u003e Crea maglia gradiente) specificando quattro righe e dieci colonne e nell'elenco Aspetto(Visualizza) selezionando un'opzione Al centro (Al centro) e impostazione del valore Evidenziare (Retroilluminazione) uguale a 100. Ridurre l'opacità del livello con l'oggetto mesh a circa il 40% (Fig. 44). Posiziona l'oggetto mesh sopra il gradiente e il pulsante sarà simile a quello mostrato in Fig. 45.
Figura. 44. Trasformare una copia di un pulsante in un oggetto mesh
Completa il pulsante con l'iscrizione prevista e regola la sua posizione utilizzando i pulsanti corrispondenti sulla tavolozza Allineare (Allineamento). L'immagine risultante conterrà uno strato con tre oggetti sovrapposti l'uno sull'altro (Fig. 46). Gli eventi pianificati si riferiranno all'oggetto di testo, quindi per comodità, cambia il suo nome in Testofacendo doppio clic sull'oggetto e inserendo un nuovo nome. Allo stesso modo cambia il nome del layer da Livello 1 su Livello (Fig. 47).
L'elaborazione degli eventi prevede l'utilizzo 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 durante l'installazione di Adobe Illustrator. Utilizzare il comando per connettere il file Events.js File Javascript Interattività SVG (Fig. 48). Quindi, fai clic su Inserisci (Aggiungi) e trova il file desiderato sul tuo disco rigido. Quando il suo nome appare nel campo URL (fig. 49), fare clic sul pulsante Fatto (Disconnettersi).
Figura. 48. Scelta di un comando di file JavaScript
Successivamente, è necessario determinare la reazione agli eventi del mouse per l'oggetto. Testo. Seleziona l'oggetto Testo nel campo Evento Tavolozze (evento) Interattività SVG seleziona evento onmouseover elemColor (evt, "Text", "# 3333FF") - questo significa che quando il mouse è sopra l'oggetto Testoil suo colore cambierà in blu (Fig. 50). Affinché il colore del testo diventi nero dopo aver lasciato la zona attiva, sarà necessario creare un altro evento onmouseout- selezionalo nel campo Evento Tavolozze (evento) Interattività SVG. Quindi nella barra delle azioni inserisci il testo elemColor (evt, "Text", "# 000000")- ciò comporterà un ritorno nero (Fig. 51).
Figura. 51. Vista finale della palette Interattività SVG per l'oggetto Testo
Salvare il rollover creato come file SVG con il comando File \u003d\u003e Salva con nome (File \u003d\u003e Tipo di file formato Svge quindi impostando le opzioni per il salvataggio del file SVG come mostrato in Fig. 52. Dopo il salvataggio, verrà ricevuto un solo file 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, è necessario inoltre copiare il file Events.js con la descrizione delle procedure JavaScript nella cartella con il file SVG. Successivamente, è possibile verificare l'operabilità del rollover: il risultato sarà simile a quello mostrato in Fig. 53.
Animazione SVG
Il formato SVG può essere utilizzato anche per trasmettere animazioni. Proviamo a creare l'elemento di animazione più semplice (in questo caso saranno informazioni sull'azienda) che appariranno sullo schermo quando passi con il mouse sull'oggetto grafico corrispondente e scompaiono quando rimuovi il mouse dall'elemento interattivo.
Creiamo approssimativamente una serie di oggetti grafici e di testo, come mostrato in Fig. 54. Rinomineremo tutti gli oggetti creati in modo conveniente facendo clic in sequenza sul nome dell'oggetto successivo nella palette Livelli e inserendo il nome desiderato (Fig. 55). Si noti che il evidenziato in fig. 56 oggetti - Testo1, Testo2, Testo3 e path1 - sarà sempre visibile, e tutto il resto - solo quando passi con il mouse sopra un oggetto Text1.
Figura. 54. L'immagine originale
Includi il file Events.js con la descrizione delle procedure JavaScript usando il comando File Javascript (File JavaScript) dalla tavolozza Interattività SVGpremendo il pulsante Inserisci(Aggiungi) specificando il file desiderato sul disco rigido e facendo clic sul pulsante Fatto (Disconnettersi).
Definire la risposta agli eventi del mouse per un oggetto Text1. Seleziona un oggetto Testo, in campo Evento Tavolozze (evento) Interattività SVGseleziona evento onmouseover e nella riga sottostante inserisci il testo elemShow (evt, "Text4"); elemShow (evt, "Path2"). Di conseguenza, quando il mouse si trova sull'oggetto Text1 gli oggetti diventeranno visibili Text4 e path2. Si noti che se devono essere eseguite più azioni quando si verifica un evento, devono essere indicate attraverso il segno “;”. Quindi eseguire un'operazione simile sull'evento onmouseoutinserendo un testo per questo, che significherà nascondere gli oggetti (Fig. 57).
Salvare il risultato come file SVG con il comando File \u003d\u003e Salva con nome (File \u003d\u003e Salva con nome) specificando il nome del file, selezionando nel campo Tipo di file Formato SVG, quindi impostare le opzioni per il salvataggio del file SVG secondo la Fig. 58. Dopo il salvataggio, verrà ricevuto il file Primer6.svg (cartella Primer6). Non dimenticare di copiare il file Events.js nella cartella con questo file. Se quindi esegui il file creato, vedrai il risultato mostrato in Fig. 59. Questo è quasi ciò di cui hai bisogno. L'unica cosa che non faceva parte dei nostri piani era l'aspetto iniziale degli oggetti Testo4 e Sentiero2 al momento dell'avvio. Per eliminare questo difetto, selezionare entrambi i dati oggetto contemporaneamente e creare un'azione per essi elemHide (evt, "Text4"); elemHide (evt, "Path2") all'evento onload (Fig. 60). Salvare di nuovo il file e assicurarsi che gli oggetti siano ora Text4 e path2 visibile solo quando si passa sopra un oggetto Text1.
Animazione GIF
Qualsiasi pagina Web è inconcepibile senza animazioni Web, anche senza gif animate. Una delle opzioni per crearle è utilizzare l'applicazione Adobe ImageReady, che consente, tra l'altro, di creare animazioni dai livelli. Allo stesso tempo, l'immagine multistrato stessa può essere preparata in varie applicazioni, tra cui Adobe Illustrator.
È molto semplice creare un'animazione basata su elementi della tavolozza simboli (Simboli) aperti dal team Finestra \u003d\u003e Simboli (Finestra \u003d\u003e Simboli) o da una delle librerie di simboli che possono essere aperte utilizzando il comando Finestra \u003d\u003e Librerie di simboli (Finestra \u003d\u003e Librerie di simboli).
Ad esempio, proviamo ad aumentare le dimensioni 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 le dimensioni di ciascun oggetto successivo, ad esempio, come mostrato in Fig. 61. Di conseguenza, nella tavolozza Livelli verrà creato un livello con molti oggetti (Fig. 62). Se esporti direttamente questa immagine nel formato PSD, non funzionerà, poiché esiste solo un livello e, naturalmente, quando apri un file PSD in ImageReady, ci sarà anche un solo livello. Pertanto, è innanzitutto necessario posizionare gli oggetti su livelli diversi. Questo può essere fatto in diversi modi: il modo più semplice per selezionare prima un livello Strato 1 nella palette Livelli e utilizzare il comando Rilascia al livello (Rilascio in strati). Il risultato sarà il movimento di ciascuno degli oggetti sul proprio livello, ma tutti saranno nidificati nel livello Strato 1. Pertanto, dovrai trascinare manualmente tutti i livelli nidificati nella parte superiore della palette Livelli in modo che siano sopra il livello Strato 1e quindi il livello vuoto Strato 1 basta cancellare (fig. 63). Esporta l'immagine in formato PSD usando il comando File \u003d\u003e Esporta (File \u003d\u003e Esporta) con impostazioni come in fig. 64.
Scarica il file PSD creato in ImageReady (Fig. 65 e 66). Apri il menu della palette Animazione Crea cornici dagli strati (Crea cornici dai livelli). Di conseguenza, verranno creati cinque fotogrammi, ognuno dei quali corrisponderà al proprio livello e alla finestra della tavolozza Animazione prenderà la forma come in fig. 67.
Successivamente, imposta la durata di ciascuno dei frame creati - in questo caso, la durata di 0,2 s è impostata per tutti i frame. E quindi salva l'animazione con l'ottimizzazione usando il comando File \u003d\u003e Salva ottimizzato (File \u003d\u003e Salva con ottimizzazione). Il risultato ottenuto potrebbe assomigliare alla foto. 68.
È ancora più comodo utilizzare le funzioni per ottenere spazi che possono essere facilmente trasformati in animazioni in ImageReady. Miscele dal vivo Software Illustrator. Questo uso combinato di Illustrator e ImageReady velocizza notevolmente il processo di creazione di animazioni GIF.
Per un esempio, disegna due oggetti multicolori arbitrari, quindi collegali con un collegamento misto con parametri adeguati (Fig. 69). È impossibile utilizzare direttamente questo file per creare animazioni, poiché l'immagine si trova su un singolo livello (Fig. 70). Pertanto, dovrai prima posizionare ogni elemento dell'oggetto di fusione su un livello separato. Per fare questo, nella finestra Livelli evidenziare la linea
Figura. 70. Lo stato iniziale della finestra Livelli
Esporta il file creato nel formato PSD con il comando File \u003d\u003e Esporta (File \u003d\u003e Esporta). Aprire il file PSD creato in ImageReady (Fig. 73). Notare che nella finestra dei livelli appariranno tutti i livelli creati in Illustrator (Fig. 74) e nella finestra Animazione ci sarà un solo frame finora.
Attiva il menu della palette Animazionefacendo clic sulla freccia nera nell'angolo in alto a destra della tavolozza e selezionare il comando Crea cornici dagli strati (Crea fotogrammi dai livelli): di conseguenza, in questo esempio verranno creati cinque fotogrammi e la finestra della palette Animazione prenderà la forma secondo la Fig. 75. Selezionare tutti i frame tenendo premuto il tasto Cambioe impostare la durata del frame appropriata: in questo esempio viene impiegato lo stesso tempo di 0,2 s per ciascun frame. Quindi salvare il file con il comando di ottimizzazione File \u003d\u003e Salva ottimizzato(File \u003d\u003e Salva con ottimizzazione) impostando nell'elenco Tipo di file opzione Solo immagini (* .gif). L'animazione sarà simile alla foto. 76.
Molto più interessante non è lo spostamento, ma il ridimensionamento uniforme degli oggetti di fusione. Ad esempio, è possibile utilizzare la transizione di fusione già creata. In questo caso, dopo aver creato livelli separati per ciascun elemento della transizione di fusione, posiziona tutti gli oggetti uno sopra l'altro usando i pulsanti Centro di allineamento orizzontale(Allineamento al centro in orizzontale) e Centro di allineamento verticale Tavolozze (allineamento centrale verticale) Allineare (Fig. 77).
Esporta il file creato nel formato PSD ( File \u003d\u003e Esporta- File \u003d\u003e Esporta) e apri il file PSD creato in ImageReady (Fig. 78). Crea fotogrammi di animazione basati su livelli ( Crea cornici dagli strati - Creare fotogrammi dai livelli) e selezionare la durata appropriata per essi (Fig. 79). Quindi, per rendere l'animazione più spettacolare, copia i fotogrammi disponibili, ma nell'ordine inverso, in modo che l'immagine prima aumenti e poi diminuisca, e così via in un cerchio (Fig. 80). Quindi salva il file con l'ottimizzazione ( File \u003d\u003e Salva ottimizzato- File \u003d\u003e Salva con ottimizzazione). L'animazione risultante è mostrata in Fig. 81.
Figura. 80. Stato della finestra di animazione dopo la duplicazione dei frame
Figura. 81. Animazione finita
