Sono felice di presentarvi il mio primo tutorial su Photoshop su Skimbu, mi specializzerò soltanto su come creare elementi web e non su come ritoccare foto (non è proprio la mia specialità).

Dopo aver studiato attentamente le magnifiche Fugue Icons di Pinvoke ho cercato di crearne una per Skimbu, utilizzata come icona della categoria nella sidebar. Creare un’icona 16×16 è davvero difficile, forse più difficile che crearne una semplice 256×256, vediamo il tutorial nei dettagli…

Cosa c’è da tenere conto nella creazione di un’icona 16×16?

Prima di passare al tutorial vi vorrei fornire il resoconto di ciò che ho appreso analizzando i “pixel” delle icone Pinvoke.

• Rispetto ad altri elementi web che creiamo ma di dimensioni più grandi i colori nelle icone 16×16 sono netti, ovvero non esiste una sfumatura tra un bianco ed un grigio chiaro ma tra un bianco ed un grigio.

• Un bordo di un’icona piccola non può essere di un colore simile a quello del riquadro interno perchè l’icona verrebbe con il bordo sfumato.
• I riflessi (le varie figure bianche che creiamo per dare un riflesso all’icona e renderla più bella) devono essere il meno trasparenti possibile. Infatti nei loghi e in altri elementi web più grandi quando creiamo dei riflessi tendiamo a renderli trasparenti al 70-80%, nelle icone piccole tale trasparenza va abbassata.
• Bisogna assolutamente lavorare con uno zoom altissimo, si parla di un 1600-1800%, riducete però spesso lo zoom a 100% per vedere come vi sta venendo l’icona

Guida

Lo scopo è creare un’icona 16×16 che sia su sfondo scuro, proprio per questo al quadrato che faremo non daremo nessuna traccia ma una leggera ombra. Se però la vostra icona poggerà su uno sfondo chiaro è meglio che ci mettiate un bordo invece che l’ombra.

• Create un nuovo documento di dimensione 16 pixel di larghezza e di altezza, quindi iniziate a creare un rettangolo con gli angoli arrotondati di 3 px

• Ora nelle Opzioni di Fusione del livello appena creato dobbiamo applicare un’ombra, una leggera traccia interna (useremo il bagliore interno) e una leggera sfumatura che va dal grigio al bianco in senso verticale. Cliccate sulle immagini per ingrandire.

• Assicuratevi di avere lo sfondo trasparente o scuro, quindi togliete la visibilità (cliccando sull’occhio) al livello 0 o cambiategli lo sfondo.
• Dobbiamo creare ora un’ellisse che farà da riflesso. Selezioniamo lo strumento ellisse e disegnamolo come nell’immagine sotto.

• Per far sì che l’ellisse comprenda solo il nostro quadrato dobbiamo prima rasterizzarlo

• Assicuriamoci di aver selezionato il livello dell’ellisse, quindi tenendo premuto CTRL (Win) o CMD (Mac) clicchiamo sulla figura di fianco al livello del quadrato (Forma 1) in modo da far comprarire la selezione di quel livello.

• Quindi andiamo su Selezione>Inversa

• …e premiamo il tasto Canc o Backspace per cancellare la parte dell’ellisse che stà al di fuori del quadrato.

• Ora non ci manca altro che il testo, usare i comuni font non garantisce un buon risultato, per questo dobbiamo scaricare un pixel font, ovvero un font adatto per le piccole dimensioni. Io ho usato PF Tempesta Five Condensed che trovate in questo pacchetto.
• Selezionate il font e scrivete la lettera che vi pare al centro del quadrato, in questo caso abbiamo scritto S di colore #0055ff

• Ora duplicate il livello della lettera, spostatelo sotto il livello originale della lettera e cambiate colore, portandolo al bianco, quindi spostatelo di un pixel sotto, questo serve per dare una sorta di “rilievo” alla lettera.

Vi allego qui a basso il file PSD per necessità.