Share
Segui questo suggerimento rapido e scopri come creare una barra di avanzamento luminosa. Approfitteremo del Pannello Aspetto e useremo più attributi oltre a molti effetti: Bagliore esterno, Bagliore interno, Piuma, Ombra esterna, Sfocatura gaussiana e Sfocatura radiale. Cominciamo!.
Apri un nuovo documento Web e cominciamo prima con lo sfondo. Prendi lo Strumento Rettangolo (M) e disegna un rettangolo di 600 x 400 px, quindi riempilo con il gradiente radiale mostrato. Dal pannello Aspetto, apri il menu a comparsa e scegli Aggiungi nuovo riempimento. Mantieni la stessa sfumatura, quindi vai al menu Effetto> Artistico e applica l'effetto Grana pellicola. Imposta la modalità di fusione su Moltiplica e abbassa l'opacità al 50%.
Ora, prendi lo strumento Rettangolo arrotondato, fai clic sulla tua tavola da disegno e inserisci i valori mostrati. Riempi il rettangolo arrotondato con il colore indicato, quindi vai al menu Effetto> Stilizza e applica l'effetto Bagliore interno usando le impostazioni dal basso.
Avendo selezionato il rettangolo, andare al menu Effetto> Stilizzazione> Sfalsa ombra e impostare i valori come mostrato. Otterrai un sottile evidenziatore in basso.
Per l'evidenziazione discreta in alto, torna al menu Effetto> Stilizzazione e applica nuovamente l'effetto Ombra esterna. Riceverai un messaggio di avviso ma vai avanti e scegli Aggiungi nuovo effetto quindi imposta i valori come mostrato.
Quindi prendi lo strumento Rettangolo arrotondato, fai clic sulla tua tavola da disegno e inserisci i valori indicati. Riempi il nuovo rettangolo con il nero, quindi selezionali entrambi e scegli Centro allineamento orizzontale e Centro allineamento verticale dal pannello Allinea (menu Finestra> Allinea).
Ora prendi lo Strumento Ellisse (L) e disegna un piccolo cerchio. Riempilo con il gradiente radiale mostrato, quindi posizionalo sul lato destro del rettangolo più piccolo. Questo è solo per la decorazione.
Riprova lo strumento Arrotondamento rettangolo e disegna un altro rettangolo. Allinearlo sul lato sinistro del rettangolo più piccolo e riempirlo con il gradiente lineare mostrato. Chiamerò questa forma da ora in poi: il rettangolo di caricamento.
Quindi, con l'attributo Fill del rettangolo di caricamento selezionato nel pannello Aspetto, vai al menu Effetto> Stilizza e applica l'effetto Bagliore esterno usando le impostazioni mostrate.
Traccia il rettangolo di caricamento con il verde, quindi imposta il peso su 0,5 pt e seleziona Allinea tratto su Esterno nel pannello Traccia. Cambia la modalità di fusione in Luce soffusa ma solo per l'attributo Tratto e trascinalo sotto l'attributo Riempimento.
Dopo aver selezionato il rettangolo di caricamento, nel pannello Aspetto aprire il menu a comparsa e scegliere Aggiungi nuovo riempimento. Usa la sfumatura mostrata, quindi vai al menu Effetto> Tracciato> Tracciato offset e applica un valore di Scostamento negativo di 2,5 px. Imposta la modalità di fusione per questo attributo Fill su Schermo perché in questo modo il nero diventa trasparente. Successivamente, con questo attributo Fill ancora selezionato nel pannello Aspetto, vai al menu Effetto> Stilizzazione> Sfuma e applica un Raggio di 3 px.
Seleziona di nuovo Aggiungi nuovo riempimento e utilizza il gradiente del passaggio 5. Con questo nuovo attributo Riempimento selezionato nel pannello Aspetto, vai al menu Effetto> Sfocatura e applica l'effetto Sfocatura radiale usando le impostazioni mostrate sotto. Impostare la modalità di fusione su Colore scherma e ridurre l'opacità al 40%. Infine, trascina questo ultimo attributo Fill nella parte inferiore del pannello Aspetto e hai finito con il rettangolo di caricamento.
Ora prendi lo strumento Ellisse (L) e disegna le due forme ovali con le dimensioni mostrate. Disporli come nell'immagine con l'ellisse blu in alto, quindi selezionali entrambi e fai clic su Sottrai dall'area della forma> Espandi dal pannello Elaborazione tracciati.
Posiziona la forma risultante all'estremità destra del rettangolo di caricamento e riempila con il verde. Aggiungi un nuovo riempimento sopra e cambia il colore di riempimento in verde chiaro, quindi vai al menu Effetto> Tracciato> Tracciato offset e applica un valore di Offset di meno 1,5 px. L'ultima cosa da fare in questo passaggio è andare al menu Effetto> Sfocatura> Sfocatura gaussiana e applicare un raggio di 2 px.
Continuiamo con il cursore di caricamento. Utilizza lo strumento Rettangolo arrotondato e disegna un rettangolo con le dimensioni mostrate. Successivamente, vai al menu Effetto> Deformazione> Gonfia e applica una distorsione verticale all'8%, quindi dal menu Oggetto scegli Espandi aspetto e Separa. Ora, torna al menu Oggetto> Percorso e usa l'opzione Aggiungi punti di ancoraggio due volte per ottenere i tre punti in alto. Seleziona usando lo Strumento selezione diretta (A) solo il punto dal centro e spostalo come nell'immagine.
Riempi la forma ottenuta con il gradiente lineare mostrato e imposta il valore dell'angolo su 90 gradi. Vai al menu Effetto> Stilizza e applica l'effetto Ombra esterna per ottenere l'ombra nera nella parte inferiore. Per l'evidenziazione in alto, applica nuovamente l'effetto Ombra esterna utilizzando le altre impostazioni mostrate.
Prendi lo Strumento testo (T) e digita "50%" usando Myriad Pro Semibold, dimensione di 15 pt. Dal menu Oggetto, scegliere Espandi, quindi selezionare verde come colore di riempimento. Successivamente, vai al menu Effetto> Stilizzazione e applica l'effetto Ombra esterna usando le impostazioni mostrate e lo stesso colore verde. Infine, posiziona il cursore di caricamento sotto la punta del rettangolo di caricamento e la barra di avanzamento è pronta.
Puoi creare altre barre di avanzamento semplicemente scegliendo altre tonalità di colore più alcune modifiche minori. Inizia con un rettangolo di caricamento più piccolo (25%) quindi segui nuovamente i passaggi precedenti perché tutte le impostazioni rimangono invariate, cambia solo i tre gradienti e il colore del tratto. Inoltre, a seconda del colore scelto per l'effetto Bagliore esterno (in questo caso il giallo e il caso successivo rosa) il valore Opacità potrebbe variare. Qui è impostato al 100%.
Per la punta del rettangolo di caricamento, puoi fare una copia di quello già fatto e cambiare semplicemente i colori come mostrato. Questa volta digita "25%" quindi segui nuovamente il passaggio 11 per terminare il cursore di caricamento. Usa il colore giallo indicato come colore di riempimento e anche per l'effetto Ombra esterna.
Questa è la versione rosa. Cambia i gradienti e i colori come mostrato per il rettangolo di caricamento.
Per la punta del rettangolo di caricamento, quindi per il cursore di caricamento e la barra di avanzamento rosa è pronta.
Ecco l'immagine finale:
Accentsconagua