Un'interfaccia user-friendly, una grafica ben disegnata, la corretta disposizione degli elementi sulla pagina: metà del successo del sito con il visitatore. Disegnare pulsanti per un sito Web è una parte piccola ma importante del lavoro su un progetto online.
Istruzioni
Passo 1
Prova a disegnare un pulsante rotondo. Il metodo indicato di seguito è anche universale per la creazione di loghi e avatar. Disegnarlo non è difficile, nonostante il numero di azioni che devi eseguire.
Passo 2
Apri Adobe Photoshop. Crea un nuovo documento premendo la combinazione "Ctrl + N". Parametri immagine 300 * 300, risoluzione 72 ppi. Lo sfondo e la modalità colore predefiniti sono rispettivamente bianco e RGB.
Passaggio 3
È meglio disegnare con i vettori, in modo che quando il pulsante viene ridotto, la sua qualità non si deteriora. Seleziona lo strumento Ovale, tieni premuto Cambio e disegna un cerchio dal centro.
Passaggio 4
Ora applica alcuni effetti al cerchio risultante. Vai al menu "Livelli" - "Stile livello" - "Opzioni di fusione". Qui dovrai applicare un gradiente.
Passaggio 5
Quindi, qui, seleziona la casella accanto a "Goffratura" per dare al pulsante il rigonfiamento necessario e imposta i seguenti parametri: stile - rilievo del contorno, metodo - taglio morbido, profondità - 220%, dimensione - 1 pixel, ammorbidimento - 5 pixel, angolo - 135® senza illuminazione globale, altezza - 32, modalità alte luci - normale con il 30% di opacità, modalità ombre - moltiplicare con il 25% di opacità
Passaggio 6
Per dare ancora più volume, qui nei parametri di fusione, seleziona la casella "Ombra" e imposta i seguenti parametri: modalità di fusione - moltiplicazione, trasparenza - 40%, angolo - 125o usando l'illuminazione globale, offset - 5 pixel, dimensione - 20 pixel.
Passaggio 7
Il risultato delle azioni eseguite sarà un'immagine come mostrato nella figura.
Passaggio 8
Ora crea un nuovo livello, seleziona di nuovo "Ovale" e disegna un cerchio con un raggio più piccolo della prima forma. Apri le "Opzioni di fusione", seleziona la casella accanto a "Ombra interna" e imposta i parametri: Modalità di fusione - Luce soffusa, Angolo - 125o, Offset - 0 px, Riduci - 45%, Dimensioni - 21 px.
Passaggio 9
Quindi, qui nelle opzioni di fusione, seleziona "Sovrapposizione sfumatura" e crea una sfumatura con i parametri come nell'immagine. Fare clic su OK
Passaggio 10
Quindi imposta lo stile di fusione su Radiale, Scala al 124%
Passaggio 11
Ora seleziona la casella "Tratto" e imposta i seguenti parametri: dimensione - 5 pixel, posizione - esterno, modalità di fusione - normale, opacità - 100%, tipo di tratto - gradiente.
Passaggio 12
Come risultato di queste azioni, dovresti ottenere qualcosa che assomigli più a un pulsante. Puoi riaprire le opzioni di fusione e sperimentarle.
Passaggio 13
Ora dobbiamo aggiungere i pulsanti di evidenziazione in modo che il pulsante assuma una trama di vetro. Per fare ciò, crea di nuovo un nuovo livello, seleziona lo strumento Selezione ovale, crea un ovale sopra il pulsante e riempilo di bianco usando lo strumento Riempi. Tieni premuto Ctrl, fai clic sul livello con il cerchio colorato, inverti la selezione ("Selezione" - "Inversione"). Ora premi Elimina. L'ovale dovrebbe essere tagliato attorno al perimetro del cerchio.
Passaggio 14
Nel pannello Livelli, cambia l'opzione Normale in Luce soffusa, quindi fai clic sull'icona della maschera vettoriale e seleziona lo strumento Riempimento - Gradiente. Riempi l'evidenziazione dal basso verso l'alto. Il pulsante è quasi pronto.
Passaggio 15
Puoi aggiungere un'iscrizione al pulsante. Puoi anche applicare effetti di fusione ad esso, come bagliore interno, esterno, sfumatura e così via. Non aver paura di sperimentare, più immaginazione usi nel tuo lavoro, più velocemente imparerai sia l'editor stesso che il web design.
