Share
In questo suggerimento rapido, imparerai come creare un pulsante web scalabile con il pannello Aspetto e il ridimensionamento a 9 sezioni di Adobe Illustrator. Questa tecnica è particolarmente utile per i web designer che devono utilizzare lo stesso pulsante di stile con varie lunghezze di testo. Iniziamo!
Questo tutorial ti mostrerà come creare un pulsante vettoriale scalabile usando il ridimensionamento 9-Slice in Adobe Illustrator CS5. Nell'esempio seguente vedrai come il pulsante si ridimensiona con e senza il ridimensionamento 9-Slice, noterai che il normale ridimensionamento sposta tutto all'interno dell'immagine del pulsante. Con 9-Slice puoi specificare in che modo l'immagine viene ridimensionata per creare elementi web riutilizzabili.
Crea un nuovo documento RGB di qualsiasi dimensione. Opzione + Fai clic sulla tavola da disegno con lo strumento rettangolo (M) e inserisci le dimensioni del pulsante. Poiché il pulsante sarà scalabile orizzontalmente, la larghezza non è importante. Ho impostato il rettangolo su 200 px per 60 px.
Apri il pannello Aspetto e seleziona Fx> Stilizzazione> Angoli arrotondati, imposta il raggio dell'angolo su 8px, fai clic su OK.
Aggiungi un riempimento sfumato al pulsante con i seguenti colori. Se vuoi scegliere il tuo, segui la guida sotto per un'indicazione della posizione e dell'ombra dei colori. Noterai che i colori 2 e 3 sono molto vicini, questa è la chiave per l'aspetto super lucido del gradiente.
Se il tuo pulsante ha una linea, cancellala. Aggiungi un altro riempimento nel pannello Aspetto e posizionalo sotto il livello del gradiente. Con Impostazioni aspetto, vai su Fx> Tracciato> Tracciato offset e imposta l'offset su 1 pixel.
Riempi il secondo livello di riempimento con una sfumatura nei seguenti colori. Ancora una volta, puoi fare i colori a tua scelta, ricorda solo di tenere le tonalità chiare vicino alla parte superiore e quella scura nella parte inferiore.
Aggiungi un'ombra esterna sotto i due riempimenti nel pannello Aspetto andando su Fx> Stilizzazione> Sfalsa ombra e imposta l'opacità al 60%, l'offset X a 0px e l'offset Y a 2px. Make the Blur 3px
Ingrandisci il pulsante in modo da poter vedere le linee che devi fare in questo passaggio. Facendo parte del lato destro del pulsante, traccia due linee 1px una accanto all'altra. Crea il primo dello stesso colore della parte superiore del contorno sfumato e la seconda linea dello stesso colore della parte inferiore del gradiente del contorno. Ho scritto i numeri dei colori nella seguente immagine come riferimento.
Questa parte è per Adobe Illustrator CS5: selezionare il pulsante e le linee e trascinarlo nella tavolozza dei simboli. Fare clic su Abilita ridimensionamento a 9 sezioni (questo abiliterà il ridimensionamento orizzontale) e Allinea a griglia pixel (ciò impedirà al pulsante di rendere sfocato i siti Web). Queste due impostazioni renderanno il pulsante perfetto per l'uso web.
Quando crei il simbolo, vedrai una schermata simile all'immagine qui sotto. Sposta le linee tratteggiate per evidenziare le aree che non dovrebbero essere ridimensionate. Ho posizionato le linee tratteggiate sul lato dell'area in cui voglio posizionare un simbolo, questo garantirà che non cambierà se modifico la lunghezza del pulsante. Fare doppio clic nell'area della tavola da disegno per tornare all'immagine principale.
Ridimensiona i pulsanti per testare le aree che hai segnato. Se è necessario apportare modifiche, fare doppio clic sul simbolo per tornare alle impostazioni.
Aggiungi testo e simboli ai pulsanti e scegli uno per applicare l'aspetto a. È quindi possibile applicare l'aspetto al resto degli elementi al termine delle impostazioni. Inizia con un riempimento sfumato. Questo è un semplice gradiente da scuro a chiaro. Ho annotato i colori che ho usato nell'immagine qui sotto.
Aggiungi un riempimento bianco sotto il livello sfumatura nel pannello Aspetto e impostalo per spostare 2px verticale. Clicca OK.
Aggiungi un bagliore esterno andando su Fx> Stilizzazione> Bagliore esterno. Impostalo su un tono luminoso dei colori sul pulsante e sfocatura su 1 pixel. Ciò aggiungerà una sottile foschia all'effetto di livello e farà apparire il pulsante leggermente incandescente.
Aggiungi un tocco alla parte superiore delle impostazioni di aspetto in un tono scuro desaturato del colore del pulsante. Imposta il tratto a 0,5 px.
Prova lo stile sulla varietà di simboli e pulsanti, salva i due stili nella tavolozza Stili grafica. selezionando l'oggetto con lo stile e facendo clic sul pulsante Aggiungi stile nella parte inferiore degli stili grafici.
Ecco qua. Un pulsante Web scalabile che è facile da usare e riutilizzare. Se si desidera modificare gli angoli arrotondati, è possibile fare nuovamente clic sul simbolo e modificare l'aspetto spostando gli angoli arrotondati su invisibili. Se vuoi creare un nuovo pulsante, trascina il simbolo del pulsante dalla tavolozza dei simboli. sulla tavola da disegno e Controllo Fare clic per accedere alle opzioni per interrompere il collegamento con il simbolo. Da lì, il pulsante non cambia gli altri simboli e puoi modificarlo per essere un nuovo stile. Spero ti sia piaciuto questo tut.
Accentsconagua