10 semplici consigli per creare le tue fantastiche icone con Photoshop

Ci sono un gran numero di set di icone gratuiti online, ma se vuoi andare oltre il puro uso particolare, ci sono anche una serie di problemi ad essi collegati. Le licenze e la mancanza di branding sono solo due di queste.

Anche se non sei uno sviluppatore di software, imparare a creare le tue icone è un'abilità tremendamente utile. Puoi dare al tuo computer una pelle unica o fornire i tuoi servizi alla comunità e al mondo aziendale.

Questo non è affatto un tutorial completo per la progettazione di icone. Ti stiamo appena apprendendo dalle basi rudimentali: aspetti tecnici, una checklist di progettazione e un set di strumenti per la progettazione di icone.

Tecnici delle icone

Di seguito sono riportate alcune specifiche che è necessario conoscere in merito al formato dell'icona, in particolare risoluzioni di immagine e formati di file.

Taglia

L'importanza della dimensione è ulteriormente discussa di seguito. Per ora, ci atteniamo agli aspetti tecnici.

Le icone sono sempre quadrate. Ciò significa che un'icona rettangolare sarà allungata o ridimensionata per riempire l'intero canvas o adattarsi al suo interno. Ad ogni modo, le icone altamente rettangolari si distinguono in modo negativo. Le seguenti dimensioni dell'icona sono le più comuni in uso:

• • • 16 x 16 px * **
    • 24 x 24 px
    • 32 x 32 px * **
    • 48 x 48 px * **
    • 64 x 64 px
    • 96 x 96 px
    • 128 x 128 px **
    • 256 x 256 px **
    • 512 x 512 px **

Windows XP consiglia l'uso di 16 x 16, 32 x 32 o 48 x 48 risoluzioni *. Se nessuno è disponibile, ridimensionerà l'icona più vicina alla risoluzione, fino a 256 x 256. Con risoluzioni desktop sempre più elevate, si consiglia di includere sempre risoluzioni maggiori. Il formato Apple ICNS supporta le dimensioni 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 e persino 512 x 512 **.

Formato del file

Per Windows, il formato di file più comunemente utilizzato per la distribuzione di icone è ICO. La controparte del Mac è ICNS (Apple Image Format Image).

La checklist di Icon Design

Non esiste un tutorial per progettare l'icona perfetta, volta e volta. Temi e disegni diversi richiedono approcci diversi e la "tendenza attuale" si trova in uno stato di flusso costante. Di seguito sono riportati tre principali pilastri della creazione di icone che si sono dimostrati veri volta e volta. Se sei nuovo nella progettazione di icone, assicurati di tenere sempre presente l'elenco di controllo delle icone.

inconfondibile

Soprattutto, le icone devono essere inconfondibili. La relazione con la tua domanda deve essere ovvia a tutti, nel tempo, alla cultura e alle differenze di età. Combatti la tentazione di creare icone appariscenti che non hanno alcuna attinenza e attenzioni con un design semplice, solido e ovvio.

Non vederlo come un ostacolo per la tua creatività; le icone possono essere belle e stimolanti, ma non dovrebbero essere aperte all'interpretazione (leggi: congettura alla fine dell'utente).

Uniformità

Se stai progettando un set di icone, mantieni l'uniforme del design.

Assicurati di avere un thread comune che interconnette queste icone e mostra la sinergia con gli utenti; il tutto deve essere più grande della somma delle parti.

Taglia

Le icone vengono sempre create in più dimensioni. Ciò influenza il design in più di un modo.

Per cominciare, le icone devono essere belle e riconoscibili indipendentemente dalle dimensioni. Abbassa il contrasto sui lati per evitare bordi frastagliati e fai risaltare i dettagli importanti in modo da mantenere l'attenzione nella più piccola implementazione dell'icona.

A livello tecnico, le icone sono progettate al meglio usando vettori, immagini composte da forme infinitamente scalabili, piuttosto che una composizione di pixel. Tuttavia, se la tua risoluzione è abbastanza alta, le bitmap andranno altrettanto bene.

The Icon Design Toolset

Photoshop è una grande applicazione per progettare icone. Hai (quasi) tutti gli strumenti necessari per creare grafica vettoriale o manipolare bitmap e applicare effetti e ombre complessi. La cosa più importante sarà seguire gli strumenti:

Strumento Penna

Lo strumento Penna consente di creare grafica vettoriale scalabile. È possibile disegnare una forma creando nodi e trascinando per regolare la curva della linea. È più difficile da usare di quanto sembri, ma probabilmente il miglior strumento di scelta. Abbiamo scritto sullo strumento penna in passato, leggi Photoshop Pathing: Come utilizzare Photoshop Pen Tool Come utilizzare Photoshop Pen Tool Come utilizzare Photoshop Pen Tool Ulteriori informazioni .

Plug-in formato file ICO

Questo plug-in di Photoshop aggiunge il formato di file ICO alle impostazioni di esportazione. Il metodo di installazione dipende dal sistema operativo e dalla versione di Photoshop, quindi assicurati di controllare il sito web.

Apple Icon Composer

Purtroppo, non esiste uno strumento di questo tipo per il formato di file ICNS di Apple. Questo strumento gratuito si occupa invece del problema. Viene fornito con il pacchetto Apple Xcode, che puoi scaricare dopo un (noioso) processo di registrazione. Oppure puoi Google per il download.

Hongkiat: 40+ esercitazioni su Photoshop con disegni selezionati a mano

Il blog di design Hongkiat.com ha compilato un elenco di oltre 40 tutorial di progettazione di icone di Photoshop. Questo elenco comprende tutti i tipi di icone e diversi gradi di difficoltà. Sfoglia l'elenco per l'ispirazione e estrapola le tecniche utilizzate per realizzare i tuoi progetti.

Stili di livello

Gli stili di livello integrati di Photoshop sono un ottimo modo per dare il tocco finale alle tue icone. Aprire il riquadro di stile del livello facendo doppio clic su un livello o facendo clic con il pulsante destro del mouse nella panoramica dei livelli. Usa un tratto grigio 1px con un'opacità del 40-50% per i bordi dell'icona e posiziona le ombre a 110 ° per i risultati migliori. Cerca di non usare le ombre in giro l'icona, tuttavia, come già molti sistemi operativi fanno.

Hai altri rudimentali suggerimenti sul design di icone? Fateci sapere cosa ne pensate nella sezione commenti qui sotto!

Scopri di più su: Adobe Photoshop.