Crea un'illustrazione di telefono vettoriale stile iPhone

Oggi ti mostrerò come creare rapidamente un mockup di un iPhone in Illustrator. Sorprendentemente, questo processo è molto semplice in Illustrator. Una volta che hai finito, avrai un grafico scalabile, stratificabile e completamente modificabile da inserire in uno qualsiasi dei tuoi progetti.

introduzione

Ultimamente, c'è stato un sacco di entusiasmo per il nuovo iPhone di Apple. L'annuncio che il nuovo iPhone non sarà solo più veloce, ma anche più economico della versione attuale, creerà sicuramente molti nuovi utenti.

Nuovi utenti significa che ci sarà più richiesta di cose come gli sfondi per iPhone, il che significa che ci sarà più lavoro per i designer che li creeranno. La visualizzazione di questi sfondi in modo piacevole può fare la differenza se lo sfondo viene scaricato e utilizzato. Quindi, qual è il modo migliore per visualizzarli? Su un iPhone, ovviamente!

Ci sono un paio di modi per farlo. Un modo è quello di scattare una foto di un iPhone e quindi di sovrapporre il tuo design. Tuttavia, questo può essere fastidioso. Non puoi avere un iPhone o una fotocamera per scattare la foto. Anche se hai una fotocamera, potresti non essere molto bravo in fotografia. Anche se sei bravo in fotografia, hai ancora problemi di prospettiva da affrontare. Allora cosa fai? Crea un iPhone da solo. Facciamolo!

Anteprima dell'immagine finale

Prima di iniziare, diamo un'occhiata all'immagine che creeremo. Il file sorgente per questo tutorial non è attualmente disponibile, anche se stiamo pianificando di rilasciarlo in futuro.

Passo 1

Iniziamo creando un 10 in da 10 in documento. Le dimensioni che scegli non dovrebbero avere importanza, ma potrebbe aiutare a scegliere le stesse dimensioni solo per seguire questo tutorial.

Passo 2

Disegna un rettangolo nero 3.0202 in da 5.8541 in. Puoi farlo facilmente selezionando lo strumento rettangolo e facendo clic in qualsiasi punto della scheda grafica. Ora vai a Effetto> Stilizzazione> Angoli arrotondati. Entrare in un Raggio di 0,25. Ora vai a Oggetto> Espandi Aspetto. Questo convertirà la forma in contorni.

Passaggio 3

Ora disegna un secondo rettangolo nero 2.7219 in da 5.5866 in. Ripeti i passaggi sopra per arrotondare gli angoli. Entrare in un raggio di 0,18. Ora vai a Oggetto> Espandi Aspetto.

Passaggio 4

Seleziona il rettangolo in cui hai creato Passaggio 3. copia questo oggetto e incollare in avanti. Cambia il colore di questo oggetto in bianco e regola le sue dimensioni come mostrato di seguito. Puoi farlo selezionando i punti con il strumento di selezione diretta e spingendoli con il tuo tasti freccia.

Ora allinea tutti e tre i rettangoli in cui abbiamo creato Passaggi 2 - 4 ai loro centri orizzontali e verticali. Sposta questo livello dietro l'oggetto che abbiamo creato nel passaggio precedente.

Passaggio 5

Ora utilizzeremo Illustrator strumento di fusione per creare il bordo dell'iPhone. Vai a Oggetto> Miscela> Opzioni di fusione. Selezionare passaggi specificati e inserisci 20. Seleziona il rettangolo bianco più grande in cui abbiamo creato Passo 2 e il rettangolo nero di medie dimensioni in cui abbiamo creato Passaggio 4. Quindi vai a Oggetto> Miscela> Crea. Questo mescolerà entrambi questi oggetti insieme.

Passaggio 6

Ora con la miscela ancora selezionata vai a Oggetto> Espandi e controlla sia l'oggetto che il riempimento. Adesso Separa tutti i livelli due volte in modo che siano tutti oggetti separati.

Ora seleziona sia l'oggetto più in alto che abbiamo appena separato sia il rettangolo in cui abbiamo creato Passaggio 3. Ripeti i passaggi precedenti per unire questi due oggetti. Assicurati che espandere e separare anche questa miscela.

Passaggio 7

