Share
In questo tutorial imparerai come creare un pulsante di vetro usando forme semplici, box di esplorazione, maschere di ritaglio e opacità e modalità di fusione. Imparerai anche come ottimizzare il tuo lavoro vettoriale come una grafica web e come sostituire rapidamente i colori degli elementi richiesti.
Prendi lo Strumento Rettangolo (M) e crea un quadrato con un riempimento blu (C = 25, M = 2, Y = 0 e K = 0)
Prendi lo Strumento Ellisse (L) e crea un cerchio. Seleziona il quadrato e il cerchio, allinearli verso il centro e le linee orizzontali, usando la palette Allinea.
Ora taglia il cerchio a forma quadrata. Copia il quadrato e incollalo in primo piano, seleziona il cerchio e il quadrato superiore e premi il pulsante Interseca dalla palette Pathfinder.
Riempi la forma risultante con un gradiente lineare da blu (C = 100, M = 65, Y = 0 e K = 0) a luce blu (C = 53, M = 0, Y = 0 e K = 0), e imposta il metodo di fusione su Moltiplica nella palette Trasparenza.
Crea altri due cerchi. Il raggio di questi cerchi è uguale al valore del lato del quadrato e i loro centri si trovano negli angoli in basso a sinistra e in alto a destra del quadrato.
Applicando la tecnica descritta nel passaggio 2, assetti questi cerchi alla forma quadrata.
Selezionare le due forme risultanti e premere il pulsante Dividi dalla palette Pathfinder. Separare gli oggetti risultanti. Di conseguenza, dovresti avere tre forme.
Riempi li con diversi gradienti e imposta la modalità di fusione - Moltiplichi per ognuno di essi. Riempi la prima forma con un gradiente radiale costituito da tre colori: 1 (C = 17, M = 0, Y = 0 e K = 0); 2 (C = 25, M = 2, Y = 0 e K = 0); 3 (C = 62, M = 9, Y = 0 e K = 0).
Riempi la seconda forma con un gradiente lineare costituito da due colori 1 (C = 100, M = 33, Y = 0 e K = 0); 2 (C = 17, M = 0, Y = 0 e K = 0).
Riempi la terza forma con un gradiente lineare costituito da tre colori: 1 (C = 38, M = 4, Y = 0 e K = 0); 2 (C = 100, M = 65, Y = 0 e K = 0) e 3 (C = 34, M = 0, Y = 0 e K = 0).
Copia la forma al centro e incollala davanti, sostituisci i colori della sfumatura con: 1 (C = 100, M = 72, Y = 0 e K = 0) e 2 (C = 33, M = 0, Y = 0 e K = 0).
Crea altre due forme usando il cerchio e la palette Pathfinder, applicando le tecniche sopra menzionate.
Riempi la prima forma con un gradiente lineare da bianco a bianco con opacità dello 0% e imposta il metodo di fusione su Schermo nella palette Trasparenza.
Riempi la seconda forma con sfumatura lineare da bianco a bianco con opacità dello 0% e imposta la modalità di fusione - Sovrapposizione nella tavolozza Trasparenza.
Copia la prima forma e incollala sopra tutti gli oggetti, spostandola nella palette Livelli. Cambia il gradiente di questa forma, spostando il cursore sinistro un po 'più piccolo a destra.
Inserisci il pulsante in una forma quadrata con angoli arrotondati. Copia il quadrato in basso e incollalo davanti a tutti gli oggetti. Mantieni selezionato il quadrato, vai a Effetto> Converti in forma> Rettangolo arrotondato e imposta i valori indicati nella figura seguente. Il raggio di curvatura dipende dalle dimensioni del tuo pulsante, quindi ti permetterò di fare la tua scelta.
Copia questa forma e incollala davanti, ne avremo bisogno per ulteriori build. Blocca il sottostrato con questa forma nella palette Livelli e rendilo invisibile. Seleziona tutti gli oggetti (comando + A) e vai su Oggetto> Maschera di ritaglio> Crea.
Sblocca il sottostrato con la forma di un quadrato arrotondato e rendilo visibile. Copia questa forma e incollala davanti. Ora riduci le dimensioni di questa forma - solo un pochino - usando lo strumento Selezione (V) e tenendo premuto Alt e Maiusc.
Seleziona i due quadrati arrotondati e premi il pulsante Meno davanti dalla palette Pathfinder.
Riempi la forma ottenuta con gradiente lineare dal blu (C = 100, M = 0, Y = 0 e K = 0) con Opacità 50% a bianco con Opacità 0%.
Crea un altro rettangolo arrotondato usando lo Strumento rettangolo arrotondato di una dimensione leggermente più grande di quella del pulsante. Posiziona la figura creata sotto tutti i sottostrati e riempila con un gradiente lineare costituito da tre colori: 1 (C = 100, M = 100, Y = 0 e K = 77); 2 (C = 100, M = 16, Y = 0 e K = 0); 3 (C = 100, M = 66, Y = 0 e K = 0).
Ora crea la parte metallica del pulsante. Consisterà di due quadrati arrotondati. Il primo è riempito con un gradiente lineare costituito da tre sfumature di colore grigio: 1 (K = 71), 2 (K = 14) e 3 (K = 26).
Il secondo è leggermente più piccolo del primo ed è riempito con un gradiente lineare costituito da tre sfumature di colore grigio: 1 (K = 45), 2 (K = 0) e 3 (K = 14). Una volta che il tuo pulsante è pronto, raggruppa tutti i suoi elementi.
Crea un riflesso del pulsante. Copia il pulsante e incollalo in primo piano. Sposta il pulsante verticalmente verso il basso, tenendo premuto il tasto Maiusc. Diventerà il riflesso del pulsante.
Seleziona il riflesso e vai su Oggetto> Trasforma> Rifletti e imposta i parametri nella finestra di dialogo mostrata nella figura sottostante.
Ora prendi lo strumento Rettangolo (M) e crea un rettangolo con un riempimento sfumato in bianco e nero. La dimensione del rettangolo dovrebbe essere tale da poter nascondere completamente il riflesso del pulsante.
Seleziona il riflesso del pulsante e il rettangolo in alto, scegli Crea maschera di opacità dal menu della palette Trasparenza.
Il pulsante con la riflessione è pronto.
Spesso è necessario avere diversi elementi identici in diversi colori. Vediamo come è veloce sostituire il colore di un pulsante.
Seleziona tutti gli elementi di cui vuoi sostituire il colore e vai a Modifica> Modifica colori> Ricolora grafica, quindi fai clic sulla scheda Modifica nella finestra di dialogo aperta. Infine clicca sul pulsante Link colori armonia.
Ora puoi effettuare tutte le rotazioni di colore disponibili nella sezione colore richiesta mentre guardi i cambiamenti di colore delle nostre opere d'arte.
Quando si creano immagini per Web e dispositivi, l'immagine vettoriale non è il prodotto finale, è necessario utilizzare immagini raster. Pertanto, sarà necessario vedere il vettore come un raster. Per fare ciò, vai su Visualizza> Anteprima pixel. Come puoi vedere, ci sono molte aree problematiche quando esegui lo zoom. Appaiono poiché l'immagine non viene visualizzata nella griglia Pixel, ed è per questo che le linee appaiono sfocate quando si tratta di un raster.
Adobe Illustrator CS5 ci consente di rendere l'immagine più nitida. Seleziona la grafica del tuo pulsante e apri la palette Trasforma (Finestra> Trasforma), quindi fai clic su Allinea a Griglia pixel in questa tavolozza.
Ora l'immagine è pronta per essere salvata come tipo raster come PNG o JPG (File> Salva per Web e dispositivi).
Una volta che possiedi questa conoscenza e il software necessario sarai in grado di creare facilmente elementi dell'interfaccia web che non solo hanno un bell'aspetto, ma lo rendono perfettamente.
Accentsconagua