Vediamo oggi come creare un iphone in vettoriale con l’utilizzo del programma di grafica Adobe Illustrator CS4.

Per prima cosa apriamo il nostro documento di 600×800 destinato al web e selezioniamo una risoluzione media di 150dpi dalla voce effetti raster.

Iniamo il nostro tutorial incollando una immagine dell’iphone, che fungerà da riferimento sulla nostra tavolozza, e mettiamola su un lato.

Con lo strumento forma rettangolo con angoli arrotondati creiamo la sagoma classica dell’iphone. Se non riuscite ad arrotondare gil angoli del vostro rettangolo, ricordatevi di giocare con le frecce su e giu, della vostra tastiera, mentre tenete premuto il tasto del mouse, per aumentare la rotondità dei vostri angoli.

A questa nuova sagoma andremo ad applicargli una sfumatura che dia l’effetto cromato. La sfumatura da creare è a vostro piacimento:

Il prossimo step è quello di far comparire la caratteristica plastica nera dell’iphone. Per creare questo pezzo basta doplicare la nostra forma, centrarla e ridurla di dimensioni tenendo premuto alt+maiusc. Successivamente stringerla leggermente sui lati.

Quando si realizzano illustrazioni complesse o comunque piene di elementi grafici abbiate cura di rinominare i singoli livelli e sottolivelli che si vengono a creare per tenere sempre sotto controllo ogni parte della nostra illustrazione.

Continuando con questo metodo da questo momento in poi darò per scontato che rinominerete i singoli pezzi che andremo a creare.

L’altoparlante

Procediamo con la creazione dell’altoparlante. Per questo pezzo dobbiamo utilizzare nuovamente lo strumento forma rettangolo con angoli arrotondati. Una volta realizzata la forma del notro altoparlante applichiamogli una sfumatura dal nero al grigio e impostiamo un bordo di 0.25pt di un colore grigio scuro molto vicino al nero, quel tanto che basti per far comparire una sottile linea.

Il pulsante centrale

Per la creazione di questo pultante ci avvarremo di 3 strumenti. Per prima cosa creiamo un cerchio fuori dalla sagoma dell’iphone e coloriamolo di nero aggiungendo lo stesso bordino/traccia sempre di 0,25pt dello stesso colore dell’altoparlante. Adesso dobbiamo disegnare il simbolo sul pulsante, ovvero il quadrato bianco al centro del cerchio.

A questo punto duplichiamo la base del pulsante, il cerchio, e portiamo questo nuovo livello sopra il quadrato nero. Vedrete a questo punto solo un cerchio nero. Con lo strumento selezione diretta (premendo A) selezionate questo cerchio. Adesso prendete lo strumento Penna Elimina punti di ancoraggio. Per intenderci quello con il segno meno (-).

Abbiamo 4 punti sul cerchio: cliccate una volta su quello in alto ed eliminatelo. A questo punto con lo strumento modifica punti di ancoraggio portiamo al centro i nostri punti e creiamo cosi una mezzaluna.

Togliamo la traccia su questa mezzaluna ed applichiamo una sfumatura dal bianco al trasparente dal basso verso l’alto.
Posizioniamo il pulsante.

Lo schermo

Per realizzare lo schermo avvaliamoci dello strumento forma rettangolo questa volta senza gli angoli arrotondati e distanziandoci dal bordo di qualche punto creiamo un rettangolo di colore arancio.

Prendiamo una immagine che intendiamo utilizzare come sfondo, trascinniamola su Illustrator e portiamola appena sotto lo schermo arancione. I oho scelto un wallpaper di firefox.

Tenendo premuto shift selezioniamo lo schermo arancione e l’immagine. A questo punto andiamo nel menù oggetto > Maschera di ritaglio > Crea.

Avremo a questo punto un iphone quantomeno acceso!

Gli elementi dello schermo

Andiamo a creare la classica striscia dell’ora, la linea di sistema con le tacche di ricezione e lo stato della batteria e infine lo sblocca iphone.

La batteria

