Crea un'icona realistica di iMac in Photoshop

C'è molto che puoi fare con Photoshop con pochi strumenti di selezione. Oggi dimostreremo come creare un'icona realistica di iMac in Photoshop che include uno schermo da 27 pollici, una tastiera e un mouse. Iniziamo!


Risorse Tutorial

  • Foto di iMac box (per riferimento)
  • Icone nere e blu
  • Wallpaper (o qualsiasi altro ti piace)

Passo 1

Crea nuovo documento 2048px x 1400px. Questa risoluzione è impostata in base alle dimensioni approssimative dell'immagine di riferimento. Se si desidera creare un'illustrazione più piccola, è sufficiente regolare le dimensioni dell'area di lavoro e l'immagine di riferimento in base alle proprie esigenze.


Passo 2

Prima di iniziare, ricorda di mantenere i livelli organizzati in cartelle. Questo è molto importante in quanto questo tutorial ti richiederà di crearne molti.


Passaggio 3: schermo

Posiziona l'immagine di riferimento sullo spazio di lavoro e centra se necessario. Quindi selezionare lo strumento Penna (P) e quindi lo strumento Penna a mano libera nel pannello Opzioni. Quindi abilitare la casella di controllo Magnetico nello stesso pannello. Ciò consente di utilizzare lo strumento Penna a mano libera magnetica, che seguirà la parte dell'immagine e creerà forme personalizzate in pochi secondi.


Passaggio 4

Crea una nuova cartella all'interno della cartella iMac e chiamala Leg. Seleziona lo strumento penna a mano libera magnetica e inizia a disegnare la forma. Stiamo usando lo strumento di forma libera per creare curve morbide. Quando si trascina il mouse sul bordo tra l'immagine e lo spazio bianco, i punti di ancoraggio ne copiano solo la forma. Ma come puoi vedere lo strumento non è così preciso su linee rette, quindi crea troppi punti di ancoraggio. La soluzione è premere Alt + clic per iniziare la linea retta e quindi fare clic per posizionare il punto di ancoraggio finale e tornare alla modalità di forma libera. Dopo aver chiuso il tuo percorso, sentiti libero di rimuovere alcuni dei punti di ancoraggio inutili e di semplificare un po 'il tuo percorso.

Fai doppio clic sul livello con una nuova forma per aprire la finestra di dialogo degli stili di livello e creare una nuova sfumatura con i seguenti valori e posizioni: # 8b8b8b allo 0%, #CCCCCC al 7% e 49%, # 666666 al 54% #CCCCCC al 58% e #CCCCCC al 100%. Questo creerà ombre e luci al loro posto.

Crea un nuovo livello appena sopra la forma base. Abbiamo bisogno di questo strato per aggiungere un'ombreggiatura nella parte superiore della gamba, perché questa ulteriore ha una direzione e una forma diversa rispetto all'effetto sfumatura.

Poiché l'ombra si troverà all'interno della forma di base, il modo migliore per mantenerlo all'interno della forma è creare una maschera di livello. Poiché la forma stessa ne ha una di default, non è necessario crearne una nuova. Seleziona il livello della forma di base e premi Alt + Trascina la maschera di livello sul nuovo livello sopra. Questa scorciatoia creerà una copia della maschera di livello sul nuovo livello.

Seleziona il livello e seleziona lo strumento pennello (B) con una durezza dello 0% - 10% e un diametro grande e dipingi l'ombra nell'angolo in alto a destra della gamba.

Copia il livello forma base selezionando Comando / Ctrl + Alt + J e nella finestra di dialogo successiva cambia il nome. Sposta il livello sopra il livello dell'ombra (# 3). Seleziona lo Strumento selezione diretta (A) e seleziona particolari punti di ancoraggio e modifica la forma per creare il lato superiore della gamba. Crea un effetto sfumatura con valori # ced2db allo 0% e 38% e # 717073 al 100%. Crea due nuovi livelli sopra la nuova forma. Chiamali Highlight (# 1) e Shadow (# 2). Copia la maschera di livello su di loro (Alt + Trascina). Con lo strumento Lazo poligonale (L) crea un riquadro per l'ombra: può essere più largo della forma base perché la maschera di livello nasconderà tutto all'esterno. Completalo con # 333333. Disabilita la selezione, seleziona Filtro> Sfocatura> Sfocatura gaussiana e applica la sfocatura in base all'ombra. Basta giocare con il valore per ottenere l'effetto più realistico dell'ombra.