Ora creeremo lo schermo. Seleziona il rettangolo nero più in alto che abbiamo appena creato. copia e incollalo in primo piano. Ora disegna un secondo rettangolo che è Alto 3.998 pollici ma più largo del rettangolo che abbiamo appena copiato. Seleziona entrambi gli oggetti e scegli intersecare le aree di forma nella palette del tastino. Quindi cambia il colore in (# 0C0C0C).

Passaggio 8

Ora creiamo il pulsante in basso. Disegna un cerchio bianco 0,5555 in da 0,5555 in e posizionalo come mostrato. Poi copia questo cerchio e incollare in avanti. Ora regola il nuovo cerchio finché il percorso non è come mostrato. Seleziona entrambi gli oggetti e seleziona Sottrai dalla Shape Area nella tavolozza Pathfinder.

Passaggio 9

Aggiungi un gradiente radiale dal bianco al nero come mostrato per terminare questo oggetto.

Passaggio 10

Ora disegna un quadrato, come mostrato di seguito. Quindi vai a Effetti> Stilizzazione> Angoli tondi. accedere 0,035 pollici come il raggio. Quindi rimuovere il riempimento e creare un bianco 1 colpo di pt.

Passaggio 11

Per creare l'altoparlante in alto, disegna un quadrato. Arrotondare gli angoli usando gli stessi passi come sopra. Entra in a raggio di 0,08. Ora espandi l'aspetto di questo oggetto.

Disegna un altro rettangolo sopra questo oggetto, come mostrato sotto. Quindi selezionare entrambi gli oggetti e fare clic Sottrai dalla Shape Area nella tavolozza Pathfinder. Quindi aggiungi un gradiente lineare dal bianco al nero.

Passaggio 12

Ora posiziona il tuo disegno sullo schermo. Puoi farlo in molti modi. In questo tutorial, ho posizionato un semplice testo sull'area dello schermo. Se si desidera inserire la propria opera d'arte qui è possibile ridimensionare o ritagliare per adattarsi. Potresti usare lo schermo che abbiamo creato come maschera di ritaglio. Scegli qualsiasi metodo che funzioni meglio per te.

Passaggio 13

Ora siamo pronti a creare la nostra riflessione. Raggruppa tutti gli oggetti che compongono il telefono. Aprire la tavolozza dei livelli e espandere il gruppo che abbiamo appena creato. Seleziona il quadrato nero più in basso in cui abbiamo creato Passo 2. copia questo oggetto e incollare in avanti. Questo coprirà l'intero grafico, come mostrato di seguito.

Passaggio 14

Ora seleziona tutti gli oggetti che compongono il telefono più il rettangolo nero arrotondato che abbiamo appena creato. copia tutti loro e incollali in primo piano. Poi gruppo la copia. Con la copia ancora selezionata, apri il Trasforma tavolozza e nel menu a comparsa selezionare capovolgere verticale.

Passaggio 15

Ora puoi eliminare l'oggetto che copre il telefono in alto.

Passaggio 16

Seleziona gli oggetti capovolti verticalmente che abbiamo appena creato e Separa loro. Ora dovresti avere un rettangolo nero arrotondato in uno. Dovresti anche avere un gruppo che contiene gli oggetti che compongono il telefono.

Passaggio 17

Seleziona entrambi gli oggetti. Quindi apri la tavolozza dei lucidi e seleziona Crea maschera di opacità. Questo farà sparire la riflessione.

Passaggio 18

Nel Tavolozza trasparenza, dovresti vedere due miniature. Clicca su quello nero. Quindi apri il tavolozza sfumatura e selezionare lineare. Ciò farà riapparire l'oggetto, ma si dissolverà da sinistra a destra. Seleziona il strumento sfumatura e creare un gradiente verticale come mostrato.

Ora fai clic sull'altra miniatura nel Tavolozza trasparenza. Questo è essenziale, altrimenti Illustrator non ti lascerà uscire dalla maschera. Regola la trasparenza generale di questo oggetto a 30% o 40%.

Passaggio 19

Ora siamo pronti a tracciare il nostro background. Crea un quadrato nero 10 in da 10 in. Posizionarlo in modo appropriato e bloccarlo in posizione.

Passaggio 20

Ora scrivi il testo. Utilizzare il Myriad Pro font per replicare l'aspetto.

Conclusione

Creare un iPhone da zero è più facile di quanto sembri. Spero che questo tutorial ti sia piaciuto e che tu abbia imparato qualcosa da esso. Inoltre, divertiti a creare nuovi sfondi per iPhone per tutti i nuovi utenti di iPhone da visualizzare all'interno di questo design per iPhone.