Iniziamo dall’alto verso il basso. Con lo strumento rettangolo creiamo un rettangolo ampio quanto lo schermo ed alto pochi punti per realizzare la nostra barra di sistema. Coloriamola di nero, togliamo la traccia se c’è e riduciamo l’opacita’ al 50%.

Disegniamo la batteria. La faro per praticità bella carica. Ecco lo schema delle operazioni.

Tenendo ben presente questo schema vediamo le operazioni da fare per creare la batteria.

Con lo strumento forma rettangolo creare un rettangolo nero. Subito dopo creare un rettangolo azzurro che sovrapponiamo e centriamo al precendente. Il tutto per non confonderci con i tracciati. A questo punto selezioniamo entrambi i rettangoli e dalla palette elaborazione tracciato (presente nel menu finestra) clicchiamo su escludi tracciato.  Ci ritroveremo con un rettangolo azzurro che coloreremo di nero.

Sempre con lo strumento forma creiamo un piccolo rettangolo che raffiguri il polo della batteria e lo centriamo verticalmente. Selezioniamo queste due nuove forme e sempre dalla palette elaborazione tracciato clicchiamo su unisci. Abbiamo la nostra batteria scarica.

Carichiamola! creiamo un nuovo rettangolo e posizioniamolo al centro della batteria. Selezioniamo tutta la batteria e raggruppiamo il tutto: tasto destro > raggruppa. coloriamo di bianco la batteria e spostiamola sull’iphone al suo posto. Riduciamo l’opacità al 78%.

Tacche di ricezione

Adesso realizziamo le tacche di ricezione. Niente di più semplice dei rettangoli in scala dalpiù basso al piu alto. Per questo tutorial non aggiungo l’operatore. Per la barra di sistema non aggiungerò altro in questo tutorial.

La fascia ora/calendario

Per questa zona basta realizzare un rettangolo sotto la barra di sistema a cui dobbiamo applicare una opacità del 60% e una sfumatura di nero-grigio-nero con una angolazione di -90°.

Utilizzando il font Arial scriviamo due righe centrate a questo rettangolo: l’ora e il giorno calendariale.
Per l’ora utilizziamo un carattere abbastanza ampio che sia bene o male il 50% dell’altezza del rettangolo.

La zona di sblocco

Per creare questo elemento grafico duplichiamo il rettangoolo della fascia oraria e posizioniamolo alla fine dell schermo in basso. Coloriamolo di nero e portiamo l’opacità al 60%.

Subito dopo utilizziamo lo strumento forma rettangolo con angoli arrotondati e diminuendo la rotondità degli angoli creiamo un rettangolo esattamente alto il 50% del precendente e centriamolo. Coloriamolo con una sfumatura dal nero al grigio scuro dall’alto verso il basso e portiamo l’opacità all’80%.

A questo punto dobbiamo creare il cursore.

Creiamo un nuovo rettangolo con la stessa rotondità agli angoli e coloriamolo con una sfumatura di grigi chiaro posizionandolo all’interno del rettangolo appena creato sulla sinistra.

Ora non ci resta cre creare la freccia.

Per creare la punta dobbiamo partire da un quadrato. Immediatamente dopo dobbiamo, con lo strumento penna, aggiungere un punto di ancoraggo a destra esattamente al cento. Sempre con lo strumento penna avviciniamoci al punto di ancoraggio in alto a destra e in basso a destra ed eliminiamoli. Avremo cosi una punta perfetta.

Adesso per terminare la freccia dobbiamo creare un rettangolo orizzontale che centreremo verticalmente al centro della nostra punta e che uniremo alla stessa tramite la palette elaborazione tracciato proprio come abbiamo fatto per la batteria. Combaciamo il rettangolo e la punta, selezioniamoli e dalla palette eleaborazione tracciato clicchiamo su unisci. Adesso non ci resta che posizionare la nostra freccia e giocare con le sfumature dei colori grigio per ottenere la colorazione gradita.

Aggiungiamo una scritta sul fianco destro del nostro cursore di colore bianco e impostiamo una opacità del 60%.

Il tuo iPhone è pronto! Altro che 600€