Il livello di evidenziazione è piuttosto simile. Copia maschera di livello. Crea il perimetro con lo strumento Lazo poligonale (L). Riempi con #CCCCCC. Disabilita la selezione, seleziona Filtro> Sfocatura> Sfocatura gaussiana. Ora applica poca sfocatura a circa 3. Crea una selezione con lo strumento Lazo poligonale (L) - Il bordo superiore dovrebbe essere direttamente alla fine della sfocatura e il bordo inferiore dovrebbe essere a un'altezza fuori dalla sfocatura. Con il perimetro selezionare Filtro> Sfocatura> Sfocatura gaussiana e applicare lo stesso valore dell'ombra.


Passaggio 5

Inizia disegnando la forma di base del display. Seleziona lo strumento penna a mano libera magnetica e inizia a disegnare la forma. Cerca di creare il minor numero di punti di ancoraggio possibile con Alt + Clic per linee rette. Al termine della forma, regolare i punti di ancoraggio per adattarli

Aggiungi uno stile Livello sfumatura con i seguenti valori alla forma: # 333333 allo 0% e al 13%, # b5b5b5 al 15%, # 666666 al 17%, # 999999 al 20% e #CCCCCC al 100%. Imposta l'angolo dell'effetto sfumatura su 77 gradi.

Ora crea un nuovo livello sopra la forma e copiala sopra la maschera di livello. Seleziona lo strumento pennello (B) con la durezza circa il 5% e il colore #CCCCCC e l'ombreggiatura nell'angolo in alto a destra. Seleziona la forma dello schermo e duplicala con Cmd / Ctrl + Alt + J. Sposta il livello sopra quello con l'ombra. Sposta e regola i punti di ancoraggio con lo strumento Selezione diretta (A) per creare il lato anteriore del display. Crea un effetto livello sfumatura con i seguenti valori: # 999999 allo 0%, # e3e2e6 al 100% e imposta l'angolo a 10 gradi.


Passaggio 6

Duplica livello (Cmd / Ctrl + Alt + J) e imposta l'effetto di stile del livello Sovrapposizione colore su # 000000. Seleziona la forma con lo Strumento selezione percorso (A) e seleziona la modalità sottrazione. Seleziona lo strumento Rettangolo (U) e copri circa il 20% della parte inferiore dello schermo. Premere Combina. Rinominare questo livello su Schermo.

Posiziona lo sfondo sullo spazio di lavoro e trasforma (Modifica> Trasforma> Prospettiva) secondo la prospettiva.

Crea una nuova cartella e chiamala Menu. Crea un nuovo livello in questa cartella e nominalo anche Menu. Applica la maschera di livello nella forma dello sfondo trasformato su di essa: seleziona il livello e quindi seleziona Strumento lazo poligonale (L). Crea una selezione in forma dello sfondo trasformato e seleziona l'opzione Aggiungi maschera di livello nella parte inferiore del pannello dei livelli.

Seleziona lo strumento Lazo poligonale (L) e crea la selezione per il menu nella parte superiore del display. Seleziona Strumento sfumatura (G) e riempi quella selezione con sfumatura da # d1d0d1 a #ffffff. La parte più scura del gradiente è la più lontana.

Seleziona Ellisse Tool (U) e crea una piccola ellisse che sostituirà il logo nella barra del vassoio. Spostalo nella posizione nell'angolo in alto a sinistra e regola le sue dimensioni (Cmd / Ctrl + T).

Seleziona Strumento tipo orizzontale (T) e crea i titoli del menu, ad esempio Anteprima del file, modifica della guida della finestra di visualizzazione o qualsiasi altra cosa. Spostalo accanto al logo nell'angolo in alto a sinistra e regola anche le sue dimensioni (Cmd / Ctrl + T). Con Strumento tipo orizzontale (T) selezionato crea un nuovo livello di testo con il tempo 12: 15 o qualsiasi altra cosa e posizionalo nell'angolo in alto a destra del display. Come puoi vedere il testo non rispetta molto la prospettiva. Seleziona Modifica> Trasforma> Inclina trasformazione e regola la forma di questi due livelli di testo per adattarla alla prospettiva.

Seleziona lo strumento Rettangolo (U) e crea la forma del bacino usando #FFFFFF. Imposta la trasparenza del livello forma al 50%. Seleziona lo strumento Selezione diretta (A) e regola le posizioni dei punti di ancoraggio per adattarli alla forma del Dock.

