Share
La base di ogni colazione italiana è il caffè espresso a casa, preparato con l'iconica pentola "Moka Express". In questo tutorial, creeremo una Moka interamente da zero utilizzando forme, effetti di livello e una serie di suggerimenti per aumentare la produttività. Procederemo quindi a trasformare il nostro design in un'icona professionale pronta per Leopard e Vista. Quindi prepara le tazze per il caffè e cominciamo a preparare!
Questo tutorial è rivolto agli utenti di Photoshop intermedi, pertanto è richiesto il comando dell'interfaccia e la conoscenza delle scorciatoie da tastiera principali. Dai un'occhiata all'immagine qui sotto per vedere come sarà la nostra icona finita.
Prima di iniziare, facciamo un acquatinta con la nostra caffettiera. Leggi tutto su di esso quindi dai un'occhiata alla seguente immagine. Questa è la mia amata Moka Express senza la quale non potrei iniziare un giorno. Sembra complicato ma in realtà non lo è.
Possiamo vedere che la Moka è composta da: un serbatoio di fondo ottagonale con una valvola su un lato, una camera superiore a vite ottagonale con un becco per versare il caffè e una base a forma di anello, un coperchio sormontato da una manopola e un maniglia collegata al cardine del coperchio. Ci sono due materiali qui: plastica nera per il pomello e la maniglia e alluminio per il corpo.
Iniziamo dal ring. Crea un nuovo documento RGB vuoto e imposta le sue dimensioni a 512 pixel per 512 pixel, la risoluzione massima delle icone di OS X Leopard.
Durante l'esercitazione, usa i livelli di sfondo bianco, grigio e grigio scuro per aiutarti a vedere meglio il disegno. Prepariamo il nostro documento. Premi D per attivare i colori nero predefinito (in primo piano) e bianco (sfondo). Dal menu Visualizza attivare Righelli (Command + R) e Snap (tasto Command + Shift + Colon). Siamo pronti ad andare.
Usando lo strumento Ellisse e con l'aiuto di alcune guide, disegna due ellissi su due livelli separati. Rendi nera l'ellisse inferiore e chiama il suo livello "in basso". Rendi l'ellisse superiore bianca e chiama il suo livello "base".
Con lo strumento Selezione rettangolare (M), fai una selezione al centro delle guide sul livello "inferiore", quindi premi Alt + Backspace per riempirlo con il colore di primo piano del nero (vedi figura 3a).
Premi Comando + D per deselezionare tutto. Mentre sei ancora sul livello "inferiore" Comando: fai clic sulla miniatura dell'ellisse bianca sul livello "base" per selezionarne il contorno, quindi premi Elimina per cancellare questa selezione dall'ellisse nera (figura 3b).
Disattiva il livello "base" per vedere il risultato (figura 3c). Cancellare i due triangoli in alto racchiudendoli con una selezione rettangolare e cancellandone il contenuto. Ora abbiamo un mezzo anello (figura 3d). Rinomina questo livello per "squillare".
Ora aggiungiamo alcuni materiali. Per simulare i riflessi ambientali sull'alluminio aggiungere uno stile Sovrapposizione sfumatura al livello "anello". Crea un gradiente lineare orizzontale con diverse varianti di colore. Cerca di suggerire lievi sfumature mantenendoti vicino a un grigio medio. Apporta anche il lato destro più chiaro per suggerire la direzione della luce. Guarda l'immagine per i dettagli.
L'alluminio sembra abbastanza buono, ma vogliamo dargli una texture spazzolata per renderlo più realistico. Su un nuovo livello crea un rettangolo bianco con proporzioni simili all'anello (figura 5a). Ora ruotalo di 90 gradi in modo che sia in posizione verticale. Usa lo strumento Trasformazione libera (Comando + T) per ruotare e tenere premuto il tasto Maiusc per scattare ad angolo retto (figura 5b).
Assicurati di avere i colori bianco e nero predefiniti attivati e vai su Filtro> Render> Fibre e regola le impostazioni finché non ottieni molte strisce sottili con solo una piccola variazione (figura 5c). Ora vedete il motivo per cui abbiamo dovuto ruotare il rettangolo: il filtro creava fibre verticali ma abbiamo bisogno che siano orizzontali.
Quindi ora ruotare il rettangolo di 90 gradi nella sua posizione orizzontale originale. Denominare questo livello "brushed_alu" e cambiare il suo metodo di fusione su schermo. Ciò nasconderà le parti nere, lasciando trasparire belle linee luminose (figura 5d).
Ora abbiamo bisogno di deformare la texture spazzolata in modo che corrisponda al nostro anello. Imposta l'opacità del livello al 25% in modo che l'anello sia visibile. Richiama nuovamente lo strumento Trasformazione libera (Comando + T), fai clic con il pulsante destro del mouse e seleziona Deformazione (figura 6a).
Apparirà una mesh. Trascina manualmente verso il basso le maniglie e i punti interni per rendere la maglia conforme all'anello. Cerca di mantenere una spaziatura uniforme tra le linee della mesh in modo che lo strato si deformi correttamente (figura 6b).
Fai clic tenendo premuto il tasto Comando sul livello "anello", quindi usa questa selezione per mascherare il livello "brushed_alu" o semplicemente inverti questa selezione (Comando + Maiusc + I) quindi premi Del per eliminare tutti i pixel aggiuntivi. Che bella trama sottile (figura 6c)! Ripeteremo questa tecnica ogni volta che vogliamo ottenere l'aspetto spazzolato.
Riattiva il livello "base". Spostalo sotto il livello "ring" e duplicalo premendo Command + J. Ridimensiona la nuova ellisse un po 'e spostala un po'. Rendi questo livello nero (Alt + Backspace) e rasterizzalo. Applicare un filtro Sfocatura gaussiana (Filtro> Sfocatura> Sfocatura gaussiana) con un raggio di 5 px. Questa sarà l'ombra dell'anello.
Con l'anello e la sua ombra in posizione, passiamo al serbatoio. Duplica il livello "base", spostalo verso il basso e ridimensionalo (figura 8a). Assegna un nome a questo livello "in basso".
Impostare una griglia di guide per definire le dimensioni e la posizione del serbatoio. Usa sempre la funzione Snap per aiutarti a ridimensionare e spostare gli elementi nella posizione corretta. Con la griglia in posizione, scegli lo strumento Penna (P) nella modalità a livello di forma e disegna la faccia frontale dell'ottagono (figura 8b). Rendilo di qualsiasi colore che ti piace, lo cambieremo abbastanza presto. Assegna un nome a questo livello "centro".
Duplica il livello "centro" per creare la faccia alla sua destra. Spostalo e regolalo con lo strumento Trasformazione libera (Comando + T), alternativamente scegliendo Distorsione e Inclina facendo clic con il pulsante destro del mouse per correggere la prospettiva. Assegna un nome a questo livello "giusto".
Duplicalo e specchialo, chiamalo "a sinistra" e spostalo a sinistra del livello "centro". Tutto quello che devi fare ora è aggiungere le due facce più esterne usando la stessa tecnica descritta qui. Assegna un nome a questi livelli "a destra" e "a sinistra".
Diamo un po 'di consistenza al serbatoio. Per prima cosa aggiungi a ogni faccia uno stile di livello Sovrapposizione sfumatura, quindi, utilizzando la tecnica appresa nei passaggi 5 e 6, aggiungi un livello di alluminio spazzolato sopra di esso. Usa gradienti lineari da grigi chiari a medi, ruotati per allineare con la prospettiva.
L'alluminio è piuttosto riflettente, quindi il suo colore è profondamente influenzato dall'ambiente circostante. Ci saranno oggetti chiari e scuri provenienti da molte direzioni, quindi non far andare tutti i gradienti allo stesso modo. Un buon metodo per dare un senso di profondità è quello di creare un netto contrasto tra due facce adiacenti, come potete vedere nella figura seguente, dove un grigio davvero scuro incontra uno molto brillante. Si noti inoltre che lo strato di alluminio spazzolato viene distorto in modo tale che le linee fluiscano con la prospettiva.
Spostare il livello "base" sotto gli strati del serbatoio e riempire lo spazio con il bianco. Come prima aggiungere uno stile di livello Sovrapposizione sfumatura e uno strato di alluminio spazzolato. Fai attenzione ad abbinare la direzione della luce: l'angolo in basso a destra dovrebbe essere leggero mentre quello in alto a sinistra dovrebbe essere scuro. È questa coerenza che darà realismo alla nostra icona. Nota anche come il livello "inferiore" è stato oscurato.
Nel mondo reale nessun margine è perfettamente nitido. C'è sempre una sottile striscia di materiale che catturerà punti salienti dove i volti si incontrano. Quindi, per l'amor del realismo, aggiungiamo questo piccolo e grazioso tocco. Duplica la faccia "centro", rinomina "evidenzia" e riduci il suo valore di riempimento a 0%. Ciò nasconderà il contenuto del livello mantenendo gli stili di livello visibili.
Aggiungi uno stile di livello tratto utilizzando questi parametri: Colore bianco, Dimensione 1px, Posizione esterno e Opacità del 30%. Quindi aggiungi uno stile Bagliore esterno: modalità di fusione normale, colore bianco, opacità 50% e dimensione 5 px (vedi l'immagine). Ripeti questa procedura per le facce "sinistra" e "destra".
I punti salienti non correranno per tutta l'altezza del serbatoio, quindi dobbiamo mascherare il fondo. Inserisci i tre livelli di evidenziazione in un nuovo gruppo di livelli denominato "evidenziazione".
Seleziona il gruppo e premi Comando + E per fonderlo: ora avrai un livello ("evidenziazione") e gli stili di livello saranno stati infornati. Premi Q per entrare in Maschera veloce e con un morbido, rotondo, nero pennello dipingere la parte inferiore dei bordi.
Usa il 100% di Opacità sul fondo e diminuiscilo gradualmente mentre ti sposti verso l'alto per effettuare una selezione graduale. Quando premi Q di nuovo, le parti dipinte verranno mascherate da una selezione invertita. Usalo per mascherare il livello, eventualmente applicando la maschera quando sei soddisfatto dei risultati.
Costruiamo la camera superiore ora. Crea una nuova ellisse sulla parte superiore dell'anello (figura 14a). Questa sarà la base della camera. Ora traccia il centro del lato destro dell'ottagono esattamente come al punto 8. Imposta le guide, attiva lo Snap e usa lo strumento Penna (P) nella modalità a livello di forma (figura 14b). Duplica questo livello, ruotalo orizzontalmente e posizionalo accanto al primo (figura 14c).
Aggiungi sovrapposizioni sfumature (figura 14d) e la trama in alluminio spazzolato (figura 14e). Costruisci le facce più esterne e sfumale nello stesso modo (figura 14f). Assegna un nome a questi livelli, rispettivamente "right", "left", "rightmost" e "leftmost".
Aggiungiamo anche alcuni bordi sottili nella parte superiore. Usa la stessa tecnica spiegata nei passaggi 12 e 13, ma questa volta dai un tratto nero ai livelli "più a sinistra" e "a sinistra" e un tratto bianco ai livelli "più a destra" e "a destra". Questo perché in precedenza abbiamo evidenziato il lato destro del serbatoio, ricorda?
Per mantenere le cose organizzate, raggruppa tutti i livelli con nomi significativi come "BASE", "RING" e "TOP". Duplica il gruppo "TOP" e giralo verticalmente (figura 16a). Ridimensiona verticalmente solo un po '. Con l'aiuto dei nostri amici celesti (le guide), disegna un ottagono bianco nello spazio tra i due cime (fig 16b). Scartare la tomaia superiore poiché non ne abbiamo più bisogno.
Duplica l'ottagono bianco e rendilo nero (figura 17a). Riempi gli spazi agli angoli dell'ottagono bianco (le aree cerchiate nella figura 17b). Fai delle selezioni rettangolari sull'ottagono bianco e scuriscile un po 'per simulare i riflessi sullo spessore del coperchio (vedi il rettangolo sulla figura 17b). Ricordarsi di tenere il lato destro più leggero. Ora abbiamo un bel coperchio sottile. Disegna un'ellisse bianca leggermente al di sopra del centro del coperchio. Sarà la base del pomello di plastica (fig. 17b).
Ora disegna la parte superiore del coperchio. Usando lo strumento Penna (P), disegna quattro triangoli (figura 18a), quindi copiali e girali dall'altro lato. Aggiungi Sovrapposizioni sfumatura (figura 18b) e la texture spazzolata (figura 18c). Il coperchio è ora completo.
Per la manopola duplicare la piccola ellisse, ingrandirla e assegnargli uno stile Sovrapposizione sfumatura (figura 19a). Disegna un trapezio sul lato destro (figura 19b), specchialo sul lato sinistro. Rasterizza entrambi i livelli e uniscili in uno solo. Dare a questo strato un Sovrapposizione sfumatura orizzontale per farlo sembrare rotondo (figura 19c).
Ora diamo un tocco alla manopola. Duplica l'ellisse superiore, imposta il suo valore di riempimento su 0% e assegnagli un tratto bianco (figura 20a). Metti questo livello in un gruppo e uniscilo. Ora inserisci Quick Mask e dipingi le parti che non sono necessarie (figura 20b). Uscire dalla modalità Maschera veloce, trasformare la selezione in una maschera e applicarla (fare clic con il tasto destro sulla maschera e scegliere Applica maschera). Basta aggiungere un po 'di Gaussian Blur e il gioco è fatto (figura 20c)!
Ora aggiungiamo alcune smerlature alla manopola. Disegna una forma ovale al centro (figura 21a) e dagli un'ombra interiore (figura 21b) e un tratto (figura 21c). Duplica questo livello due volte (figura 21d). Ora metti tutti questi strati in un nuovo gruppo chiamato "KNOB".
Aggiungiamo una riflessione. Duplicare il gruppo "KNOB" e unire il gruppo "Copia KNOB" risultante. Giralo verticalmente e spostalo dietro e sotto la manopola (fig. 22a). In Maschera veloce, crea una selezione sfumatura (figura 22b) e usala per mascherare il livello. Imposta la sua modalità di fusione su Pin Light e la sua opacità al 50%.
Adesso vai al becco. Disegna una serie di forme e aggiungi Sovrapposizioni sfumate come nell'immagine qui sotto. Infine, aggiungi una texture spazzolata a tutte le parti, proprio come abbiamo appreso in precedenza. Metti tutti questi strati nel gruppo "BEAK".
Seguire un processo simile per disegnare il cardine. Si noti che il piccolo cerchio (il mozzo) ha applicato un tratto grigio scuro. Metti questi strati in un nuovo gruppo chiamato "CERNIERA".
Per disegnare la maniglia, crea un nuovo livello di forma nero (figura 25a). Modifica il percorso fino a quando non sei soddisfatto, quindi rasterizzalo. Ora scegli lo strumento Color Dodge (O), scegli un pennello semitrasparente e morbido e dipingi delicatamente i punti salienti sulla parte superiore del manico e verso il basso per simulare il controluce (figura 25b), quindi raffina l'evidenziazione superiore per rendere è più prominente (figura 25c).
Anche la maniglia ha una scaloppina. Disegnalo con un livello di forma e dargli un'ombra interiore bianca sottile impostando il suo metodo di fusione su Normale e giocando con Opacità finché non sei soddisfatto (figura 25d). Il manico è fatto!
Ora, per il nostro ultimo passo, inseriamo la valvola. Per prima cosa prendiamo la vite. Crea uno strato di forma e coloralo di grigio medio, crea una copia più chiara e spostala accanto alla prima (figura 26a).
Aggiungi le forme rimanenti e coprile con sfumature per farle sembrare arrotondate (figura 26b-26e). Infine, metti tutte le parti all'interno di un nuovo gruppo chiamato "VALVE", ruotalo e posizionalo sul lato del serbatoio (figura 26f). Sono stati fatti!
Il ragazzo era così prolisso! Ne è valsa la pena, non credi? Ora che il Moka Express è completo, tutto ciò che dobbiamo fare è ridimensionarlo fino a 256px (per Vista), 128px (per applicazioni dock), 48px, 32px e 16px (per le varie visualizzazioni di icone / elenco / dettagli nelle finestre OS) e importa tutte le dimensioni nel nostro software di editing di icone preferito. Spero ti sia divertito e abbia imparato molte tecniche utili durante questo tour de force. Ora vai a preparare alcune icone per te!
Accentsconagua