Questo articolo è stato pubblicato 2 anni 4 mesi 27 giorni tempo fa e potrebbe contenere informazioni non più valide.

Pochi giorni fa vi abbiamo parlato di Kontain, il servizio di micro-blogging più evoluto di Twitter. A molti è apparsa subito la grafica a dir poco meravigliosa che questo servizio propone. Ecco dunque il tutorial creato da noi su come riprodurre i bottoni di Kontain.

Difficoltà: facile

Analizzando attentamente i bottoni è possibile notare uno sfondo composto da tre colori orizzontali bianco-grigio molto chiaro-bianco. È inoltre presente un’ombra esterna molto leggera. Infine è stato applicato un leggerissimo riflesso. Noi abbiamo cercato di riprodurlo il più attentamente possibile, se avete suggerimenti l’articolo sarà aggiornato.

• Dopo aver aperto Photoshop create un nuovo documento abbastanza grande in modo da pasticciare un po’, direi che 400px (larghezza) per 140px (altezza) va più che bene. Quindi andate su File>Nuovo, applicate le dimensioni scelte e date OK.
• Ora prendete lo Strumento Rettangolo Arrotondato, nella barra in alto impostate il raggio a 4 px, poi dipende, per bottoni più grandi necessiterete di maggior raggio, per bottoni più piccoli vi basterà un raggio dai 2 ai 5 pixel. Quindi disegnate il rettangolo, come grandezza a me va bene 257 pixel di larghezza e 44 pixel di altezza.

• Ora fate doppio click sul livello della forma a destra per aprire le Opzioni di fusione, quindi ora dobbiamo impostare gli stili già citati prima, quali la sfumatura a 3 colori, l’ombra ed anche una leggera traccia. Quindi impostate i valori come da immagini sotto. NB: per modificare i colori della sfumatura cliccate su Sovrapposizione Sfumatura e  quindi cliccate sulla barra orizzontale della sfumatura.

• Dopo aver settato correttamente i valori delle opzioni di fusione cliccate su Ok e vedrete che il nostro rettangolo avrà assunto lo stile che gli abbiamo applicato. Ora manca il riflesso. Quindi creiamo un nuovo rettangolo con 0px di raggio e facciamolo molto lungo che invada in orizzontale per metà il rettangolo originario, come in immagine.

• Dopo averlo creato vedremo che avrà lo stile del rettangolo precedente, quindi apriamo le opzioni di fusione e deselezioniamo tutti gli effetti, mentre selezioniamo Sovrapposizione Colore e impostiamo come colore il bianco.

• Ora ci sarà un passaggio difficile, controllate che il livello del rettangolo bianco sia selezionato, quindi tenendo premuto Ctrl (win) o Cmd (mac) cliccate sul rettangolino grigio (che contiene una miniatura della forma del rettangolo) del livello del rettangolo inizialmente creato. A questo punto vedrete nella finestra dove appaiono i due rettangoli il rettangolo originario selezionato (vedete immagine sotto). A questo punto cliccate col tasto destro su livello del rettangolo bianco e quindi Rasterizza Livello. Ora andate su Selezione>Inversa e premete Backspace o Canc. Il rettangolo bianco sarà stato tagliato esternamente rispetto al rettangolo originario.

• Non ci rimane che ridurre l’opacità del livello del rettangolo bianco, selezionatelo e sopra la lista dei livelli trovate l’opacità, ed impostate un valore tra 25% e 40% a seconda se volete maggior riflesso oppure no, noi abbiamo scelto 30%, che è il valore che più si avvicina al bottone di Kontain.
• Ecco il nostro bottone finito (img sotto), potete personalizzarlo ancora un po’, trovate la guida qui sotto senza screen…

Modifiche opzionali

• Per renderlo ancora leggermente simile al bottone di Kontain vi consiglio di modificare il grigio della sfumatura, portandolo ancora di più verso il bianco. Se volete potete anche testare a spostare i rombetti tra il il grigio ed i “due bianchi”.
• Provate a cambiare l’opacità del rettangolo bianco, potrebbe dare effetti diversi davvero gradevoli.
• Riducete la dimensione dell’ombra esterna a 3px per dare un effetto più pulito del bottone. Oppure riducete l’opacità dell’ombra esterna.
• Per il testo usate il font Myriad Pro, e se volete imbattervi in qualche esperimento, potete applicare al testo dello Smusso o dell’effetto rilievo (li trovate nelle Opzioni di Fusione) oppure portare il livello del testo sotto al livello del rettangolo bianco.

Per qualsiasi suggerimento commentate e modificheremo l’articolo citandovi!