Crea un'icona con lente per fotocamera stile diaframma

In questo tutorial, creeremo un obiettivo fotografico dettagliato simile a quello utilizzato come logo per il software di fotoritocco Aperture di Apple. Un obiettivo fotografico è adatto per l'icona di un software, il logo o semplicemente come grafica da utilizzare in qualsiasi progetto. Sebbene l'immagine appaia dettagliata, il processo di creazione comporta poco più della semplice stratificazione di oggetti con diversi riempimenti e sfumature per dare un'illusione tridimensionale.

Tutorial ripubblicato

Ogni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nell'agosto del 2008.


Passo 1

Crea un nuovo documento di qualsiasi dimensione e proporzioni che desideri. A differenza di Photoshop, in Illustrator è abbastanza facile cambiare la dimensione del documento in qualsiasi momento durante il nostro lavoro. Possiamo semplicemente ridimensionare la grafica vettoriale per adattarla alle nuove dimensioni. Inizialmente ho scelto un documento quadrato a 550 pixel per 550 pixel.

Poiché il processo di creazione della nostra immagine consiste principalmente nel sovrapporre forme con gradienti diversi e riempie l'una sull'altra, la maggior parte dei passaggi seguenti dirà semplicemente quale dovrebbe essere la dimensione del cerchio, quale sia il tipo di sfumatura, la direzione dei gradienti, i colori utilizzato nel gradiente, il loro colore ferma posizioni nel gradiente e la posizione del cursore centrale (s) nel gradiente.

Il primo cerchio è largo 429 px, con un gradiente lineare di -45 gradi, che ha un grigio al 100% (al 100% di stop) al 40% di grigio (allo 0% di stop) e il cursore centrale impostato al 50%.


Passo 2

Il secondo cerchio è largo 423 px con un gradiente lineare di -45 gradi, che ha un grigio al 100% (al 100% di stop) al 60% di grigio (allo 0% di stop) e il cursore centrale al 50%.


Passaggio 3

Il terzo cerchio è largo 368 px, con un gradiente lineare di 135 gradi, che ha un grigio al 100% (al 100% di stop) al 50% di grigio (allo 0% di stop) e il cursore centrale al 33%.


Passaggio 4

Fai in modo che il quarto cerchio sia largo 364 px, con un riempimento nero pieno. Inoltre, daremo a questo cerchio una sfumatura di 3px andando a Effetto> Stilizzazione> Sfumatura.


Passaggio 5

Fai in modo che il quinto cerchio sia largo 359 px con un solido grigio al 70%.


Passaggio 6

Rendi il sesto cerchio di 339 px di larghezza con un gradiente lineare di 90 gradi, che ha un grigio al 100% (al 100% di stop) al 60% di grigio (allo 0% di stop) e il cursore centrale al 50%.


Passaggio 7

Rendi il settimo cerchio di 335 px di larghezza con un solido grigio al 70%.


Passaggio 8

Rendi l'ottavo cerchio di 329 px di larghezza con un gradiente lineare di 90 gradi, che ha un grigio al 100% (al 100% di stop) al 60% di grigio (allo 0% di stop) e il cursore centrale al 50%.


Passaggio 9

Rendi il nono cerchio di 325 px di larghezza con un riempimento grigio al 70%.


Passaggio 10

Rendi il decimo cerchio di 319 px di larghezza con un gradiente lineare di 90 gradi, che ha un grigio al 100% (al 100% di stop) al 60% di grigio (allo 0% di stop) e il cursore centrale al 50%


Passaggio 11

Rendi l'undicesimo cerchio di 315 px di larghezza con un gradiente lineare di 130 gradi, un grigio al 100% (al 100% di stop) al 90% di grigio (allo 0% di stop) e il cursore centrale al 50%.


Passaggio 12

Fai in modo che il dodicesimo cerchio sia largo 277 px con una sfumatura radiale, che abbia un grigio al 100% (al 100% di stop) all'80% di grigio (allo 0% di stop) e al cursore centrale al 50%. Il gradiente radiale dovrebbe provenire dal centro e diventare più scuro verso il bordo.

Per cambiare il punto da cui proviene, seleziona lo strumento Sfumatura, quindi fai clic e trascina dall'angolo in alto a sinistra in alto a destra nell'angolo in basso a destra. Suggerimento: se la sfumatura non cambia durante il trascinamento, assicurati che il cerchio sia selezionato.


Passaggio 13

Per il prossimo cerchio abbiamo bisogno di un gradiente leggermente più complesso, e per questo useremo una trama sfumata. Le mesh sfumate sono estremamente potenti e possono essere utilizzate per creare illustrazioni incredibilmente complesse e realistiche grazie alla fusione di colori in un numero quasi infinito di modi. Tuttavia, qui abbiamo solo bisogno di una semplice mesh, quindi crea un cerchio largo 268px e riempilo con il nero solido.

Le mesh sfumate possono essere create manualmente aggiungendo punti mesh usando nient'altro che lo strumento Gradient Mesh, ma poiché abbiamo solo bisogno di uno semplice, avremo Illustrator che lo creerà per noi. Seleziona il cerchio e vai su Oggetto> Crea mesh a gradiente. Lascia tutti i valori predefiniti impostati, ma modifica le righe e le colonne su 3 ciascuna. Quando fai clic su OK, Illustrator creerà la mesh.

Con il cerchio selezionato, passare allo strumento Selezione diretta e fare clic su un punto (intersezione) sulla mesh per selezionarlo. Quindi, fai clic nell'area più in alto a sinistra della mesh e cambia il suo colore in grigio all'80%. Quindi, fai clic in basso a destra dell'area e modifica il suo colore al 70% di grigio.


Passaggio 14

