Come disegnare l'icona di iCloud di Apple - Photoshop Tutorial

iCloud, il nuovissimo servizio di cloud storage introdotto da Apple ha un logo piuttosto semplice ma bello. L'icona è realizzata in materiale metallico e presenta un'icona a forma di nuvola estrusa su di essa. Potresti non saperlo, ma creare questo tipo di icona è in realtà molto semplice, e qui sotto c'è l'icona di iCloud che ti insegneremo a disegnare in questo post, usando Photoshop!

Sembra un po 'complicato, ma in realtà tutto ciò di cui abbiamo bisogno sono alcuni stili di livello, forme vettoriali di base e un po' di disegno manuale. Entriamo dentro!

Passo 1

Inizia creando un nuovo file con dimensioni 512 x 512 px. Attiva lo strumento Rettangolo arrotondato. Sulla barra delle opzioni, impostare il raggio su 75 px. Fai clic e trascina per disegnare un rettangolo arrotondato. Imposta il suo colore su # 5d5d5d.

Fare doppio clic sul livello per aprire la finestra di dialogo Stile livello. Aggiungi Sovrapposizione sfumatura con sfumatura predefinita, nero a bianco e riduci la sua Opacità al 76%.

Passo 2

Premi Ctrl + J per duplicare la forma del livello. Fai clic su Modifica> Trasformazione libera o premi Ctrl + T per eseguire la trasformazione. Dalla barra delle opzioni imposta la sua dimensione al 98%.

Nel pannello Livelli, elimina Stile livello trascinando l'icona fx sull'icona del cestino, che si trova in basso a destra nel pannello Livelli. Successivamente, fai doppio clic sulla miniatura dei livelli per visualizzare la finestra di dialogo Stile livello. Aggiungi ombra interna e sovrapposizione gradiente.

Nell'impostazione Sovrapposizione sfumatura, imposta lo stile del gradiente su Angolo. Fare clic sulla casella di anteprima del gradiente per aprire l'editor del gradiente e utilizzare la combinazione di colori di # 8e8e8e, # a5a4a4 e # d8d8d8. Sentiti libero di giocare in giro con ogni posizione del marker, assicurati di impostare lo stesso colore nel primo e nell'ultimo marker.

Questo è il risultato dopo aver aggiunto gli stili di livello.

Passaggio 3

Crea un nuovo livello. Riempi il gradiente radiale dal bianco al nero.

Tieni premuto Alt e trascina la maschera vettoriale dal livello precedente al livello corrente. Il gradiente è ora inserito nell'icona.

Apri lo stile di livello e modifica la sua modalità di fusione su Schermo.

Passaggio 4

Disegna un rettangolo arrotondato all'interno dell'icona. Imposta il raggio a 75px con il colore # 2a2a2a.

Aggiungi un'altra forma di cerchio (scegli lo strumento Ellisse, quindi tieni premuto Maiusc e trascinalo). Dalla barra delle opzioni, impostare la modalità del percorso su Aggiungi all'area della forma.

Fare doppio clic sul livello cloud e quindi aggiungere Inner Shadow, Bevel and Emboss e Stroke.

Passaggio 5

Duplica il livello del cloud premendo Ctrl + J. Rimuovi il suo stile di livello trascinando l'icona fx dalla miniatura del livello sull'icona del cestino. Ridimensiona (Ctrl + T) all'89%.

Cambia il colore della forma in # 5d5d5d. Riordina la posizione di ogni forma fino a quando la dimensione della piccola nuvola è proporzionale alla nuvola più grande.

Fare doppio clic sul livello cloud e aggiungere gli stili di livello seguenti.

Per Sovrapposizione sfumatura, assicurati di utilizzare l'impostazione esatta da Sovrapposizione sfumatura al punto 2.

Ecco cosa abbiamo dopo aver aggiunto gli stili di livello al cloud piccolo.

Passaggio 6: Aggiungi trama metallica

Il design attuale è molto piatto e troppo pulito. Aggiungiamo una sottile trama metallica sulla superficie. Crea un nuovo livello. Fai clic su Modifica> Riempi e seleziona Usa: nero per riempire il nuovo livello con il nero.

Fai clic su Filtro> Disturbo> Aggiungi disturbo.

Fai clic su Filtro> Sfocatura> Sfocatura radiale. Seleziona metodo di sfocatura: rotazione e qualità: migliore.

Questo filtro farà girare il rumore e crea un'onda circolare.

Passaggio 7

Fare clic su Immagine> Regolazioni> Livello o premere Ctrl + L. Nella finestra di dialogo, trascinare il cursore nero nei livelli di uscita al centro per schiarire l'onda circolare.

Tieni premuto Alt e trascina la maschera vettoriale dal livello di base dell'icona al livello corrente. L'onda circolare è ora all'interno dell'icona.

Attiva lo strumento Selezione percorso e seleziona il percorso cloud che abbiamo creato nel passaggio 4. Premi Ctrl + C per salvarlo negli appunti. Premi Ctrl + V per incollarlo sulla maschera vettoriale dell'onda circolare. Imposta la modalità del percorso su Sottrai.

Infine, copia e incolla il percorso cloud più piccolo che abbiamo creato nel passaggio 5. Imposta la modalità del percorso su Aggiungi a forma.

Ecco il risultato. L'onda circolare si trova all'interno della superficie dell'icona.

Cambia la modalità di fusione del livello sullo schermo.

Step 8: Shadow

Crea un nuovo livello e posiziona dietro tutti i livelli. Crea una selezione ellittica (usando lo strumento ellisse) sotto l'icona. Riempi la selezione con il nero.

Ammorbidisci l'ombra usando il filtro, Gaussian Blur. Fai clic su Filtro> Sfocatura> Sfocatura gaussiana.

Duplica ombra premendo Ctrl + J. Aggiungi un altro sfocatura gaussiana, per questo tempo usa il Raggio più grande per ottenere un'ombra più morbida. Se l'ombra è ancora troppo dura, puoi abbassare l'opacità del suo livello.

Risultato finale

Questo è il risultato del nostro tutorial. Come puoi vedere, il processo di creazione di questa icona è molto semplice. Abbiamo solo bisogno di utilizzare alcune forme vettoriali di base e stili di livello. Spero ti piaccia questo tutorial. Se hai qualche domanda, non esitare a chiedere!

Scarica PSD

Non riesci a raggiungere un determinato passo? Ecco il file PSD del risultato con cui testare e giocare.

• iCloud Icon Tutorial File PSD

Come personalizzare il codice di Visual Studio

Codice di Visual Studio, il nuovo editor di codice open source di Microsoft offre agli sviluppatori molte funzionalità straordinarie che facilitano in modo significativo il processo di modifica del codice sorgente . Inoltre, Visual Studio Code assicura anche che gli utenti non si annoino quando lavorano con esso, in quanto consente loro di personalizzare diverse parti del suo aspetto, come colori, caratteri, spaziatura e formattazione del testo, proprio come molte funzionalità, come come linting e regole di validazione .I

(Consigli tecnici e di design)

Foto di profilo dinamico per Mockup di interfaccia con diversa interfaccia utente

Quando stai progettando un mockup, prima devi concentrarti sull'interfaccia e meno sull'estetica. Lo stesso vale per il wireframing e la codifica di un layout web da zero .Molti mockup diversi richiedono foto del profilo, come social network, commenti sui blog e pagine del profilo. Con Diverse UI, puoi facilmente incorporare queste foto nel tuo mockup con pochi clic

(Consigli tecnici e di design)