Come creare icone con photoshop
Posted by By Ohm at 8 April, at 08 : 13 AM
Se un’icona di X applicazione sul desktop non vi garba, allora cambiamola!
Questo sarà il nostro imperativo, in rete esistono centinaia di siti che offrono pacchetti icone belli pronti, ma se vogliamo realizzare qualcosa di personale, non ci resta che affidarci alla magia di photoshop, ovvio!
Tutto quello che ci occorre è un semplice plugin che inserirà nella lista dei formati file anche l’opzione per salvare queste famigerate .ico (icone). Il plugin, che manco a farlo a posta si chiama icoFormat, è possibile scaricarlo gratuitamente (è open source quindi libero) da questo sito telegraphics.com.au, volendo potete lasciare anche un commento all’autore e il vostro indirizzo mail altrimenti basta selezionare il tastino di download.
Questo plugin abilita la funzione di salvataggio per i file .ico in photoshop, è compatibile con le versioni cs/cs2/cs3 e precedenti, per installarlo bisogna posizionare il file ICOFormat.8bi nella cartella che contiene i formati file di photoshop, ovvero in C:\Programmi\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats (ovviamente questo è il caso per Photoshop CS2, se avete installato photoshop in un altro percorso oppure avete un’altra versione bisogna posizionare il file nella cartella “Percorso di photoshop”\Plug-Ins\File Formats)
Ok adesso siamo pronti per realizzare le nostre icone.
Ovviamente c’è da aprire una piccolissima parentesi sul formato delle icone in windows.
| Grandezza icone XP* in pixel |
| 48×48 |
| 32×32 |
| 16×16 |
*queste sono le grandezze specifiche raccomandate da Microsoft
(esempio di icone a 48×48 px – 32×32 px – 16×16 px)
Mentre le profondità colore supportate sono : 24 bit con 8 bit per il canale alpha (32 bit totale), 8 bit (256 colori) + 1 bit per la trasparenza, 4 bit (16 colori) + 1 bit per la trasparenza.
(esempio di icone a 32 bit – 8 bit – 4 bit)
E’ possibile creare icone anche di 256×256 pixel però automaticamente il sistema operativo le riduce, a volte con pessimi risultati quindi in questo tutorial tratteremo icone di 32×32 pixel ad 8 bit. Invece in Windows Vista è possibile utilizzare anche icone a 256×256 pixel in formato png.
Bene basta chiacchiere, apriamo photoshop!!!
Creiamo un nuovo documento a 256×256 px, 72dpi, metodo rgb ad 8 bit. Selezioniamo lo strumento selezione rettangolare, impostando lo stile su dimensione fissa e l’altezza e la larghezza pari a 32×32 px,
clicchiamo su un punto della nostra tela, automaticamente comparirà una minuscola selezione, bhè è la nostra selezione! Adesso puntando il cursore del mouse sui righelli (se non sono abilitati premete i tasti control+R in windows o command+R in macOS oppure dal menù Visualizza->Righelli) trascinate delle linee guida da porre alle estremità della selezione, ci serviranno dopo, ricordatevi di abilitare dal menù Visualizza lo snap ovvero l’effetto calamita , così le linee guida si agganceranno automaticamente ai bordi della selezione.
Nascondiamo le linee guida premendo i tasti control+H (oppure dal menù Visualizza->Mostra togliamo il segno di spunta a Guide), impostiamo i colori di default premendo il tasto D, premendo il tasto X portiamo il colore di sfondo (bianco) come colore in primo piano e con lo strumento rettangolo arrotondato disegniamo un rettangolo con un raggio di 10 px per i bordi (ricordatevi di impostare l’opzione riempi pixel), rinominiamo il livello appena creato in base.
Creiamo un nuovo livello (shift+control+N oppure usando il tastino dalla palette dei livelli o ancora dal menù Livello->Nuovo->Livello) nominandolo bordi, premiamo di nuovo il tasto X e dallo strumento forme personali scegliamo la forma lettera e la disegniamo in modo da esser leggermente più grande del rettangolo che abbiamo creato prima.
Tenendo sempre selezionato il livello bordi, facciamo control+click sinistro del mouse sul livello di base, in modo da crearci una selezione, la invertiamo con la pressione dei tasti control+shift+I (oppure dal menù Selezione->Inversa) e premiamo il tasto canc, premiamo control+D per eliminare la selezione ed abbiamo così ottenuto una lettera con i bordi arrotondati.
Selezionando il livello base, impostiamo lo stile di livello sovrapposizione sfumatura utilizzando queste opzioni: (per capirne di più sugli stili di livello date un occhio alla guida di Max)
Sul livello bordi invece applichiamo lo stile ombra esterna usando queste opzioni:
Creiamo un nuovo livello, e selezionandolo premiamo i tasti control+shift+E in modo da unire entrambi i livelli, base e bordi, in un unico livello.
Ricordate le guide? Bhè visualizziamole di nuovo premendo i tasti control+H (oppure dal menù Visualizza->Mostra spuntare Guide), abilitiamo la trasformazione libera del livello, premendo i tasti control+T, spostiamoci col mouse dove sono impostati i valori di scala, clicchiamo sulla “catenina” e posizioniamo il cursore del mouse su L (nel mio caso è W=width), appena il cursore avrà cambiato forma, spostiamolo verso sinistra, in questo modo scaliamo la nostra letterina, una volta che rientra nelle guide, clicchiamo sul grande segno di spunta per applicare la modifica,
centriamo la letterina, e con lo strumento taglierina tagliamo la tela seguendo le linee di guida.
ora non ci resta che salvare la nostra icona, dal menù File->salva come… Windows Icon
Ed ecco la nostra icona pronta per esser usata per un programma, o un collegamento…
(oltre la nostra letterina ho messo anche altre mie due icone)
Ovviamente ho scelto di fare una forma semplicissima, ma voi date pure libero sfogo alla fantasia! Provate provate, ma soprattutto mostrateci!!! Venite sul forum e mostrate le vostre creazioni!
[...] ricordate il tutorial su come creare le icone personalizzate in windows? Bene, la procedura per realizzare la favicon è quella, però invece di creare un’icona di [...]
Realizzare una favicon con Dreamweaver e Photoshop | Total Photoshop - tutto il mondo di Photoshop e non solo, 3 anno fà
belloooooooo!!!
è molto utile! complimenti !! ma non riesco a aprire ICOFormat….perchè mi dice che per aprire il programma devo indicare il programma da cui è stato creato!! come mai??
giulia, 2 anno fà
Ciao Giulia, grazie
, il file “ICOFormat” (plugin) non deve esser aperto, non ci devi cliccare sopra per capirci, ma bisogna copiarlo nella cartella dei plugins del tuo photoshop, come ho specificato all’inizio del tutorial 
. Una volta posizionato il plugin in quella cartella ed avviato photoshop, troverai poi nella lista di salvataggio dei file anche l’opzione per il salvataggio di file .ico (per windows).
Ohm, 2 anno fà
ciao ma a me lo sfondo mi appare bianco nn trasparente cm mai?????
eu, 2 anno fà
a e uso paint shop pro nn photoshop ma i lavori mi riescono sempre bn XD
sl questo nn va
eu, 2 anno fà
non trovo il salvataggio icone su photoshop?
mb, 2 anno fà
Mb spiegati meglio in che senso non trovi il salvataggio icone? Nel menù di salvataggio?
Hai installato correttamente il plugin?
Ohm, 2 anno fà
una volta creata l’ico , ho provato a sostituirla con un icona nel dekstop, ma windows non mi permette di utilizzarla ! perchè??
simona, 2 anno fà
Simona dipende quale icona volevi modificare!
L’iconda di DOCUMENTI o RISORSE DEL COMPUTER la si può sostituire solo con programmi adatti allo scopo o comunque con altre gabole.
Per quanto riguarda le cartelle o i collegamenti dei programmi ti basta semplicemente cliccare col tasto destro su uno di essi, visualizzare le proprietà e selezionare “cambia icona” quindi scegliere il percorso dove hai salvato la tua icona.
Se hai altri problemi, vieni sul forum
è il luogo adatto per discuterne e trovare soluzioni
Ciao
Ohm, 2 anno fà
PARE SIA RISOLTO CON UN PLUG_IN ADATTO..
ADESSO IL PROBLEMA è CHE SE SALVO L’ICO CON 8 BIT è OK, MA SE PROVO AD IMPOSTARE 16 O 32 BIT : PHOTOSHOP NON MI PERMETTE DI SALVARE COME ICO! STRANO , NO?
HO CERCATO SUL FORUM MA NON HO TROVATO NULLA! DOVE SI PARLA DI ICO??
GRAZIEE!!
simona, 2 anno fà
Non scrivere in stampatello, equivale ad urlare e non rientra nella netiquette
.
.
Non so se tu abbia letto la guida dall’inizio alla fine, ma infatti per salvare in .ico con photoshop bisogna appunto utilizzare un plugin, e ovviamente ho riportato anche le specifiche per la risoluzione da utilizzare per ogni singola icona, infatti ho lavorato su 8 bit per creare un’icona 32×32 pixel che va più che bene. Occhio che la guida si riferisce a XP quindi se hai vista o seven probabilmente cambia qualcosa (già il fatto che vista supporta le icone formato .png ti dice tutto!)
Su XP non hai bisogno di plugin aggiuntivi per sostituire le icone dei collegamenti o delle cartelle create dall’utente. A differenza ovviamente delle cartelle/collegamenti di sistema come “Risorse Del Computer” o “Documenti” dove trovi necessità di utilizzare particolari stratagemmi o programmi.
Non è detto che sul forum tu riesca a trovare l’argomento, quindi *crealo*
Ciao
Ohm, 2 anno fà
io ho xp , ma il plug in che avevo scaricato per photoshop non andava bene, solo installando nuovamente il plugin consigliato in questa pagina ho risolto il problema delle anteprime.non sò spiegare il perchè!
ho visto anche quanto riportato sulla risoluzione, per questo avrei voluto farle almeno a 16 bit in quanto le icone ad 8 bit perdono in qualcosa sul dekstop di xp: intanto non si mantiene la trasparenza dei colori che ho applicato all’immagine e poi mi sembrano di bassa qualità! non saprei come migliorarle!
simona, 2 anno fà
pensare ad una soluzione in png? Alta qualità, trasparenza … fine, non impegna e sta bene anche con il blu
Max, 2 anno fà
mi sfugge qualcosa.. con xp posso usare anche le png per icone?? max non mi confondere èh! che poi sono già abbastanza confusa di mio!!?!?
simona, 2 anno fà
Certo mia cara… fatti un giro sul simpatico gugol e vedrai che ne esistono svariate.
A seconda della versione di Windoz può darsi che sia necessaria una patch ma non te lo potrei giurare
Max, 2 anno fà
“guuugle” non mi ha per niente aiutata riguardo il png, le mie favicon.ico sono ancora bruttine, possibile sia colpa dei bit?
ps: x nn disturbare mi sono registratata al forum, ho aperto una discussione ma pare non sia visibile…
simona, 1 anno fà
Mitico plugin!!
shadaffa, 1 anno fà
ciao belli
qualcuno sa dirmi se c’e plugin free per cs5?
grezie
plt, 1 anno fà
GRAZIE.
draak, 12 mese fà