Così apparirà alla fine il nostro icona dell'app. Ma ora basta parlare. Iniziamo direttamente in Adobe Illustrator...
Passo 1: Creare il fondamento
Una volta aperto Illustrator, per prima cosa create una nuova area di lavoro tramite File>Nuovo. Nella finestra successiva scegliete un formato di 70x70mm. Confermate la finestra con OK.
Selezionate lo Strumento rettangolo dalla barra degli strumenti e fate clic una volta ovunque nell'area di lavoro. Comparirà una finestra di dialogo in cui potrete inserire le dimensioni del vostro rettangolo. Qui scegliete le dimensioni 35x35mm e confermate il tutto con OK. Questo sarà il nostro fondamento per l'icona dell'app.
Dato che le icone delle app di Apple non hanno mai forme quadrate, dobbiamo ora arrotondarne gli angoli. Quindi selezionate il rettangolo e poi andate nella barra del menù in alto su Effetto>Filtro stilo>Arrotonda angoli...
Nella finestra successiva inserite un raggio dell'angolo di 7mm. Confermate il tutto con OK.
Dopo aver confermato questo effetto, gli angoli verranno arrotondati, ma il percorso rimarrà comunque angolare. Per cambiarlo andate su Oggetto>Espandi aspetto. L'effetto è stato convertito in un oggetto (il percorso ora corre direttamente lungo gli angoli arrotondati).
Nel prossimo passo avrete bisogno del Pannello sfumature. Se non l'avete ancora aperto, lo trovate su Finestra>Sfumature.
Cliccate sul campo sfumatura nel Pannello sfumature, per riempire il vostro rettangolo arrotondato con una sfumatura standard in Bianco e Nero. (Se il vostro rettangolo ha ancora un contorno, questo è il momento di rimuoverlo).
Nell'impostazione dell'angolo della sfumatura inserite un valore di 90°, per farla procedere dall'alto verso il basso.
Dal momento che la nostra icona avrà una sfumatura di colore Blu, (potete naturalmente usare i colori che preferite) vi ho già preparato due valori RGB per voi.
• Blu scuro - 28/57/145
• Blu chiaro - 84/244/255
Per assegnare ora questi valori di colore alla sfumatura, basta fare doppio clic sui campi colore nel Pannello sfumature, dove avrete la possibilità di inserire i valori RGB.
(Se avete un diverso spazio colore impostato lì, cliccate sulla piccola freccia in alto a destra nel Pannello sfumature, per scegliere lo spazio colore corretto).
Una volta fatto tutto questo, dovrebbe assomigliare approssimativamente a come vedete voi. (Vedi Figura 11).
Per rifinire ulteriormente la sfumatura, andate su Effetto>Filtro stilo>Bagliore interno... Per il modo di mescolare selezionate Piombo, per l'Opacità scegliete un valore del 75% e per la Sfumatura impostate 8,8mm. Poiché vogliamo applicare questo effetto solo all'esterno, spuntate l'opzione Bordo. Confermate la finestra con OK.
Successivamente aggiungete anche un'Ombra al tutto. Anche questo lo fate tramite Effetto>Filtro stilo>Ombra... Scegliete le impostazioni per questo filtro approssimativamente come in Figura 13. Potete comunque variare leggermente qui.
Nel prossimo passo, copiate il rettangolo con Command+C e incollatelo nello stesso punto con Command+F (su PC con Strg+C e Strg+F).
Dato che non abbiamo più bisogno degli effetti applicati sulla copia del rettangolo, dovete eliminarli. Come alcuni di voi probabilmente sanno, tutti gli effetti e filtri applicati in Illustrator vengono elencati nella Scheda Aspetto. Se questa scheda non è visibile, potete aprirla nuovamente tramite Finestra>Aspetto.
Eliminate ora l'ombra esterna. Potete farlo facilmente trascinando l'ombra esterna nella Scheda Aspetto tenendo premuto il mouse e rilasciandola sull'icona del cestino in basso a destra di questa scheda.
Non è necessario eliminare la luce interna, ma è sufficiente regolarla leggermente. Prima di farlo, cambiate il colore di riempimento della vostra copia di rettangolo in bianco.
Cliccate sulla luce interna nella Scheda Aspetto, impostate la modalità su Normale e scegliete un nero intenso per il colore. Regolate l'opacità al 100% e, per lo Sfumino, potete optare per un valore di 10mm (Vedi Figura 17).
Per mescolare questa copia con l'originale sottostante con la sfumatura blu, basta ridurre l'opacità al 50% e impostare la modalità di riempimento su Luce soffusa. Questo si fa tutto tramite la Scheda Trasparenza. (Anche questa scheda è accessibile tramite Finestra>Trasparenza).
Ciò aumenterà leggermente il contrasto e il nostro App-Icon guadagnerà in profondità.
Passo 2: Creare una corona di raggi
In questo passo ci occuperemo di come potete creare la corona di raggi per l'App-Icon. Per farlo, nascondete temporaneamente i due rettangoli creati nel Passo 1, così da avere di nuovo spazio nella vostra area di lavoro.
Scegliete lo Strumento linea dalla Barra degli strumenti e impostate il Colore del contorno su nero e lo Spessore del contorno su 0,5pt.
Tirate ora una linea verso l'alto dall'incirca dal centro, tenendo premuto il mouse. Una volta tirata la linea (mantenendo sempre premuto il mouse), premete il tasto Ctrl + il tasto con le due parentesi < >.
Spostate ora in cerchio una volta con il mouse premuto. Questo comando genera un numero diverso di linee a seconda della velocità del movimento del cursore del mouse.
Dopo aver completato una circonferenza, il risultato dovrebbe assomigliare all'immagine 19. (Provate più volte, poiché vale anche qui il detto "la pratica porta alla perfezione").
Selezionate tutte le linee e raggruppatele con Command+G (su PC: Strg+G). Copiate tutto con Command+C e Command+F (su PC: Strg+C e Strg+F) e incollate nello stesso punto. Per questa copia, cambiate il colore del contorno in bianco e ruotatelo leggermente a destra o a sinistra in modo che le linee nere siano parzialmente visibili di nuovo.
L'aspetto dovrebbe quindi assomigliare all'immagine. (Vedi Figura 20).
Raggruppate di nuovo tutte le linee con Command+G (su PC: Strg+G).
Ora potete riattivare i rettangoli del Passo 1. Assicuratevi che il centro della vostra corona di raggi si trovi approssimativamente al centro del vostro rettangolo.
Ora copiate il rettangolo grigio arrotondato che avete calcolato nel passaggio 1 con la sfumatura blu. (Command+C o su PC - Ctrl+C).
Ora fate clic sul vostro gruppo con il cerchio di raggi e guardate nella palette Trasparenza. Qui avrete ora la possibilità (simile a Photoshop) di creare una maschera. Cliccate due volte sull'area, come mostrato nell'immagine 23. Con questo doppio clic verrà creata una cosiddetta maschera di opacità.
Una volta creata questa maschera, noterete che la vostra palette Livelli è cambiata, finché siete dentro la maschera. Con Command+F (su PC: Ctrl+F) ora inserite il rettangolo copiato in precedenza nella maschera. Ora dovete solo ridurre l'opacità dal 50% al 10%.
Ora dovete uscire dalla maschera per tornare alla visualizzazione normale. Fate ciò facendo clic una volta sul campo bianco accanto al simbolo della maschera. (Immagine 25).
Passaggio 3: Creare la base per il pittogramma
Ora abbiamo quasi completato la parte più grande e siamo pronti ad inserire un pittogramma o un simbolo nel nostro icona dell'app. Tuttavia, dobbiamo prima creare rapidamente una base o una piccola piattaforma in modo che il tutto sembri ancora migliore più tardi.
Prendete lo Strumento ellisse e disegnate un' ellisse approssimativamente al centro. (Vedi immagine 26).
Riempite questa ellisse con un blu scuro. Ho usato i seguenti valori del colore. RGB - 0/0/255.
Riducete l'opacità a circa il 70% e poi andate su Effetto>Filtro Sfocatura>Sfocatura gaussiana ...
Per la sfocatura ho scelto un raggio di 28 pixel. Naturalmente potete modificare questo valore a vostro piacimento. Confermate il tutto con OK.
Passaggio 4: Inserire il pittogramma
Dopo che la base è stata creata, è finalmente arrivato il momento. Dobbiamo praticamente solo inserire un pittogramma nella nostra icona dell'app. Come piccolo extra vi ho inserito nei file di lavoro diversi pittogrammi. Ma potete anche utilizzarne di propri con piacere.
Nella barra dei menu superiore, andate su File>Posiziona e scegliete un pittogramma a vostra scelta. Nel mio caso è il computer dai file di lavoro.
... finito! ... potremmo pensare ...
Ma ci sono ancora uno o due piccoli dettagli da aggiustare. In primo luogo, il pittogramma riceverà una ombra sparsa. Andate su Effetto>Filtro Stilizzazione>Ombra sparsa. Orientatevi sui valori di questa ombra sparsa secondo l'immagine 32.
Passaggio 5: Aggiungere un bagliore
Nell'ultimo passaggio aggiungeremo un bagliore per completare il tutto. Prendete lo Strumento ellisse e disegnate un' ellisse bianca come mostrato nell'immagine 33.
Infine, dovete solo impostare il metodo di riempimento dell'ellisse su Luce soffusa. E la vostra icona dell'app è pronta.
Conclusioni:
Spero che vi siate divertiti con il tutorial e che ora siate in grado di creare delle belle icone per app. Nei file allegati troverete anche il mio file originale di lavoro, così potrete darci un'occhiata nel caso in cui vi blocchiate in un punto qualsiasi.
Se avete ancora domande su questo argomento, scrivetemele semplicemente nei commenti. Cercherò di rispondervi tempestivamente.
Tanti saluti
Il vostro Julian
