Share
Nel seguente tutorial imparerai come creare una barra di navigazione stilizzata. Imparerai come utilizzare il pannello Aspetto per modellare una barra di navigazione e come utilizzare lo strumento Slice per tagliare ed esportare le immagini in modo che possano essere utilizzate come parte di un sito web. Cominciamo!
Premi Comando + N per creare un nuovo documento. Inserisci 1025 nella casella della larghezza e 53 nella casella dell'altezza, quindi fai clic sul pulsante Avanzate. Seleziona RGB, schermo (72ppi) e assicurati che la casella "Allinea nuovi oggetti in griglia pixel" sia deselezionata prima di fare clic su OK. Abilita la griglia (Visualizza> Mostra griglia) e la cattura alla griglia (Visualizza> Aggancia alla griglia).
Successivamente, avrai bisogno di una griglia ogni 5px. Vai a Modifica> Preferenze> Guide e griglia, inserisci 5 nella griglia ogni casella e 1 nella casella Sottori. Puoi anche aprire il pannello Informazioni (Finestra> Informazioni) per un'anteprima dal vivo con le dimensioni e la posizione delle tue forme. Non dimenticare di sostituire l'unità di misura in pixel da Modifica> Preferenze> Unità> Generale. Tutte queste opzioni aumenteranno significativamente la tua velocità di lavoro.
Seleziona lo strumento Rettangolo (M), crea una forma da 1025 x 50 px, riempila con la sfumatura lineare mostrata sotto e vai a Effetto> Stilizzazione> Angoli arrotondati. Immettere un raggio di 3 pixel, fare clic su OK e andare su Oggetto> Espandi aspetto.
Per il prossimo passo avrai bisogno di una griglia ogni 1px. Quindi, vai a Modifica> Preferenze> Guide e griglia e inserisci 1 nella griglia ogni casella. Concentrati sul lato sinistro della forma creata nel passaggio precedente. Seleziona lo strumento Penna (P), disegna un percorso verticale di 50 px e posizionalo come mostrato nell'immagine seguente. Aggiungi un tratto nero di 1pt per questo percorso per renderlo più semplice da notare.
Riselezionare il percorso verticale creato nel passaggio precedente e trascinarlo a 128px a destra. Puoi farlo manualmente o andando su Oggetto> Trasforma> Sposta opzioni. È sufficiente inserire 128 nella casella Orizzontale, quindi premere Invio.
Riseleziona quel percorso verticale e vai su Effetto> Distorci e Trasforma> Trasforma. Inserire i dati mostrati nell'immagine seguente, fare clic su OK e andare su Oggetto> Espandi aspetto.
Seleziona il gruppo di percorsi verticali creati nel passaggio precedente insieme al rettangolo arrotondato creato nel secondo passaggio, apri il pannello Pathfinder e fai clic sul pulsante Dividi. Passare al pannello Livelli, selezionare il gruppo risultante e separarlo (Shift + Control + G). Continua a concentrarti sul pannello Livelli e assegna un nome alle forme da "1" a "8" (inizia con la forma sinistra).
Disattiva lo snap alla griglia (Visualizza> Blocca sulla griglia) quindi vai a Modifica> Preferenze> Generale e assicurati che l'incremento della tastiera sia impostato su 1 pixel. Seleziona la forma "1" e crea due copie davanti (Ctrl + C> Ctrl + F> Ctrl + F). Seleziona la copia in alto e spostala di 1 pixel a sinistra usando la freccia sinistra della tastiera. Riselezionare entrambe le copie e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Porta in primo piano la forma risultante (Shift + Control + Right Square Bracket), riempila di nero e cambia la modalità di fusione in Overlay.
Seleziona la forma "1" e crea due nuove copie in primo piano (Ctrl + C> Ctrl + F> Ctrl + F). Concentrati sul pannello Livelli, seleziona la copia in basso e spostalo di 1 pixel a destra utilizzando la freccia destra dalla tastiera. Riselezionare entrambe le copie e fare clic sul pulsante Meno anteriore dal pannello Elaborazione tracciati. Porta in primo piano la forma risultante (Shift + Control + Right Square Bracket), riempila di bianco e modifica la modalità di fusione in Overlay.
Riseleziona le due forme create negli ultimi due passaggi e raggruppale (Control + G). Crea una copia di questo gruppo (Control + C> Control + F), selezionalo e fai clic sul pulsante Unite dal pannello Pathfinder. Riempi la forma risultante con il gradiente lineare mostrato nella seconda immagine.
Apri il pannello Trasparenza. Riselezionare la forma e il gruppo creato nel passaggio precedente, aprire il menu a comparsa del pannello Trasparenza e fare clic su Crea maschera di opacità. Alla fine il tuo gruppo mascherato dovrebbe apparire nella seconda immagine.
Riseleziona il gruppo mascherato creato nel passaggio precedente e vai su Oggetto> Trasforma> Sposta. Immettere 128 nella casella Orizzontale e fare clic sul pulsante Copia. Ovviamente, questo aggiungerà una copia del gruppo 128px a destra. Seleziona questa copia e ripeti il comando Sposta. Continua a ripetere questa tecnica finché non hai sette gruppi mascherati.
Abilita lo snap alla griglia (Visualizza> Aggancia alla griglia). Seleziona lo Strumento Rettangolo (M), crea quattro quadrati da 3 px e posizionali come mostrato nell'immagine seguente. Inoltre, riempili con bianco e nero come mostrato di seguito. Seleziona tutte e quattro le forme e trascinali semplicemente all'interno del pannello Campioni per trasformarle in un motivo. Una volta ottenuto il tuo schema puoi eliminare i quattro quadrati dal pannello Livelli.
Disabilitare la griglia (Visualizza> Mostra griglia) e il blocco alla griglia (Visualizza> Aggancia alla griglia). Ritorna alla forma "1". Selezionalo, concentrati sul pannello Aspetto e aggiungi un secondo riempimento utilizzando il pulsante Aggiungi nuovo riempimento. Selezionalo, imposta il colore su R = 28 G = 117 B = 188 e modifica la modalità di fusione su Color Burn.
Riseleziona la forma "1", concentrati sul pannello Aspetto e aggiungi un terzo riempimento. Selezionalo, abbassa l'opacità al 15%, modifica il suo metodo di fusione a Luce soffusa e aggiungi il disegno fatto al dodicesimo passaggio.
Riseleziona la forma "1", concentrati sul pannello Aspetto, assicurati che nessun riempimento o tratto sia selezionato e vai a Effetto> Stilizzazione> Sfalsa ombra. Inserisci i dati visualizzati nella finestra in alto, fai clic su OK e vai di nuovo su Effetto> Stilizzazione> Sfalsa ombra. Inserisci i dati visualizzati nella finestra centrale, fai clic su OK e vai ancora su Effetto> Stilizzazione> Sfalsa ombra. Immettere i dati visualizzati nella finestra in basso e fare clic su OK.
Ora è necessario copiare le proprietà utilizzate per la forma "1" e incollarle sul resto delle forme. Ecco come puoi farlo facilmente. Vai al pannello Livelli, concentrati sul lato destro e noterai che ogni forma presenta un piccolo cerchio grigio. Si chiama un'icona bersaglio. Tenere premuto Alt, fare clic sull'icona di destinazione che corrisponde alla forma "1" e trascinare sul cerchio che corrisponde alla forma "2". Usa questa tecnica per aggiungere le stesse proprietà per le altre sei forme.
Seleziona la forma "2", attiva il pannello Aspetto e aggiungi il quarto riempimento. Selezionalo, fallo diventare bianco, abbassa l'opacità al 50% e modifica la modalità di fusione su Luce soffusa. Questa sarà la modalità di passaggio del mouse per la barra di navigazione.
Prendi lo strumento testo (T) e il testo come mostrato nell'immagine seguente. Usa il carattere Calibri con una dimensione di 15pt, imposta lo stile in grassetto e il colore su R = 0 G = 86 B = 140. Assicurati che tutto il tuo testo sia selezionato e vai su Effetto> Stilizzazione> Sfalsa ombra. Inserire i dati mostrati di seguito e fare clic su OK.
Ora, dividiamo questo menu. Concentrati sul gruppo mascherato a sinistra e seleziona lo strumento fetta (Shift + K). Innanzitutto, disegna una porzione da 6 per 53 pixel lungo la forma "1" come mostrato nell'immagine seguente. Continuare con lo strumento Slice (Shift + K) e tracciare una seconda porzione di 6 per 53px lungo la forma "2" come mostrato di seguito.
Ora che hai le tue prime sezioni vai su File> Salva per Web e dispositivi (Alt + Control + Maiusc + S). Selezionare lo strumento Selezione fetta (K) e fare doppio clic sulla parte sinistra, 6 per porzione 53px. Inserisci nav nella casella del nome, quindi premi OK.
Concentrati sulla seconda porzione di 6 per 53px. Fare doppio clic su di esso, immettere "nav.hoover" nella sezione Nome e premere OK. Seleziona PNG-24 dal menu a discesa Predefinito e fai clic su Salva. Scegli un percorso per le immagini che stai per salvare, quindi fai clic su Salva. Spostati in quella posizione e troverai una nuova cartella con un sacco di nuove immagini. Trascina "nav.png" e "nav.hoover.png" fuori dalla cartella, quindi elimina la cartella.
Ritornare al file Ai, selezionare lo strumento Slice (Shift + K) e tracciare una porzione 2 per 53px lungo il gruppo mascherato a sinistra. Passa al pannello Livelli e disattiva la visibilità per tutte le forme tranne il gruppo mascherato a sinistra.
Vai di nuovo su File> Salva per Web e dispositivi (Alt + Control + Maiusc + S). Afferra lo strumento Seleziona fetta (K) e fai doppio clic sulla nuova sezione creata nel passaggio precedente. Chiamarlo "divisore" e fare clic su OK. Assicurati che PNG-24 sia ancora selezionato dal menu a discesa Predefinito e fai clic su Salva. Ancora una volta, scegli un percorso per le immagini che stai per salvare, quindi fai clic su OK. Spostati in quella posizione, apri la nuova cartella, trascina "divider.png" fuori dalla cartella, quindi elimina la cartella. Alla fine dovresti avere tre semplici immagini: "nav", "nav.hoover" e "divider.png".
Infine, puoi facilmente cambiare i colori usati per la tua barra di navigazione. Basta sostituire il colore utilizzato per il testo e il secondo riempimento con alcuni dei colori mostrati nelle seguenti immagini.
Ora il tuo lavoro è finito, è così che dovrebbe apparire.
Accentsconagua