Share
Segui questo tutorial e scopri come creare un set di etichette lucide e anche uno stato di rollover. Useremo più aspetti e pennelli Art personalizzati per ottenere l'aspetto lucido e quando avremo finito analizzeremo le opzioni Salva per Web. Parleremo delle impostazioni e confronteremo diversi formati di file per ottenere l'immagine migliore per la tua pagina web. Molte variazioni di colore ti aspettano, quindi cominciamo!
Per prima cosa apri un nuovo documento web. Prendi lo Strumento Rettangolo (M), fai clic in qualsiasi punto della tua tavola da disegno per aprire la finestra Rettangolo e inserisci le dimensioni mostrate. Con questo rettangolo selezionato, vai al menu Oggetto> Percorso> Aggiungi punti di ancoraggio. Di conseguenza otterrai un punto in più nel mezzo di ogni lato. Ora, seleziona utilizzando lo Strumento selezione diretta (A) solo il punto in basso, vai al menu Oggetto> Trasforma> Sposta, sotto Tipo verticale meno 55 px e premi OK.
Utilizzando anche lo Strumento selezione diretta (A) e tenendo premuto il tasto Maiusc, selezionare i due punti indicati, quindi andare al menu File> Script> Arrotonda qualsiasi angolo. Esegui lo script e seleziona un 10 Raggio. Se non hai ancora installato questo script, vai qui e prendilo.
Ora seleziona il punto dalla punta ed esegui di nuovo lo script. Questa volta seleziona un 15 Raggio.
Riempi la forma dell'etichetta con il gradiente lineare mostrato e modifica l'angolo a meno 90 gradi. Avendo selezionato questo attributo di riempimento nel pannello Aspetto, premi l'icona Duplica elemento selezionato in basso e riempi il secondo riempimento. Sostituisci il gradiente blu con un motivo denominato Punto retino che puoi trovare nel menu Librerie di campioni in Modelli> Grafica di base> Grafica_Tempi di base. Imposta il modello su Schermo e riduci l'opacità al 70%.
Quindi, seleziona un tratto blu, quindi vai al menu Effetto> Tracciato> Tracciato offset e applica un offset di meno 7 px. Nel pannello Traccia, seleziona l'opzione Linea tratteggiata e seleziona un trattino a 5 punti.
Aggiungi un altro tratto premendo l'icona Duplica elemento selezionato nella parte inferiore del pannello Aspetto e cambia il colore da blu a bianco. Il trattino e i valori di offset rimangono gli stessi. Vai al menu Effetto> Distorci e Trasforma> Trasforma e nella sezione Sposta in orizzontale seleziona meno 1 px. Cambia la modalità di fusione in Luce soffusa ma solo per questo tratto bianco.
Ora creiamo un nuovo pennello artistico. Utilizza lo strumento Ellisse (L), fai clic in qualsiasi punto della tua tavola da disegno per aprire la finestra di Ellisse e inserisci le dimensioni mostrate. Utilizzare lo strumento selezione diretta (A) per selezionare solo i punti da sinistra e destra di questa ellisse e fare clic sull'opzione Converti punti di ancoraggio selezionati sull'angolo. Seleziona la forma risultante, quindi vai a Menu Oggetto> Percorso> Offset Path e applica un offset di meno 0,7 px per ottenere una forma più piccola nel mezzo.
Entrambe le forme sono piene di bianco. Riduci Opacità per la forma più grande a 0%, quindi selezionali entrambi e vai al menu Oggetto> Miscela> Opzioni di fusione. Qui, seleziona 25 Passi specificati e premi OK, quindi torna al menu Oggetto> Miscela> Crea. Trascina il gruppo di fusione risultante nel pannello Pennelli e scegli Nuovo pennello artistico.
Copia e incolla davanti alla forma dell'etichetta, rimuovi il riempimento sfumato e dagli un tocco. Abbiamo bisogno di tagliare questa forma, quindi prendere lo strumento forbici (C) e fare clic sui punti indicati. Mantieni solo i tre percorsi (nero, rosso e viola) ed elimina gli altri segmenti. Traccia questi percorsi con il pennello Art salvato nel passaggio precedente quindi imposta i pesi Stroke come indicato. Cambia la modalità di fusione in Sovrapposizione per tutti e tre.
Ora, aggiungiamo l'ombra. Duplica il riempimento sfumato, quindi modifica il colore in nero. Con questo attributo selezionato, vai al menu Effetto> Deforma e applica l'effetto Gonfia per ingrandire la parte superiore (immagine 1). Successivamente, vai al menu Effetto> Sfocatura> Sfocatura gaussiana e applica un Raggio di 6 px (immagine 2), quindi vai al menu Effetti> Distorsione e Trasforma> Trasforma. Scegli di spostare questo riempimento nero meno 5 px in verticale poi premi OK (3) e imposta la modalità di fusione su Luce soffusa (4).
Ecco le impostazioni per gli effetti Gonfia e Trasforma:
In questa fase maschereremo la parte superiore dell'etichetta. Prendi lo Strumento Rettangolo (M) e disegna un rettangolo sopra l'etichetta come nell'immagine. Ora seleziona entrambe le forme (rettangolo + etichetta) e vai al menu Oggetto> Maschera di ritaglio> Crea.
Quindi, prendi lo strumento Ellisse (L) e disegna due ellissi con le dimensioni mostrate. Assicurati che siano centrati, quindi mettili in cima all'etichetta. I punti di ancoraggio sinistro e destro delle ellissi dovrebbero essere allineati con il rettangolo usato per mascherare prima. Entrambe le ellissi sono piene di nero solo che il più grande ha l'opacità impostata su 0%. Selezionali quindi vai al menu Oggetto> Miscela> Opzioni di fusione e seleziona 30 Passi specificati. Successivamente, torna al menu Oggetto> Miscela e scegli Crea. Il gruppo di Blend risultante dovrebbe essere dietro l'etichetta.
Dobbiamo fare un'altra maschera. Disegna con lo strumento rettangolo (M) un rettangolo come quello nero dal basso e invialo dietro l'etichetta ma davanti al gruppo di fusione. Prima di continuare, allinearlo in alto con l'altro rettangolo utilizzato in precedenza. Ora seleziona il gruppo di fusione e questo rettangolo e vai al menu Oggetto> Maschera di ritaglio> Crea.
Prendi lo Strumento Penna (P) o lo Strumento Segmento Linea (\) e traccia un percorso rettilineo esattamente sul bordo superiore dell'etichetta come sotto. Tracciala con il pennello Art salvato nel passaggio 5 e imposta il peso su 0,25 pt. Riduci l'opacità all'80%.
Disegna un altro tracciato diritto sull'etichetta e accarezzalo con un pennello Art chiamato Dry Brush 5 che puoi trovare nel menu Librerie pennelli sotto Artistico> Artistic_Paintbrush. Impostare il peso del tratto su 1,5 pt, quindi selezionare Espandi aspetto e Separa dal menu Oggetto. Riempi la forma risultante con il gradiente lineare mostrato e imposta l'angolo a 90 gradi.
Copia e incolla davanti alla forma dell'etichetta e prima di continuare cancella tutti gli aspetti esistenti. Selezionare la forma ottenuta nel passaggio precedente e anche la copia dell'etichetta, che deve essere in primo piano e andare al menu Oggetto> Maschera di ritaglio> Crea (immagine 1). Per ottenere l'aspetto lucido, modificare la modalità di fusione su Schermo e ridurre l'opacità al 70% per la forma ottenuta nel passaggio precedente (immagine 2). Se pensi che i bordi siano troppo nitidi puoi applicare una sfocatura gaussiana di 1 px (immagine 3).
Disegna un piccolo triangolo, quindi vai a menu File> Script> Arrotonda qualsiasi angolo. Esegui lo script e seleziona un 5 raggio.
Metti il triangolo nella parte inferiore dell'etichetta e seleziona blu come colore di riempimento (immagine 1). Vai al menu Effetto> Stilizza e applica l'effetto Bagliore interno (2) quindi applica l'effetto Ombra esterna (3) usando le impostazioni mostrate.
L'ultima cosa da fare è il testo. Prendi lo Strumento testo (T) e scrivi del testo e usa un font chiamato Devinne Swash che puoi trovare qui. Seleziona Espandi dal menu Oggetto per trasformare il testo in forme e mantenere il riempimento nero. Vai al menu Effetto> Stilizzazione e applica l'effetto Ombra esterna usando le impostazioni mostrate. Cambia la modalità di fusione in Sovrapposizione.
A questo punto l'etichetta è pronta e continueremo con lo stato di rollover.
Crea una copia dell'etichetta e cambieremo solo alcune cose. Alcune delle forme sono nascoste nelle seguenti immagini e ne parleremo al momento giusto. Concentriamoci sulla forma dell'etichetta e prima modifica il riempimento del gradiente. Cambia anche la tonalità di blu usata per il primo tratto.
Ora modificheremo l'ombra. Fare doppio clic su Sfocatura gaussiana nel pannello Aspetto per aprire la finestra Sfocatura gaussiana e ridurre il raggio da 6 a 4 px. Successivamente, fai doppio clic sull'effetto Gonfiamento applicato per aprire la finestra Opzioni Warp e modifica il valore Piega da 5 a meno 5%.
Seleziona il riempimento sfumato nel pannello Aspetto e premi l'icona Duplica elemento selezionato in basso. Di conseguenza otterrai un altro riempimento sopra. Mantieni la stessa sfumatura e vai al menu Effetto> Tracciato> Tracciato offset e applica un offset di meno 6,5 px. Quindi, vai al menu Effetto> Stilizzazione e applica l'effetto Bagliore interno usando le impostazioni mostrate.
Creiamo un nuovo pennello Art simile a quello salvato al passaggio 5. Usa lo strumento Ellisse (L) per disegnare un'ellisse piatta di 100 x 3 px, quindi trasforma i punti sinistro e destro da punti lisci a punti angolari usando Converti punti di ancoraggio selezionati in opzione d'angolo. Vai al menu Oggetto> Percorso> Offset Path e applica un offset di meno 1,2 px per ottenere la forma più piccola al centro. Riduci Opacità per l'ellisse più grande a 0%, quindi selezionale entrambe e vai al menu Oggetto> Miscela> Opzioni di fusione. Scegli 25 punti specificati, quindi torna al menu Oggetto> Miscela> Crea. Trascina il gruppo di fusione risultante nel pannello Pennelli e seleziona Nuovo pennello artistico.
Ora, traccia i tre percorsi con il nuovo pennello Art. Impostare il peso su 0,25 pt e la modalità di fusione su Luce soffusa per tutti e tre.
In questo caso vogliamo che la forma lucida sia meno visibile, quindi riduciamo l'opacità dal 70 al 25%.
Cambia la sfumatura di blu usata per riempire il triangolo, quindi fai doppio clic sull'effetto Ombra applicata applicata nel pannello Aspetto. Nella finestra ridurre l'opacità dall'80 al 50%. L'effetto Bagliore interno rimane lo stesso.
Per il testo, sostituisci il riempimento nero con il blu, quindi modifica la modalità di fusione da Sovrapposizione a Normale e riduci l'opacità all'80%.
Ecco lo stato di rollover finale dell'etichetta:
Ora che tutto è pronto, passeremo a salvarli per il web. Prendi lo strumento Rettangolo (M) e disegna un rettangolo intorno all'etichetta, quindi vai a Menu Oggetto> Ritaglia area> Crea. Otterrai lo stesso risultato se utilizzi lo strumento Area ritaglio o Strumento tavola disegno (Maiusc + O).
Vai al menu File> Salva per Web e dispositivi. Questa finestra offre quattro modi per confrontare l'etichetta originale con quella che stiamo per ottimizzare: Originale, Ottimizzato, 2-Up e 4-Up. Penso che la migliore sia la visualizzazione 4-Up perché puoi giocare con impostazioni diverse, testare quattro versioni dell'etichetta e scegliere il migliore in base alla dimensione del file e al tempo di download. In alto a sinistra ci sono gli strumenti, dall'angolo in alto a destra puoi selezionare un'altra velocità di download e nell'angolo in basso a destra hai la possibilità di vedere l'anteprima dell'immagine nel browser predefinito.
Ora cambiamo alcune impostazioni e confrontiamo. Dai sette formati di file disponibili per il salvataggio proveremo solo JPEG, PNG-8 e PNG-24. Il formato GIF è più adatto per le immagini con aree piatte di colore, piuttosto che per quelli con riempimenti sfumati e dettagli come queste etichette. Ho provato e non sembravano troppo belli.
Il primo formato è JPEG. Anche se più scarsa è la qualità, più piccola è la dimensione del file, non è necessario abbassare troppo la qualità. Per il 60% di qualità la dimensione del file è 7.77K ma l'etichetta inizia a non sembrare così buona e per il massimo (100% di qualità) la dimensione del file è 26.11K (!!). Il 70% va bene Se si seleziona l'opzione Ottimizzata, la riduzione della dimensione del file è molto ridotta, quindi salteremo questa volta. Controlla Progressivo se vuoi che l'immagine si carichi in passaggi.
Se sai esattamente quale sarà il colore di sfondo, puoi scegliere un colore opaco. Lo sfondo sarà riempito con il colore selezionato, in questo caso rosa e l'immagine si comporterà come una GIF trasparente, ma continuando a utilizzare i milioni di colori che i JPEG possono mostrare a nostro vantaggio. La dimensione del file sarà un po 'più grande però.
Solo per curiosità ho provato il formato PNG-8 e puoi vedere sotto le diverse impostazioni. Se scegli Selettiva, Illustrator seleziona colori che l'occhio può vedere ma include più sfumature di colori sicuri. Le alternative sono: Percettivo (colori che gli occhi vedono meglio) e Adattativo (colori che sono effettivamente nell'immagine). Parliamo di dither. Questo distribuisce pixel di colori diversi uno accanto all'altro per far credere all'occhio che vede più colori effettivamente presenti nell'immagine. Lo svantaggio è che aumenta le dimensioni del file come potete vedere qui sotto, 0% dither vs 100% dither. Interlacciato è l'equivalente di Progressive dal formato JPEG. Tuttavia nessuna delle immagini sembra buona, quindi passeremo al formato successivo.
Otterrai un'immagine migliore se selezioni un colore Opaco, nel caso in cui tu sappia esattamente quale sarà il colore di sfondo della pagina web. Seleziona anche Nessun Dither di trasparenza.
Di gran lunga il miglior risultato sarà ottenuto con il formato PNG-24 sebbene la dimensione del file sia piuttosto grande. A causa dell'ombra attorno all'etichetta, è necessario selezionare l'opzione Trasparenza.
A questo punto puoi visualizzare l'anteprima dell'etichetta in un browser premendo l'icona mostrata al punto 24. Riceverai anche un codice HTML che puoi aggiungere alla tua pagina web.
Se hai scelto un formato particolare, premi il pulsante Salva, seleziona Solo immagini e una cartella di destinazione, quindi premi nuovamente Salva.
Ripeti questa procedura per lo stato di rollover dell'etichetta. Nell'immagine qui sotto puoi vedere le tre versioni che ho scelto.
Questa è la cartella con le immagini salvate e a questo punto puoi usarle come desideri.
Come bonus qui ci sono diverse varianti di colore dell'etichetta. Tutto quello che devi fare è cambiare alcune cose come: il riempimento sfumato per la forma dell'etichetta, il colore del tratto tratteggiato, il gradiente per la forma lucida e il colore di riempimento per il triangolo. Questo è tutto!
Questa è l'etichetta verde:
Ecco l'etichetta viola:
la versione arancione ...
rosso…
e giallo:
Accentsconagua