Ora abbiamo bisogno delle icone Black & Blue (questo tutorial funziona con Add On 1). Posiziona le icone nella riga. Uniscili (seleziona i livelli da unire e Cmd / Ctrl + E) per una trasformazione più semplice e coerente. Assegna un nome a questa icona del livello icone. Copia la maschera di livello dal livello menu a questo livello. Cambia la dimensione del pacchetto di icone (Modifica> Trasformazione libera o Comando / Ctrl + T) e regola la prospettiva (Modifica> Trasforma> Prospettiva) e usa Comando / Ctrl + T per lucidare la finitura. Duplica livello Cmd / Ctrl + Alt + J e chiamalo Icone Rif. Seleziona Modifica> Trasforma> Rifletti verticalmente per riflettere le icone verticalmente e spostarle al di sotto di quelle originali. Regola la prospettiva con Modifica> Trasforma> Inclina e imposta l'opacità del livello attorno al 45%.

Seleziona lo strumento Rettangolo arrotondato (U) e imposta il raggio su 5. Crea due forme sottili per i dispositivi e posizionali sul lato dello schermo.

Crea un nuovo livello e chiamalo Reflection. Cmd / Ctrl + Fare clic sulla maschera del livello dello schermo nero (Schermo di vetro) per creare la selezione del display, quindi selezionare Strumento Lazo poligonale (L). Tenere premuto Alt e creare la selezione attorno al riflesso per sottrarre la parte che non è necessaria per il riflesso. Con la selezione della riflessione ancora attiva seleziona lo strumento Gradiente (G) e riempi la selezione con il gradiente dei seguenti valori: #FFFFFF a 0% e opacità 100%, #FFFFFF a 100% e opacità 0%. Quindi per ottenere risultati migliori selezionare Strumento Gomma (E) con durezza impostata su 0% e dimensione circa 150 e cancellare il bordo inferiore del riflesso.

Seleziona lo strumento Ellisse (U) e crea la forma base per la mela. Con Ellipse Tool (U) ancora selezionato abilita la modalità Sottrazione e crea tre nuove forme su quella base per sottrarre buchi da essa. Passa alla modalità Crea nuovo livello forma indietro dalla modalità Sottrai. Crea una nuova ellisse per la punta della mela. Selezionare Converti strumento punto e fare clic sui punti di ancoraggio superiore e inferiore dell'ellisse per rimuovere le curve. Sposta la punta in cima alla mela. Se il colore della mela è diverso dal grigio, cambialo in # 333333. Ora posiziona la mela finita in basso al centro del display.


Passaggio 7: mouse

Il mouse sarà composto da meno strati del display. Conterrà tre livelli di forma per le parti di base del mouse e due strati per la riflessione superiore e il logo.

Seleziona lo strumento Ellisse (U) e crea un'ellisse che si adatta maggiormente alla forma del mouse. Seleziona lo strumento di selezione diretta (A) e regola la sua posizione e forma per adattarlo completamente alla forma del mouse. In questo caso è più facile usare lo strumento ellisse (U) invece della penna a forma libera magnetica (P) perché la forma è piccola e contiene quattro punti di ancoraggio quasi simmetrici.

Crea uno stile di livello sovrapposizione sfumatura con i seguenti valori: # e4e4e4 allo 0%, #aaabaf al 46% e 52%, # 333333 al 100% e imposta l'angolo del gradiente su -87.

Duplica il livello di base e aggiungi punti di ancoraggio (Aggiungi strumento Punto di ancoraggio) alla linea di bordo inferiore. Modifica i punti di ancoraggio per regolare la forma utilizzando lo strumento Selezione diretta (A) e Converti strumento punto.

Crea uno stile di livello sovrapposizione sfumatura con i seguenti valori: # cccae0 allo 0%, # d8d8e2 al 100% e imposta l'angolo del gradiente su 90.

Crea uno stile di livello Ombra esterna con i seguenti valori: Modalità di fusione: Moltiplica e # 000000, Opacità 75%, Angolo 95 gradi, Distanza 2 px, Diffusione 0%, Dimensione 1 px.

Duplica il livello e rimuovi gli effetti. Imposta il colore di questo livello forma su # dbdbe7. Regola la posizione e la curva dei punti di ancoraggio con lo strumento Selezione diretta (A) e Converti strumento punto per creare il riflesso superiore del mouse.

