Una GIF trasparente in Adobe Illustrator viene eseguita come segue. Vai su File> Salva per Web e dispositivi (Alt + Ctrl + Maiusc + S). Nella finestra che si apre, nel campo Formato file ottimizzato, devi prima andare alla scheda Dimensione dell'immagine(Dimensione dell'immagine). Il fatto è che per impostazione predefinita l'intera pagina cade nella finestra di ottimizzazione, e questo di solito non è necessario. Pertanto, nella scheda Dimensioni immagine, deseleziona la casella di controllo Clip su tavola da disegno(Ritaglia alla dimensione della pagina) e fai clic sul pulsante Applica.
Quindi seleziona GIF nell'elenco di selezione del formato e seleziona la casella di controllo Trasparenza.
Successivamente definiremo quali colori saranno trasparenti. Tutti i colori presenti nell'immagine sono contenuti nella scheda Tabella dei colori(Tabella dei colori) e vengono visualizzati come quadrati colorati. Seleziona lo strumento nella barra degli strumenti sul lato sinistro della finestra contagocce(pipetta).
Ci sono due modi per definire i colori. Il modo più semplice è specificare un colore con un contagocce direttamente sull'immagine, dopodiché il colore verrà evidenziato nella tabella dei colori con un tratto scuro. Bene, se sai esattamente quale colore dovrebbe essere trasparente, puoi selezionarlo direttamente nella tabella dei colori facendo clic sul quadrato colorato corrispondente. E nel primo e nel secondo caso, se è necessario selezionare più colori, è necessario lavorare con il tasto Maiusc (o Ctrl) premuto. Dopo aver scelto un colore, è necessario indicare al programma di renderlo trasparente. Per fare ciò, è necessario fare clic sull'icona Mappa i colori selezionati su Trasparente(Aggiungi i colori selezionati alla trasparenza). Nell'illustrazione, questo pulsante è cerchiato e il rosso è selezionato come trasparente. Apparirà un'area trasparente sull'immagine e il quadrato sulla tavola dei colori cambierà aspetto - parte di esso diventerà un triangolo bianco. Per annullare il colore selezionato, è necessario selezionarlo nella tabella dei colori, quindi fare nuovamente clic sull'icona Mappa i colori selezionati su Trasparente.
Qualche parola sul modo di impostare la trasparenza. Il menu a discesa ne è responsabile. Specifica l'algoritmo di retinatura della trasparenza, in russo - Algoritmo per simulare la trasparenza (Fig. sotto). È possibile effettuare quattro scelte: No Transparency Dither - nessun algoritmo, Diffusion Transparency Dither - algoritmo diffuso, Pattern Transparency Dither - algoritmo basato su pattern e Noise Transparency Dither - algoritmo basato sul rumore. Nella modalità algoritmo diffuso, lo slider diventa attivo Quantità(Importo) che consente di modificare il valore di diffusione. Cosa mettere in pratica? A seconda dello scopo e dell'immagine. Non uso questa opzione e la lascio sempre al valore predefinito - Nessuna retinatura trasparenza.
Fare clic su Salva - gif trasparente pronto. Il lavoro è stato svolto in Adobe Illustrator versione CS4 (v.14), ma tutte le azioni e le scorciatoie da tastiera sono rilevanti per ulteriori informazioni prima versione CS3 (v. 13).
Ora complichiamo un po' il compito: creeremo un banner Flash animato. Naturalmente, non è necessario parlare di animazione Flash a tutti gli effetti: esistono pacchetti specializzati per questo. Ma puoi anche usare Illustrator per creare un semplice video amatoriale.
Non ci sono strumenti speciali e strumenti di interfaccia, come la timeline, tipici dei programmi di sviluppo di animazioni, in Adobe Illustrator. Ma c'è una sottigliezza: i livelli possono essere usati come cornici.
Crea un banner con solo testo.
- Raggruppa i personaggi con il comando Oggetto ›Gruppo(Oggetto ›Gruppo).
- Il prossimo compito è creare oggetti contorno dai caratteri del carattere, altrimenti la corretta formazione dei livelli non funzionerà. Per fare ciò, seleziona il gruppo e seleziona Digita ›Crea contorni(Carattere ›Traccia).
- Dopodiché apri il menu della tavolozza strati(Livelli) facendo clic sul pulsante freccia sulla tavolozza (Figura 8.11).
Riso. 8.11... Menu della palette Livelli
Ci interessa il comando in questo menu Rilascia al livello (sequenza)(Converti in livelli (in sequenza)), che converte ogni singolo oggetto in nuovo strato... Si noti che quando si utilizza il comando, è il gruppo che deve essere selezionato. Gruppo, non uno strato Strato 1.
Come dovrebbe apparire la tavolozza strati(Livelli) dopo l'esecuzione Rilascia al livello (sequenza)(Converti in livelli (sequenziale)), mostrato in Fig. 8.12.
Riso. 8.12... Palette Livelli dopo aver eseguito Rilascia al livello (sequenza)
Questo completa la preparazione, puoi salvare con Salva per Web(Salva per Web) in SWF. SWFè il formato principale per la grafica basata su Flash. Sarebbe più esatto dire che questo è il formato Flash (Fig. 8.13).
Probabilmente, oggi tutti gli utenti hanno già più o meno familiarità con Flash. È attualmente il formato di animazione più diffuso su Internet e viene utilizzato per costruire la stragrande maggioranza delle pagine Internet multimediali.
Ovviamente, Adobe Illustrator non ha nemmeno un decimo delle capacità di Flash, perché il programma non è pensato per questo. Tuttavia, in esso puoi creare un'immagine statica o animazione semplice.
Riso. 8.13... Impostazioni di ottimizzazione per il formato SWF
Esistono le seguenti impostazioni.
- Sola lettura(Solo lettura). Se selezioni la casella, il file verrà scritto in modo tale che non sarà più possibile aprirlo per la modifica in nessun programma. Questo, da un lato, riduce le dimensioni dei file e, dall'altro, protegge i tuoi diritti d'autore.
- L'impostazione indicata da 1. Il parametro che specifica il tipo di salvataggio è un'immagine o un'animazione.
- Se scegli l'opzione File AI in file SWF (File Illustrator v File SWF), l'immagine verrà salvata come immagine statica che ripete completamente ciò che vedi sullo schermo quando lavori in Illustrator.
- Da livelli a fotogrammi SWF(Da livelli a fotogrammi SWF) consente di animare i livelli esistenti da renderizzare come fotogrammi. Dobbiamo scegliere questa particolare opzione.
- Qualità della curva(Qualità curva). Precisione delle curve nel file per ripetere le curve dell'immagine originale. Diminuendo questo parametro si riduce notevolmente la qualità, soprattutto nell'area dei piccoli dettagli, ma la dimensione del file diminuisce. Per il nostro caso, il valore ottimale è "7".
- Frequenza dei fotogrammi(Ritardo telaio). Frame rate e, di conseguenza, velocità di animazione. Affinché l'effetto sia corretto, non impostare più di 4 fotogrammi al secondo.
- Ciclo continuo(Ripetere). Riproduci l'animazione più volte. Adatto per animazioni in cui è importante un ciclo ripetitivo. Il banner è di questo tipo.
Recentemente, vari tipi di grafica SVG (Scalable Vector Graphics) sono diventati molto popolari su siti Web e applicazioni. Ciò è dovuto al fatto che tutto browser più recenti supportano già questo formato. Ecco un'informazione sul supporto del browser SVG.
Questo articolo copre l'esempio più semplice. Animazioni SVG vettori utilizzando il leggero plug-in Jquery Lazy Line Painter.
FontePer completare e comprendere appieno questa attività, è auspicabile una conoscenza di base di HTML, CSS, Jquery, ma non necessaria se si desidera solo animare SVG) Cominciamo!
E quindi i passaggi che dobbiamo seguire:
- Crea una struttura di file corretta
- Scarica e collega il plug-in
- Disegna fantastici contorni 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. Crea la struttura di file corretta
Il servizio Initializr ci aiuterà in questo, dove è necessario selezionare i parametri come nell'immagine qui sotto.
- Classic H5BP (piastra caldaia HTML5)
- Nessun modello
- Solo HTML5 Shiv
- minimizzato
- Classi di IE
- Cornice cromata
- Quindi fare clic su Scaricalo!
2. Scarica e collega il plugin
Poiché initializr viene fornito con l'ultima libreria jquery, dall'archivio che dobbiamo scaricare dal repository del progetto Lazy Line Painter, abbiamo solo bisogno di trasferire 2 file al nostro progetto. Il primo è "jquery.lazylinepainter-1.1.min.js" (la versione del plugin potrebbe essere diversa) e si trova nella radice della cartella risultante. Il secondo è example /js/vendor/raphael-min.js.
Mettiamo questi 2 file nella cartella js. E li colleghiamo al nostro index.html prima di main.js in questo modo:
3. Disegna una bella immagine di contorno in Adobe Illustrator
- Disegna la nostra immagine di contorno in Illustrator (il modo più semplice per farlo è con lo strumento Penna)
- È necessario che i contorni del nostro disegno non si chiudano, poiché un inizio e una fine sono necessari per il nostro effetto.
- Non ci dovrebbero essere riempimenti
- Dimensione massima del file: 1000 × 1000 px, 40 kb
- Ritaglia in oggetto> Tavole da disegno> Adatta ai limiti delle tavole da disegno
- Salva in formato SVG (faranno le impostazioni di salvataggio standard)
Ad esempio, puoi utilizzare le icone nell'allegato.
4. Converti la nostra immagine in Lazy Line Converter
Basta trascinare 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 incolliamo semplicemente il codice risultante in un file main.js vuoto
Opzioni:
strokeWidth - spessore del contorno
strokeColor - il colore del contorno
Puoi anche modificare la velocità di disegno di ciascun vettore modificando i valori del parametro durata (di default 600)
6. Aggiungi un po' di CSS a piacere
Rimuovi paragrafo da index.html
Ciao mondo! Questo è HTML5 Boilerplate.
E al suo posto inseriamo un blocco in cui avverrà la nostra animazione.
quindi aggiungi un po' di CSS al file main.css per un aspetto migliore:
Corpo (sfondo: # F3B71C;) #icone (posizione: fissa; in alto: 50%; a 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'inizio dell'animazione potrebbe essere ritardato di alcuni secondi.
Oggi abbiamo un insolito tutorial di Adobe Illustrator. Perché questa volta non realizzeremo un'immagine statica, ma una vera animazione. Immagina si scopre con con Adobe Puoi anche disegnare cartoni animati in Illustrator :)
E non abbiamo bisogno di niente per questo. Organizzazione competente dei livelli ed esportazione lavoro finale in formato swf, dove ogni livello viene convertito in un fotogramma di animazione. Nel tutorial di oggi, disegneremo un'animazione di conto alla rovescia in stile film retrò. L'output dovrebbe essere un video flash con questo conto alla rovescia.
La prima cosa da fare è disegnare tutti gli elementi necessari per l'animazione futura. Per fare ciò, in un documento separato, ho realizzato due posizioni di un fotogramma di pellicola, un cerchio di riferimento, che è stato tagliato in settori separati, una trama e un graffio verticale per aggiungere l'effetto dell'antichità, nonché tutti i numeri e le iscrizioni .
Quando tutte le parti del nostro cartone sono pronte, puoi iniziare a creare l'animazione stessa. Per comodità, è meglio farlo in un nuovo documento. In questo caso, i livelli svolgeranno il ruolo di fotogrammi di animazione. E nel primissimo livello, devi solo copiare il fotogramma della striscia di pellicola. Posizionalo al centro dell'area di lavoro.
Ora crea un secondo livello e copiaci la striscia di pellicola, in cui i fori lungo i bordi sono sfalsati. Deve anche essere centrato.
Da questi due livelli, puoi già ottenere un'animazione cinematografica in movimento. Ma in seguito abbiamo bisogno di molti più strati. Quindi seleziona i primi due livelli, vai alle opzioni del pannello e fai una copia dei livelli.
Allo stesso modo, dobbiamo accumulare 12 strati di immagini in movimento del film.
Ora abbiamo un sacco di livelli e sono tutti visibili. Nel senso che gli strati superiori ostruiscono quelli inferiori, cosa poco comoda per il lavoro. Pertanto, puoi disattivare alcuni livelli facendo clic sull'icona con un occhio a sinistra del nome del livello. Per disattivare o attivare 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 poter aggiungere un leggero tremolio al movimento del film, dobbiamo spostare un po' i fotogrammi risultanti lati diversi... Per fare ciò, includi solo il livello con cui lavorerai questo momento e quindi sposta il fotogramma di un paio di pixel su entrambi i lati.
Quando hai esaminato tutti i livelli e aggiunto un leggero spostamento, puoi iniziare a creare un'animazione di un cerchio in movimento. Per fare ciò, copia il cerchio, composto da settori, dal documento con le parti del fumetto e posizionalo sul primo livello sopra il fotogramma della striscia di pellicola.
Se deselezioni il cerchio, sembrerà un unico insieme. Questo è esattamente ciò di cui abbiamo bisogno.
Ma poiché è composto da settori separati, puoi creare animazioni molto rapidamente e facilmente cambiando il loro colore. Per fare ciò, copia questo cerchio sul secondo livello e rendi il primo settore più leggero. Ti ricordi che la nostra pellicola trema durante il movimento, quindi non è affatto necessario mettere il cerchio esattamente al centro dell'inquadratura. Posizionalo a occhio.
Allo stesso modo, devi copiare il cerchio su ogni livello successivo, mentre dipingi con un colore più chiaro un settore in più rispetto alla volta precedente. Insieme, questi 12 strati formano un film di interpolazione con un cerchio di riempimento.
Successivamente abbiamo bisogno di aggiungere texture ai nostri livelli. Accendi il primo livello e copia lì la trama dal file originale con i pezzi di ricambio.
Quindi attiva a turno i livelli successivi e copia lì la stessa trama. Per farlo sembrare 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, allora posso farti piacere: è rimasto ben poco. La parte più difficile è finita. Resta da aggiungere graffi verticali e quasi tutto. Per fare ciò, di nuovo, copia il graffio originale e posizionalo in un luogo arbitrario in più livelli. Nel mio caso, i graffi appaiono solo in due strati.
Ora che il loop principale con l'animazione del film è pronto, resta da aggiungere i numeri. Dal momento che stiamo contando da 3 a 1 più la parola Go !!!, abbiamo bisogno di ancora più livelli. Non 12, ma ben 48. Per fare ciò, devi creare altre tre copie dei livelli già pronti con l'animazione del film.
E poi tutto è semplice. Accendi il primo strato e metti lì il numero tre.
Quindi è necessario copiare questo numero nei livelli successivi fino alla fine dell'animazione del cerchio. Quando arrivi alla copia successiva dei livelli, dove il cerchio sarà di nuovo completamente dipinto, devi già mettere il numero due. Allo stesso modo, copia il numero uno sui livelli desiderati. E quando arrivi ai livelli finali per la didascalia Go !!!, elimina semplicemente il cerchio prima di copiare la didascalia nel livello desiderato.
Questo è tutto con l'animazione. La cosa principale qui è non confondersi. Puoi dare ai livelli alcuni nomi convenienti, ma in qualche modo ero troppo pigro :) Eppure, quando hai finito, assicurati di riattivare tutti i livelli facendo clic sull'icona a forma di occhio.
Nella finestra con le impostazioni di esportazione, assicurati di impostare Esporta come: AI Layers su SWF Frames. È questa opzione che trasforma i livelli di Illustrator in fotogrammi di animazione. Quindi fare clic sul pulsante Avanzate.
Aprirà altre impostazioni... Qui è necessario impostare il frame rate Frame Rate. Ho 12 fotogrammi al secondo. La casella di controllo Looping è responsabile del loop dell'animazione. Grazie a lei, il video verrà riprodotto in cerchio. E l'opzione Ordine livelli: dal basso verso l'alto riproduce i livelli dell'illustratore dal basso verso l'alto nel pannello. Questo è esattamente il modo in cui abbiamo costruito la nostra animazione.
All'uscita, otteniamo un video flash con la nostra animazione.
Ora puoi vedere che realizzare semplici animazioni in Adobe Illustrator non è così difficile come sembra a prima vista.
Ma per creare video lunghi o applicazioni interattive è comunque meglio utilizzare Adobe Flash o altri editor flash. Ad esempio, ho realizzato questo gatto in un vecchio Macromedia Flash che ho scovato durante il mio lavoro.
Inoltre, recentemente, HTML5 e CSS3 sono stati sempre più utilizzati 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 perderti le novità:
Ottimizzazione della grafica web
Le informazioni grafiche vengono trasmesse molto più lentamente delle informazioni di testo e il tempo di caricamento delle immagini è proporzionale alla dimensione dei loro file grafici. Ecco perchè caricamento veloce Le pagine Web assumono una piccola dimensione incorporata in esse immagini grafiche, che si ottiene ottimizzandoli. L'ottimizzazione dell'immagine è intesa come la sua trasformazione 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 singoli frammenti di immagini.
Illustrator dispone di strumenti di ottimizzazione delle immagini incorporati che forniscono un processo di ottimizzazione rapido ed efficiente attraverso vari 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 ea fare una buona selezione. impostazioni desiderate... E puoi ottimizzare sia le immagini create direttamente in Illustrator che altre, ad esempio fotografie che dovrebbero essere pubblicate su un sito Web.
I parametri di ottimizzazione sono impostati nella finestra Salva per Web(Salva per Web) chiamato dal comando omonimo dal menu File(File). Il programma offre l'utilizzo di 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 l'altra due sono varianti delle attuali impostazioni di ottimizzazione.
Entrambe le modalità consentono di risparmiare notevolmente tempo durante la ricerca della migliore opzione di ottimizzazione, poiché eliminano la necessità di salvare immagini con impostazioni di ottimizzazione diverse e quindi di confrontarle visivamente. Inoltre, è possibile valutare non solo la qualità dell'immagine ottimizzata, ma anche le sue dimensioni e il tempo di caricamento per diverse opzioni di connessione. Per fare un confronto, la modalità più conveniente è 4-Up (quattro opzioni), che consente di valutare visivamente l'effetto della compressione o della riduzione della tavolozza sulla qualità dell'immagine e delle sue dimensioni e, infine, determinare migliori parametri ottimizzazione.
Illustrator consente di ottimizzare la grafica web nei formati non solo GIF, JPG, PNG-8 e PNG-24, ma anche SWF e SVG. Le immagini indicizzate con un numero ridotto di colori vengono memorizzate in Formato GIF... Per salvare immagini a colori e in scala di grigi, fotografie e grafica ricca di colori come riempimenti sfumati, utilizzare formato JPG... Per immagini a colori con aree trasparenti, applicare Formato PNG che permette di salvare sia immagini indicizzate che a colori, mentre in formato PNG-8 il numero massimo possibile di colori di un'immagine ottimizzata è 256, mentre in formato PNG-24 un'immagine può avere milioni di colori, e quindi è simile a 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.
Tener conto di esempio specifico ottimizzazione dell'immagine. Supponiamo che il logo di un sito Web sia stato sviluppato in Illustrator (Fig. 3), inizialmente salvato in formato AI. Un tentativo di ottimizzazione immediata per il Web non porterà a nulla di buono, poiché in questo caso l'immagine verrà automaticamente ritagliata, il che non terrà conto della reale posizione del lettering ottenuto a seguito della deformazione (Fig. 4 e 5).
Pertanto, proviamo ad esportare il logo in Formato PSD squadra 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 devi decidere. Sperimentando con le impostazioni, puoi assicurarti che migliore qualità fornisce l'algoritmo di compressione predefinito del programma Selettivo(Selettivo). Per quanto riguarda l'anti-aliasing, data la presenza di un riempimento sfumato, è meglio scegliere un algoritmo con generazione di rumore - Rumore(fig. 6). La dimensione del file di ottimizzazione risultante sarà di 6.729 KB (Fig. 7), mentre verrà preservata la trasparenza dello sfondo, cosa facilmente verificabile salvando l'immagine in formato GIF insieme al file HTML (Fig. 8). Di conseguenza, in questo esempio i file emblem.html ed emblem.gif sono stati ottenuti nella cartella Primer1.
pulsanti
Un elemento specifico indispensabile del design di qualsiasi pagina Web sono i controlli grafici: i pulsanti. È semplicemente impossibile immaginare una pagina senza di loro. I pulsanti di disegno sono diventati un genere speciale oggi e Illustrator ti consente di creare le opzioni più complesse. Ad esempio, i pulsanti progettati come oggetti griglia e/o con maschere sovrapposte sembrano molto più impressionanti di quelli normali.
Consideriamo l'opzione di creare un pulsante rotondo convesso in Illustrator. Disegna un oggetto vettoriale a forma di cerchio riempito con qualsiasi colore (Fig. 9) e convertilo in una mesh usando il comando Oggetto => Crea mesh gradiente(Oggetto => Crea mesh gradiente) specificando quattro righe e quattro colonne e nell'elenco Aspetto esteriore(Visualizza) scegliendo un'opzione Al centro Evidenziare(Retroilluminazione) pari a 60 (Fig. 10). Scegli uno strumento Selezione diretta e clicca a sinistra angolo superiore oggetto, evidenziando i punti nodo ivi situati (Fig. 11). Cambia il colore della cella corrispondente in bianco selezionandolo nella tavolozza campioni(fig. 12).
Prendi uno strumento Ellisse(Ellisse), posiziona il pennarello del mouse al centro del cerchio creato prima di questo e, tenendo premuti i tasti Alt e Spostare, allunga il nuovo cerchio su quello vecchio in modo che sia di 1-2 pixel più grande del vecchio su tutti i lati. Falle un bordo nero ( Ictus) di 1-2 pixel di larghezza e riempire con un gradiente radiale dal rosso al bianco (Figura 13). Trascina l'oggetto vettoriale creato per 1-2 pixel verso destra e verso il basso, quindi, senza rimuovere la selezione, fai clic con il pulsante destro del mouse su di esso e da menù contestuale selezionare squadra Disponi => Porta in secondo piano(Disponi => Rimanda indietro). Di conseguenza, ottieni uno spazio vuoto per il pulsante, mostrato in Fig. quattordici.
Di norma, su qualsiasi pagina Web sono presenti diversi pulsanti dello stesso tipo, che differiscono, ad esempio, solo nella direzione delle frecce disegnate su di essi, che indicano la direzione di movimento attraverso il sito. Consideriamo il caso più semplice di avere due pulsanti, uno dei quali, con una freccia in basso, significherà passare alla pagina successiva, e un pulsante con una freccia in alto, a quella precedente. Come una freccia vuota, prendi un normale triangolo disegnato dallo strumento Poligono(Polygon), riempito di nero e decorato anche come un oggetto mesh per un maggiore effetto. Sposta la freccia sul pulsante e regola la posizione di tutti gli oggetti l'uno rispetto all'altro utilizzando i pulsanti corrispondenti sulla tavolozza Allineare(Allineamento). Il primo dei pulsanti ottenuti è mostrato in Fig. 15. Crea una copia del livello del pulsante selezionando il comando Duplica livello strati, - di conseguenza, otteniamo due livelli identici. Quindi, sulla copia del livello, seleziona la freccia e ruotala di 180° selezionando il comando Trasforma => Ruota- Trasformazione => Rotazione. 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 versioni ottimizzate di ciascuno dei pulsanti. Per prima cosa rendi invisibile il livello inferiore: in questo caso il pulsante sul livello superiore verrà salvato. Seleziona una squadra File => Salva per Web(File => Salva per Web), configurare le opzioni di ottimizzazione dei pulsanti, ad esempio, come mostrato nella Figura 1-4. 17, fare clic sul pulsante Salva(Salva) e inserire il nome del file. Il pulsante salvato come risultato è mostrato in Fig. 18. Ora restituisci la visibilità del livello inferiore, e rendi invisibile quello superiore e allo stesso modo salva il secondo pulsante, dandogli un nome diverso. Il risultato è mostrato in Fig. 19.
Ora non resta che assicurarsi che i pulsanti abbiano un bell'aspetto nella pagina Web e posizionarli in una pagina personalizzata (Figura 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 fetta. In questo caso, dopo aver scelto il comando File => Salva per Web(File => Salva per Web) e impostando i parametri di ottimizzazione, selezionare lo strumento dalla tavolozza degli strumenti Seleziona fetta(Selezionare una fetta) e fare doppio clic sull'immagine, che alla fine si trasformerà automaticamente in una fetta con numero di serie 1 (Fig. 21). Facendo nuovamente doppio clic con il mouse si aprirà la finestra Opzioni fetta(Opzioni sezione), 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 sarà Primer3.html (Fig. 23) e Primer3.gif (cartella Primer3).
Elementi interattivi
Un modo per dare vita a una pagina è introdurre elementi di design che ne cambino aspetto esteriore(o stato) a seconda del comportamento del mouse o, meno frequentemente, in caso di altre situazioni: ridimensionamento, scorrimento, caricamento, errori, ecc.
Tra questi elementi, i più famosi sono i rollover (dall'inglese roll over - to roll, turn over) - elementi che cambiano aspetto sotto l'influenza di un mouse. I pulsanti animati sono esempi di rollover tipici. I rollover vengono spesso utilizzati per creare altri elementi di navigazione del sito. In effetti, ogni 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, Over - passaggio del cursore del mouse su un elemento e Giù - pressione del pulsante sinistro del mouse quando il cursore è posizionato su di esso. In teoria, possono essere coinvolti eventi come Click - rilascio del pulsante sinistro del mouse dopo aver premuto, Up - dopo aver rilasciato il pulsante, Out - quando si esce dalla zona attiva. Tuttavia, in pratica, spesso si limitano a cambiare l'elemento solo per i primi tre o anche due eventi.
Rollover classici
In senso classico, rollover è una serie di immagini grafiche in formato GIF e il corrispondente codice HTML, per cui, a seconda del comportamento del mouse, un'immagine sostituisce un'altra nella finestra del browser.
Illustrator non è progettato per creare rollover direttamente nel senso classico, ma può aiutarti a progettare gli elementi iniziali per loro. L'idea in questo caso è creare un livello con un'immagine corrispondente al primo evento. Quindi fai una copia del livello e trasforma l'immagine in modo che corrisponda al secondo evento, ecc. L'immagine multilivello risultante viene esportata in un file PSD con i livelli conservati, in base al quale viene creato il rollover nel programma Image Ready. Il vantaggio di usare 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 iscrizione che cambia colore a seconda del comportamento del mouse. Apri Illustrator e crea una forma rettangolare arrotondata riempita di nero (Figura 24), creane una copia e posizionala in un'area libera dello schermo. Converti la prima copia del rettangolo in un oggetto griglia con un'evidenziazione al centro (comando Oggetto => Crea mesh gradiente- Object => Create Gradient Mesh) specificando quattro righe e dieci colonne (Figura 25). Attiva la seconda copia del rettangolo e regola il riempimento sfumato approssimativamente come mostrato in Fig. 26. Miscela l'oggetto sfumatura sulla trama, abbassa l'opacità dell'oggetto sfumatura a circa l'80% e le sue dimensioni di circa 1 pixel per imitare l'effetto rilievo. E poi stampa il testo sugli oggetti. Nella sua forma originale, lascia che abbia il colore bianco, che corrisponderà allo stato Normale (Fig. 27), quindi, quando lo stato di rollover cambia, il colore della didascalia cambierà, ad esempio, in verde - quando ti sposti il puntatore del mouse su di esso (stato sopra) e al blu - quando viene premuto il pulsante del mouse (stato giù).
Attenzione alla tavolozza strati- in questa fase c'è solo un singolo strato in esso. Crea due copie di questo livello usando il comando Duplica livello(Duplica livello) dal menu della palette strati, - ci saranno tre livelli nella tavolozza (fig. 28). Quindi nella prima copia del livello cambia il colore della didascalia in verde e nella seconda in blu (Fig. 29). Di conseguenza, otterrai lo spazio vuoto necessario per il rollover.
Esporta il tuo pop questa immagine in formato PSD con i livelli salvati utilizzando il comando File => Esporta(File => Esporta) e scegliendo il modello colore RGB (Fig. 30). Aprire il file PSD creato in ImageReady (Fig. 31 e 32). Crea fotogrammi dai livelli scegliendo il comando Crea cornici dai livelli(Crea cornici da livelli) dal menu della palette Animazione... La finestra Animazione apparirà come in Fig. 33. Allo stesso tempo nella tavolozza Rollover inizialmente, verrà creato un singolo stato Normale.
Poi nella finestra Animazione selezionare la cornice corrispondente allo stato hover, mentre nella tavolozza strati il livello viene selezionato automaticamente Copia livello 1(fig. 34). Vai alla tavolozza Rollover e clicca sul pulsante Crea stato rollover(Crea stato rollover) - fig. 35, che porterà alla comparsa della condizione Oltre lo stato nella tavolozza Rollover(fig. 36). Crea lo stato allo stesso modo stato giù... Attiva lo stato Normale nella tavolozza Rollover ed elimina nella tavolozza Animazione tutti i frame, tranne quello che dovrebbe corrispondere allo stato Normale... Di conseguenza, per ogni stato di rollover nella tavolozza Animazione ci sarà un solo frame (fig. 37, 38 e 39).
Riso. 38. Vista immagine, finestre di animazione e tavolozze Livelli e Rollover per Stato sovra
Controlla il risultato cliccando sul pulsante Anteprima nel browser predefinito(Anteprima del browser) sulla barra degli strumenti e accedendo alla finestra del browser (Figura 40). Dopodiché salva il file usando il comando File => Salva ottimizzato(File => Salva ottimizzato) e specificando un'opzione HTML e immagini (* .html)... Di conseguenza, in questo esempio, abbiamo ottenuto il file Primer4.html e una serie di immagini grafiche nella cartella delle immagini.
Riso. 40. Finestra del browser con elemento rollover
Rollover SVG
La crescente popolarità del formato SVG (Scalable Vector Graphics - scalable Grafica vettoriale), creato sulla base dello standard XML, consente anche di ricevere una varietà di elementi interattivi, in particolare rollover, solo in pratica è implementato in 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 in modo completamente automatico, richiede la conoscenza del linguaggio JavaScript e la comprensione dei principi di base della programmazione orientata agli oggetti.
C'è una tavolozza speciale per lavorare con gli oggetti SVG. Interattività SVG, che è facile da aprire usando il comando Finestra => Interattività SVG(Finestra => interattività SVG) - fig. 41.
Tener conto di questa opzione creando un rollover utilizzando l'esempio di un pulsante interattivo, il colore della didascalia su cui cambierà da nero a blu quando il mouse passa sopra e di nuovo convertito in nero quando il mouse lascia la zona attiva.
Crea un pulsante rettangolare con bordi arrotondati e seleziona un riempimento sfumato adatto, ad esempio, come mostrato in Fig. 42. Regola la trasparenza del pulsante nella tavolozza trasparenza(Trasparenza) - in questo esempio, il valore del parametro Opacità(Opacità) impostato al 50%. Fai una copia del pulsante, riempilo con un colore verde scuro (fig. 43), quindi convertilo in un oggetto mesh con il comando Oggetto => Crea mesh gradiente(Oggetto => Crea mesh gradiente) specificando quattro righe e dieci colonne e nell'elenco Aspetto esteriore(Visualizza) scegliendo un'opzione Al centro(Centro) e impostazione del valore Evidenziare(Evidenzia) uguale a 100. Riduci l'opacità del livello oggetto mesh di circa il 40% (fig. 44). Posiziona l'oggetto mesh sopra il gradiente e il pulsante assomiglierà a quello mostrato in Fig. 45.
Riso. 44. Trasformare una copia di un pulsante in un oggetto mesh
Completa il pulsante con la didascalia desiderata e regola la sua posizione utilizzando i pulsanti corrispondenti sulla tavolozza Allineare(Allineamento). L'immagine risultante conterrà un singolo livello con tre oggetti sovrapposti (Figura 46). Gli eventi pianificati faranno riferimento all'oggetto di testo, quindi per comodità, cambia il suo nome in Testo facendo doppio clic sull'oggetto e immettendo un nuovo nome. Cambia il nome del livello allo stesso modo da Da Livello 1 a Livello(fig. 47).
La gestione degli eventi presuppone l'uso di procedure JavaScript, quindi è necessario includere un file che descriva queste procedure. Si chiama Events.js e viene salvato su disco nella cartella Sample Files \ Sample Art \ SVG \ SVG durante l'installazione Programmi Adobe Illustratore. Per connettere il file Events.js usa il comando File JavaScript Interattività SVG(fig.48). Successivamente, è necessario premere il pulsante Aggiungere(Aggiungi) e individuare il file desiderato sul disco rigido. Quando il suo nome appare nel campo URL(fig. 49), fare clic sul pulsante Fatto(Disconnettersi).
Riso. 48. Scelta del comando File JavaScript
Successivamente, dovresti definire la reazione agli eventi del mouse per l'oggetto. Testo... Seleziona l'oggetto Testo, nel campo Evento(Eventi) tavolozze Interattività SVG seleziona evento al passaggio del mouse elemColor (evt, "Testo", "# 3333FF")- questo significherà che quando il mouse è sopra l'oggetto Testo il suo colore cambierà in blu (fig. 50). Affinché il colore del testo diventi nero dopo che il mouse lascia la zona attiva, dovrai creare un altro evento sumouseout- selezionalo nel campo Evento(Eventi) tavolozze Interattività SVG... Quindi nella riga dell'azione inserisci il testo elemColor (evt, "Testo", "# 000000")- questo tornerà nero (fig. 51).
Riso. 51. La vista finale della tavolozza Interattività SVG per l'oggetto Testo
Salva il rollover creato come file SVG con il comando File => Salva con nome(File => Tipo di file formato SVG, quindi configurare le opzioni per salvare il file SVG come mostrato in Fig. 52. Dopo il salvataggio, riceverai un solo file con estensione SVG, e non due, come nel caso del rollover classico: in questo caso è stato ottenuto il file Primer5.svg (cartella Primer5). Tuttavia, affinché il rollover funzioni davvero, è necessario copiare anche il file Events.js con la descrizione delle procedure JavaScript nella cartella con il file SVG. Successivamente, puoi verificare se il rollover funziona: il risultato sarà simile a quello mostrato in Fig. 53.
Animazione SVG
Il formato SVG può essere utilizzato anche per trasmettere l'animazione. Proviamo a creare un semplice elemento di animazione (in questo caso si tratterà di informazioni sull'azienda), che apparirà sullo schermo quando si passa il mouse sull'oggetto grafico corrispondente e scomparirà quando il mouse viene rimosso dall'elemento interattivo.
Creiamo una serie di oggetti grafici e di testo come quello mostrato in Fig. 54. Rinominare comodamente tutti gli oggetti creati cliccando in sequenza sul nome dell'oggetto successivo nella palette strati e inserendo il nome desiderato (fig. 55). Si noti che l'evidenziato in Fig. 56 oggetti - Testo1, Testo2, Testo3 e Percorso1- sarà sempre visibile, e tutti gli altri - solo quando passi il mouse sull'oggetto Testo 1.
Riso. 54. Vista originale dell'immagine
Includere il file Events.js con la descrizione delle procedure JavaScript utilizzando il comando File JavaScript(file JavaScript) dalla tavolozza Interattività SVG premendo il pulsante Aggiungere(Aggiungi) selezionando il file desiderato sul disco rigido e facendo clic sul pulsante Fatto(Disconnettersi).
Definire una reazione agli eventi del mouse per un oggetto Testo 1... Seleziona un oggetto Testo, in campo Evento(Eventi) tavolozze Interattività SVG seleziona evento al passaggio del mouse e nella riga sottostante inserisci il testo elemShow (evt, "Text4"); elemShow (evt, "Percorso2")... Di conseguenza, quando il mouse è sopra l'oggetto Testo 1 gli oggetti diventeranno visibili Testo4 e Percorso2... Si noti che se devono essere eseguite più azioni quando si verifica un evento, è necessario specificarle tramite il segno ";". Quindi eseguire un'operazione simile rispetto all'evento sumouseout inserendo il testo per esso, il che significherà nascondere gli oggetti (Fig. 57).
Salva il risultato come file SVG con il comando File => Salva con nome(File => Salva con nome) specificando il nome del file selezionandolo nel campo Tipo di file SVG, quindi configurare le opzioni per salvare il file SVG come mostrato in Fig. 58. Dopo aver salvato, otterrai il file Primer6.svg (cartella Primer6). Non dimenticare di copiare il file Events.js nella cartella con questo file. Se dopo corri cos questa vita, quindi vedrai il risultato mostrato in Fig. 59. Questo è quasi ciò di cui hai bisogno. L'unica cosa che non era inclusa nei nostri piani era l'aspetto iniziale degli oggetti. Testo 4 e Il percorso 2 all'avvio. Per eliminare questo difetto, seleziona entrambi gli oggetti dati contemporaneamente e crea un'azione per loro. elemHide (evt, "Text4"); elemHide (evt, "Percorso2") all'evento caricare(fig. 60). Salva di nuovo il file e assicurati che gli oggetti siano ora Testo4 e Percorso2 visibile solo quando passi il mouse sopra l'oggetto Testo 1.
Animazione GIF
Qualsiasi pagina Web è impensabile senza l'animazione Web, comprese le gif animate. Una delle opzioni per crearli è l'utilizzo dell'applicazione Adobe ImageReady, che, tra le altre cose, consente di creare animazioni dai livelli. Allo stesso tempo, l'immagine a strati stessa può essere preparata in diverse applicazioni, incluso Adobe Illustrator.
È molto facile creare animazioni basate su elementi della tavolozza Simboli(Simboli) aperti dal comando Finestra => Simboli(Finestra => Simboli) o da una delle librerie di simboli che si possono aprire con il comando Finestra => Librerie di simboli(Finestra => Librerie di simboli).
Ad esempio, proveremo ad aumentare le dimensioni di qualsiasi oggetto simbolo; le fasi chiave del processo di ingrandimento 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 tavolozza strati verrà creato un livello con molti oggetti (Fig. 62). Se esporti direttamente questa immagine nel formato PSD, non farà nulla, poiché c'è solo un livello e, naturalmente, quando apri il file PSD nel programma ImageReady, ci sarà anche un solo livello. Pertanto, è necessario prima posizionare gli oggetti su livelli diversi. Questo si può fare diversi modi- il modo più semplice è selezionare prima il livello Strato 1 nella palette Livelli e usa il comando Rilascia al livello(Rilascia ai livelli). Il risultato sarà lo spostamento di ciascuno degli oggetti sul proprio livello, ma tutti saranno annidati nel livello. Strato 1... Pertanto, dovrai trascinare manualmente tutti i livelli nidificati in parte superiore la palette Livelli in modo che siano sopra il livello Strato 1 e poi il livello vuoto Strato 1 basta rimuovere (fig. 63). Esporta l'immagine in formato PSD usando il comando File => Esporta(File => Export) con le impostazioni come in fig. 64.
Caricare il file PSD creato in ImageReady (Figure 65 e 66). Apri il menu della tavolozza AnimazioneCrea cornici dai livelli(Crea cornici dai livelli). Di conseguenza, verranno creati cinque frame, ognuno dei quali corrisponderà al proprio livello, e la finestra della tavolozza Animazione assumerà la forma come in fig. 67.
Successivamente, imposta la durata di ciascuno dei fotogrammi creati: in questo caso, la durata per tutti i fotogrammi è impostata su 0,2 s. E poi salva l'animazione ottimizzata con il comando File => Salva ottimizzato(File => Salva ottimizzato). Il risultato ottenuto può assomigliare alla Fig. 68.
È ancora più conveniente ottenere spazi vuoti, che sono facili da trasformare in animazioni in ImageReady, utilizzare le funzioni Miscele dal vivo Software illustratore. 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 questo file direttamente per creare l'animazione, poiché l'immagine è su un singolo livello (Fig. 70). Pertanto, è prima necessario posizionare ciascun elemento dell'oggetto di fusione su un livello separato. Per questo in vetrina strati evidenzia la linea
Riso. 70. Stato iniziale della finestra Livelli
Esporta il file creato in formato PSD con il comando File => Esporta(File => Esporta). Aprire il file PSD creato nel programma ImageReady (fig. 73). Nota che tutti i livelli creati in Illustrator appariranno nella finestra dei livelli (Fig. 74) e nella finestra Animazione ci sarà solo un frame finora.
Attiva il menu della tavolozza Animazione facendo clic sulla freccia nera nell'angolo in alto a destra della tavolozza e scegli il comando Crea cornici dai livelli(Crea fotogrammi dai livelli) - di conseguenza, in questo esempio, verranno creati cinque fotogrammi e la finestra della tavolozza Animazione assumerà la forma secondo la Fig. 75. Seleziona tutti i fotogrammi tenendo premuto il tasto Spostare e impostare una durata del fotogramma adeguata: in questo esempio, per ciascuno dei fotogrammi, viene impiegato lo stesso tempo di 0,2 s. Quindi salva il file ottimizzato con il comando File => Salva ottimizzato(File => Salva ottimizzato) impostando nell'elenco Tipo di file opzione Solo immagini (* .gif)... L'animazione assomiglierà alla Fig. 76.
Molto più interessante non è lo spostamento, ma il ridimensionamento uniforme degli oggetti di fusione. Ad esempio, puoi utilizzare la transizione di fusione già creata. In questo caso, dopo aver creato livelli separati per ogni elemento di transizione di fusione, posiziona tutti gli oggetti uno sopra l'altro utilizzando i pulsanti Allineamento orizzontale al centro(allineamento al centro orizzontale) e Allineamento verticale al centro(Allineamento verticale al centro) tavolozza Allineare(fig. 77).
Esporta il file creato in formato PSD ( File => Esporta- File => Export) e aprire il file PSD creato nel programma ImageReady (fig. 78). Crea fotogrammi di animazione ( Crea cornici dai livelli- Creare fotogrammi dai livelli) e selezionare una durata adatta per loro (fig. 79). E poi, per rendere l'animazione più efficace, copia i fotogrammi esistenti, ma in 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 ottimizzato- File => Salva con ottimizzazione). L'animazione risultante è mostrata in Fig. 81.
Riso. 80. Stato della finestra Animazione dopo la duplicazione dei fotogrammi
Riso. 81. Animazione finita
