È un tocco di classe avere un pin it button personalizzato sulle immagini del proprio blog o sui prodotti dello shop, non c’è dubbio! Ma è anche importante far conoscere il proprio sito attraverso le immagini che verranno così pinnate su Pinterest.
Ma come realizzare un’ immagine destinata a diventare il nostro pin it button?
Io ti propongo due varianti di pin it button da realizzare con Photoshop, il primo con i pennelli di Photoshop ( o Brushes) e il secondo con un livello forma.
Il primo lo vediamo oggi, il secondo lo troverai venerdì prossimo!
Saranno pochi passaggi, in entrambi i casi, giuro! 😉
Premessa.
Lo strumento pennello in Photoshop è uno strumento che lavora a pixel, non a vettori, quindi è esattamente come un’immagine: se ingrandiamo oltre la sua misura originale, si otterrà un brutto effetto sgranato. Per cui diventa fondamentale avere l’esatta dimensione che andremmo ad utilizzare poi sul blog.
Il pin it andrà bene con misure di 256px X 256px a 72dpi in RGB
(72dpi RGB è una costante quando si realizza un’immagine destinata al web o allo schermo). Clicchiamo su File-Nuovo [Ctrl/Cmd+N] e impostiamo proprio queste misure.
Seleziona lo strumento Pennello [B] dalla Barra degli strumenti e sfogliamo i pennelli di Photoshop: di default non c’è molto, vero?
Ma se su Google scriviamo free Photoshop Brushes ci esce il mondo! Io ho aggiunto la keyword watercolor (‘free watercolor Photoshop Brushes’) e ne ho trovati di bellissimi. Scaricando un pennello di Photoshop, il file che avremo sarà in formato ABR. Ricordati di leggere sempre il file di testo relativo alla licenza d’uso, di solito presente all’interno della cartella scaricata.
Su Photoshop, nella finestra pennelli, clicchiamo sull’ingranaggio in alto a destra e selezioniamo ‘carica pennelli’. Da qui andremo a sfogliare fino ad arrivare alla cartella che abbiamo appena scaricato ( se era in formato compresso prima dovremo estrarla) e selezioneremo il file del pennello. Un unico file contiene più punte, per cui andando a risfogliare i pennelli presenti nella finestra pennelli, gli ultimi in lista saranno tutti i nuovi pennelli appena caricati!
Bene, ora scegliamone uno ed impostiamone i pixel, dall’apposito spazio nella parte alta della finestra.
Creiamo però un nuovo livello e clicchiamo per disegnare la punta scelta.
Nella parte in alto della schermata di Photoshop, come avevo spiegato meglio qui, ogni volta che selezioniamo uno strumento sarà presente la sua barra delle applicazioni, dove andremo a controllare soprattutto l’opacità, che dovrà risultare al 100% ( a meno che il pin it non debba avere un effetto leggermente trasparente)
Ora, per finire, scegliamo un bel font e scriviamo ‘Pin it!’, sopra alla punta di pennello appena creata.
Cancella invece il livello di Sfondo: lo sfondo del tuo Pin it button deve essere trasparente!
Ora Salva per il web [Ctrl/Cmd+Shift+Alt+S+] in formato Png.
E adesso come carichi il tuo Pin it button sul sito?
Beh, se il tuo sito è in WordPress self hosted (ovvero il wordpress.org e non il .com) puoi installare il plugin jQuery Pin It Button For Images che ti dà la possibilità di scegliere una tua immagine per il pin it button.