Ctrl + Fare clic sulla maschera di livello di questa forma di riflessione per creare la selezione di essa. Crea un nuovo livello per il riflesso della luce. Con la selezione ancora attiva selezionare Strumento Lazo poligonale (L) e con Alt premuto ridurre la dimensione della selezione per adattarla quasi al riflesso della luce. Seleziona lo strumento pennello (B) e il colore #FFFFFF. Imposta la durezza del pennello su 0% e dipingi il riflesso della luce.

Per creare il logo in alto basta selezionare Ellisse Tool (U) e creare la forma dell'ellisse. Aggiungi alcuni punti di ancoraggio con lo strumento Aggiungi punto di ancoraggio. Seleziona Converti strumento punto e ricrea la forma della mela per adattarla alla prospettiva.


Passaggio 8: tastiera

L'ultimo passaggio per creare l'icona realistica di iMac è creare la tastiera. Questa parte funzionerà con forme, gradienti, Magnetic Freeform Pen Tool e alcuni effetti di livello. Quindi se non ce l'hai ancora, crea una cartella e chiamala Keyboard.

Seleziona lo strumento penna a mano libera magnetica. Crea curve facendo clic + + trascinamento e linee rette di Alt + Clic. Crea il minor numero possibile di punti di ancoraggio, ma resta concentrato sulla forma.

Seleziona lo strumento Ellisse (U) e crea la forma del pulsante laterale. Applicare un effetto Sovrapposizione sfumatura con i seguenti valori: # c6c6c6 allo 0%, # 666666 al 5%, # 999999 al 15%, #dfdfdf al 30%, # 999999 al 45%, #cccccc al 50%, # 999999 a 55%, #dfdfdf al 70%, # 999999 all'85%, # 666666 all'85%, # c6c6c6 al 100%. Il gradiente è simmetrico, quindi ogni colore sul lato sinistro ha lo stesso valore a destra. Imposta lo stile della sfumatura su Angolo e Angolo su 120.

Duplica il livello forma. Trasforma (Cmd / Ctrl + T) le dimensioni per creare un piccolo centro del pulsante. Aggiungi l'effetto del livello del tratto ad esso. Imposta la dimensione su 2, Posiziona su Interno e Colore su # 5f5f5f. Imposta l'opacità del livello forma al 28%.

Seleziona Strumento penna (P) e crea la forma per l'ombreggiatura inferiore della tastiera. Regola i punti di ancoraggio con lo strumento selezione diretta (A) e le curve con lo strumento Converti punto. Aggiungi Effetto livello sfumatura con i seguenti valori: # 000000 allo 0%, # 545559 al 72% e # 545559 al 100%. Imposta l'Angolo del gradiente su 88.

Selezionare lo strumento Penna (P) o Penna a mano libera magnetica. Crea la parte superiore della tastiera. Ho creato sei punti di ancoraggio: due punti di ancoraggio per ogni curva. Seleziona lo strumento Selezione diretta (A) e Converti strumento punto e regola le curve per adattarle alla forma ideale. Aggiungi l'effetto Livello sfumato con i seguenti valori: # 9b9b9b allo 0%, # 747474 al 100%. Imposta l'Angolo sfumatura su 85.

Duplica il livello forma. Ridurre le dimensioni della forma un po '(Cmd / Ctrl + T). Seleziona Strumento selezione diretta (A) e Converti strumento punto e regola la posizione dei punti di ancoraggio e le curve agli angoli. Imposta il colore della forma su # f2f2f2. Ora abbiamo la tastiera pronta per curvare le chiavi e aggiungerci alcuni strati di finitura.

Seleziona lo strumento Penna e attiva l'opzione Sottrarre dall'area di forma. Guarda l'immagine di riferimento e cerca di ridurre il più possibile la forma, mantenendo il look ancora nella forma della tastiera e dei suoi tasti. La forma più comune che puoi sottrarre è un rettangolo in modo da creare rettangoli per sottrarre i fori tra le chiavi particolari. Non dimenticare di avere un posto enorme intorno alle frecce. Durante i passaggi o alla fine della sottrazione, fare clic su Combina.

Crea nuovo livello (Cmd / Ctrl + Alt + J). Copia la maschera di livello dello strato di forma della chiave su di essa (Alt + Trascina). Seleziona lo strumento pennello (B) imposta la durezza su 0% e la dimensione su 20px. Imposta il colore su # a7a7a7 e disegna l'ombra laterale dei tasti.