Rendi il quattordicesimo cerchio largo 225 px con un riempimento bianco solido. Inoltre, dai a questa cerchia una piuma di 6px andando a Effetto> Stilizzazione> Sfuma ...


Passaggio 15

Fai il quindicesimo cerchio di 220 px di larghezza con un riempimento nero pieno. Quindi aggiungi una piuma 3px a questa cerchia.

Stiamo anche andando a compensare questo cerchio. Innanzitutto, allinea il centro con tutti gli altri cerchi. Quindi, usando i tasti freccia, spostalo due volte verso sinistra due volte.


Passaggio 16

Fai diventare il sedicesimo cerchio largo 216 px con un riempimento nero pieno.

Mancia: potresti voler bloccare il cerchio nero offset creato nel passaggio 15. Quindi puoi ancora selezionare tutte le forme e centrarle rispetto alla tavola artistica senza interrompere quella sfalsata.


Passaggio 17

Rendi il diciassettesimo cerchio di 208 px di larghezza con una sfumatura radiale, che ha un grigio al 100% (al 100% di stop) al 90% di grigio (allo 0% di stop) e il cursore centrale al 50%.


Passaggio 18

Fai in modo che il diciottesimo cerchio sia largo 208 px senza riempimento e un tratto bianco di 7 pt. Quindi applica una piuma 4px a questa cerchia.


Passaggio 19

Ora aggiungiamo riflessi e riflessi alla nostra lente interna per dargli un aspetto di vetro. Disegnare una sorta di forma a mezzaluna con lo strumento Penna, riempirlo con il bianco e dargli una piuma 8px. Inoltre, abbassa la sua opacità al 75%.


Passaggio 20

Per aggiungere un po 'di bagliore all'angolo inferiore dell'obiettivo, disegna una forma ovale con lo strumento Penna. Va bene se non è perfetto, come qualche imperfezione aggiungerà all'effetto. Ancora una volta, riempire la forma con il bianco, dargli una piuma 3px e abbassare la sua opacità al 50%.


Passaggio 21

Quindi aggiungeremo qualche altro riflesso all'obiettivo. Disegna altre due forme, come mostrato di seguito. Quindi riempili di bianco, dai loro una piuma 3px e abbassa la loro opacità al 20%.


Passaggio 22

Disegna alcuni ovali con lo strumento Ellisse, rendendoli più grandi mentre vanno. Ruotali a circa un angolo di 45 gradi e posizionali in una linea diagonale con l'ovale più piccolo verso il centro. Una volta che ne hai fatti tre in fila, selezionali tutti, copiali, quindi ruotali e posizionali in linea con i primi tre, sempre con l'ovale più piccolo verso il centro.


Passaggio 23

Tutto ciò che resta da fare è aggiungere la lente esterna. Per fare ciò, disegna un cerchio bianco che copra tutto l'obiettivo della fotocamera tranne che per la cornice esterna. Quindi, usando lo strumento Forbici, fare clic sull'angolo in alto a destra e leggermente sotto il lato più a sinistra del percorso del cerchio per tagliare il percorso in quei punti.

Elimina la metà inferiore del cerchio, quindi, con lo strumento Penna, fai clic su un'estremità del percorso per continuare. Quindi fai clic sull'altra estremità e trascina per creare una linea curva che unisce le estremità del semicerchio. Una volta disegnato il semicerchio, abbassa la sua Opacità al 50%.


Passaggio 24

Ora creeremo una maschera per la trasparenza per aggiungere un leggero tocco di luce al riflesso dell'obiettivo. Una maschera per lucidi è composta da una forma sopra un'altra forma. La forma superiore utilizzata come maschera può essere nera, bianca o qualsiasi sfumatura di grigio o sfumatura in scala di grigi.

Quando viene creata la maschera, le aree delle forme sottostanti vengono rese trasparenti in base alla sfumatura di grigio che viene posta sopra di esse. Quindi, più scura è l'area della forma superiore, più bassa sarà la trasparenza della forma inferiore sotto quell'area. Più leggero è il grigio, più opaca sarà quell'area.

Per creare la nostra maschera, copia il semicerchio che abbiamo creato nell'ultimo passaggio e incollalo direttamente sopra l'originale (Comando + F per Incolla in primo piano). Riduci l'opacità della copia al 100% e riempila con una sfumatura da bianco a nero che si origina nell'angolo in alto a sinistra. Per cambiare il punto di origine, usa nuovamente lo strumento Sfumatura come abbiamo fatto in precedenza.


Passaggio 25

Il passaggio finale è creare la maschera di trasparenza. Per fare ciò, fare clic con il tasto destro del semicerchio superiore e selezionare Seleziona> Oggetto successivo. Questo selezionerà la forma inferiore. Per selezionare anche quello superiore, tieni premuto Shift e fai clic su di esso. Nella palette Trasparenza, fare clic sul pulsante del menu a comparsa nell'angolo in alto a destra e selezionare Crea maschera di opacità.


Conclusione

Il testo intorno al fotogramma viene realizzato utilizzando lo strumento Tipo su tracciato, situato sotto lo strumento testo. Semplicemente, disegna un cerchio il cui bordo corre lungo il centro della cornice, seleziona lo strumento Testo e fai clic sul cerchio per iniziare a digitare lungo il percorso.

Questo è tutto! Abbiamo finito il nostro obiettivo fotografico. È pronto per essere utilizzato come icona, logo o qualsiasi altro tipo di grafico per qualsiasi luogo sia necessario. E la parte migliore - è completamente scalabile! Ricorda che una grafica complessa può essere creata semplicemente combinando forme e colori semplici e che gli effetti 3D possono essere simulati con semplici forme 2D e.