Passaggio 9: polacco

L'ultima parte di questo tutorial è incentrata sulle riflessioni e le ombre gettate da iMac e dai suoi accessori. Duplica la cartella di visualizzazione. Tenerlo selezionato e unirlo (Cmd / Ctrl + E). Spostalo nella cartella dei riflessi. Capovolgi verticalmente il livello (Modifica> Trasforma> Rifletti verticale). Sposta l'immagine nell'angolo in basso dell'originale. Seleziona Trasformazione ordito (Modifica> Trasforma> Deforma) e trasforma l'immagine di riflessione in modo che sia rivolta verso la forma in basso dell'immagine originale.

Seleziona Strumento Gomma (E) e imposta Durezza su 0% e Dimensione circa 250 px. Cancellare circa metà dell'immagine di riflessione. Imposta l'opacità del pennello sul 50% e cancella il riflesso rimanente. Poiché l'opacità è impostata su 50%, lo strumento gomma rimuoverà solo la metà di esso in modo che l'immagine sia trasparente e meno visibile. Regola la visibilità del riflesso o persino la sua posizione.

Duplica la cartella del mouse. Unisci (Cmd / Ctrl + E). Spostalo nella cartella dei riflessi. Seleziona Trasformazione ordito (Modifica> Trasforma> Deforma) e trasforma l'immagine di riflessione in faccia alla base del mouse.

Seleziona Strumento Gomma (E) e con Durezza impostata su 0% e dimensione circa 250 px. Imposta l'opacità del pennello su 50% e cancella il riflesso rimanente. L'effetto è lo stesso del Display. Regola anche la posizione e l'opacità del livello.

Il riflesso della tastiera può essere un po 'complicato a causa della sua forma, quindi, invece di duplicare i livelli, disegneremo noi stessi il riflesso.

Seleziona lo strumento Penna (P). Crea una forma per il riflesso della tastiera. Basta copiare il bordo della tastiera e creare uno spazio in basso a seconda dell'immagine a sinistra.

Seleziona il Livello forma e applica i seguenti valori Effetto livello sfumatura: #cdcdcd a 0%, #cdcdcd al 56%, # 343434 a 60%, #cdcdcd al 63%, #cdcdcd al 74%, # 141415 al 79%, # 141415 al 100%.

Rasterizza il livello forma (fai clic con il pulsante destro del mouse sul livello e seleziona Rasterizza). Selezionare Strumento Gomma (E) con durezza impostata su 0% e dimensione a 150. Cancellare la parte inferiore del riflesso in base alla forma della tastiera. Imposta l'opacità della gomma al 50% e in parte cancella le parti rimanenti del riflesso.

Se non si dispone di una cartella di creazione e si chiama Shadows. Dovrebbe essere al di sotto delle cartelle iMac, Mouse e Keyboard e sulla cartella dei riflessi.

Crea sottocartella nella cartella Ombre e assegnagli il nome Magic Mouse. Crea due livelli all'interno di questa cartella e nominali Più chiari e scuri. Quello più scuro dovrebbe essere sopra lo strato più leggero.

Seleziona il livello più leggero. Seleziona lo strumento pennello (B). Imposta la dimensione a 20px e la durezza al 30%. Imposta il colore su # 828385. Paint shadow sotto il mouse e imposta l'opacità del livello al 20%.

Seleziona il livello più scuro. Seleziona lo strumento pennello (B). Mantieni la dimensione di 20 px e la durezza del 30%. Imposta il colore su # 343435 e dipingi l'ombra più scura. Regola la posizione di entrambi i livelli.

Crea un nuovo livello nella cartella delle ombre sotto la cartella Mouse e chiamane la tastiera. Seleziona lo strumento pennello (B) con la durezza impostata su 0%. La dimensione deve essere impostata in base alla parte dell'ombra. Imposta il colore su # 00000. Seleziona Strumento Gomma (E) e cancella le parti rimosse. L'ultima cosa è regolare la posizione se non si adatta.

Crea un nuovo livello nella cartella delle ombre sotto il livello tastiera. Seleziona lo strumento pennello (B) con la durezza impostata su 0%. La dimensione dipende dalla parte dell'ombra di prima, ma mantienila piccola di circa 15px, dipingi l'ombra nella parte inferiore della gamba. Fallo copiare la forma della gamba e scompare dolcemente ai lati.


Immagine finale